/* ============================================================================
   THEME TOGGLE
   ============================================================================
   Sits in every header, public and dashboard alike.

   Deliberately quiet. This is a maintenance control, not something to offer
   the customer, so it is an icon on its own at the muted ink colour -- close
   enough to the surrounding chrome that the eye slides past it, and only
   picking up contrast on hover or keyboard focus. No label, no border, no
   fill. It still answers to the keyboard and to screen readers, which read
   its aria-label; it is visually quiet, not hidden.

   Loaded by the public pages after landing.css, and by the dashboard after
   cv-components.css -- it must come after whichever sheet styles buttons.
   ============================================================================ */
.cv-theme-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* The box is the glyph and nothing more, so the icon sits on whatever
       rhythm its nav already uses -- exactly as a text link would. An earlier
       version padded this out to a 28px circle, which left the glyph carrying
       more air than its neighbours and reading as a hole in the row; the
       padding is now a hit target instead (::after below), which costs no
       layout space and so cannot throw the spacing off on any one header. */
    width: auto;
    height: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--cv-ink-mute);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.18s ease, color 0.18s ease;
}

/* Comfortable touch target without taking up room. */
.cv-theme-toggle::after {
    content: '';
    position: absolute;
    inset: -0.5rem;
}

.cv-theme-toggle:hover {
    color: var(--cv-ink);
    opacity: 1;
}

/* Keyboard users still need to see where they are. */
.cv-theme-toggle:focus-visible {
    outline: 2px solid var(--cv-mint);
    outline-offset: 4px;
    border-radius: 2px;
    opacity: 1;
}

/* A missing glyph must not collapse the button to nothing -- there is no
   text label to hold it open. */
.cv-theme-toggle i {
    font-size: inherit;
    min-width: 1em;
    text-align: center;
}

/* The AdminLTE navbar spaces its items with per-item padding rather than a
   gap on the row, so inside it the toggle has to carry its own padding or it
   sits flush against its neighbours. Matches .nav-link's horizontal padding,
   which is what the items either side of it use. */
.navbar .cv-theme-toggle {
    padding: 0.5rem 1rem;
}