.theme-mode-toggle {
    width: 34px;
    height: 34px;
    display: inline-grid;
    place-items: center;
    position: relative;
    flex: 0 0 auto;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    color: #dffff4;
    background: rgba(16, 185, 129, .13);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 5px 12px rgba(0, 0, 0, .12);
    transition: background .2s ease, transform .2s ease;
}

.theme-mode-toggle:hover { transform: translateY(-1px); background: rgba(16, 185, 129, .25); }

.theme-mode-toggle i {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 15px;
    line-height: 1;
    transition: opacity .2s ease, transform .2s ease;
}
.theme-mode-toggle__sun { opacity: 0; transform: rotate(-60deg) scale(.55); }
.theme-mode-toggle__moon { opacity: 1; }
html.demo-light .theme-mode-toggle__sun { opacity: 1; transform: rotate(0) scale(1); }
html.demo-light .theme-mode-toggle__moon { opacity: 0; transform: rotate(60deg) scale(.55); }

.auth-theme-toggle {
    position: fixed;
    z-index: 1035;
    top: max(14px, env(safe-area-inset-top, 0px));
    left: max(14px, env(safe-area-inset-left, 0px));
}

.header-quick-actions {
    display: inline-flex;
    align-items: center;
    align-self: center;
    gap: 8px;
    height: 100%;
    flex: 0 0 auto;
}

.app-header > .theme-mode-toggle,
.app-header .header-quick-actions > .theme-mode-toggle,
.admin-header .menu > .menu-item > .theme-mode-toggle {
    align-self: center;
    justify-self: center;
}

.admin-header .menu > .menu-item.dropdown {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Keep the theme control before the admin role badge, matching the user and driver headers. */
.admin-header .admin-role-actions {
    direction: rtl;
}

.admin-header .admin-role-actions > .theme-mode-toggle {
    order: -1;
}

@media (max-width: 576px) {
    .theme-mode-toggle { width: 31px; height: 31px; }
}