:root {
    --bg: #050505;
    --card: #111;
    --card-soft: #0d0d0d;
    --input: #000;
    --text: #fff;
    --muted: #aaa;
    --border: #222;
    --button-bg: #fff;
    --button-text: #000;
}

body.light-mode {
    --bg: #f5f5f5;
    --card: #ffffff;
    --card-soft: #f0f0f0;
    --input: #ffffff;
    --text: #111;
    --muted: #666;
    --border: #ddd;
    --button-bg: #111;
    --button-text: #fff;
}

body {
    background: var(--bg) !important;
    color: var(--text) !important;
}

.card,
.summary-card,
.staff-group,
.staff-box,
.user-card,
.app-header,
.topbar {
    background: var(--card) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

input,
select,
textarea {
    background: var(--input) !important;
    color: var(--text) !important;
    border-color: var(--border) !important;
}

button,
.btn,
.button,
.app-header-logout {
    background: var(--button-bg) !important;
    color: var(--button-text) !important;
    border-color: var(--border) !important;
}

.muted,
.label,
.user-row,
.header-user small,
.app-header-user small {
    color: var(--muted) !important;
}

.theme-toggle {
    background:transparent !important;
    color:var(--text) !important;
    border:none !important;
    padding:6px !important;
    font-size:20px;
    cursor:pointer;
    width:auto !important;
    min-height:auto !important;
}

.app-header-user,
.header-user {
    color: var(--text) !important;
}

.app-header-user span,
.header-user span {
    color: var(--text) !important;
}

.page-back {
    display:inline-flex;
    margin-top:18px;
    margin-bottom:18px;
}

body.light-mode .stat,
body.light-mode .notification,
body.light-mode .proof-box,
body.light-mode .user-card {
    background:#ffffff !important;
    color:#111 !important;
    border-color:#ddd !important;
}

body.light-mode .stat *,
body.light-mode .notification *,
body.light-mode .user-card * {
    color:#111 !important;
}

body.light-mode .progress {
    background:#e5e5e5 !important;
    border-color:#ddd !important;
}

body.light-mode .progress span {
    background:#111 !important;
}

body.light-mode .btn,
body.light-mode .button,
body.light-mode button {
    background:#111 !important;
    color:#fff !important;
}

body.light-mode .logout,
body.light-mode .app-header-logout {
    background:#fff !important;
    color:#111 !important;
    border-color:#ccc !important;
}

/* Light mode visibility fixes */
body.light-mode .page-back {
    color:#333 !important;
}

body.light-mode .page-back:hover {
    color:#000 !important;
}

body.light-mode table {
    background:#fff !important;
    color:#111 !important;
}

body.light-mode th,
body.light-mode td {
    color:#111 !important;
    border-color:#ddd !important;
}

body.light-mode thead {
    background:#f2f2f2 !important;
}

/* Theme toggle cleaner */
.theme-toggle {
    background:transparent !important;
    border:none !important;
    color:var(--text) !important;
    font-size:18px !important;
    padding:4px 6px !important;
    width:auto !important;
    min-height:auto !important;
    box-shadow:none !important;
}

@media(max-width:768px) {
    .theme-toggle {
        font-size:16px !important;
        padding:4px !important;
    }
}

body.light-mode .app-header-link {
    background:#fff !important;
    color:#111 !important;
    border-color:#bbb !important;
}

body.light-mode .app-header-user,
body.light-mode .app-header-user small {
    color:#111 !important;
}

@media(max-width:768px) {
    .app-header {
        gap:6px !important;
    }

    .app-header-logo img {
        max-width:95px !important;
    }

    .app-header-user {
        max-width:95px !important;
        font-size:12px !important;
        line-height:1.1 !important;
    }

    .app-header-link {
        padding:7px 9px !important;
        font-size:12px !important;
        min-width:auto !important;
    }

    .theme-toggle {
        font-size:17px !important;
        padding:3px !important;
    }
}