/* =====================================================================
   McWhirters Residents' carpark availability
   lsm 08/28/26

   Palette and component names follow imaging.medtack.net so the two sites
   read as one family: navy #000928 for the masthead, #4294E5 for anything
   the user can act on, and every other blue interpolated between them.

   The two colours that do NOT come from that palette are the bay states.
   Availability is the whole point of the page, so it gets the only red and
   the only green on the site, both muted well below the accent so the plan
   stays calm when a hundred bays are on screen at once.

   No :hover anywhere that carries meaning. The plan is used standing at a
   lift on a phone, so every affordance is a tap target and every state is
   driven by a class, not by a pointer being nearby.
   ===================================================================== */

:root {
    /* ---- Medtack anchors ---- */
    --mt-navy: #000928;
    --mt-blue: #4294E5;

    --mt-navy-700: #0a1e44;
    --mt-navy-600: #143361;
    --mt-blue-700: #1e487d;
    --mt-blue-600: #285c99;
    --mt-blue-500: #3271b6;
    --mt-blue-400: #63a9ea;
    --mt-blue-300: #8cc0f0;
    --mt-blue-200: #b9d9f6;
    --mt-blue-100: #e3effb;

    --mt-ink: #000928;
    --mt-slate: #143361;
    --mt-mist: #e9f1fb;
    --mt-paper: #f5f9fd;
    --mt-line: #d5e2f0;
    --mt-muted: #64758c;
    --mt-muted-soft: #8496ad;

    --mt-amber: #d9842b;
    --mt-danger: #c0392b;

    /* lsm 08/29/26 — informational notices are pink rather than the blue mist
       they used to share with the rest of the chrome. On the plan the whole
       page is blue, so a blue notice read as more furniture; pink separates
       "here is something to know" from the interface around it. Text stays
       navy, which keeps it well clear of the contrast floor. */
    --mt-pink: #fce8ee;
    --mt-pink-line: #f2c9d8;
    --mt-shadow: 0 1px 2px rgba(0,9,40,.06), 0 8px 24px -12px rgba(0,9,40,.22);

    /* ---- Bay states ---- */
    --cp-busy: #bf7168;
    --cp-busy-line: #9b564e;
    --cp-free: #74a179;
    --cp-free-line: #55805a;
    --cp-mine-ring: #4294E5;

    --cp-tap: 44px;          /* minimum tap target */
}

* { -webkit-font-smoothing: antialiased; }

body {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    background:
        radial-gradient(1200px 400px at 100% -10%, rgba(66,148,229,.10), transparent 60%),
        var(--mt-paper);
    color: var(--mt-ink);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-text-size-adjust: 100%;
}

h1, h2, h3, .mt-display {
    font-family: 'Fraunces', Georgia, serif;
    letter-spacing: -.01em;
}

/* =====================================================================
   Masthead
   ===================================================================== */
.mt-sticky-head { position: sticky; top: 0; z-index: 1020; }

.mt-nav {
    background: rgba(0, 9, 40, .97);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.mt-nav .navbar-brand, .mt-nav .nav-link { color: var(--mt-blue-200); }
.mt-nav .nav-link.active { color: #fff; }
.mt-nav .nav-link { padding-block: .55rem; }

.mt-logo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; border-radius: 9px;
    background: linear-gradient(135deg, var(--mt-blue), var(--mt-blue-600));
    color: #fff; font-size: 1.05rem;
}
.mt-wordmark { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.2rem; color: #fff; }
.mt-wordmark-accent { color: var(--mt-blue); font-weight: 500; margin-left: 2px; }

.mt-userbtn {
    color: var(--mt-blue-200);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 999px;
    padding: .3rem .7rem;
    min-height: var(--cp-tap);
}
.mt-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--mt-blue); color: #fff; font-size: .8rem; font-weight: 600;
}
.mt-rolebadge { background: rgba(66,148,229,.20); color: var(--mt-blue-300); font-weight: 500; }
.mt-dropdown { border: 1px solid var(--mt-line); box-shadow: var(--mt-shadow); border-radius: 12px; }
.mt-dropdown .dropdown-item { padding-block: .55rem; }

.mt-nav .navbar-toggler { border-color: rgba(255,255,255,.55); }
.mt-nav .navbar-toggler:focus { box-shadow: 0 0 0 .15rem rgba(255,255,255,.35); }
.mt-nav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Address strip under the masthead, same treatment as the Medtack notice. */
.mt-subtitle-strip {
    background: var(--mt-blue-100);
    color: var(--mt-navy-600);
    font-size: 14px;
    line-height: 1.4;
    padding: 8px 0;
    border-bottom: 1px solid rgba(20,51,97,.12);
}
.mt-subtitle-sep { opacity: .45; margin: 0 .45rem; }
@media (max-width: 575.98px) {
    .mt-subtitle-strip { font-size: 13px; }
    .mt-subtitle-strip strong { display: block; }
    .mt-subtitle-sep { display: none; }
}

/* =====================================================================
   Page furniture
   ===================================================================== */
.mt-main { flex: 1 0 auto; max-width: 1320px; width: 100%; margin: 0 auto; }
.mt-footer { color: var(--mt-muted-soft); max-width: 1320px; width: 100%; margin: 0 auto; }
.mt-footer a { color: var(--mt-muted); }

.mt-pagehead { margin-bottom: 1.25rem; }
.mt-pagehead h1 { font-size: 1.9rem; margin: 0; }
.mt-pagehead .mt-sub { color: var(--mt-muted); margin-top: .15rem; max-width: 46rem; }

.mt-card { background: #fff; border: 1px solid var(--mt-line); border-radius: 16px; box-shadow: var(--mt-shadow); }
.cp-card { background: #fff; border: 1px solid var(--mt-line); border-radius: 16px; box-shadow: var(--mt-shadow); margin-bottom: 1rem; }

/* lsm 08/29/26 — .card-body inside .mt-card had no padding at all.
   Bootstrap sets `padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x)`
   and declares those two properties on `.card`. Our panels are `.mt-card`,
   so the variables never resolved, the declaration was invalid and the
   padding fell back to zero — content sat hard against the border on
   Settings and Change password. The auth layout only escaped it because
   `p-4` is a Bootstrap utility and carries !important.
   Matching Medtack's 1.4rem. A `p-*` utility still overrides this. */
.mt-card .card-body { padding: 1.4rem; }
.mt-card .card-body > :last-child { margin-bottom: 0; }

@media (max-width: 575.98px) {
    .mt-card .card-body { padding: 1.1rem; }
}

.mt-alert { border-radius: 12px; }
.alert-success { --bs-alert-color: var(--mt-blue-700); --bs-alert-bg: var(--mt-blue-100); --bs-alert-border-color: var(--mt-blue-200); }
.alert-info    { --bs-alert-color: var(--mt-navy-600); --bs-alert-bg: var(--mt-pink); --bs-alert-border-color: var(--mt-pink-line); }

a { color: var(--mt-blue-600); }
.form-control:focus, .form-select:focus { border-color: var(--mt-blue); box-shadow: 0 0 0 .2rem rgba(66,148,229,.18); }
.form-label { font-weight: 500; font-size: .88rem; color: var(--mt-slate); }
.form-control, .form-select { min-height: var(--cp-tap); }

.btn-mt {
    background: var(--mt-blue); color: #fff; border: none; border-radius: 9px;
    font-weight: 500; padding: .6rem 1.1rem; min-height: var(--cp-tap);
}
.btn-mt:active { background: var(--mt-blue-700); color: #fff; }
.btn-mt:focus-visible { outline: 2px solid var(--mt-blue-300); outline-offset: 2px; }
.btn-mt-outline {
    background: transparent; color: var(--mt-blue-600); border: 1px solid var(--mt-blue);
    border-radius: 9px; font-weight: 500; padding: .55rem 1rem; min-height: var(--cp-tap);
}
.btn-mt-outline:active { background: var(--mt-blue); color: #fff; }
.btn-mt-danger {
    background: transparent; color: var(--mt-danger); border: 1px solid rgba(192,57,43,.5);
    border-radius: 9px; font-weight: 500; padding: .45rem .9rem;
}
.btn-mt-danger:active { background: var(--mt-danger); color: #fff; }

/* =====================================================================
   Legend
   ===================================================================== */
.cp-legend { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .85rem; color: var(--mt-muted); }
.cp-legend-item { display: inline-flex; align-items: center; gap: .35rem; }
.cp-swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.cp-swatch-free { background: var(--cp-free); border: 1px solid var(--cp-free-line); }
.cp-swatch-busy { background: var(--cp-busy); border: 1px solid var(--cp-busy-line); }
.cp-swatch-partial {
    border: 1px solid var(--cp-free-line);
    background: repeating-linear-gradient(45deg,
        var(--cp-free) 0 4px, var(--cp-busy) 4px 8px);
}
.cp-swatch-mine { background: transparent; border: 2px solid var(--cp-mine-ring); }

/* =====================================================================
   Day slider
   ===================================================================== */
.cp-daybar { padding: 1rem 1rem .85rem; }
.cp-daybar-top { display: flex; align-items: center; gap: .5rem; }
.cp-daybar-date { flex: 1 1 auto; text-align: center; min-width: 0; }
.cp-daybar-day {
    font-family: 'Fraunces', Georgia, serif;
    font-size: 1.25rem; font-weight: 600; color: var(--mt-ink);
    line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cp-daybar-count { font-size: .82rem; color: var(--mt-muted); }
.cp-daybar-count.is-today { color: var(--mt-blue-600); font-weight: 500; }

.cp-step {
    flex: 0 0 auto;
    width: var(--cp-tap); height: var(--cp-tap);
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--mt-line); background: #fff; color: var(--mt-slate);
    border-radius: 10px; font-size: 1.05rem; line-height: 1;
}
.cp-step:active { background: var(--mt-mist); }
.cp-step:disabled { opacity: .35; }
.cp-step:focus-visible { outline: 2px solid var(--mt-blue); outline-offset: 2px; }

.cp-slider {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 34px; margin: .6rem 0 .2rem;
    background: transparent; display: block; touch-action: pan-y;
}
.cp-slider::-webkit-slider-runnable-track {
    height: 8px; border-radius: 999px;
    background: linear-gradient(90deg, var(--mt-blue-200), var(--mt-blue-100));
}
.cp-slider::-moz-range-track {
    height: 8px; border-radius: 999px;
    background: linear-gradient(90deg, var(--mt-blue-200), var(--mt-blue-100));
}
.cp-slider::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 28px; height: 28px; margin-top: -10px;
    border-radius: 50%; background: var(--mt-blue);
    border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,9,40,.35);
}
.cp-slider::-moz-range-thumb {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--mt-blue); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,9,40,.35);
}
.cp-slider:focus-visible { outline: 2px solid var(--mt-blue); outline-offset: 4px; border-radius: 8px; }

.cp-daybar-months { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; }
.cp-chip {
    border: 1px solid var(--mt-line); background: #fff; color: var(--mt-slate);
    border-radius: 999px; padding: .4rem .9rem; font-size: .85rem; min-height: 38px;
}
.cp-chip.is-on { background: var(--mt-blue); border-color: var(--mt-blue); color: #fff; font-weight: 500; }
.cp-chip-today { border-style: dashed; }
.cp-chip:focus-visible { outline: 2px solid var(--mt-blue); outline-offset: 2px; }

/* =====================================================================
   Floor plan
   ===================================================================== */
.cp-plan-wrap { padding: .75rem .75rem 0; position: relative; }

/* Zoom is one custom property, set by the buttons, read by whichever of the
   two sizing rules below is in play. */
.cp-plan-scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    background: #fdfdfb;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.cp-plan { display: block; flex: 0 0 auto; touch-action: pinch-zoom pan-x pan-y; }

/* Desktop and tablet: the whole plan at rest. The page exists to answer
   "is anything green today" at a glance, which needs all 97 bays on screen
   at once, so zoom 1 fits the plan to the panel rather than to its width. */
@media (min-width: 768px) {
    .cp-plan-scroll { height: min(82vh, 1000px); }
    .cp-plan { height: calc(100% * var(--cp-zoom, 1)); width: auto; }
}

/* Phone: fitting a 960 x 1400 plan into a 380px screen would put the
   apartment numbers at about four pixels. Fit the width instead and let the
   plan scroll down, which is the gesture a phone user expects anyway. */
@media (max-width: 767.98px) {
    .cp-plan-scroll { max-height: 72vh; }
    .cp-plan { width: calc(100% * var(--cp-zoom, 1)); height: auto; }
}
.cp-plan-hint { font-size: .78rem; color: var(--mt-muted-soft); margin: .5rem .25rem; }

.cp-zoom { position: absolute; right: 1rem; bottom: 3rem; display: flex; flex-direction: column; gap: .35rem; }
.cp-zoom .cp-step { box-shadow: var(--mt-shadow); }

/* -- fixed furniture -- */
.cp-wall       { fill: none; stroke: #2b3546; stroke-width: 2.5; }
.cp-wall-thin  { fill: none; stroke: #2b3546; stroke-width: 1.6; }
.cp-core       { fill: #eef1f5; stroke: #2b3546; stroke-width: 1.6; }
.cp-core-inner { fill: #fff; stroke: #2b3546; stroke-width: 1.2; }
.cp-core-inner-line { stroke: #2b3546; stroke-width: 1.2; }
.cp-arrow      { fill: none; stroke: #6b7686; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.cp-street {
    font-family: 'Outfit', sans-serif; font-size: 22px; font-weight: 700;
    letter-spacing: .18em; fill: var(--mt-slate);
}
.cp-common {
    font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 500;
    letter-spacing: .16em; fill: #8b95a4;
}
.cp-core-label { font-family: 'Outfit', sans-serif; font-size: 13px; fill: var(--mt-slate); }
.cp-core-label-lg { font-size: 16px; font-weight: 600; letter-spacing: .06em; }
.cp-note { font-family: 'Outfit', sans-serif; font-size: 11px; fill: #6b7686; }

/* -- bays -- */
.cp-bay { cursor: pointer; }
.cp-bay-fill {
    fill: var(--cp-busy);
    stroke: var(--cp-busy-line);
    stroke-width: 1.2;
    transition: fill .12s linear;
}
.cp-bay.is-free .cp-bay-fill { fill: var(--cp-free); stroke: var(--cp-free-line); }

/* Free for only part of the day. The hatch is an SVG pattern rather than a CSS
   gradient because SVG fills cannot take one; the pattern's two rects pick up
   these colours by class. */
.cp-bay.is-partial .cp-bay-fill { fill: url(#cpPartial); stroke: var(--cp-free-line); }
.cp-hatch-free { fill: var(--cp-free); }
.cp-hatch-busy { fill: var(--cp-busy); }

/* White on a two-tone hatch loses contrast wherever it crosses the lighter
   stripe, so the apartment number gets an outline behind it on these bays
   only. paint-order puts the stroke under the fill, keeping the digits their
   proper weight instead of thickening them. */
.cp-bay.is-partial .cp-bay-apt {
    stroke: rgba(0, 9, 40, .6);
    stroke-width: 2.6;
    paint-order: stroke fill;
}

/* The user's own bay is ringed rather than recoloured, so ownership and
   availability stay independent of each other. */
.cp-bay.is-mine .cp-bay-fill { stroke: var(--cp-mine-ring); stroke-width: 2.6; }

.cp-bay-apt {
    font-family: 'Outfit', sans-serif; font-weight: 700;
    fill: #fff; paint-order: stroke; pointer-events: none;
}
.cp-bay-code, .cp-bay-seq {
    font-family: 'Outfit', sans-serif; font-size: 8.5px; font-weight: 500;
    fill: rgba(255,255,255,.72); pointer-events: none;
}

/* Tap feedback replaces the hover state a desktop user would expect. */
.cp-bay:active .cp-bay-fill { stroke: var(--mt-navy); stroke-width: 3; }
.cp-bay.is-open .cp-bay-fill { stroke: var(--mt-navy); stroke-width: 3.4; }
.cp-bay:focus { outline: none; }
.cp-bay:focus-visible .cp-bay-fill { stroke: var(--mt-blue); stroke-width: 3.4; }

/* =====================================================================
   Bay modal
   ===================================================================== */
.mt-modal { border-radius: 16px; border: 1px solid var(--mt-line); }
.mt-modal .modal-header { border-bottom: 1px solid var(--mt-mist); align-items: flex-start; }
.mt-modal .modal-title { font-size: 1.35rem; }
.mt-modal .modal-footer { border-top: 1px solid var(--mt-mist); }
.cp-modal-sub { color: var(--mt-muted); font-size: .82rem; margin-top: .1rem; }

/* The key. Deliberately flat and unfocusable — it explains the two colours in
   the calendar and is not something to press. Anything that looks like a button
   here would invite a tap that does nothing. */
.cp-key { display: flex; gap: 1.25rem; margin-bottom: .75rem; padding: .1rem .1rem .6rem; }
.cp-key-item {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .88rem; font-weight: 500; color: var(--mt-slate);
}

.cp-rangetoggle {
    display: flex; align-items: center; gap: .55rem;
    font-size: .88rem; color: var(--mt-slate);
    padding: .55rem .1rem; min-height: var(--cp-tap); margin: 0 0 .5rem;
}
.cp-rangetoggle input { width: 20px; height: 20px; accent-color: var(--mt-blue); flex: 0 0 auto; }

.cp-cal-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .4rem; }
.cp-cal-title { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; }
.cp-cal-dow {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
    font-size: .7rem; color: var(--mt-muted-soft); text-align: center;
    text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px;
}
.cp-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cp-day {
    aspect-ratio: 1 / 1; min-height: 40px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--mt-line); background: #fff; color: var(--mt-slate);
    border-radius: 8px; font-size: .92rem; font-weight: 500; padding: 0;
}
.cp-day.is-blank { border: none; background: none; pointer-events: none; }
.cp-day.is-free { background: var(--cp-free); border-color: var(--cp-free-line); color: #fff; }
.cp-day.is-partial {
    border-color: var(--cp-free-line); color: #fff;
    background: repeating-linear-gradient(45deg,
        var(--cp-free) 0 6px, var(--cp-busy) 6px 12px);
    text-shadow: 0 1px 2px rgba(0,9,40,.45);
}
.cp-day.is-busy { background: var(--cp-busy); border-color: var(--cp-busy-line); color: #fff; }
.cp-day.is-today { box-shadow: inset 0 0 0 2px var(--mt-navy); }
.cp-day.is-anchor { box-shadow: inset 0 0 0 3px var(--mt-blue); }
.cp-day.is-past { opacity: .45; }
.cp-day:disabled { pointer-events: none; }
.cp-day:focus-visible { outline: 2px solid var(--mt-blue); outline-offset: 2px; }
.cp-day:active { transform: scale(.94); }

.cp-cal.is-readonly .cp-day { pointer-events: none; }

/* ---- hour picker ---- */
.cp-hours { margin-bottom: .85rem; }
.cp-hours-head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .5rem; margin-bottom: .45rem;
}
.cp-hours-label { font-weight: 600; font-size: .9rem; color: var(--mt-slate); }
.cp-hours-summary {
    font-size: .85rem; color: var(--mt-blue-700); font-weight: 500;
    text-align: right; min-width: 0;
}
.cp-hours-presets { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.cp-hours-presets .cp-chip { padding: .35rem .7rem; font-size: .8rem; min-height: 36px; }

/* Six across so a 24-hour day is four tidy rows, and so each cell stays a
   comfortable target on a 380px screen rather than a 24-wide strip of slivers. */
.cp-hours-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.cp-hour {
    min-height: 42px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--mt-line); background: #fff; color: var(--mt-muted);
    border-radius: 8px; font-size: .88rem; font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.cp-hour.is-on { background: var(--cp-free); border-color: var(--cp-free-line); color: #fff; font-weight: 600; }
.cp-hour:active { transform: scale(.94); }
.cp-hour:focus-visible { outline: 2px solid var(--mt-blue); outline-offset: 2px; }
.cp-hours-hint { font-size: .75rem; color: var(--mt-muted-soft); margin: .4rem 0 0; }

/* ---- what is free in the shown month, in words ---- */
.cp-daylist { margin-top: .75rem; font-size: .84rem; }
.cp-daylist:empty { display: none; }
.cp-daylist-title {
    font-weight: 600; color: var(--mt-slate); font-size: .8rem;
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: .3rem;
}
.cp-daylist-row {
    display: flex; justify-content: space-between; gap: 1rem;
    padding: .3rem 0; border-top: 1px solid var(--mt-mist);
}
.cp-daylist-row span:last-child { color: var(--mt-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.cp-enquiry { border-top: 1px solid var(--mt-mist); margin-top: 1.25rem; padding-top: 1rem; }
.cp-enquiry-title { font-size: 1.05rem; margin-bottom: .2rem; }
.cp-enquiry-note { font-size: .82rem; color: var(--mt-muted); margin-bottom: .75rem; }

.cp-saving { font-size: .8rem; color: var(--mt-muted); margin-right: auto; }
.cp-saving.is-error { color: var(--mt-danger); }

/* =====================================================================
   Tables (Users, Audit log)
   ===================================================================== */
.mt-table { background: #fff; border-radius: 14px; overflow: hidden; border: 1px solid var(--mt-line); }
.mt-table table { margin: 0; }
.mt-table thead th {
    background: var(--mt-mist); color: var(--mt-slate); font-weight: 600;
    font-size: .74rem; text-transform: uppercase; letter-spacing: .04em;
    border: 0; padding: .8rem 1rem; white-space: nowrap;
}
.mt-table tbody td { padding: .75rem 1rem; vertical-align: middle; border-color: var(--mt-mist); }
.mt-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.mt-pill { font-size: .72rem; font-weight: 600; padding: .25rem .6rem; border-radius: 999px; white-space: nowrap; }
.mt-pill-active   { background: var(--mt-blue-100); color: var(--mt-blue-700); }
.mt-pill-inactive { background: #fbe9e7; color: var(--mt-danger); }
.mt-pill-admin    { background: var(--mt-navy-600); color: #fff; }
.mt-pill-resident { background: var(--mt-mist); color: var(--mt-slate); }
.mt-pill-guest    { background: #f3ece1; color: #7a5a2c; }

.mt-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; }

/* Toggle switch, carried over from the Medtack settings page. */
.mt-switch { position: relative; display: inline-flex; align-items: center; margin: 0; }
.mt-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.mt-switch-track {
    display: inline-block; width: 52px; height: 30px; border-radius: 999px;
    background: var(--mt-danger); position: relative; flex-shrink: 0;
    transition: background .18s ease;
}
.mt-switch-thumb {
    position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,9,40,.35);
    transition: transform .18s ease;
}
.mt-switch input:checked + .mt-switch-track { background: var(--mt-blue); }
.mt-switch input:checked + .mt-switch-track .mt-switch-thumb { transform: translateX(22px); }
.mt-switch input:focus-visible + .mt-switch-track { outline: 2px solid var(--mt-blue-300); outline-offset: 2px; }
.mt-switch-state.text-success { color: var(--mt-blue-600) !important; }

.mt-empty { text-align: center; padding: 3rem 1rem; color: var(--mt-muted); }
.mt-empty .bi { font-size: 2.6rem; color: var(--mt-blue-200); display: block; margin-bottom: .5rem; }

/* =====================================================================
   Sign-in screens
   ===================================================================== */
body.mt-login { background: var(--mt-navy); }
.mt-login-veil {
    position: fixed; inset: 0; z-index: -1;
    background:
        radial-gradient(90% 70% at 50% 35%, rgba(20,51,97,.55), rgba(0,9,40,.92) 100%),
        linear-gradient(180deg, var(--mt-navy-700), var(--mt-navy));
}
.mt-auth-wrap { display: flex; align-items: center; justify-content: center; }
.mt-auth-wrap-login { min-height: 100vh; padding: 2.5rem 1rem; }
.mt-auth-card { width: 100%; max-width: 430px; }
.mt-auth-brand { text-align: center; margin-bottom: 1.5rem; }
.mt-auth-brand .mt-logo { width: 52px; height: 52px; font-size: 1.6rem; margin: 0 auto .8rem; }
.mt-auth-brand h1 { font-size: 1.3rem; color: #fff; margin-bottom: .2rem; line-height: 1.3; }
.mt-auth-sub { color: rgba(185,217,246,.8); font-size: .9rem; margin: 0; }
.mt-auth-wrap-login .mt-card {
    background: rgba(255,255,255,.97);
    border-color: rgba(255,255,255,.35);
    box-shadow: 0 24px 60px -20px rgba(0,9,40,.75);
}
.mt-auth-foot { color: rgba(255,255,255,.68) !important; }
.mt-auth-links { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; margin-top: 1rem; }

/* =====================================================================
   Printable QR sign
   ===================================================================== */
body.mt-bare { background: #fff; display: block; }
.cp-sign {
    max-width: 820px; margin: 0 auto; padding: 3rem 2rem; text-align: center;
}
.cp-sign h1 { font-size: 2.6rem; margin-bottom: .25rem; }
.cp-sign .cp-sign-sub { color: var(--mt-muted); font-size: 1.15rem; margin-bottom: 2rem; }
.cp-sign-qr {
    width: 340px; max-width: 76vw; margin: 0 auto;
    padding: 20px; border: 3px solid var(--mt-navy); border-radius: 18px;
}
.cp-sign-qr img, .cp-sign-qr svg { width: 100%; height: auto; display: block; }
.cp-sign-url {
    font-family: 'Outfit', sans-serif; font-size: 1.5rem; font-weight: 600;
    color: var(--mt-navy); margin-top: 1.5rem; word-break: break-all;
}
.cp-sign-steps { text-align: left; max-width: 460px; margin: 2rem auto 0; color: var(--mt-slate); }
.cp-sign-steps li { margin-bottom: .5rem; }
.cp-sign-key { display: flex; gap: 1.5rem; justify-content: center; margin-top: 2rem; }
.cp-sign-key span { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; }
.cp-sign-actions { margin-top: 2.5rem; }
@media print {
    .cp-sign-actions { display: none; }
    .cp-sign { padding: 1rem; }
    @page { size: A4 portrait; margin: 14mm; }
}

/* =====================================================================
   Motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}