.theme-toggle{display:flex;align-items:center}.theme-toggle-text{color:var(--text-primary);font-weight:500}
/* The toggle had no box of its own in any area, so it fell back to the browser's
   default button chrome (2px outset border). It is an icon-only control: circle. */
.theme-toggle-wrap{display:inline-flex;align-items:center}
/* :not(...icon-circle) — admin/employee/client topbars already give this button
   their own icon-circle class and size; only style it where nothing else does. */
.theme-toggle-btn:not([class*="icon-circle"]){width:var(--icon-btn);height:var(--icon-btn);padding:0;border:none;border-radius:50%;background:var(--surface-sunken);color:var(--ink-muted);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;line-height:1;transition:background-color .15s ease,color .15s ease}
.theme-toggle-btn:not([class*="icon-circle"]):hover{background:var(--border-hairline);color:var(--ink-strong)}
.theme-toggle-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.theme-toggle-btn .theme-icon{font-size:15px}.theme-toggle-btn.theme-toggle-icon-style .theme-icon{position:static;transition:opacity 0.2s}.theme-toggle-btn.theme-toggle-icon-style .light-icon{display:none}.theme-toggle-btn.theme-toggle-icon-style .dark-icon{display:inline}[data-theme="dark"] .theme-toggle-btn.theme-toggle-icon-style .light-icon{display:inline}[data-theme="dark"] .theme-toggle-btn.theme-toggle-icon-style .dark-icon{display:none}