/* ============================================================ MISERV — Dark Theme Applied when has class "dark-theme" ============================================================ */ html.dark-theme { --bg-main: #0f172a; --card-bg: #1e293b; --text-dark: #e2e8f0; --text-muted: #94a3b8; --border-color: #334155; --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3); --shadow-md: 0 4px 16px rgba(0,0,0,0.5); --shadow-lg: 0 10px 30px rgba(0,0,0,0.5); } html.dark-theme body { background-color: var(--bg-main); color: var(--text-dark); } html.dark-theme main { background-color: var(--bg-main); color: var(--text-dark); } /* Cards */ html.dark-theme .card { background-color: var(--card-bg); border-color: var(--border-color); color: var(--text-dark); } html.dark-theme .card-header { background-color: #162032; border-bottom-color: var(--border-color); color: var(--text-dark); } html.dark-theme .card-footer { background-color: #162032; border-top-color: var(--border-color); } html.dark-theme .card-body { color: var(--text-dark); } /* Tables */ html.dark-theme .table { color: var(--text-dark); border-color: var(--border-color); } html.dark-theme .table thead th { background-color: #162032; color: var(--text-muted); border-bottom-color: var(--border-color); } html.dark-theme .table > :not(caption) > * > * { background-color: transparent; border-bottom-color: var(--border-color); color: var(--text-dark); } html.dark-theme .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255,255,255,0.04); } html.dark-theme .table-hover > tbody > tr:hover > * { background-color: rgba(20, 184, 166, 0.08); } /* Forms */ html.dark-theme .form-control, html.dark-theme .form-select { background-color: #1e293b; border-color: var(--border-color); color: var(--text-dark); } html.dark-theme .form-control:focus, html.dark-theme .form-select:focus { background-color: #1e293b; color: var(--text-dark); } html.dark-theme .form-control::placeholder { color: var(--text-muted); } html.dark-theme .input-group-text { background-color: #162032; border-color: var(--border-color); color: var(--text-muted); } /* Buttons */ html.dark-theme .btn-outline-secondary { color: #94a3b8; border-color: #475569; } html.dark-theme .btn-outline-secondary:hover { background-color: #334155; border-color: #475569; color: #e2e8f0; } html.dark-theme .btn-secondary { background-color: #334155; border-color: #475569; } /* Text utilities */ html.dark-theme .text-muted { color: var(--text-muted) !important; } html.dark-theme h1, html.dark-theme h2, html.dark-theme h3, html.dark-theme h4, html.dark-theme h5, html.dark-theme h6 { color: var(--text-dark); } /* Alerts */ html.dark-theme .alert-info { background-color: rgba(14, 165, 233, 0.15); border-color: rgba(14, 165, 233, 0.3); color: #7dd3fc; } html.dark-theme .alert-success { background-color: rgba(34, 197, 94, 0.15); border-color: rgba(34, 197, 94, 0.3); color: #86efac; } html.dark-theme .alert-warning { background-color: rgba(234, 179, 8, 0.15); border-color: rgba(234, 179, 8, 0.3); color: #fde047; } html.dark-theme .alert-danger { background-color: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.3); color: #fca5a5; } /* Device list page specific */ html.dark-theme .device-list .table { background-color: var(--card-bg); } html.dark-theme .refresh-info, html.dark-theme .filter-controls { color: var(--text-dark); background: content-box; } html.dark-theme .service-status { color: var(--text-dark); } /* Dark theme toggle button */ .dark-theme-toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 8px 12px; margin-top: 8px; background: rgba(255,255,255,0.06); border: 1px solid var(--sidebar-border); border-radius: var(--radius); color: #94a3b8; cursor: pointer; font-size: 0.85em; font-weight: 500; transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1); white-space: nowrap; overflow: hidden; } .dark-theme-toggle:hover { background: rgba(20, 184, 166, 0.12); color: #2dd4bf; border-color: rgba(20, 184, 166, 0.3); } .dark-theme-toggle i { font-size: 1em; min-width: 16px; text-align: center; flex-shrink: 0; } aside.collapsed .dark-theme-toggle { padding: 0; width: 48px; height: 48px; border-radius: var(--radius); margin: 4px auto 0; } aside.collapsed .dark-theme-toggle .toggle-label { display: none; }