/* =====================================================
   Campus status (header) — BUG-377

   The control a student signs themselves in and out of campus with, in either of
   the two styles W4 shipped: a switch, or a badge with a location panel.

   Sized as HEADER CHROME, deliberately unlike W4's 155px floated slab.
   `.top-header-right` is already tight at phone widths — 0.5rem of header
   padding, a 0.25rem gap, and a notification badge collapsed to an 8px dot — so
   the dropdown's badge matches `.header-icon-btn` and gives up its text label at
   the same breakpoint, and the switch's track shortens rather than disappearing.

   Colour is never the only carrier of state: the switch says it in the track at
   every width, the dropdown's label above 480px, and the `aria-label` always.
   ===================================================== */

.campus-status {
    position: relative;
    display: inline-block;
}

/* Rides alongside .header-icon-btn, which owns the padding, radius and hover —
   this only adds the row layout the icon + dot + label need. */
.campus-status__control {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    line-height: 1;
    color: var(--gray-700);
    cursor: pointer;
}

/* In the switch style this is a second `<label for>` on the same checkbox, so it has to
   look and behave like the control it flips. */
.campus-status__icon {
    display: inline-flex;
    cursor: pointer;
}

.campus-status__icon > svg {
    display: block;
}

.campus-status__label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
}

/* The state dot. Green and red live here rather than on the text because
   --success does not reach 4.5:1 against white and text has to; a background
   swatch is held to the 3:1 non-text threshold, which it clears. */
.campus-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
    background-color: var(--gray-500);
}

.campus-status--on .campus-status__dot {
    background-color: var(--success);
}

.campus-status--off .campus-status__dot {
    background-color: var(--accent-red);
}

/* Off campus is the state worth noticing, and --accent-red is 7:1 on white. */
.campus-status--off .campus-status__control {
    color: var(--accent-red);
}

/* The dropdown's control is a button opening a panel, not a boolean, so it gets its
   resting affordance as a border rather than a track (helpdesk #5308). --gray-600 is
   3.3:1 on the white header, the non-text minimum; --gray-200 is 1.2:1. Neutral, not
   currentColor: a red border around a control reads as an error, not a state. */
.campus-status--dropdown .campus-status__control {
    border: 1px solid var(--gray-600);
}

.campus-status--dropdown .campus-status__control:hover {
    border-color: var(--gray-800);
}

/* --- switch ------------------------------------------------------------- */

/* The control is a ToggleSwitch (IDEA-094): its track carries both the colour and
   the words, so this style needs no dot and no separate label — only the row that
   sets the pin beside it. The pin stays at every width because the track's words
   shorten to IN / OUT on a phone. */
.campus-status--switch {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    color: var(--gray-700);
}

/* --- panel (dropdown style) --------------------------------------------- */

/* Same anchoring as the layout's own .user-menu-content: absolute, right-aligned
   to the control, above the sticky header's stacking context. */
.campus-status__panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1100;
    min-width: 260px;
    max-width: 320px;
    max-height: 70vh;
    overflow-y: auto;
    padding: 0.75rem 1rem;
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    text-align: left;
}

.campus-status__panel[hidden] {
    display: none;
}

.campus-status__panel-title {
    margin: 0 0 0.5rem 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gray-700);
}

.campus-status__options {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.campus-status__option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.25rem;
    border-radius: 4px;
    font-size: var(--font-size-sm);
    color: var(--gray-900);
    cursor: pointer;
}

.campus-status__option:hover {
    background-color: var(--gray-50);
}

.campus-status__other {
    margin-top: 0.5rem;
}

.campus-status__other[hidden] {
    display: none;
}

.campus-status__actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.75rem;
}

/* A component class rather than a hand-written `btn btn-*`: this button submits
   no form and navigates nowhere, so none of the ButtonHelper factories fit it. */
.campus-status__submit {
    padding: 0.375rem 0.9rem;
    border: 1px solid var(--primary);
    border-radius: 6px;
    background-color: var(--primary);
    color: var(--white);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.campus-status__submit:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* --- refusals ------------------------------------------------------------ */

.campus-status__error {
    margin: 0.5rem 0 0 0;
    font-size: var(--font-size-sm);
    color: var(--accent-red);
}

.campus-status__error[hidden] {
    display: none;
}

/* The switch has no panel to put the message in, so it gets its own small
   popover under the control rather than a <p> laid out inside the header row. */
.campus-status--switch .campus-status__error {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1100;
    min-width: 220px;
    max-width: 280px;
    margin: 0;
    padding: 0.5rem 0.75rem;
    background-color: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* --- phone -------------------------------------------------------------- */

@media (max-width: 480px) { /* phone chrome only, matching app.css:1058 — the header has already
                               given up its padding, its gap and the notification count by here */
    /* Dropdown only — it has no other control to shorten. The state is then carried
       by the dot's colour plus the aria-label, which is why the aria-label spells it
       out in words. */
    .campus-status__label {
        display: none;
    }

    .campus-status__control {
        gap: 0.25rem;
    }

    /* The control is the leftmost of three, so a panel anchored to its right edge
       would run off the left of a 320px screen — and `.main-content` clips
       horizontal overflow, so it would be cut rather than scrolled to. Pin it to
       the viewport under the sticky header instead. */
    .campus-status__panel,
    .campus-status--switch .campus-status__error {
        position: fixed;
        top: var(--header-height);
        left: 0.5rem;
        right: 0.5rem;
        min-width: 0;
        max-width: none;
        max-height: calc(100vh - var(--header-height) - 1rem);
    }
}