/* System maintenance broadcast + banner.

   Three surfaces share this file:
   1) .maintenance-banner - the global sticky banner pinned to the top
      of every page once a notice is scheduled. RAG-amber until T-0, then
      RAG-red while the kick-out is in flight.
   2) .maintenance-live  - the slim horizontal "there is a live notice"
      strip on /admin/maintenance. Same RAG-amber / RAG-red semantic fill,
      but compact: one row, message + countdown + Cancel button inline.
   3) The schedule form - canonical .admin-form chrome plus a mutex
      quick-pick toggle (15 / 30 / 60 / 120 / Custom) and a
      .form-outcome-preview block showing the computed sign-out time.
      The .form-outcome-preview family generalises the brief's Section 7a
      pattern (was Discovery-only as .schedule-next-line). */

/* ── 1. Sticky global banner ─────────────────────────────────────── */
.maintenance-banner-slot {
    /* Reserved placeholder in _Layout.cshtml so the HTMX morph swap
       lands somewhere sane even when there's nothing to render. */
    display: contents;
}

.maintenance-banner {
    position: sticky;
    top: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--rag-amber-soft, #fff4d4);
    color: #4a3a00;
    border-bottom: 1px solid var(--rag-amber, #d39e00);
    font-size: 0.85rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
}
.maintenance-banner-elapsed {
    background: var(--rag-red-soft, #f8d7da);
    color: #6c1c1f;
    border-bottom-color: var(--rag-red, #c1392b);
}
.maintenance-banner-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--rag-amber, #d39e00);
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
}
.maintenance-banner-elapsed .maintenance-banner-icon {
    background: var(--rag-red, #c1392b);
}
.maintenance-banner-text {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.5rem;
    row-gap: 0.1rem;
    align-items: baseline;
}
.maintenance-banner-message {
    opacity: 0.95;
}
.maintenance-banner-countdown {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

/* ── 2. Live-notice strip on /admin/maintenance ──────────────────── */
/* One-row horizontal layout. Icon | message stack | inline cancel.
   Keeps the RAG-amber / RAG-red semantic fill from the global banner
   so the colour reading is consistent across surfaces. */
.maintenance-live {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.85rem;
    margin: 0.75rem 0 0.5rem;
    border-radius: 4px;
    border: 1px solid var(--rule);
    border-left-width: 3px;
    background: var(--rag-amber-soft, #fff4d4);
    color: #4a3a00;
}
.maintenance-live-upcoming {
    border-left-color: var(--rag-amber, #d39e00);
}
.maintenance-live-elapsed {
    background: var(--rag-red-soft, #f8d7da);
    color: #6c1c1f;
    border-left-color: var(--rag-red, #c1392b);
}
.maintenance-live-icon {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--rag-amber, #d39e00);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
}
.maintenance-live-elapsed .maintenance-live-icon {
    background: var(--rag-red, #c1392b);
}
.maintenance-live-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.maintenance-live-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.85rem;
    row-gap: 0.1rem;
    font-size: 0.85rem;
    line-height: 1.35;
}
.maintenance-live-message {
    font-weight: 600;
    flex: 1 1 auto;
    min-width: 0;
}
.maintenance-live-when {
    font-weight: 400;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    opacity: 0.85;
}
.maintenance-live-meta {
    font-size: 0.7rem;
    opacity: 0.7;
    line-height: 1.3;
}
.maintenance-live-cancel {
    flex: 0 0 auto;
    margin: 0;
}
.maintenance-cancel-btn {
    height: 28px;
    padding: 0 0.75rem;
    font-size: 11px;
    white-space: nowrap;
}

/* ── 3. Schedule form ────────────────────────────────────────────── */
/* Re-uses canonical .admin-form chrome (background, border, radius,
   padding, vertical gap) from site.css and the canonical
   .admin-form-grid + .admin-field column layout. This file only adds
   the per-row tweaks: textarea sized for two lines of message copy,
   the mutex toggle + custom datetime inline row, and the outcome
   preview footer that surfaces the scheduler email. NO duplication of
   .admin-form padding / gap / background - the canon owns those. */
.maintenance-form-grid {
    /* Each row spans the full width via .admin-field-wide so the
       message textarea + when-row stack predictably rather than
       wrapping into 2-up columns alongside an empty cell. */
    gap: 0.75rem 1rem;
}

/* Textarea gets the canonical .admin-field textarea chrome from
   admin-users.css. Local overrides: minimum height for two rows of
   message copy + 13 px font so the Ward-Manager-readability rescale
   floor (>= 10 px) is comfortably cleared on the primary input. */
.maintenance-message-field textarea {
    width: 100%;
    min-height: 56px;
    font-size: 13px;
    line-height: 1.4;
}

/* The "Sign users out in" group. Fieldset chrome inherits the
   canonical .admin-field reset (border:0, padding:0, margin:0 etc).
   .maintenance-when-row puts the mutex toggle + custom datetime on
   one row so the two controls line up at the same baseline when
   Custom is the active preset. */
.maintenance-when-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
}
.maintenance-when-toggle {
    margin: 0;
}
.maintenance-when-toggle .mode-toggle-button {
    /* 11 px font + ~32 px tall hits the >= 24 px hit-target floor for
       Ward-Manager readability while staying compact alongside the
       canonical .admin-field controls (28 px). */
    padding: 0.45rem 0.9rem;
    font-size: 11px;
    line-height: 1.1;
}
.maintenance-datetime-input {
    height: 32px;
    padding: 0 0.55rem;
    font-size: 12px;
    border: 1px solid var(--rule);
    border-radius: 2px;
    background: var(--panel);
    color: var(--ink);
    width: 200px;
    max-width: 100%;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}
.maintenance-datetime-input:hover {
    border-color: var(--accent);
}
.maintenance-datetime-input:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-soft);
}

/* Outcome preview - two-line block. First line: the live "Users will
   be signed out at HH:mm ..." preview that the form JS rewrites on
   every preset / datetime change. Second line: the scheduler-email
   footer that names which audit identity the notice will be recorded
   against ("show the email" follow-up). Both lines line up flush-left
   inside the same accent-soft surface inherited from
   .form-outcome-preview. */
.maintenance-outcome {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.maintenance-outcome-line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
}
.maintenance-outcome-line .form-outcome-preview-label {
    display: inline;
    margin: 0;
}
.maintenance-outcome-footer {
    font-size: 11px;
    color: var(--ink-soft);
    line-height: 1.4;
}
.maintenance-outcome-footer strong {
    color: var(--ink);
    font-weight: 600;
}

/* Form actions sit flush with the rest of the form's left edge - no
   bespoke margin override, the canonical .admin-form-actions
   provides the alignment. */
.maintenance-form-actions {
    margin-top: 0.25rem;
}

/* ── 3a. Form outcome preview (generalised from Discovery's
       .schedule-next-line - codified in design brief Section 7a). ── */
/* Quiet inline block that surfaces a form's derived value live as the
   user types. accent-soft surface with an accent-left rule anchors it
   visually as "computed from the form above". */
.form-outcome-preview {
    font-size: 13px;
    color: var(--ink);
    background: var(--accent-soft);
    padding: 8px 12px;
    border-left: 2px solid var(--accent);
    border-radius: 0 3px 3px 0;
    line-height: 1.4;
}
.form-outcome-preview-label {
    display: block;
    color: var(--ink-soft);
    font-size: 12px;
    margin-bottom: 2px;
}
.form-outcome-preview strong {
    font-weight: 600;
}
.form-outcome-preview em {
    color: var(--ink-soft);
    font-style: italic;
}
.form-outcome-preview-meta {
    color: var(--ink-soft);
    font-size: 12px;
    margin-left: 0.25rem;
}

/* ── 4. Recent notices history ───────────────────────────────────── */
.maintenance-history {
    margin-top: 1.25rem;
}
.maintenance-history-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-soft);
    margin: 0 0 0.4rem 0;
    font-weight: 600;
}
.maintenance-history-empty {
    margin: 0;
    padding: 0.5rem 0.65rem;
    font-size: 12px;
    color: var(--ink-soft);
    background: var(--panel);
    border: 1px solid var(--rule);
    border-radius: 3px;
}
.maintenance-history-table {
    width: 100%;
    font-size: 11px;
    border-collapse: collapse;
    border: 1px solid var(--rule);
    border-radius: 3px;
    overflow: hidden;
    background: var(--panel);
}
.maintenance-history-table thead th {
    text-align: left;
    background: color-mix(in srgb, var(--accent) 10%, var(--panel));
    color: var(--ink);
    font-weight: 600;
    padding: 0.3rem 0.55rem;
    border-bottom: 1px solid var(--rule);
}
.maintenance-history-table tbody td {
    padding: 0.25rem 0.55rem;
    border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, var(--panel));
    vertical-align: middle;
}
.maintenance-history-table tbody tr:last-child td {
    border-bottom: 0;
}
.maintenance-history-table tbody tr:hover td {
    background: var(--accent-soft);
}
.maintenance-history-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ── 5. Login-page notice ────────────────────────────────────────── */
/* Lives inside the login card, same colour as the banner so a kicked
   user immediately recognises why they're back at /login. Self-contained
   block - no positioning interaction with the layout banner (the login
   page doesn't render the layout banner). */
.maintenance-login-notice {
    margin: 0.75rem 0;
    padding: 0.55rem 0.85rem;
    border-radius: 4px;
    border: 1px solid var(--rag-amber, #d39e00);
    background: var(--rag-amber-soft, #fff4d4);
    color: #4a3a00;
    font-size: 0.85rem;
    line-height: 1.45;
}