/* Phase 6 W1 — themeToggle component styles.
 * - Floor 56x56 per UI-03 minimum touch target (W2 will add a global rule too).
 * - Designed to live as the right-most child of a flex header.
 * - Icon-only button; label comes from x-text on the <button> itself.
 */

.theme-toggle {
    /* UI-03 touch target floor */
    min-width: 56px;
    min-height: 56px;
    /* Icon-only sizing — emoji centered visually */
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
    /* Reset Pico's button chrome to match other icon buttons in the app */
    background: transparent;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.theme-toggle:hover {
    background-color: var(--pico-secondary-background, rgba(127, 127, 127, 0.12));
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--pico-primary, currentColor);
    outline-offset: 2px;
}

/* Header placement helper — pushes the toggle to the right edge of any flex header. */
.theme-toggle--header {
    margin-left: auto;
}

/* Floating fallback for pages without header chrome (e.g. login.html). */
.theme-toggle--floating {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1000;
    background-color: var(--pico-card-background-color, rgba(255, 255, 255, 0.85));
    backdrop-filter: blur(6px);
    border-color: var(--pico-card-border-color, rgba(127, 127, 127, 0.2));
}