@import "fonts.css?v=2.76.1"; /* bump with fonts.css: the import is not versioned by mtime */

.site_message {
    padding: 10px;
    text-align: center;
    background-color: #ff5454;
    width: 100%;
    margin: 0 !important;
    max-width: unset;
    font-weight: bold;
    color: white;
    font-size: 1.5em;
}

/* a queued message ("The profile … has been successfully updated!"),
   Core::get_message(): clear of whatever the page puts under it (core 2.69.2) */
.es-alert {
    margin-bottom: 20px;
}
.es-alert > .alert {
    margin-bottom: 0;
}

.alert-info {
    background-color: #e3f4fd;
    color: #006c97;
}
.alert-info a {
    color: #006c97;
}

.zone-content *:not(i), .btn {
    font-family: "Helvetica Neue", helvetica, arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

.alert h4 {
    margin-top: 0;
    color: inherit;
}

h1, h2, h3, h4 {
    font-size: 1em;
    font-weight: 800;
    line-height: normal;
    margin-bottom: 10px;
    color: #0c5460;
}

ol, ul {
    margin: 10px 20px;
}

#page-title.title {
    text-align: left;
}

.col-sm-12 {
    padding: 0 20px 10px 20px;
}

.btn-sm {
    font-size: .9em;
}

.btn-xs {
    font-size: .7em;
}

.btn, a.btn {
    background-image: none;
    text-shadow: none;
    padding: 5px 20px;
    border-radius: 6px;
}

a.btn {
    text-decoration: none;
}

a.btn-info {
    color: #01324b;
    font-weight: bold;
}

.btn-primary, a.btn-primary {
    color: #01324b;
    background: none;
    background-color: #00bff3;
    border-color: #00bff3;
    text-shadow: none;
    cursor: pointer;
}

.btn-default, a.btn-default {
    color: #444444;
    background: none;
    background-color: #ffffff;
    border-color: #cccccc;
    text-shadow: none;
    cursor: pointer;
}

.btn-transparent-background {
    background: transparent;
    border-color: transparent;
}

select {
    min-width: 100px;
}

table button.btn {
    font-size: 1.2em;
    border-radius: 4px;
    padding: 1px 5px;
}

.inline-block {
    display: inline-block;
}

.screen-reader {
    position: absolute;
    left: -9999px;
}

.block {
    display: block;
}

.inline {
    display: inline;
}

img {
    max-width: 100%;
    border-radius: 4px;
}

/*accordian js*/
.accordion_section {
    border: thin dashed #aeaeae;
    position: relative;
    padding: 10px;
    border-radius: 8px;
    margin: 10px 0;
}

.accordion_content {
    display: none;
    margin-left: 27px;
}

.accordion_trigger {
    cursor: pointer;
    padding: 0;
}

.accordion_trigger i {
    width: 20px;
    text-align: center;
}

.slide-toggle {
    cursor: pointer;
}

.temp_notice {
    margin-bottom: 0 !important;
}

#modal {
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: #ffffff;
    border-radius: 12px;
    border: thin solid #cccccc;
    padding: 20px;
    z-index: 4;
    display: none;
    width: fit-content;
    transform: translate(-50%, -50%);
    max-width: 100vw;
    max-height: 100vh;
    overflow: auto;
}

#modal-content {
    overflow: auto;
    max-height: 100%;
    padding: 40px 20px 20px;
    display: block;
    border: none;
}

#modal-close {
    color: black;
    z-index: 5;
    display: block;
    position: absolute;
    right: 15px;
    font-size: 32px;
    top: 10px;
    cursor: pointer;
    background-color: #fff;
    border-radius: 50%;
    padding-top: 3px;
}

#modal-screen {
    position: fixed;
    top: -5%;
    bottom: -5%;
    right: -5%;
    left: -5%;
    background-color: #0066cc;
    opacity: .4;
    z-index: 3;
    display: none;
}

/*
.modal classes
same as above, but fits the content of modal
*/
.modal_set {
    z-index: 3;
    position: fixed;
}

.modal {
    position: fixed;
    left: 50%;
    top: 50%;
    width: fit-content;
    height: fit-content;
    max-height: 90vh;
    max-width: 100vw;
    overflow: auto;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    border: thin solid #cccccc;
    padding: 20px;
    display: none;
    opacity: 1;
}

/*
 * Summernote's dialogs, undoing the rule directly above.
 *
 * The .modal above is core's own legacy modal component — the one modal.js and
 * .es_modal drive — and it claims a bare Bootstrap class name for it. Summernote
 * renders every dialog as `class="modal note-modal …"` with its own
 * .modal-dialog > .modal-content inside, so it inherited a second white panel,
 * a grey border and 20px of padding wrapped around the real dialog: a frame
 * inside a frame.
 *
 * Scoped to .note-modal, which every Summernote dialog carries — link, image,
 * video, help, and the FileManager library picker. Deliberately NOT written as
 * a bare `.modal` reset: that would strip the legacy modals this file styles on
 * purpose, everywhere on the site.
 *
 * Inert until Summernote is actually loaded; nothing else emits .note-modal.
 */
.note-modal {
    background: none;
    border: none;
    border-radius: 0;
    /* Part of the same inherited block. Left in place it holds the dialog 20px
       off its own edges, which reads as a misalignment once the panel painting
       it is gone. */
    padding: 0;
}

/*
 * An image being dragged to a new position inside the editor.
 *
 * .note-dropzone is sized to cover the whole editable the moment any drag
 * starts, so an internal move dropped onto the text instead landed on the
 * dropzone and was re-pasted at the caret. core_js.js adds this class for the
 * duration of a drag that began inside the editable; a file dragged in from
 * the desktop never gets it, so drop-to-upload still works.
 */
.note-dropzone.note-dropzone-passthrough {
    display: none !important;
}

/*
 * The move handle on a selected image, and the caret that shows where it will
 * land. Both are built by wysiwyg_bind_image_move() in core_js.js.
 *
 * Summernote already draws .note-control-selection over a clicked image with a
 * resize grip in the south-east corner; the move grip is added to the middle of
 * that same box, where it cannot collide with the four corner holders.
 *
 * `.note-handle .note-control-selection > div` is absolutely positioned by
 * Summernote's own stylesheet, so the centring below only has to supply the
 * offsets.
 */
.note-control-selection .note-control-move {
    left: 50%;
    top: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .65);
    border: 1px solid #fff;
    cursor: move;
    /* Above .note-control-selection-bg, which paints a 30% black wash over the
       whole image. */
    z-index: 2;
}

.note-control-selection .note-control-move svg {
    display: block;
    margin: 6px;
    width: 16px;
    height: 16px;
    fill: #fff;
    /* The grip is the event target; without this, pointerdown lands on the
       glyph and the drag never starts. */
    pointer-events: none;
}

/*
 * Hit-testing has to reach the text under the overlay while a move is in
 * progress — caretRangeFromPoint returns whatever is topmost, and that would
 * otherwise be the selection box itself. The box stays visible, so the image
 * being moved is still obvious; it just stops answering the mouse.
 */
.note-handle.note-handle-moving {
    pointer-events: none;
}

.note-editing-area .note-move-caret {
    position: absolute;
    width: 2px;
    background-color: #098ddf;
    pointer-events: none;
    z-index: 100;
}

@media (max-width: 992px) {

    .modal {
        width: 100vw;
        height: 100vh;
    }
    .username.account-badge-open {
        display: none;
    }

    #modal {
        width: 100vw;
        height: 100vh;
        transform: unset;
        top: 0;
        left: 0;
        padding: 40px;
        border-radius: 12px;
        border: none;
    }
}

/* A modal on a phone (core 2.63.7): the box's 40px and its content's 20px
   on each side left a form 300px wide on a 420px screen. */
@media (max-width: 640px) {
    #modal, .es_modal_window { padding: 12px !important; }
    #modal-content, .es_modal_content_box { padding: 44px 4px 12px !important; }
}

/* Summernote's toolbar groups wrap inside themselves (core 2.63.7). The full
   toolbar's table group is nine buttons wide, and on a narrow editor it
   ran out past the editor's edge instead of breaking onto a second line. */
.note-editor .note-toolbar .note-btn-group { display: inline-flex; flex-wrap: wrap; max-width: 100%; }

.site_notify_badge,
.es_quicklinks {
    float: right;
    display: flex;
    flex-direction: column;
    padding: 2px 20px 2px 5px;
    font-size: 1.5em;
}

.notification-badge {
    position: relative;
}
.notification-badge .badge.badge-primary {
    background-color: #b40000;
    color: white;
    font-size: .7em;
    padding: 3px 5px;
    border-radius: 50%;
    position: absolute;
    top: -8px;
    left: 10px;
}

/* ── The quick links pane (core 2.65.0) ────────────────────────────────────
   The notifications pane's frame and colours (it was #303030 with dotted
   white borders), its own palette so a theme's colours stay out; the full
   width on a phone. */
#site_quicklinks.es-ql {
    --es-ql-ink: #12313B;
    --es-ql-muted: #4A626A;
    --es-ql-line: #DDE6E9;
    --es-ql-teal: #105460;
    --es-ql-tint: #EEF6F7;
    width: 380px;
    max-width: 100vw;
    background: #FFFFFF;
    color: var(--es-ql-ink);
    font-size: 14px;
    text-align: left;
    border-left: 1px solid var(--es-ql-line);
    box-shadow: -18px 0 40px -24px rgba(9, 30, 36, .35);
}
@media (max-width: 576px) {
    #site_quicklinks.es-ql { width: 100vw; border-left: 0; }
}
#site_quicklinks .es-ql-head { gap: 8px; padding: 16px 16px 12px; border-bottom: 1px solid var(--es-ql-line); }
/* !important: a theme's h2 would otherwise win, as on the notifications pane */
#site_quicklinks .es-ql-title { flex: 1 1 auto; margin: 0; font-size: 18px !important; font-weight: 700 !important; line-height: 1.3; color: var(--es-ql-ink) !important; }
#site_quicklinks .es-ql-body { padding: 4px 0 16px; }
#site_quicklinks .es-ql-empty { padding: 32px 16px; margin: 0; text-align: center; color: var(--es-ql-muted); }
#site_quicklinks .es-ql-group-title { margin: 0; padding: 14px 16px 6px; font-family: inherit; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .04em; text-transform: uppercase; color: var(--es-ql-muted) !important; }
#site_quicklinks .es-ql-list { list-style: none; margin: 0; padding: 0 8px; }
#site_quicklinks .es-ql-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; border-radius: 10px; color: var(--es-ql-ink); text-decoration: none; }
#site_quicklinks .es-ql-link:hover, #site_quicklinks .es-ql-link:focus-visible { background: var(--es-ql-tint); color: var(--es-ql-teal); }
#site_quicklinks .es-ql-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: var(--es-ql-tint); color: var(--es-ql-teal); }
#site_quicklinks .es-ql-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
#site_quicklinks .es-ql-label { font-weight: 600; }
#site_quicklinks .es-ql-desc { font-size: 12px; color: var(--es-ql-muted); }
#site_quicklinks .es-ql-ext { flex: none; font-size: 12px; color: var(--es-ql-muted); }

/* the quick links pane in edit mode, and adding links (core 2.65.1) */
#site_quicklinks .es-ql-edit-toggle { border: 1px solid var(--es-ql-line); border-radius: 8px; padding: 4px 12px; background: #FFFFFF; color: var(--es-ql-teal); font-weight: 600; font-size: 13px; }
#site_quicklinks .es-ql-edit-toggle[aria-pressed="true"] { background: var(--es-ql-teal); border-color: var(--es-ql-teal); color: #FFFFFF; }
#site_quicklinks .es-ql-item { display: flex; align-items: center; gap: 4px; }
#site_quicklinks .es-ql-item > .es-ql-link { flex: 1 1 auto; min-width: 0; }
#site_quicklinks .es-ql-item.is-editing > .es-ql-link { pointer-events: none; }
#site_quicklinks .es-ql-link.is-muted { opacity: .6; }
#site_quicklinks .es-ql-icon-btn { flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--es-ql-muted); }
#site_quicklinks .es-ql-icon-btn:hover:not(:disabled), #site_quicklinks .es-ql-icon-btn:focus-visible { background: var(--es-ql-tint); color: var(--es-ql-teal); }
#site_quicklinks .es-ql-icon-btn:disabled { opacity: .35; }
#site_quicklinks .es-ql-delete:hover { color: #A12B2B !important; }
#site_quicklinks .es-ql-locked { flex: none; width: 36px; text-align: center; color: var(--es-ql-muted); }
#site_quicklinks .es-ql-btn { border: 1px solid var(--es-ql-line); border-radius: 8px; padding: 6px 12px; background: #FFFFFF; color: var(--es-ql-teal); font-weight: 600; font-size: 13px; }
#site_quicklinks .es-ql-btn:hover { background: var(--es-ql-tint); }
#site_quicklinks .es-ql-btn.is-primary { background: var(--es-ql-teal); border-color: var(--es-ql-teal); color: #FFFFFF; }
#site_quicklinks .es-ql-mine-form { flex: 1 1 auto; display: grid; gap: 6px; padding: 8px 10px; margin: 2px 0; border: 1px solid var(--es-ql-line); border-radius: 10px; background: #FAFCFC; }
#site_quicklinks .es-ql-mine-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
#site_quicklinks .es-ql-add { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px 4px; border-top: 1px solid var(--es-ql-line); margin-top: 8px; }
#site_quicklinks .es-ql-add-form { display: grid; gap: 4px; margin: 8px 16px 0; padding: 12px; border: 1px solid var(--es-ql-line); border-radius: 10px; }
#site_quicklinks .es-ql-add-form[hidden] { display: none; }
#site_quicklinks .es-ql-add-form label { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--es-ql-muted); }
#site_quicklinks .es-ql-hint { margin: 6px 0; font-size: 12px; color: var(--es-ql-muted); }
#site_quicklinks .es-ql-full { padding: 0 16px; }
#site_quicklinks .es-ql-message { margin: 10px 16px 0; padding: 8px 12px; border-radius: 8px; background: var(--es-ql-tint); color: var(--es-ql-teal); font-size: 13px; }
#site_quicklinks .es-ql-message.is-error { background: #FBECEC; color: #8A1F1F; }
.es-ql-admin { margin-top: 28px; }
.es-ql-admin-table td { vertical-align: middle; }

/* ── The notifications pane (core 2.64.0) ──────────────────────────────────
   From the right, under the bell, in the intranet's light colours (it was
   #303030 with white text against every redesigned screen); the full width
   on a phone. Unread: a teal dot and a bold title. Its own colours
   throughout, so a theme's link and heading colours do not land in it. */
#site_notifications.es-notes {
    --es-notes-ink: #12313B;
    --es-notes-muted: #4A626A;
    --es-notes-line: #DDE6E9;
    --es-notes-teal: #105460;
    --es-notes-tint: #EEF6F7;
    width: 420px;
    max-width: 100vw;
    background: #FFFFFF;
    color: var(--es-notes-ink);
    font-size: 14px;
    text-align: left;
    border-left: 1px solid var(--es-notes-line);
    box-shadow: -18px 0 40px -24px rgba(9, 30, 36, .35);
}
@media (max-width: 576px) {
    #site_notifications.es-notes { width: 100vw; border-left: 0; }
}
#site_notifications .es-notes-head { gap: 8px; padding: 16px 16px 12px; border-bottom: 1px solid var(--es-notes-line); }
/* !important: a theme's h2 (mdsg's is 28px at 300) would otherwise win */
#site_notifications .es-notes-title { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px !important; font-weight: 700 !important; line-height: 1.3; color: var(--es-notes-ink) !important; }
#site_notifications .es-notes-group, #site_notifications .es-note-title { font-family: inherit; }
#site_notifications .es-notes-count { min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--es-notes-teal); color: #FFFFFF; font-size: 12px; font-weight: 700; text-align: center; }
#site_notifications .es-notes-icon { width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--es-notes-muted); }
#site_notifications .es-notes-icon:hover, #site_notifications .es-notes-icon:focus-visible { background: var(--es-notes-tint); color: var(--es-notes-teal); }
#site_notifications .es-notes-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--es-notes-line); }
#site_notifications .es-notes-tabs { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--es-notes-tint); }
#site_notifications .es-notes-tab { border: 0; border-radius: 999px; padding: 5px 14px; background: transparent; color: var(--es-notes-muted); font-weight: 600; font-size: 13px; }
#site_notifications .es-notes-tab.is-current { background: #FFFFFF; color: var(--es-notes-ink); box-shadow: 0 1px 3px rgba(9, 30, 36, .18); }
#site_notifications .es-notes-tab-count { margin-left: 4px; color: var(--es-notes-teal); }
#site_notifications .es-notes-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
#site_notifications .es-notes-action { border: 1px solid var(--es-notes-line); border-radius: 8px; padding: 5px 10px; background: #FFFFFF; color: var(--es-notes-teal); font-size: 13px; font-weight: 600; }
#site_notifications .es-notes-action:hover:not(:disabled) { background: var(--es-notes-tint); }
#site_notifications .es-notes-action:disabled { color: #6C757D; cursor: not-allowed; } /* grey, still readable: #9AAAB0 was 2.40:1 */
#site_notifications .es-notes-body { padding: 4px 0 16px; }
#site_notifications .es-notes-empty { padding: 32px 16px; margin: 0; text-align: center; color: var(--es-notes-muted); }
#site_notifications .es-notes-group { margin: 0; padding: 14px 16px 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--es-notes-muted); }

#site_notifications .es-note { display: flex; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--es-notes-line); }
#site_notifications .es-note.unread { background: #F7FBFB; }
#site_notifications .es-note-dot { flex: none; width: 8px; height: 8px; margin-top: 7px; border-radius: 50%; background: transparent; }
#site_notifications .es-note.unread .es-note-dot { background: var(--es-notes-teal); }
#site_notifications .es-note-main { flex: 1 1 auto; min-width: 0; }
#site_notifications .es-note-title { margin: 0 0 2px; font-size: 14px; line-height: 1.35; font-weight: 500; color: var(--es-notes-ink); }
#site_notifications .es-note.unread .es-note-title { font-weight: 700; }
#site_notifications .es-note-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; }
#site_notifications a.es-note-open:hover, #site_notifications button.es-note-open:hover { color: var(--es-notes-teal); text-decoration: underline; }
#site_notifications .es-note-meta { margin: 0 0 4px; font-size: 12px; color: var(--es-notes-muted); }
#site_notifications .es-note-body { color: var(--es-notes-ink); font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
#site_notifications .es-note.expanded .es-note-body { display: block; -webkit-line-clamp: unset; }
#site_notifications .es-note-body a, #site_notifications .es-note-link { color: var(--es-notes-teal); }
#site_notifications .es-note-body p { margin: 0 0 4px; }
#site_notifications .es-note-more { padding: 0; margin-top: 2px; border: 0; background: none; color: var(--es-notes-teal); font-size: 12px; font-weight: 600; }
#site_notifications .es-note-link { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 600; text-decoration: none; }
#site_notifications .es-note-link:hover { text-decoration: underline; }
#site_notifications .es-note-actions { flex: none; display: flex; flex-direction: column; gap: 2px; }
#site_notifications .es-note-actions button { width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--es-notes-muted); }
#site_notifications .es-note-actions button:hover, #site_notifications .es-note-actions button:focus-visible { background: var(--es-notes-tint); color: var(--es-notes-teal); }
#site_notifications .es-note-actions .es-note-delete:hover { color: #A12B2B; }
#site_notifications .es-notes-more-slot { padding: 14px 16px; text-align: center; }
#site_notifications .es-notes-older { border: 1px solid var(--es-notes-line); border-radius: 8px; padding: 7px 16px; background: #FFFFFF; color: var(--es-notes-teal); font-weight: 600; }

.modal-content {
    overflow: auto;
    max-height: 100%;
    padding: 20px;
    display: block;
    border: none;
}

.modal-close {
    color: white;
    z-index: 5002;
    display: block;
    position: absolute;
    right: -23px;
    font-size: 28px;
    top: -23px;
    width: 40px;
    height: 40px;
    text-align: center;
    cursor: pointer;
    background-color: black;
    border-radius: 0 0 0 10px;
    padding: 3px;
}

.modal-backdrop {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #0066cc;
    opacity: .4;
    display: block;
}

.js_view_modal {
    cursor: pointer;
}

.bottom-right {
    bottom: 0;
    right: 0;
    position: absolute;
}

.form_num {
    width: 50px !important;
}

#breadcrumb, .breadcrumb {
    padding: 12px !important;
}

#breadcrumb a:first-child, .breadcrumb a:first-child {
    padding-left: 0 !important;
}

.breadcrumb .logout-button {
    margin: -5px;
}

/* ── Admin shell: group sections at the left, section content at the right ──
   The admin bar lists the four groups in Admin::ADMIN_GROUPS; this is the
   second level, listing what is inside the group being viewed.
   Deliberately custom class names rather than Bootstrap's: the theme
   overrides .card-body and .badge, so borrowing a framework name here is
   how a panel ends up invisible. */
.admin-shell {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* minmax(0, 1fr) above, not plain 1fr: a grid item's default min-width is
   auto, so one wide table in a section would push the column past the page
   instead of scrolling inside it. */
.admin-shell-main {
    min-width: 0;
}

.admin-side-nav {
    position: sticky;
    top: 12px;
    background: #f7f8fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 6px;
}

.admin-side-nav-heading {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin: 6px 8px 8px;
}

.admin-side-nav ul,
.admin-side-nav ol {
    padding: 0;
    margin: 0 !important;
    list-style: none;
}

.admin-side-nav li {
    position: relative;
    padding: 0;
    list-style: none;
}

.admin-side-nav-link {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    text-decoration: none;
    transition: background 0.12s, color 0.12s;
}

.admin-side-nav-link:hover {
    background: #e9ecf1;
    color: #222;
    text-decoration: none;
}

.admin-side-nav-link.active {
    background: #fff;
    color: #1a5fb4;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Fixed width so the labels line up whether or not each icon is the same
   glyph width — FA Pro renders a placeholder for an icon it does not have,
   and a placeholder is not the width of the icon it stands in for. */
.admin-side-nav-link i {
    width: 15px;
    text-align: center;
    font-size: 13px;
    opacity: 0.75;
}

.admin-side-nav-link.active i {
    opacity: 1;
}

/* Below this the sidebar stops being a column and becomes a row of chips
   above the content — a 210px gutter on a phone leaves the section itself
   about half the screen. */
@media (max-width: 767px) {
    .admin-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .admin-side-nav {
        position: static;
    }

    .admin-side-nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }
}

.notify-flag {
    display: inline-block;
    background-color: red;
    color: white;
    border-radius: 50% 50%;
    min-width: 27px;
    text-align: center;
    padding: 5px;
    font-size: .8em;
    margin-left: 5px;
}

.notify-flag.null {
    background-color: #CCCCCC;
}

button.button-looks-like-link {
    border: none;
    padding: 0;
    margin: 0;
    display: inline;
    background: none;
    color: #0a6ebd;
    text-decoration: underline;
    cursor: pointer;
    text-align: left;
}

.widget .header {
    padding: 5px 0;
    border-bottom: thin solid #0a0b0d;
    margin-bottom: 5px;
}

.widget {
    padding: 20px;
    border: thin solid #e0e0e0;
    border-radius: 2px;
}

.widget ol,
.widget ul {
    margin: 0 !important;
}

label {
    display: block;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 10px;
    margin-bottom: 5px;
}

.spinner-container {
    display: block;
    margin: 10px 0;
}


/*
email template
*/
.email .tiny-text {
    font-size: .9em;
}

.email header {
    background-color: #4c7cc4;
    padding: 10px 10px 0;
}

ul.list li {
    list-style: none;
    padding: 10px 5px;
    border-bottom: thin dotted #cccccc;
    overflow: auto;
}

.list h4 {
    display: inline-block;
}

.notpublished {
    border: thin dashed #cccccc;
}

.html_element_post {
    cursor: pointer;
}

/* Placeholder text is text, and #D4D4D4 (with !important, so no theme or
   module could do better) was 1.48:1 on a white field (core 2.77.4). Bootstrap's
   own placeholder grey reads as a hint and passes, 4.69:1. Not !important: a
   module that sets its own, darker, now gets it. */
::placeholder {
    color: #6C757D;
    opacity: 1; /* Firefox dims it otherwise */
}

.float-right {
    float: right !important;
}

.float-left {
    float: left !important;
}

.float-none {
    float: none !important;
}

/*
Tabs
*/

.tab-row {
    padding: 10px 2px 0;
    position: relative;
    display: block;
    border-bottom: 1px solid #545454;
    margin-bottom: 10px;
}

.tab {
    padding: 10px;
    border-radius: 4px 10px 0 0;
    background-color: #545454;
    display: inline-block;
    margin: 0 0 -1px 2px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    color: white;
    border-top: 1px solid #545454;
    border-right: 1px solid #545454;
    border-left: 1px solid #545454;
    cursor: pointer;
}

.tab:hover,
.tab-active {
    background-color: white;
    color: #0a6ebd;
}

.navbar-light .navbar-nav .nav-link {
    color: #000000;
}

/* Nav toggles are <button> now, not <a>.
   A container item goes nowhere by definition, and a parent that is also a page
   needs its toggle to be a separate control from its link — both are buttons, so
   they are reachable by keyboard and announce themselves correctly. Neither is
   meant to LOOK like a button, so the user-agent chrome comes off and they
   inherit the same treatment as the links beside them. */
.navbar-nav button.nav-link {
    background: none;
    border: 0;
    font: inherit;
    line-height: inherit;
    cursor: pointer;
}

.navbar-nav button.nav-link:focus-visible {
    outline: 2px solid #1a5fb4;
    outline-offset: 2px;
}

/* A parent that is also a page has two controls, its link and its toggle. They
   have to sit on one line: .nav-link is display:block, so without this the
   chevron drops onto a second row under the label. The old template forced this
   with an inline style on every such item. */
.navbar-nav > li.has-children > .nav-link {
    display: inline-block;
    vertical-align: middle;
}

/* The chevron beside a parent that is also a link: keep it tight to the label
   rather than letting it claim a nav item's worth of space. */
.navbar-nav button.nav-toggle {
    padding-left: 4px;
    padding-right: 4px;
}

.navbar-nav .nav-container .fa-chevron-down,
.navbar-nav .nav-toggle .fa-chevron-down {
    font-size: 0.8em;
    opacity: 0.7;
}

.navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .show>.nav-link {
    text-decoration: underline;
    font-weight: bold;
}

/* tabset */
.tabset .tabset-content {
    display: none;
}

.tabset .tabset-content.tabset-visible {
    display: block;
}

/* loader */
.loader {
    border: 12px solid #f3f3f3;
    border-radius: 50%;
    border-top: 12px solid #3498db;
    width: 40px;
    height: 40px;
    -webkit-animation: spin 1s linear infinite; /* Safari */
    animation: spin 1s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
    0% {
        --webkit-transform: rotate(0deg);
    }
    100% {
        --webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* end loader */

/* forms */

.select2-container {
    max-width: 100% !important;
}

.select2-container--focus {
    box-shadow: 0 0 10px #0756ff;
}

.img_uploader {
    margin: 10px 0;
}

.img_uploader .uploader_img {
    max-width: 400px;
    margin-bottom: 10px;
    border-radius: 4px;
    overflow: hidden;
}

.img_uploader .upload_btn {
    font-size: 1.3em;
    display: none;
}

.img_uploader .upload_btn:hover {
    color: white;
}

.img_uploader input {
    width: 400px;
}

/* pagination nav <ul><li> */
ul.pager {
    display: block;
    margin: 10px auto !important;
    padding: 0px;
    border: thin solid #CCCCCC;
    border-radius: 6px;
    width: fit-content;
    overflow: hidden;
}

ul.pager li {
    display: inline-block;
    padding: 5px;
    cursor: pointer;
    border-right: thin solid #CCCCCC;
    border-left: thin solid transparent;
    text-align: center;
    margin: 0 !important;
    min-width: 20px !important;
}

ul.pager:last-child {
    border-right: thin solid transparent;
}

ul.pager li.bold {
    display: inline-block;
    padding: 5px;
    cursor: pointer;
    font-weight: bold;
    background-color: #CCCCCC;
}

/* end pagination nav <ul><li> */

datalist {
    padding: 10px;
    border: thin solid #CCCCCC;
}

datalist option {
    padding: 5px 0;
    border-bottom: thin dotted #e0e0e0;
    cursor: pointer;
}

datalist:last-child {
    border-bottom: none !important;
}

datalist .selected_option {
    background-color: #e0e0e0;
}

/* draggables */
.draggable {
    cursor: grab;
}

.draggable:active {
    cursor: grabbing;
}

a {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.hide {
    display: none !important;
}

.acc-hidden {
    display: inline-flex;
    overflow: hidden;
    text-indent: -5000px;

}

.select2-dropdown,
.select2-container--open .select2-dropdown--below{
    z-index: 5002;
}

.tooltip {
    z-index: 50000;
}

#tasks_content ul > li {
}

#tasks_content .delegated {
    font-weight: bold;
}

@media (max-width: 620px) {


    .tab {
        border-radius: 4px;
        margin: 5px;
        width: 100%;
    }

    .tab:hover, .tab-active {
        background-color: white;
        color: #0a6ebd;
        border: 1px solid #CCCCCC;
    }
}
/* ── a fullscreen editor inside a modal fills the viewport ────────────────
   Summernote's fullscreen is `position: fixed` at 0,0, 100% wide, the
   window's height. Fixed positioning is measured from the viewport UNLESS an
   ancestor has a transform — and both modal styles center themselves with
   transform: translate(-50%, -50%), so "fullscreen" filled the modal and
   stopped there, clipped by its overflow. While the modal holds a fullscreen
   editor it drops the transform (the editor covers it anyway) and lets the
   editor out. Summernote fires no event for fullscreen, only adds the class,
   so :has() is the hook; nothing changes when the class comes off. The close
   X carries an inline z-index of 5002 and would sit over the editor, so it
   steps aside — the editor's own fullscreen button brings the modal back. */
#modal:has(.note-editor.fullscreen),
.es_modal_window:has(.note-editor.fullscreen) {
    transform: none;
    overflow: visible;
}
#modal:has(.note-editor.fullscreen) #modal-content,
.es_modal_window:has(.note-editor.fullscreen) .es_modal_content_box {
    overflow: visible;
}
#modal:has(.note-editor.fullscreen) #modal-close,
.es_modal_window:has(.note-editor.fullscreen) .es_modal_close_x,
body:has(.note-editor.fullscreen) #modal-close,
body:has(.note-editor.fullscreen) .es_modal_close_x {
    display: none !important;
}

/* ── stacked modal levels (modal.js multi-modal support) ──────────────────
   Level 1 keeps the legacy #modal / #modal-content / #modal-close /
   #modal-screen IDs above. Levels 2+ carry these classes instead; the rules
   mirror the ID rules exactly (z-index is applied inline per level by
   modal.js: +10 per level over the 1000/1001/1002 base, core 2.63.7). */
.es_modal_window {
    position: fixed;
    top: 50%;
    left: 50%;
    background-color: #ffffff;
    border-radius: 12px;
    border: thin solid #cccccc;
    padding: 20px;
    z-index: 3;
    display: none;
    width: fit-content;
    transform: translate(-50%, -50%);
    max-width: 100vw;
    max-height: 100vh;
    overflow: auto;
}

.es_modal_content_box {
    overflow: auto;
    max-height: 100%;
    padding: 40px 20px 20px;
    display: block;
    border: none;
}

.es_modal_close_x {
    color: black;
    z-index: 5002;
    display: block;
    position: absolute;
    right: 15px;
    font-size: 32px;
    top: 10px;
    cursor: pointer;
    background-color: #fff;
    border-radius: 50%;
    padding-top: 3px;
}

.es_modal_screen_x {
    position: fixed;
    top: -5%;
    bottom: -5%;
    right: -5%;
    left: -5%;
    background-color: #0066cc;
    opacity: .4;
    z-index: 5000;
    display: none;
}

/* ── Navigation admin ───────────────────────────────────────────────────── */
.admin-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}
.admin-nav-header h3 { margin: 0; }
.admin-nav-intro { font-size: 13px; margin-bottom: 16px; }
.admin-nav-empty { padding: 20px; background: #fafbfc; border: 1px solid #eceef1; border-radius: 6px; }
.admin-nav-table { font-size: 13px; }
.admin-nav-table td { vertical-align: middle; }
.admin-nav-controls { white-space: nowrap; text-align: right; }
.admin-nav-controls-head { text-align: right; }
.admin-nav-icon { width: 16px; color: #6C757D; margin-right: 4px; }
.admin-nav-target { font-size: 12px; word-break: break-all; }

/* An item that is switched off still has to be readable — it is the thing you
   came here to switch back on. */
.admin-nav-hidden td { background: #fbfbfd; }
.admin-nav-hidden td strong, .admin-nav-hidden .admin-nav-target { opacity: 0.55; }
.admin-nav-broken td { background: #fffafa; }

.admin-nav-flag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 11px;
    background: #eef1f4;
    color: #55606b;
    border: 1px solid #dce1e6;
}
.admin-nav-flag-warn { background: #fdf3e2; color: #8a5a12; border-color: #f2ddb5; }
.admin-nav-flag-bad  { background: #fcebea; color: #b02a26; border-color: #f3c9c7; }

.admin-nav-menu-tab {
    display: inline-block;
    padding: 4px 10px;
    margin-right: 4px;
    border-radius: 5px;
    font-size: 12px;
    color: #555;
    text-decoration: none;
}
.admin-nav-menu-tab.active { background: #fff; border: 1px solid #e0e0e0; color: #1a5fb4; }

/* ── Modal loading placeholder ───────────────────────────────────────────────
   Shown from the moment an es_ajax_modal opens until its content arrives. A
   handler that calls an external API can take tens of seconds, and an empty
   modal for that long reads as broken.
   ------------------------------------------------------------------------- */
.es_modal_loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 20px;
    color: #666;
    font-size: 15px;
}

.es_modal_spinner {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    border: 3px solid #d8dde2;
    border-top-color: #1a5fb4;
    border-radius: 50%;
    animation: es_modal_spin 0.8s linear infinite;
}

@keyframes es_modal_spin {
    to { transform: rotate(360deg); }
}

/* Respect a reduced-motion preference: keep the indicator, drop the spin. */
@media (prefers-reduced-motion: reduce) {
    .es_modal_spinner { animation-duration: 3s; }
}

/* The same indicator for a submit that is still in flight. Laid out as a row
   under the buttons rather than as a block in the middle of the modal, because
   the form it belongs to is still on screen and still readable. */
.es_modal_submitting {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 0 0;
    color: #666;
    font-size: 14px;
}

.es_modal_message {
    padding: 40px 20px;
    text-align: center;
    color: #b02a26;
    font-size: 14px;
}

/* ── Modules Admin ─────────────────────────────────────────────────────────
   Same visual language as the nav builder above: a compact table where a
   switched-off row stays readable, because it is the row you came to act on. */
.admin-mod-table { font-size: 13px; }
.admin-mod-table td { vertical-align: top; }
.admin-mod-intro { margin-bottom: 14px; max-width: 70ch; }
.admin-mod-controls { white-space: nowrap; text-align: right; }
.admin-mod-carries { line-height: 1.9; }
.admin-mod-version { margin-left: 6px; font-size: 11px; color: #4A626A; }
.admin-mod-dir { margin-top: 2px; font-size: 11px; }
.admin-mod-dir code { background: none; padding: 0; color: #4A626A; }

.admin-mod-off td { background: #fbfbfd; }
.admin-mod-off td strong { opacity: 0.55; }

.admin-mod-state { font-size: 12px; white-space: nowrap; }
.admin-mod-state-on  { color: #2f7d32; }
.admin-mod-state-off { color: #4A626A; }

.admin-mod-flag {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 11px;
    background: #eef1f4;
    color: #55606b;
    border: 1px solid #dce1e6;
}
.admin-mod-flag-warn { background: #fdf3e2; color: #8a5a12; border-color: #f2ddb5; }
.admin-mod-flag-core { background: #eaf1fb; color: #2a5599; border-color: #c9dbf3; }
.admin-mod-state-core { color: #2a5599; }
.admin-mod-nocontrol { font-size: 11px; font-style: italic; }

/* ==========================================================================
   Floating notification badges
   --------------------------------------------------------------------------
   A stack in the bottom-right corner: one badge per unread, undismissed
   notification, with Dismiss all above them.

   Every class here is es_notify_ prefixed on purpose. The themes redefine
   Bootstrap's own names — .badge renders white-on-transparent and was
   invisible, .card-body was hijacked until it was scoped — so these borrow
   nothing that a theme is entitled to restyle.
   ========================================================================== */

#es_notify_stack {
    position: fixed;
    /* 6 + 12px of padding = the 18px gap from the corner this has always had.
       The padding is not decoration: the box has to scroll (see overflow
       below), and an overflow container clips its children's box-shadows flush
       to the edge. The padding is the room those shadows need. */
    right: 6px;
    bottom: 6px;
    padding: 12px;
    z-index: 1080;              /* over content and over an open .es_modal (1000+) */
    width: 354px;               /* 330 of badge + the 24 of padding */
    max-width: calc(100vw - 12px);
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    /* The server hands out up to 8 badges at once (CoreNotifications::
       get_badge_notifications), and 8 of them with wrapped text is taller than
       max-height on a laptop. Without this the overflow rendered ABOVE the
       box — the stack is bottom-anchored — and ran off the top of the screen,
       unreachable and unreadable. */
    overflow-y: auto;
    overflow-x: hidden;
    /* A scrollbar appearing takes its width out of the content box, so the
       badges narrow the moment the stack overflows. Thin keeps that shift to a
       few pixels instead of fifteen; browsers that do not know the property
       ignore it and get the default. */
    scrollbar-width: thin;
    /* the container spans the corner even when empty; only the badges catch
       clicks, or an invisible box would swallow them */
    pointer-events: none;
}

/* Applied by es_notify_sync_scroll() only while the stack actually overflows.
   The container has to accept pointer events for its scrollbar to be grabbable,
   and must NOT the rest of the time — a permanently clickable 354px box in the
   corner swallows clicks meant for the page underneath. Wheel and trackpad
   work either way, because the event targets a badge and scrolling chains to
   the nearest scrollable ancestor regardless of this property. */
#es_notify_stack.es_notify_scrolling {
    pointer-events: auto;
}

#es_notify_stack > * {
    pointer-events: auto;
}

#es_notify_dismiss_all {
    align-self: flex-end;
    background: #333;
    color: #fff;
    border: 1px solid #555;
    border-radius: 14px;
    font-size: .78em;
    padding: 4px 12px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

#es_notify_dismiss_all:hover {
    background: #b40000;
    border-color: #b40000;
}

.es_notify_badge {
    position: relative;
    background: #dfdfdf;
    color: #000000;
    border: 1px solid #d5d5d5;
    border-radius: 15px;
    padding: 10px 30px 10px 12px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .25);
    animation: es_notify_in .25s ease-out;
    opacity: .85;
}
.es_notify_badge:hover  {
    opacity: 1;
    background-color: #ffffff;
}

@keyframes es_notify_in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* respects the OS setting; the animation is decoration, not information */
@media (prefers-reduced-motion: reduce) {
    .es_notify_badge { animation: none; }
}

.es_notify_badge_close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: none;
    border: none;
    font-size: 1.25em;
    line-height: 1;
    padding: 2px 5px;
    cursor: pointer;
    color: #4A626A;
}

.es_notify_badge_close:hover {
    color: #b40000;
}

.es_notify_badge_body {
    cursor: pointer;
}

.es_notify_badge_title {
    font-size: 1em;
    font-weight: bold;
    margin: 0 0 4px;
    border: none;
    padding: 0;
    color: #000000;
}

.es_notify_badge_text {
    font-size: .85em;
    margin: 0 0 4px;
    color: #333333;
}

.es_notify_badge_date {
    font-size: .75em;
    font-style: italic;
    color: #666666;
}

.es_notify_badge_link {
    display: inline-block;
    margin-top: 6px;
    font-size: .8em;
    font-weight: bold;
}

.es_notify_badge.es_notify_going {
    opacity: 0;
    /* 10, not 20: the container clips at its 12px padding now that it scrolls,
       and a dismissal that visibly chops in half on the way out looks broken
       rather than smooth. */
    transform: translateX(10px);
    transition: opacity .2s ease-in, transform .2s ease-in;
}

/* --------------------------------------------------------------------------
   System messages — admin-posted dashboard notices.
   Shares .alert and .alert-* with the flash notices on purpose, so the two
   read as the same kind of object. What it must NOT share is .temp_notice,
   which javascript.js slides away after a moment.
   -------------------------------------------------------------------------- */

.es_system_message {
    margin-bottom: 12px;
}

.es_system_message_title {
    font-size: 1.1em;
    font-weight: bold;
    margin: 0 0 4px;
    border: none;
    padding: 0;
}

.es_system_message_close {
    cursor: pointer;
    opacity: .6;
}

.es_system_message_close:hover {
    opacity: 1;
}

/* ── Box receipt (admin) ─────────────────────────────────────────────────
   Read-only log of what Estuaries did in Box. Custom class names rather
   than Bootstrap's — the theme overrides .badge to white-on-transparent,
   so an action chip borrowing that name would be invisible. */
.box-receipt-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.box-receipt-count {
    font-size: 13px;
    color: #6b7280;
}

.box-receipt-intro {
    font-size: 13px;
    max-width: 68ch;
}

.box-receipt-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 10px;
    margin-bottom: 16px;
    background: #f7f8fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.box-receipt-filters .form-control {
    width: auto;
    min-width: 120px;
}

/* a checkbox among the filters reads as a choice, not a field label (core 2.78.0) */
.box-receipt-filters .box-receipt-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    text-transform: none;
    letter-spacing: normal;
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
}

.box-receipt-filter-id {
    max-width: 130px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.box-receipt-empty {
    padding: 18px;
    background: #f7f8fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    max-width: 68ch;
}

.box-receipt-table {
    font-size: 13px;
}

.box-receipt-when {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: #6b7280;
}

.box-receipt-size {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.box-receipt-icon {
    color: #6C757D;
    margin-right: 4px;
}

/* The Box id is a link into this same page filtered to that id, so it reads
   as data first and a control second. */
.box-receipt-id {
    display: inline-block;
    margin-left: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    color: #6b7280;
    text-decoration: none;
    border-bottom: 1px dotted #c3c8d0;
}

.box-receipt-id:hover {
    color: #1a5fb4;
    border-bottom-color: #1a5fb4;
    text-decoration: none;
}

.box-receipt-action {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: #e9ecf1;
    color: #4b5563;
}

/* Created and deleted are the two that matter at a glance — one added
   something to Box, one took something away. */
.box-receipt-action-created  { background: #dff3e4; color: #1b6b36; }
.box-receipt-action-uploaded { background: #dff3e4; color: #1b6b36; }
.box-receipt-action-version  { background: #fdf1d6; color: #8a6100; }
.box-receipt-action-deleted  { background: #fbe0e0; color: #96222a; }

.box-receipt-app {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    color: #6b7280;
}

/* The sentence BoxAPI wrote, on its own row under the columns it explains.
   Its own row rather than a seventh column: it is a sentence, and a sentence
   in a table cell either wraps to four lines or squeezes everything else. */
.box-receipt-detail {
    padding-top: 0 !important;
    border-top: none !important;
    font-size: 12px;
    color: #6b7280;
}

.box-receipt-detail-row td {
    border-top: none !important;
}


@media (max-width: 767px) {
    .box-receipt-filters .form-control {
        min-width: 0;
        flex: 1 1 140px;
    }
}

/* ── Standard list controls (es_list_*) ──────────────────────────────────
   The house pattern for any list of rows: a live search box, sortable
   column headers, and a pager. Generic on purpose — a new list gets these
   by rendering the class names, so the behavior does not get reinvented
   per module. See CLAUDE.md, "Lists".

   Custom names rather than Bootstrap's: the theme overrides .badge and
   .card-body, so a control borrowing a framework name can come out
   invisible. */
.es_list_search {
    position: relative;
    margin-bottom: 10px;
    max-width: 420px;
}

.es_list_search .es_livesearch {
    padding-right: 32px;
}

/* The spinner sits INSIDE the search box and outside the swapped fragment,
   so it survives the repaint that answers it. */
.es_list_search_working {
    position: absolute;
    right: 11px;
    top: 50%;
    width: 13px;
    height: 13px;
    margin-top: -7px;
    border: 2px solid #c3c8d0;
    border-top-color: #1a5fb4;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}

.es_list_searching .es_list_search_working {
    opacity: 1;
    animation: es_list_spin 0.6s linear infinite;
}

@keyframes es_list_spin {
    to { transform: rotate(360deg); }
}

/* Dim the rows while a search is in flight, so a slow reply reads as
   "working" rather than as a list that has stopped responding. */
.es_list_searching .es_list_body {
    opacity: 0.55;
    transition: opacity 0.15s;
}

.es_list_head {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    margin-bottom: 4px;
}

.es_list_count {
    font-size: 13px;
    color: #6b7280;
}

.es_list_empty {
    padding: 18px;
    background: #f7f8fa;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 14px;
    max-width: 68ch;
}

/* A sort header is a button so it is reachable from the keyboard and
   announces itself as a control; it is styled to read as a table heading. */
.es_list_sortable {
    padding: 0 !important;
}

.es_list_sort {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 8px;
    background: none;
    border: none;
    font: inherit;
    font-weight: 700;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.es_list_sort:hover {
    background: #eef1f5;
}

.es_list_sort:focus-visible {
    outline: 2px solid #1a5fb4;
    outline-offset: -2px;
}

/* The idle glyph only appears on hover or focus: six columns each showing a
   permanent sort arrow reads as six active sorts. */
.es_list_sort_idle {
    opacity: 0;
    transition: opacity 0.12s;
}

.es_list_sort:hover .es_list_sort_idle,
.es_list_sort:focus-visible .es_list_sort_idle {
    opacity: 0.4;
}

.es_list_sorted .es_list_sort {
    color: #1a5fb4;
}

.es_list_pager {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.es_list_pager_at {
    font-size: 13px;
    color: #6b7280;
}

.es_list_page.disabled {
    opacity: 0.45;
    cursor: default;
}

/* Tabs that split a list into sets (Active / Inactive). Links, so each tab is
   a bookmarkable URL. Own names rather than Bootstrap's .nav-tabs/.nav-link:
   the theme styles .nav-link for the header menu. */
.es_list_tabs {
    display: flex;
    gap: 4px;
    margin: 0 0 14px;
    border-bottom: 1px solid #d0d5dd;
}

.es_list_tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: -1px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 6px 6px 0 0;
    color: #4b5563;
    font-weight: 600;
    text-decoration: none;
}

.es_list_tab:hover {
    color: #1a5fb4;
    background: #eef1f5;
}

.es_list_tab:focus-visible {
    outline: 2px solid #1a5fb4;
    outline-offset: -2px;
}

.es_list_tab_current {
    color: #1a5fb4;
    background: #fff;
    border-color: #d0d5dd #d0d5dd #fff;
}

.es_list_tab_count {
    font-size: 12px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    background: #eef1f5;
    color: #4b5563;
}

.es_list_tab_current .es_list_tab_count {
    background: #1a5fb4;
    color: #fff;
}

/* ── People admin ─────────────────────────────────────────────────────── */
.people-roles {
    font-size: 12px;
    color: #4b5563;
}

.people-date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: #4b5563;
}

.people-roles-more {
    font-weight: 600;
    white-space: nowrap;
}

.people-actions,
.people-status {
    white-space: nowrap;
}

/* ── Staff directory, /people (core 2.67.0) ───────────────────────────── */
.people-directory-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 12px;
}

.people-directory-head .es_list_search {
    flex: 1 1 280px;
    max-width: 420px;
    margin: 0;
}

.people-directory-who {
    white-space: nowrap;
}

.people-directory-pic {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 8px;
    vertical-align: middle;
    background: #eef1f5;
}

.people-directory-email,
.people-directory-phone {
    white-space: nowrap;
}

/* a phone: one card per person, no header row, nothing scrolls sideways */
@media (max-width: 640px) {
    .people-directory-table thead {
        display: none;
    }

    .people-directory-table,
    .people-directory-table tbody,
    .people-directory-table tr,
    .people-directory-table td {
        display: block;
        width: 100%;
    }

    .people-directory-table tr {
        padding: 10px 4px;
        border-bottom: 1px solid #e5e7eb;
    }

    .people-directory-table td {
        border: 0;
        padding: 2px 0 2px 40px;
    }

    .people-directory-table td.people-directory-who {
        padding-left: 0;
        white-space: normal;
    }

    .people-directory-table td.people-directory-email,
    .people-directory-table td.people-directory-phone {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .people-directory-table td:empty {
        display: none;
    }
}

/* ── Profile page, /people/{username} (core 2.68.0) ─────────────────────
   Cards on the ground, the intranet palette. Prefixed pf- so no theme rule
   for Bootstrap names (.card-body, .badge, .btn) reaches in. */
.pf-app {
    --pf-ink: #12313B;
    --pf-muted: #4A626A;
    --pf-line: #D5E3E7;
    --pf-ground: #F3F7F8;
    --pf-primary: #105460;
    --pf-primary-dark: #0B3C45;
    --pf-tint: #E4F1F4;
    --pf-live: #2E7D47;
    color: var(--pf-ink);
    font-size: 15px;
    line-height: 1.55;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin: 0 0 24px;
    /* the layout answers to the room the page has, not the window: in the
       admin area the side nav takes a third of it */
    container-type: inline-size;
    container-name: pf;
}

.pf-app a { color: var(--pf-primary); }
.pf-app a:hover { color: var(--pf-primary-dark); }

.pf-card {
    background: #fff;
    border: 1px solid var(--pf-line);
    border-radius: 12px;
    padding: 22px 26px;
    min-width: 0;
}

.pf-h2 {
    font-family: Roboto, 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--pf-ink);
}

.pf-h3 {
    font-family: Roboto, 'Open Sans', sans-serif;
    font-size: 15px;
    font-weight: 700;
    margin: 18px 0 10px;
}

.pf-muted { color: var(--pf-muted); font-size: 13px; font-weight: 400; }
.pf-note { display: block; color: var(--pf-muted); font-size: 12px; }

.pf-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}
.pf-card-head .pf-h2 { margin: 0; }

/* top bar: back link, and the admin's tools */
.pf-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pf-back {
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}

.pf-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.pf-tool-form { display: inline; margin: 0; }

/* the shared button helpers bring Bootstrap classes and inline margins;
   inside the toolbar they all look like one set */
.pf-app .pf-tool,
.pf-app .pf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    margin: 0 !important;
    padding: 8px 14px;
    border: 1px solid var(--pf-line);
    border-radius: 8px;
    background: #fff;
    color: var(--pf-ink);
    font: 600 14px/1.2 'Open Sans', sans-serif;
    text-decoration: none;
    cursor: pointer;
    box-shadow: none;
}
.pf-app .pf-tool:hover,
.pf-app .pf-btn:hover { background: var(--pf-ground); color: var(--pf-ink); }

.pf-app .pf-btn-primary {
    background: var(--pf-primary);
    border-color: var(--pf-primary);
    color: #fff;
}
.pf-app .pf-btn-primary:hover { background: var(--pf-primary-dark); color: #fff; }

/* the Active switch reads as a status pill */
.pf-app .pf-tool.btn-success {
    background: #E7F4EC;
    border-color: #CBE6D4;
    color: var(--pf-live);
}
.pf-app .pf-tool.btn-warning {
    background: #FFF6E5;
    border-color: #F0DDB5;
    color: #5A3E00;
}

/* header */
.pf-hero {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 28px 32px;
}

.pf-photo {
    width: 128px;
    height: 128px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 0 0 1px var(--pf-line);
}

.pf-photo-initials,
.pf-photo-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--pf-tint);
    font-family: Roboto, sans-serif;
    font-size: 40px;
    color: var(--pf-primary);
}

.pf-photo-empty {
    background: var(--pf-ground);
    border: 2px dashed #B9CDD3;
    box-shadow: none;
    gap: 2px;
}
.pf-photo-empty .pf-initials { font-size: 34px; line-height: 1; }
.pf-photo-empty a { font: 600 13px 'Open Sans', sans-serif; }

.pf-who {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pf-app .pf-name {
    font-family: Roboto, 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 1.15;
    margin: 0;
    color: var(--pf-ink);
}

.pf-title { font-size: 17px; color: var(--pf-muted); }

.pf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.pf-chip {
    background: var(--pf-ground);
    color: var(--pf-muted);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 13px;
}

.pf-app .pf-chip-strong {
    background: var(--pf-tint);
    color: var(--pf-primary);
    font-weight: 600;
    text-decoration: none;
}

.pf-reach {
    flex: none;
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pf-reach .pf-btn { min-height: 44px; }
.pf-reach-num { font-weight: 400; }
.pf-reach-cell { display: none !important; }

/* the owner's prompts */
.pf-prompts .pf-h2 { margin-bottom: 2px; }
.pf-prompts .pf-muted { margin: 0 0 14px; font-size: 14px; }

.pf-prompt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.pf-app .pf-prompt {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px dashed #B9CDD3;
    border-radius: 10px;
    padding: 14px 16px;
    color: var(--pf-ink);
    text-decoration: none;
}
.pf-app .pf-prompt:hover { background: var(--pf-ground); color: var(--pf-ink); }
.pf-prompt span { font-size: 13px; color: var(--pf-muted); }

/* two columns */
.pf-columns {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.pf-main { flex: 2 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.pf-side { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 20px; }

/* nothing for the main column (no bio, no tags): the side cards share the row */
.pf-columns-solo .pf-side {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;
}

.pf-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pf-tags li {
    border: 1px solid var(--pf-line);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 14px;
}

.pf-prose p { margin: 0 0 10px; }
.pf-prose > :last-child { margin-bottom: 0; }
.pf-outside { margin: 12px 0 0; color: var(--pf-muted); }
.pf-outside strong { color: var(--pf-ink); }

.pf-more summary { list-style: none; cursor: pointer; }
.pf-more summary::-webkit-details-marker { display: none; }
.pf-more-short { display: block; margin-bottom: 8px; }
.pf-more-link { font-weight: 600; font-size: 14px; color: var(--pf-primary); text-decoration: underline; }
.pf-more[open] .pf-more-short,
.pf-more[open] .pf-more-link { display: none; }

/* contact */
.pf-contact {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px 12px;
    margin: 0;
    font-size: 14px;
}
.pf-contact dt { color: var(--pf-muted); font-weight: 400; }
.pf-contact dd { margin: 0; overflow-wrap: anywhere; }

/* badges */
.pf-badges {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 8px;
    text-align: center;
    font-size: 12px;
}
.pf-badges li { display: flex; flex-direction: column; align-items: center; gap: 4px; }

.pf-badge-medal {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--pf-tint);
    color: var(--pf-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    overflow: hidden;
}
.pf-badge-medal img { width: 100%; height: 100%; object-fit: cover; }

.pf-link { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 14px; }

.pf-wall > summary { cursor: pointer; margin: 0; }
.pf-wall[open] > summary { margin-bottom: 12px; }

/* account panel */
.pf-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.pf-stats div { background: var(--pf-ground); border-radius: 8px; padding: 12px 14px; }
.pf-stats span { display: block; font-size: 12px; color: var(--pf-muted); }

.pf-roles {
    display: grid;
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 8px 12px;
    margin: 0;
    font-size: 13px;
}
.pf-roles dt { color: var(--pf-muted); font-weight: 400; padding-top: 3px; }
.pf-roles dd { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }

.pf-role { border: 1px solid var(--pf-line); border-radius: 999px; padding: 2px 10px; }
.pf-role-site { background: var(--pf-ink); border-color: var(--pf-ink); color: #fff; }
.pf-role-dept { background: var(--pf-tint); border-color: var(--pf-tint); }

.pf-roles-more { margin-top: 8px; }
.pf-roles-more > summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--pf-primary); margin-bottom: 8px; }

.pf-table-wrap { overflow-x: auto; }
.pf-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pf-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--pf-muted);
    padding: 6px 8px;
    border-bottom: 1px solid var(--pf-line);
}
.pf-table td { padding: 8px; border-bottom: 1px solid #EEF3F5; vertical-align: top; }
.pf-table tr:last-child td { border-bottom: 0; }

/* the edit form (core 2.69.0) */
.pf-edit { max-width: 860px; margin-left: auto; margin-right: auto; width: 100%; }
.pf-edit-head .pf-name { font-size: 28px; }
.pf-edit-head .pf-muted { margin: 6px 0 0; font-size: 14px; }

.pf-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 18px;
}
.pf-fields-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pf-field-wide { grid-column: 1 / -1; }
.pf-field-pair { flex-direction: row; gap: 12px; }
.pf-field-pair > .pf-field { flex: 1 1 0; }

.pf-edit label,
.pf-edit .pf-field > label {
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
    font-size: 14px;
    color: var(--pf-ink);
    margin: 0;
}
.pf-edit .form-control {
    min-height: 42px;
    border: 1px solid #B9CDD3;
    border-radius: 8px;
    font-size: 15px;
    max-width: none !important;
}
.pf-edit .form-control:focus { border-color: var(--pf-primary); box-shadow: 0 0 0 3px rgba(16, 84, 96, .15); }
.pf-edit textarea.form-control { min-height: 0; }
.pf-edit .pf-note { margin-top: 2px; }
.pf-edit .pf-note .fa-lock { margin-right: 3px; }

/* the PHP-built inputs (state, year, the reminder box) bring their own label */
.pf-state label, .pf-year label { display: block; margin-bottom: 4px; }
.pf-state select, .pf-year select { width: 100%; text-transform: none; }
.pf-year { max-width: 260px; }

.pf-photo-row { display: flex; align-items: center; gap: 22px; }
.pf-photo-row .pf-photo { width: 112px; height: 112px; }
.pf-photo-row .pf-photo-initials { font-size: 34px; }
.pf-photo-row [hidden] { display: none !important; }
.pf-photo-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pf-photo-actions .pf-note { flex-basis: 100%; }
.pf-file { position: relative; overflow: hidden; text-transform: none !important; }
.pf-file input[type=file] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}
.pf-file:focus-within { outline: 2px solid var(--pf-primary); outline-offset: 2px; }

.pf-pw > summary { cursor: pointer; list-style: none; }
.pf-pw > summary::-webkit-details-marker { display: none; }
.pf-pw > summary .pf-h2 { display: inline; margin: 0; }
.pf-pw > summary::after { content: ' ▸'; color: var(--pf-muted); }
.pf-pw[open] > summary::after { content: ' ▾'; }
.pf-pw[open] > summary { margin-bottom: 14px; }
.pf-bad { color: #A3362A; font-weight: 600; }

.pf-role-group { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.pf-role-group legend { font-size: 14px; font-weight: 700; margin-bottom: 6px; width: auto; }
.pf-role-boxes { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.pf-app .pf-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid var(--pf-line);
    border-radius: 999px;
    padding: 5px 12px;
    font-weight: 400;
    font-size: 13px;
    cursor: pointer;
}
.pf-check:has(input:checked) { background: var(--pf-tint); border-color: #A9CED6; }

.pf-savebar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    gap: 10px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--pf-line);
    border-radius: 12px;
    box-shadow: 0 -4px 16px rgba(18, 49, 59, .08);
}
.pf-savebar .pf-btn { min-height: 44px; padding: 10px 20px; }

/* narrow (a tablet, or the admin area): the side column drops under the main one */
@container pf (max-width: 820px) {
    .pf-columns { flex-direction: column; align-items: stretch; }
    .pf-main, .pf-side { flex: none; }
}

/* a phone: the header stacks and centres, three tap targets to reach them */
@container pf (max-width: 600px) {
    .pf-app { gap: 14px; }
    .pf-card { padding: 18px; }
    .pf-hero { flex-direction: column; text-align: center; gap: 6px; padding: 22px 18px; }
    .pf-photo { width: 104px; height: 104px; }
    .pf-app .pf-name { font-size: 26px; margin-top: 6px; }
    .pf-chips { justify-content: center; }
    .pf-reach {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        margin-top: 10px;
    }
    .pf-reach-num { display: none; }
    .pf-reach-cell { display: inline-flex !important; }
    .pf-prompt-grid { grid-template-columns: minmax(0, 1fr); }
    .pf-contact { grid-template-columns: 76px minmax(0, 1fr); }
    .pf-stats { grid-template-columns: minmax(0, 1fr); }
    .pf-roles { grid-template-columns: minmax(0, 1fr); }
    .pf-roles dt { padding-top: 6px; }
    .pf-tools { width: 100%; }
    .pf-fields, .pf-fields-3 { grid-template-columns: minmax(0, 1fr); }
    .pf-photo-row { flex-direction: column; align-items: flex-start; }
    .pf-savebar .pf-btn { flex: 1 1 0; }
}

/* ── Role grants: a role's members, the Grant modal (core 2.70.0) ────── */
.rg-page, .rg, .rg-prompt, .rg-page-note { --rg-ink: #12313B; --rg-muted: #4A626A; --rg-line: #D5E3E7; --rg-ground: #F3F7F8; --rg-primary: #105460; --rg-tint: #E4F1F4; color: var(--rg-ink); }
.rg-page { display: flex; flex-direction: column; gap: 16px; }
.rg-back-link { font-weight: 600; text-decoration: none; }
.rg-card { background: #fff; border: 1px solid var(--rg-line); border-radius: 12px; padding: 20px 24px; min-width: 0; }
.rg-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.rg-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.rg-name { margin: 2px 0 4px; font-family: Roboto, sans-serif; font-size: 26px; font-weight: 700; }
.rg-muted { color: var(--rg-muted); font-size: 13px; }
.rg-note { color: var(--rg-muted); font-size: 12px; font-weight: 400; }
.rg-protected { margin: 0; font-size: 14px; }
.rg-columns { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.rg-members { flex: 2 1 520px; }
.rg-grants { flex: 1 1 240px; display: flex; flex-direction: column; gap: 12px; }
.rg-h3 { margin: 0; font-family: Roboto, sans-serif; font-size: 17px; font-weight: 700; }
.rg-grant { border: 1px solid var(--rg-line); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.rg-grant-undone { opacity: .7; }
.rg-table td { vertical-align: middle; }
.rg-table td:nth-child(3) { min-width: 12em; }
.rg-table-wrap { overflow-x: auto; }
.rg-off { font-size: 12px; color: #5A3E00; background: #FFF6E5; border-radius: 999px; padding: 1px 8px; }
.rg-remove { text-align: right; white-space: nowrap; }
.rg-link-danger { border: 0; background: none; color: #A3362A; font-weight: 600; font-size: 13px; cursor: pointer; }

.rg-title { margin: 0; font-family: Roboto, sans-serif; font-size: 21px; font-weight: 700; }
.rg-steps { list-style: none; margin: 6px 0 14px; padding: 0; display: flex; gap: 18px; font-size: 13px; color: var(--rg-muted); }
.rg-steps .rg-on { color: var(--rg-primary); font-weight: 700; }
.rg-form { display: flex; flex-direction: column; gap: 14px; }
.rg .rg-field label, .rg .rg-source label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 4px; text-transform: none; letter-spacing: normal; }
.rg .form-control { border: 1px solid #B9CDD3; border-radius: 8px; min-height: 40px; max-width: none; }
.rg-sources { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.rg-sources legend { font-weight: 700; font-size: 15px; margin-bottom: 6px; grid-column: 1 / -1; }
.rg-source { border: 1px solid var(--rg-line); border-radius: 10px; padding: 12px 14px; }
.rg-people { max-height: 220px; overflow: auto; border: 1px solid var(--rg-line); border-radius: 10px; margin-top: 8px; }
.rg-person { display: flex !important; gap: 10px; align-items: center; padding: 8px 12px; border-bottom: 1px solid #EEF3F5; font-weight: 400 !important; margin: 0 !important; cursor: pointer; }
.rg-person[hidden] { display: none !important; }
.rg-person span { color: var(--rg-muted); }
.rg-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.rg-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.rg-count { background: var(--rg-ground); border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; }
.rg-count strong { font-family: Roboto, sans-serif; font-size: 26px; line-height: 1.1; }
.rg-count span { font-weight: 600; }
.rg-count em { font-style: normal; font-size: 12px; color: var(--rg-muted); }
.rg-count-go { background: #E7F4EC; } .rg-count-go strong { color: #2E7D47; }
.rg-count-warn { background: #FFF6E5; color: #5A3E00; }
.rg-h4 { margin: 4px 0 6px; font-size: 15px; font-weight: 700; }
.rg-list { list-style: none; margin: 0 0 12px; padding: 0; border: 1px solid var(--rg-line); border-radius: 10px; max-height: 240px; overflow: auto; }
.rg-list li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #EEF3F5; font-size: 14px; }
.rg-list li:last-child { border-bottom: 0; }
.rg-why { font-size: 12px; color: var(--rg-muted); white-space: nowrap; }
.rg-unmatched { background: var(--rg-ground); border-radius: 10px; padding: 10px 14px; font-size: 13px; }
.rg-include { display: flex; gap: 8px; align-items: center; font-size: 13px; text-transform: none; }

.rg-prompt { margin: 0 0 16px; border-color: #A9CED6; }
.rg-prompt > p { margin: 4px 0 12px; }
.rg-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.rg-choice { display: flex; flex-direction: column; gap: 4px; text-align: left; border: 1px solid var(--rg-line); border-radius: 10px; padding: 12px 14px; background: #fff; color: var(--rg-ink); text-decoration: none; font: inherit; cursor: pointer; }
.rg-choice:hover { background: var(--rg-ground); color: var(--rg-ink); }
.rg-choice span { font-size: 13px; color: var(--rg-muted); }
.rg-choice em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--rg-primary); }
.rg-choice-main { border: 2px solid var(--rg-primary); }
.rg-prompt .rg-note { margin: 10px 0 0; }
.rg-page-note { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding: 10px 14px; background: #FFF6E5; border: 1px solid #E8CF9C; border-radius: 10px; color: #5A3E00; font-size: 13px; }
@media (max-width: 640px) { .rg-counts { grid-template-columns: minmax(0, 1fr); } }

/* ── Webhook log (admin) ─────────────────────────────────────────────────
   Uses the shared es_list_* controls; only the row semantics are local.
   Custom names rather than Bootstrap's — the theme overrides .badge. */
.webhook-log-table {
    font-size: 13px;
}

.webhook-log-when,
.webhook-log-took,
.webhook-log-status {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: #6b7280;
}

.webhook-log-request code {
    font-size: 11px;
    background: #eef1f5;
    padding: 1px 5px;
    border-radius: 4px;
}

.webhook-log-url {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    word-break: break-all;
}

.webhook-log-ip {
    display: inline-block;
    margin-left: 6px;
    font-size: 11px;
    color: #9aa1ab;
}

/* The three verdicts. 'skip' is NOT a failure state — it means the
   integration declared no verifier yet — so it must not be red, or every
   integration looks broken before it has been given a secret. */
.es_probe_pass,
.es_probe_fail,
.es_probe_skip {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.es_probe_pass { background: #dff3e4; color: #1b6b36; }
.es_probe_fail { background: #fbe0e0; color: #96222a; }
.es_probe_skip { background: #e9ecf1; color: #4b5563; }

.webhook-log-flag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
    background: #fdf1d6;
    color: #8a6100;
}

.webhook-log-door {
    font-size: 11px;
    color: #6b7280;
}

/* A legacy door is a URL a provider had on file before the core endpoint
   existed. Called out because "these have stopped arriving" is the signal
   that the old URL is safe to retire. */
.webhook-log-door-legacy {
    color: #8a6100;
    font-weight: 600;
}

.webhook-log-detail {
    padding-top: 0 !important;
    border-top: none !important;
    font-size: 12px;
    color: #6b7280;
}

.webhook-log-detail-row td {
    border-top: none !important;
}

.webhook-log-payload {
    display: block;
    margin-top: 4px;
    padding: 6px 8px;
    background: #f7f8fa;
    border: 1px solid #e9ecf1;
    border-radius: 4px;
    font-size: 11px;
    word-break: break-all;
    max-height: 6em;
    overflow: auto;
}

.webhook-log-mode {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.webhook-log-mode-log     { background: #fdf1d6; color: #8a6100; }
.webhook-log-mode-enforce { background: #dff3e4; color: #1b6b36; }
.webhook-log-mode-off     { background: #fbe0e0; color: #96222a; }

/* ── Scheduled work (admin) ──────────────────────────────────────────────
   The heartbeat is the part that earns this screen: the failure mode of
   cron is SILENCE, so "we have not heard from it" has to be as loud as an
   error. Three states, and "never" is its own — on a fresh install it means
   the crontab is not set up yet, which is a different fix from "it stopped". */
.cron-mode {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.cron-mode-run { background: #dff3e4; color: #1b6b36; }
.cron-mode-dry { background: #fdf1d6; color: #8a6100; }
.cron-mode-off { background: #fbe0e0; color: #96222a; }

/* The master switch. Deliberately louder than the per-job Pause button below
   it: one stops a single job, this stops everything. */
.cron-switch h4 { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.cron-switch-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 0; }
.cron-switch-warn { margin: 12px 0 0; }

.cron-heartbeat {
    padding: 12px 16px;
    border-left: 4px solid #ccc;
    border-radius: 3px;
    margin: 16px 0;
    background: #f6f7f8;
    line-height: 1.5;
}

.cron-heartbeat-ok    { border-left-color: #1b6b36; background: #f2faf5; }
.cron-heartbeat-stale { border-left-color: #b8860b; background: #fdf8ec; }
.cron-heartbeat-never { border-left-color: #96222a; background: #fdf3f3; }

.cron-panel {
    border: 1px solid #dfe3e6;
    border-radius: 4px;
    padding: 14px 16px;
    margin: 12px 0 4px;
    background: #fbfcfd;
}

.cron-panel h4 { margin-top: 0; font-size: 15px; }

.cron-url {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
}

.cron-url-text {
    flex: 1 1 420px;
    min-width: 0;
    padding: 8px 10px;
    background: #2f3439;
    color: #e6edf3;
    border-radius: 3px;
    font-size: 12.5px;
    /* The URL is long and must not be silently clipped: somebody is going to
       copy it by eye into a hosting panel. */
    overflow-wrap: anywhere;
}

/* Masked by default so the page can be shown or screenshotted without leaking
   a live credential. Not a security control — both spellings are in the DOM. */
.cron-url-hidden { display: none; }

.cron-note { font-size: 12.5px; color: #5a6570; margin: 6px 0 10px; }

.cron-warn {
    padding: 10px 14px;
    border-left: 4px solid #b8860b;
    background: #fdf8ec;
    border-radius: 3px;
    font-size: 13.5px;
    line-height: 1.5;
}

.cron-section-heading { margin: 26px 0 8px; font-size: 15px; }

.cron-key code,
.cron-target {
    display: block;
    font-size: 11.5px;
    color: #6b7680;
    font-weight: normal;
}

.cron-source,
.cron-cadence,
.cron-when,
.cron-door { font-size: 12.5px; color: #4a5560; white-space: nowrap; }

.cron-took { font-size: 11.5px; color: #4A626A; }

.cron-state {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: #eef1f3;
    color: #4a5560;
}

/* Only the states that mean somebody should look are coloured. 'scheduled' is
   the resting state of a healthy job and gets no colour at all, so a page of
   working jobs reads as calm rather than as a wall of green. */
.cron-state-badge-due        { background: #e4edf7; color: #24548c; }
.cron-state-badge-running    { background: #e4edf7; color: #24548c; }
.cron-state-badge-stale      { background: #fbe0e0; color: #96222a; }
.cron-state-badge-failing    { background: #fbe0e0; color: #96222a; }
.cron-state-badge-broken     { background: #fbe0e0; color: #96222a; }
.cron-state-badge-disabled   { background: #eef1f3; color: #4A626A; }
.cron-state-badge-undeclared { background: #f0e6f5; color: #6b3f8a; }

.cron-fails { font-size: 11.5px; color: #96222a; font-weight: 600; margin-left: 4px; }

.cron-actions { white-space: nowrap; }

.cron-detail-row > .cron-detail {
    padding-top: 0;
    border-top: 0;
    font-size: 12.5px;
}

.cron-problem { color: #96222a; margin-bottom: 4px; }

/* ── Recurring tasks (admin) ─────────────────────────────────────────────
   The cadence preview is the part that earns its place: 'monthly 31' clamps
   to the end of a short month rather than rolling into the next one, and
   nobody would guess that from the words. Showing the next three dates as
   you type turns a silent misconfiguration into an obvious one. */
.recur-preview {
    margin: -6px 0 14px;
    padding: 7px 10px;
    border-radius: 3px;
    background: #f6f7f8;
    font-size: 12.5px;
    line-height: 1.5;
    min-height: 2.2em;
}

.recur-preview-good { color: #1b6b36; }
.recur-preview-bad  { color: #96222a; }

.recur-row.recur-paused  { opacity: .62; }
.recur-row.recur-broken  { background: #fdf3f3; }

.cron-result {
    display: block;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: #f6f7f8;
    color: #3c454e;
    padding: 6px 8px;
    border-radius: 3px;
    font-size: 11.5px;
    max-height: 9em;
    overflow-y: auto;
}

/* ── API credentials (admin) ─────────────────────────────────────────────
   Cards rather than a table: each integration has a different set of facts
   worth showing, and a table would be mostly empty cells. */
.integration-cards {
    display: grid;
    /* min(): a card never asks for more than the column has (390px phones) */
    grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
    gap: 16px;
    align-items: start;
}

.integration-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 14px 16px;
    background: #fff;
}

.integration-card-problem {
    border-color: #f0c2c2;
    background: #fffafa;
}

.integration-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.integration-card-head h4 {
    margin: 0;
    font-size: 15px;
}

.integration-kind {
    font-size: 11px;
    color: #6b7280;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.integration-problem {
    font-size: 12px;
    color: #96222a;
    background: #fbe0e0;
    padding: 8px 10px;
    border-radius: 6px;
}

.integration-facts {
    margin: 0 0 12px;
    font-size: 13px;
}

.integration-facts dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-top: 10px;
}

.integration-facts dd {
    margin: 2px 0 0;
}

/* A credential path is long and absolute; wrapping beats a scrollbar in a
   card this size. */
.integration-path {
    display: inline-block;
    font-size: 11px;
    word-break: break-all;
    background: #f7f8fa;
    padding: 2px 6px;
    border-radius: 4px;
}

.integration-meta,
.integration-hint {
    font-size: 11px;
    color: #6b7280;
}

.integration-hint {
    margin-top: 4px;
}

.integration-detail {
    margin-top: 4px;
    font-size: 12px;
    color: #4b5563;
}

.integration-actions {
    border-top: 1px solid #eef1f5;
    padding-top: 10px;
}

.integration-result:not(:empty) {
    margin-top: 10px;
}

.integration-result .alert {
    margin-bottom: 0;
    font-size: 13px;
}

/* ── Shared credentials on the API Credentials cards ─────────────────────
   Values are never rendered, so there is nothing here to mask — only the
   state and an entry field. */
.integration-secrets {
    border-top: 1px solid #eef1f5;
    padding-top: 10px;
    margin-bottom: 10px;
}

.integration-secrets > dt {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    margin-bottom: 6px;
}

.integration-secret + .integration-secret {
    margin-top: 12px;
}

.integration-secret label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 2px;
}

.integration-required {
    font-size: 10px;
    font-weight: 400;
    color: #8a6100;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.integration-secret-state {
    display: block;
    margin-bottom: 4px;
}

.integration-secret-entry {
    display: flex;
    gap: 6px;
}

.integration-secret-input {
    flex: 1 1 auto;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

/* --------------------------------------------------------------------------
   "Back to Modules" — Modules::admin_return_link()

   The return half of a module's `admin_link` declaration. Following that link
   leaves /admin entirely, taking the admin bar and left nav with it, so this
   is the only way back that is not the browser button. Styled quietly: it is
   an escape hatch, not a call to action, and it sits above the module's own
   admin nav rather than competing with it.
   -------------------------------------------------------------------------- */

.es_admin_return {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .85em;
    color: #4c5c55;
    text-decoration: none;
    padding: 3px 0;
    margin-bottom: 10px;
}

.es_admin_return:hover,
.es_admin_return:focus {
    color: #1b6b60;
    text-decoration: underline;
}

.es_admin_return i {
    font-size: .9em;
}

/* A repeating task, in a list and on its form. Quiet: it is a property of the
   task, not a warning about it. */
.task-repeats { color: #4A626A; font-size: 11px; margin-left: 5px; }

.task-repeats-note {
    margin: 6px 0 12px;
    padding: 8px 10px;
    background: #f6f7f8;
    border-left: 3px solid #cbd4c9;
    border-radius: 3px;
    font-size: 12.5px;
    color: #4a5560;
}

/* The Repeating tab in the Tasks module. A list of commitments rather than of
   work, so it is quieter than a task list — nothing here is due. */
.recurring-list { list-style: none; margin: 0; padding: 0; }

.recurring-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid #e3e7ea;
    border-radius: 4px;
    margin-bottom: 8px;
    background: #fff;
}

.recurring-item.recurring-paused { opacity: .62; }
.recurring-item.recurring-broken { border-color: #e6c4c4; background: #fdf6f6; }

.recurring-main { flex: 1 1 320px; min-width: 0; }
.recurring-meta { font-size: 12.5px; color: #6b7680; margin-top: 3px; }
.recurring-actions { white-space: nowrap; }
.recur-summary { font-size: 12.5px; margin-top: -6px; }

/* ------------------------------------------------------------------------
   Admin bar: pending core migrations

   Rendered by Admin::get_nav_links() only when there ARE some, so this styles
   an item that is absent on an up-to-date database rather than a permanent
   piece of furniture nobody reads.

   Amber rather than red: the site is working, and somebody has a button to
   press. Red is for what is already broken.
   ------------------------------------------------------------------------ */
.nav-flag-pending-updates {
    color: #7a4a00 !important;
    background-color: #ffe9b8;
    border-radius: 4px;
    font-weight: 700;
}

.nav-flag-pending-updates:hover,
.nav-flag-pending-updates:focus {
    color: #4a2c00 !important;
    background-color: #ffdb8f;
}

/* the icon carries the meaning for anyone who cannot see the colour */
.nav-flag-pending-updates i {
    margin-right: 4px;
}

/* ── Admin → Integrations → Mailchimp (core 2.43.0) ───────────────────────
   Module-scoped names throughout. The theme restyles .badge and .alert, so a
   status pill built from those renders differently depending on which site
   the admin is looking at. */
.mc-status {
    padding: 10px 14px;
    border-radius: 4px;
    margin-bottom: 18px;
    font-weight: 600;
}
.mc-status-ok  { background: #e3f2e8; color: #1f6b38; }
.mc-status-bad { background: #fdecea; color: #8a2019; }
.mc-status i   { margin-right: 6px; }

.mc-audience-select { display: inline-block; width: auto; min-width: 260px; margin-right: 8px; }

.mc-counts { margin: 12px 0 18px; }
.mc-count {
    display: inline-block;
    padding: 3px 12px;
    margin-right: 8px;
    border-radius: 12px;
    font-size: .9rem;
    font-weight: 600;
}
.mc-count-pending { background: #fff4e0; color: #8a5a00; }
.mc-count-sent    { background: #e3f2e8; color: #1f6b38; }
.mc-count-failed  { background: #fdecea; color: #8a2019; }

.mc-pill {
    display: inline-block;
    padding: 1px 9px;
    border-radius: 10px;
    font-size: .8rem;
    font-weight: 600;
}
.mc-pill-pending { background: #fff4e0; color: #8a5a00; }
.mc-pill-sent    { background: #e3f2e8; color: #1f6b38; }
.mc-pill-failed  { background: #fdecea; color: #8a2019; }

.mc-error { color: #8a2019; word-break: break-word; }

/* ── Forms::date_picker() wrapper (core 2.44.3) ──────────────────────────────
   Was an inline style attribute on the div, which meant no caller could
   override it — an inline declaration beats every selector short of
   !important. Same value, stated where a module's own stylesheet can win
   against it (StaffWorkflow's .sw-date-field does, to stop two pickers on one
   form sizing themselves to the length of their own verbiage). */
.date_picker_field {
    display: inline-block;
}

/* flatpickr makes its input readonly (the calendar is the way in), and
   Bootstrap greys a readonly .form-control, so every date field looked
   switched off (core 2.63.8). It is a field you tap: it looks like one. */
.date_picker_field input.flatpickr-input[readonly] {
    background-color: #ffffff;
    cursor: pointer;
}

/* Shown by es_session_ended() in core_js.js when the session ends while a
   form on the page has been typed in: a reload would lose it, so the page
   says so and leaves the reload to the user. */
.es_signed_out_notice {
    position: sticky;
    top: 0;
    z-index: 2000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 16px;
    padding: 10px 16px;
    background: #8a1c1c;
    color: #ffffff;
    font-weight: 600;
    text-align: center;
}

/* =========================================================================
   ADMIN SCREENS (core 2.71.0)

   One look for every section in /admin, in the intranet's palette: the banner
   Admin::wrap_in_admin_shell() draws from #[AdminSection], SimpleCRUD's
   compact lists and grouped forms, and the shared table, intro and empty-state
   rules the section templates already use. Everything is scoped under
   .admin-shell, which is how these win over the theme's own .es-header /
   .es-list rules (loaded after this file) without !important — and why a
   module's own pages are untouched.
   ========================================================================= */

.admin-shell {
    --adm-ink: #12313B;
    --adm-muted: #4A626A;
    --adm-line: #D5E3E7;
    --adm-ground: #F3F7F8;
    --adm-primary: #105460;
    --adm-tint: #E4F1F4;
    --adm-live: #2E7D47;
    --adm-warn-bg: #FFF6E5;
    --adm-warn-ink: #5A3E00;
    --adm-danger: #A3362A;
    color: var(--adm-ink);
}

/* A section with no left nav (a group of one) still gets the banner. */
.admin-shell.admin-shell-solo {
    grid-template-columns: minmax(0, 1fr);
}

/* ---- the banner -------------------------------------------------------- */

.admin-shell .adm-banner {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 2px 0 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--adm-line);
}

.admin-shell .adm-banner-icon {
    flex: 0 0 40px;
    height: 40px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: var(--adm-tint);
    color: var(--adm-primary);
    font-size: 17px;
}

.admin-shell .adm-banner-text {
    min-width: 0;
}

.admin-shell .adm-banner-title {
    font-family: Roboto, "Open Sans", sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    color: var(--adm-ink);
}

.admin-shell .adm-banner-title a {
    color: var(--adm-primary);
    text-decoration: none;
}

.admin-shell .adm-banner-title a:hover {
    text-decoration: underline;
}

.admin-shell .adm-banner-step {
    color: var(--adm-muted);
    font-weight: 400;
}

.admin-shell .adm-banner-desc {
    margin: 4px 0 0;
    font-size: 14px;
    color: var(--adm-muted);
    max-width: 72ch;
}

/* ---- the side nav, in the palette --------------------------------------- */

.admin-shell .admin-side-nav {
    background: var(--adm-ground);
    border-color: var(--adm-line);
}

.admin-shell .admin-side-nav-heading {
    color: var(--adm-muted);
}

.admin-shell .admin-side-nav-link {
    color: var(--adm-ink);
}

.admin-shell .admin-side-nav-link:hover {
    background: var(--adm-tint);
    color: var(--adm-ink);
}

.admin-shell .admin-side-nav-link.active {
    background: #fff;
    color: var(--adm-primary);
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--adm-primary), 0 1px 2px rgba(18, 49, 59, 0.08);
}

/* ---- intros the section templates already carry ------------------------- */

.admin-shell .adm-body .box-receipt-intro,
.admin-shell .adm-body .admin-mod-intro {
    color: var(--adm-muted);
    max-width: 75ch;
    font-size: 14px;
}

/* ---- tables -------------------------------------------------------------- */

/* A wide table scrolls inside the content column rather than running out of
   the card (the Cron jobs table did, cutting off its last column). */
.admin-shell .adm-body .table-responsive,
.admin-shell .adm-body .adm-scroll {
    overflow-x: auto;
    /* the containing block for anything absolute inside — a .visually-hidden
       header label otherwise escapes the scroll box and widens the page */
    position: relative;
}

.admin-shell .adm-body table.table > thead > tr > th {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--adm-muted);
    background: transparent;
    border-top: 0;
    border-bottom: 1px solid var(--adm-line);
}

.admin-shell .adm-body table.table > tbody > tr > td,
.admin-shell .adm-body table.table > tbody > tr > th {
    border-top: 1px solid var(--adm-line);
    vertical-align: middle;
}

.admin-shell .adm-body table.table > tbody > tr:hover > td {
    background: var(--adm-ground);
}

@media (max-width: 767px) {
    .admin-shell .adm-banner-title {
        font-size: 20px;
    }
}

/* ---- shared pieces: card, count, pill, ⋯ menu ------------------------------ */

.admin-shell .adm-card {
    background: #fff;
    border: 1px solid var(--adm-line);
    border-radius: 10px;
    margin-bottom: 16px;
    overflow: visible;
}

.admin-shell .adm-card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--adm-line);
    background: var(--adm-ground);
    border-radius: 10px 10px 0 0;
}

.admin-shell .adm-card-title {
    font-family: Roboto, "Open Sans", sans-serif;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--adm-ink);
}

.admin-shell .adm-count {
    font-size: 12px;
    color: var(--adm-muted);
}

.admin-shell .adm-pill {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 9px;
    border-radius: 999px;
    background: var(--adm-tint);
    color: var(--adm-primary);
    white-space: nowrap;
}

.admin-shell .adm-pill-quiet {
    background: var(--adm-ground);
    color: var(--adm-muted);
    font-weight: 400;
}

.admin-shell .adm-pill-live {
    background: #E3F2E7;
    color: var(--adm-live);
}

.admin-shell .adm-pill-warn {
    background: var(--adm-warn-bg);
    color: var(--adm-warn-ink);
}

.admin-shell .adm-menu {
    position: relative;
    display: inline-block;
}

.admin-shell .adm-menu > summary {
    list-style: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: var(--adm-muted);
    font-size: 18px;
    line-height: 1;
}

.admin-shell .adm-menu > summary::-webkit-details-marker {
    display: none;
}

.admin-shell .adm-menu > summary:hover,
.admin-shell .adm-menu[open] > summary {
    background: var(--adm-tint);
    color: var(--adm-ink);
}

.admin-shell .adm-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    min-width: 150px;
    background: #fff;
    border: 1px solid var(--adm-line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(18, 49, 59, 0.14);
    padding: 4px;
}

.admin-shell .adm-menu-panel a {
    display: block;
    padding: 7px 10px;
    border-radius: 5px;
    color: var(--adm-ink);
    text-decoration: none;
    font-size: 14px;
}

.admin-shell .adm-menu-panel a:hover {
    background: var(--adm-ground);
}

.admin-shell .adm-menu-panel a.adm-menu-danger {
    color: var(--adm-danger);
}

/* ---- Roles ------------------------------------------------------------- */

.admin-shell .adm-roles-filter {
    flex: 1 1 260px;
    max-width: 420px;
}

.admin-shell .adm-roles-everyone {
    color: var(--adm-muted);
    font-size: 14px;
    margin: 0 0 16px;
}

.admin-shell .adm-roles-everyone i {
    color: var(--adm-primary);
    margin-right: 4px;
}

.admin-shell .adm-roles-groups {
    columns: 2 380px;
    column-gap: 16px;
}

.admin-shell .adm-roles-group {
    break-inside: avoid;
    display: inline-block;
    width: 100%;
}

.admin-shell .adm-roles-group[hidden] {
    display: none;
}

.admin-shell .adm-roles-list {
    list-style: none;
    margin: 0 !important;
    padding: 4px 0;
}

.admin-shell .adm-roles-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
}

.admin-shell .adm-roles-row + .adm-roles-row {
    border-top: 1px solid var(--adm-ground);
}

.admin-shell .adm-roles-row[hidden] {
    display: none;
}

.admin-shell .adm-roles-name {
    font-weight: 600;
    color: var(--adm-primary);
    overflow-wrap: break-word;
    min-width: 0;
}

.admin-shell .adm-roles-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ---- plain admin tables (API keys and the like) ------------------------- */

.admin-shell table.adm-table {
    width: 100%;
    margin: 0;
}

.admin-shell table.adm-table td {
    font-size: 14px;
}

.admin-shell .adm-strong-link {
    font-weight: 600;
    color: var(--adm-primary);
}


/* A ⋯ menu item that is a button (it opens a modal) looks like its links. */
.admin-shell .adm-menu-panel button {
    display: block;
    width: 100%;
    text-align: left;
    padding: 7px 10px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--adm-ink);
    font-size: 14px;
}

.admin-shell .adm-menu-panel button:hover {
    background: var(--adm-ground);
}

.admin-shell .adm-menu-panel .adm-menu-danger {
    color: var(--adm-danger);
}

/* Header rows the section templates kept for their actions (Recurring Tasks'
   add button, the people list's Add): actions to the right, no gap above. */
.admin-shell .adm-body > div > .box-receipt-header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

/* Quick Links' module actions: the Hide/Show button keeps to one line, and
   the section heading matches the cards' titles. */
.admin-shell .es-ql-admin-table td:last-child,
.admin-shell .es-ql-admin-table td:last-child .btn {
    white-space: nowrap;
}

.admin-shell #es_ql_admin_actions h3 {
    font-family: Roboto, "Open Sans", sans-serif;
    font-size: 17px;
    font-weight: 600;
    margin: 28px 0 6px;
    color: var(--adm-ink);
}

.admin-shell #es_ql_admin_actions > p,
.admin-shell #es_ql_admin_actions .text-muted {
    color: var(--adm-muted);
    font-size: 14px;
}

/* People: the name, title and roles get the room; the dates stay narrow. */
.admin-shell .people-table td:first-child {
    min-width: 240px;
    width: 40%;
}

.admin-shell .people-table td.people-date,
.admin-shell .people-table td.people-actions {
    white-space: nowrap;
    font-size: 13px;
}

.admin-shell .people-table .people-roles {
    font-size: 12px;
    color: var(--adm-muted);
}

/* ---- phones (core 2.71.1) --------------------------------------------------
   Measured in a 390px frame. The page card's padding and its column's padding
   stacked to 41px a side; a list's secondary columns pushed People and
   PageBuilder 300–480px past the screen; SimpleCRUD's five-column grid rows
   squeezed paths into one-word slivers. */
@media (max-width: 767px) {
    #main:has(.admin-shell) {
        padding-left: 14px;
        padding-right: 14px;
    }

    #main:has(.admin-shell) > .col-sm-12 {
        padding-left: 0;
        padding-right: 0;
    }

    .admin-shell .adm-banner {
        gap: 10px;
        margin-bottom: 14px;
    }

    .admin-shell .adm-banner-icon {
        flex-basis: 34px;
        height: 34px;
        font-size: 15px;
    }

    .admin-shell .sc-toolbar > .btn,
    .admin-shell .sc-toolbar > a.btn {
        flex: 1 1 auto;
    }

    /* Roles: the name on its own line, the count and actions beneath it. */
    .admin-shell .adm-roles-row {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: 6px;
        padding: 9px 14px;
    }

    .admin-shell .adm-roles-name {
        grid-column: 1 / -1;
    }

    .admin-shell .adm-roles-row .adm-pill {
        justify-self: start;
    }

    /* People: the name (which opens the profile, email and all), its state
       and Edit. Email and the two dates are on the profile. */
    .admin-shell .people-table th:nth-child(2),
    .admin-shell .people-table td:nth-child(2),
    .admin-shell .people-table th:nth-child(3),
    .admin-shell .people-table td:nth-child(3),
    .admin-shell .people-table th:nth-child(4),
    .admin-shell .people-table td:nth-child(4) {
        display: none;
    }

    .admin-shell .people-table td:first-child {
        min-width: 0;
        width: auto;
    }

    /* PageBuilder: title, address and actions; the menu path and module are
       on the edit form. */
    .admin-shell .core_pages_table th:nth-child(2),
    .admin-shell .core_pages_table td:nth-child(2),
    .admin-shell .core_pages_table th:nth-child(4),
    .admin-shell .core_pages_table td:nth-child(4) {
        display: none;
    }

    /* Navigation: the item, whether it shows, order and actions; where it
       points is on its edit form. (No scroll wrapper here: it would clip
       the row's ⋯ menu.) */
    .admin-shell .admin-nav-table th:nth-child(2),
    .admin-shell .admin-nav-table td:nth-child(2) {
        display: none;
    }

    /* Modules: what a module carries is detail; Turn off and Re-check are
       what a phone needs in view. */
    /* Modules only: Themes shares the class with four columns, its fourth
       being Turn off — so match the five-column table. */
    .admin-shell .admin-mod-table:has(thead th:nth-child(5)) th:nth-child(4),
    .admin-shell .admin-mod-table:has(thead th:nth-child(5)) td:nth-child(4) {
        display: none;
    }

    .admin-shell .admin-mod-table td:last-child {
        white-space: normal;
    }

    /* The folder a module or theme lives in is the widest thing in its row
       and the least needed on a phone. */
    .admin-shell .admin-mod-table .admin-mod-dir {
        display: none;
    }

    .admin-shell .admin-mod-table td:last-child > :is(a, button, form, .btn) {
        display: block;
        width: 100%;
        margin: 3px 0;
    }

    .admin-shell .admin-mod-table td,
    .admin-shell .admin-mod-table td * {
        font-size: 13px;
    }

    /* Themes (the four-column table): the button already says the state —
       "Turn off" on a theme that is on — so its On column goes. */
    .admin-shell .admin-mod-table:not(:has(thead th:nth-child(5))) th:nth-child(2),
    .admin-shell .admin-mod-table:not(:has(thead th:nth-child(5))) td:nth-child(2) {
        display: none;
    }

    .admin-shell .admin-mod-table td:last-child .btn {
        white-space: nowrap;
        padding: 4px 8px;
    }

    .admin-shell .admin-mod-table td:last-child :not(.btn) {
        white-space: normal;
    }

    .admin-shell .core_pages_table code {
        overflow-wrap: break-word;
    }

    /* Bootstrap's 12px cell padding is a lot of a 360px table. */
    .admin-shell .adm-body table.table > :is(thead, tbody) > tr > :is(td, th) {
        padding: 8px 6px;
    }

    .admin-shell .adm-body table.table > :is(thead, tbody) > tr > :is(td, th):first-child {
        padding-left: 0;
    }

    .admin-shell .adm-body table.table > :is(thead, tbody) > tr > :is(td, th):last-child {
        padding-right: 0;
    }

}

.admin-shell .core-pages-search {
    margin: 12px 0 4px;
    max-width: 420px;
}

/* =========================================================================
   ROLE CHECKBOXES, grouped by module (Forms::role_checkbox_groups(), core
   2.71.2). The look of the profile's Roles card: each group a short heading
   with how many are ticked, each role a pill that tints when chosen. Global,
   not admin-scoped: the page form and module forms (AssetManager) use it too.
   ========================================================================= */

.es-role-picker {
    margin: 4px 0 14px;
}

.es-role-picker-label {
    font-weight: 700;
    margin-bottom: 8px;
}

/* Seventeen groups in one column is a long scroll; on a wide form they flow
   into columns, a group never split across two. */
.es-role-groups {
    columns: 3 230px;
    column-gap: 20px;
}

.es-role-group {
    border: 0;
    padding: 0;
    margin: 0 0 12px;
    min-width: 0;
    break-inside: avoid;
}

.es-role-group legend {
    float: none;
    width: auto;
    font-size: 13px;
    font-weight: 700;
    color: #12313B;
    margin: 0 0 6px;
    padding: 0;
    border: 0;
    text-transform: none;
    letter-spacing: 0;
}

.es-role-held {
    font-weight: 400;
    color: #4A626A;
}

.es-role-boxes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
}

.es-role-picker label.es-role-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 5px 12px;
    border: 1px solid #D5E3E7;
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #12313B;
    cursor: pointer;
}

.es-role-picker label.es-role-check input {
    margin: 0;
    position: static;
}

.es-role-picker label.es-role-check:has(input:checked) {
    background: #E4F1F4;
    border-color: #A9CED6;
}

.es-role-picker label.es-role-check:has(input:focus-visible) {
    outline: 2px solid #105460;
    outline-offset: 2px;
}

.es-role-none {
    color: #4A626A;
    font-size: 13px;
}

/* =========================================================================
   PAGE EDITOR (core 2.72.0): PageBuilder › New and › Edit.
   PageEditor::chooser() (.pe-kinds) and PageEditor::form() (.pe). Writing on
   the left, Status / Who can see it / In the menu / History on the right, and
   a save bar that stays in view at the bottom of the window.
   ========================================================================= */

.admin-shell .pe-kind-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 16px;
}

.admin-shell a.pe-kind {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: #fff;
    border: 1px solid var(--adm-line);
    border-radius: 14px;
    color: var(--adm-ink);
    text-decoration: none;
    transition: border-color 0.12s, box-shadow 0.12s;
}

.admin-shell a.pe-kind:hover,
.admin-shell a.pe-kind:focus-visible {
    border-color: var(--adm-primary);
    box-shadow: 0 0 0 1px var(--adm-primary);
}

.admin-shell .pe-kind-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--adm-tint);
    color: var(--adm-primary);
    display: grid;
    place-items: center;
    font-size: 19px;
}

.admin-shell .pe-kind-title {
    font-family: Roboto, "Open Sans", sans-serif;
    font-size: 19px;
    font-weight: 700;
}

.admin-shell .pe-kind-blurb,
.admin-shell .pe-kind-like {
    font-size: 14px;
    line-height: 1.5;
    color: var(--adm-muted);
}

.admin-shell .pe-kind-like strong {
    color: var(--adm-ink);
}

.admin-shell .pe-kind-foot {
    margin: 18px 0 0;
    font-size: 14px;
    color: var(--adm-muted);
}

/* ---- the editor ---------------------------------------------------------- */

.admin-shell .pe-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin-bottom: 18px;
    font-size: 14px;
}

.admin-shell .pe-linkbtn {
    border: 0;
    background: none;
    padding: 0;
    color: var(--adm-primary);
    text-decoration: underline;
    font-size: 14px;
    cursor: pointer;
}

.admin-shell .pe-kind-menu > summary {
    width: auto;
    height: auto;
    display: inline;
    padding: 0;
    font-size: 14px;
    color: var(--adm-primary);
    text-decoration: underline;
    background: none;
}

.admin-shell .pe-kind-menu[open] > summary,
.admin-shell .pe-kind-menu > summary:hover {
    background: none;
    color: var(--adm-ink);
}

.admin-shell .pe-kind-menu .adm-menu-panel {
    left: 0;
    right: auto;
    min-width: 260px;
}

.admin-shell .pe-kind-menu-note {
    margin: 6px 10px 4px;
    font-size: 12px;
    color: var(--adm-muted);
}

.admin-shell .pe-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 24px;
    align-items: start;
}

.admin-shell .pe-main {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.admin-shell .pe-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border: 0;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.admin-shell .pe-field > label,
.admin-shell .pe-field > legend {
    font-size: 13px;
    font-weight: 700;
    color: var(--adm-ink);
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
    float: none;
    width: auto;
}

.admin-shell .pe input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--adm-line);
    border-radius: 10px;
    font-size: 15px;
    color: var(--adm-ink);
    background: #fff;
}

.admin-shell .pe input.pe-title-input {
    font-family: Roboto, "Open Sans", sans-serif;
    font-size: 24px;
    font-weight: 700;
}

.admin-shell .pe-url {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--adm-line);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.admin-shell .pe-url-site {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--adm-ground);
    border-right: 1px solid var(--adm-line);
    color: var(--adm-muted);
    font-size: 14px;
    white-space: nowrap;
}

.admin-shell .pe .pe-url input[type="text"] {
    border: 0;
    border-radius: 0;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 14px;
    min-width: 0;
}

.admin-shell .pe-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

.admin-shell .pe-check input {
    width: 18px;
    height: 18px;
    margin: 0;
}

.admin-shell .pe-help {
    display: block;
    margin: 0;
    font-size: 13px;
    color: var(--adm-muted);
    font-weight: 400;
}

.admin-shell .pe-help.pe-ok {
    color: var(--adm-live);
}

.admin-shell .pe-help.pe-warn {
    color: var(--adm-warn-ink);
}

.admin-shell .pe-muted {
    color: var(--adm-muted);
    font-weight: 400;
}

/* the app card */
.admin-shell .pe-app {
    border: 1px solid var(--adm-line);
    border-radius: 12px;
    overflow: hidden;
}

.admin-shell .pe-app-head {
    padding: 14px 18px;
    background: var(--adm-ground);
    border-bottom: 1px solid var(--adm-line);
}

.admin-shell .pe-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--adm-muted);
}

.admin-shell .pe-app-title {
    font-family: Roboto, "Open Sans", sans-serif;
    font-size: 20px;
    font-weight: 700;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.admin-shell .pe-app-ver {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: var(--adm-muted);
}

.admin-shell .pe-app-body {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-shell .pe-app-roles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    font-size: 13px;
}

.admin-shell .pe-app-roles-label {
    font-weight: 700;
}

/* layout: two drawn choices */
.admin-shell .pe-layout-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.admin-shell .pe-layout-opt {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 8px 10px;
    padding: 12px;
    border: 1px solid var(--adm-line);
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}

.admin-shell .pe-layout-opt:has(input:checked) {
    border-color: var(--adm-primary);
    box-shadow: 0 0 0 1px var(--adm-primary);
}

.admin-shell .pe-layout-name {
    font-weight: 600;
}

.admin-shell .pe-layout-sketch {
    grid-column: 1 / -1;
    height: 88px;
    border-radius: 8px;
    background: var(--adm-ground);
    border: 1px solid var(--adm-line);
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    box-sizing: border-box;
}

.admin-shell .pe-sk-h {
    height: 9px;
    width: 45%;
    background: var(--adm-ink);
    border-radius: 3px;
}

.admin-shell .pe-sk-p {
    height: 6px;
    width: 80%;
    background: #A9BBC0;
    border-radius: 3px;
}

.admin-shell .pe-sk-app {
    flex-grow: 1;
    border-radius: 6px;
    background: var(--adm-tint);
    color: var(--adm-primary);
    font-size: 12px;
    font-weight: 700;
    display: grid;
    place-items: center;
}

/* the side cards */
.admin-shell .pe-side {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.admin-shell .pe-card {
    border: 1px solid var(--adm-line);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    background: #fff;
}

.admin-shell .pe-card-title {
    font-family: Roboto, "Open Sans", sans-serif;
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    padding: 0;
    float: none;
    width: auto;
    color: var(--adm-ink);
    text-transform: none;
    letter-spacing: 0;
}

.admin-shell .pe-card .adm-pill {
    align-self: flex-start;
}

.admin-shell .pe-vis-opt {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 0 -8px;
    padding: 7px 8px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

.admin-shell .pe-vis-opt:has(input:checked) {
    background: var(--adm-tint);
}

.admin-shell .pe-vis-opt input {
    margin-top: 3px;
}

.admin-shell .pe-vis-opt > span {
    display: flex;
    flex-direction: column;
}

.admin-shell .pe-vis-roles .es-role-groups {
    columns: 1;
}

/* the menu fields CorePages builds, made to fit a side card (the fieldset
   carries an inline border and padding, hence the !important) */
.admin-shell .pe-nav fieldset,
.admin-shell .pe-nav .form-group {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 0 8px !important;
}

.admin-shell .pe-nav .single-checkbox {
    border: 0;
    padding: 0;
    margin: 0 0 6px;
}

.admin-shell .pe-nav label,
.admin-shell .pe-side .es-role-picker label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
}

.admin-shell .pe-nav label {
    font-weight: 600;
}

.admin-shell .pe-nav select,
.admin-shell .pe-nav input[type="text"] {
    width: 100%;
    font-size: 14px;
}

.admin-shell .pe-nav legend {
    display: none;
}

.admin-shell .pe-history-list {
    list-style: none;
    margin: 0 !important;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-shell .pe-history-list li {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
}

.admin-shell .pe-history-what {
    display: flex;
    flex-direction: column;
}

/* the save bar */
.admin-shell .pe-savebar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 22px 0 0;
    padding: 12px 0;
    background: #fff;
    border-top: 1px solid var(--adm-line);
    box-shadow: 0 -8px 14px -10px rgba(18, 49, 59, 0.25);
}

.admin-shell .pe-savebar-spacer {
    flex-grow: 1;
}

.admin-shell .pe-dirty {
    font-size: 13px;
    color: var(--adm-warn-ink);
    background: var(--adm-warn-bg);
    padding: 5px 12px;
    border-radius: 999px;
}

.admin-shell .pe-dirty[hidden] {
    display: none;
}

/* an old version, in its modal */
.pe-rev-meta {
    color: #4A626A;
    font-size: 14px;
}

/* Compare (core 2.72.2): two tabs made of radios, so no script is needed in
   a modal. The panel after the checked radio's label pair shows. */
.pe-rev-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0 4px;
    margin-bottom: 14px;
}

.pe-rev-tab-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pe-rev-tab {
    padding: 8px 14px;
    border-bottom: 2px solid transparent;
    font-size: 14px;
    font-weight: 600;
    color: #4A626A;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    margin: 0;
}

.pe-rev-tab-input:checked + .pe-rev-tab {
    color: #105460;
    border-bottom-color: #105460;
}

.pe-rev-tab-input:focus-visible + .pe-rev-tab {
    outline: 2px solid #105460;
    outline-offset: 2px;
}

.pe-rev-panel {
    display: none;
    flex: 1 1 100%;
    border-top: 1px solid #D5E3E7;
    padding-top: 12px;
}

.pe-rev-tabs > .pe-rev-tab-input:nth-of-type(1):checked ~ .pe-rev-panel-diff,
.pe-rev-tabs > .pe-rev-tab-input:nth-of-type(2):checked ~ .pe-rev-panel-was {
    display: block;
}

.pe-rev-key {
    font-size: 13px;
    color: #4A626A;
    margin: 0 0 10px;
}

.pe-rev-same {
    color: #4A626A;
}

.pe-rev-diff-title {
    font-family: Roboto, "Open Sans", sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.pe-rev-diff-label {
    display: block;
    font-family: "Open Sans", sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #4A626A;
}

.pe-rev-diff {
    border: 1px solid #D5E3E7;
    border-radius: 10px;
    padding: 12px 16px;
    max-height: 50vh;
    overflow: auto;
    font-size: 15px;
    line-height: 1.6;
}

.pe-rev-diff p {
    margin: 0 0 10px;
}

.pe-diff-same {
    color: #4A626A;
}

.pe-diff-gap {
    text-align: center;
    font-size: 12px;
    color: #4A626A;
}

/* colour AND a line, so the two are told apart without colour */
.pe-del {
    background: #FBE9E7;
    color: #8A2C21;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.pe-ins {
    background: #E3F2E7;
    color: #1F5E33;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
}

.pe-rev-body {
    border: 1px solid #D5E3E7;
    border-radius: 10px;
    padding: 14px 18px;
    max-height: 55vh;
    overflow: auto;
    margin-bottom: 14px;
}

.pe-rev-actions {
    display: flex;
    gap: 10px;
}

/* A fieldset's legend sits ON its border by default; these cards want it as
   their first line, like the h2 the other cards use. */
.admin-shell fieldset.pe-card > legend.pe-card-title {
    float: left;
    width: 100%;
    margin-bottom: 4px;
}

.admin-shell fieldset.pe-card > legend.pe-card-title + * {
    clear: both;
}

/* the module list's own label, in the app card */
.admin-shell .pe-app-select label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--adm-ink);
}

.admin-shell .pe-savebar {
    position: sticky;
}

@media (max-width: 900px) {
    .admin-shell .pe-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .admin-shell .pe-layout-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-shell .pe-url {
        flex-direction: column;
    }

    .admin-shell .pe-url-site {
        border-right: 0;
        border-bottom: 1px solid var(--adm-line);
        padding: 6px 12px;
    }

    /* One row on a phone: the two save buttons side by side. Cancel goes
       (Back and the admin nav do its job) and "Unsaved changes" rides on the
       bar's top edge instead of taking a row of its own. */
    .admin-shell .pe-savebar {
        flex-wrap: nowrap;
        gap: 8px;
        padding: 10px 0;
    }

    .admin-shell .pe-savebar > a.btn {
        display: none;
    }

    .admin-shell .pe-savebar .btn {
        flex: 1 1 0;
        min-width: 0;
        padding: 9px 6px;
        font-size: 14px;
        white-space: normal;
        line-height: 1.2;
    }

    .admin-shell .pe-savebar-spacer {
        display: none;
    }

    .admin-shell .pe-dirty {
        position: absolute;
        top: -13px;
        left: 0;
        font-size: 12px;
        padding: 3px 10px;
        box-shadow: 0 1px 3px rgba(18, 49, 59, 0.15);
    }
}

/* "Edit page" on a page its app fills (core 2.72.5): a tab hanging from the
   top edge of the theme's content card. Where the theme has a #main card the
   tab is placed against it (border-top dropped, so it reads as part of the
   card's edge); elsewhere the template's inline position applies. */
#main:has(.es-page-edit-tab) {
    position: relative;
}

#main .es-page-edit-tab {
    position: static !important;
}

#main .es-page-edit-tab > a {
    top: 0 !important;
    right: 24px !important;
    border-top: 0 !important;
}

/* A page's own title stops short of the tab, so a long one never runs under
   it (core 2.72.6: the tab is on titled pages too). The theme prints the h1
   first, directly in #main or in its column. */
#main:has(.es-page-edit-tab) > h1:first-child,
#main:has(.es-page-edit-tab) > .col-sm-12 > h1:first-child {
    padding-right: 110px;
}

.es-page-edit-tab > a:hover,
.es-page-edit-tab > a:focus-visible {
    background: #fff !important;
    text-decoration: underline !important;
}

/* On a phone a long app title can reach the right edge, under the tab. The
   card's padding cannot be relied on to make room (a module that draws its own
   panel, Helpdesk say, has it taken away), so the tab takes a short strip of
   its own instead: a small pill at the top right, in the flow. */
@media (max-width: 767px) {
    /* Only where nothing makes room for it: a page with a title keeps the tab,
       its heading stopping short of it at every width. */
    #main:not(:has(> h1:first-child, > .col-sm-12 > h1:first-child)) .es-page-edit-tab {
        position: static !important;
        height: auto !important;
        display: flex;
        justify-content: flex-end;
        margin: 0 0 6px;
    }

    #main:not(:has(> h1:first-child, > .col-sm-12 > h1:first-child)) .es-page-edit-tab > a {
        position: static !important;
        border: 1px solid #A9CED6 !important;
        border-radius: 999px !important;
    }

    #main .es-page-edit-tab > a {
        right: 14px !important;
    }

    /* on a phone the title keeps its width and starts just below the tab */
    #main:has(.es-page-edit-tab) > h1:first-child,
    #main:has(.es-page-edit-tab) > .col-sm-12 > h1:first-child {
        padding-right: 0;
        padding-top: 14px;
    }
}

/* Long links and unbroken strings in running text (core 2.72.7). A web
   address pasted into a page — https://www.mdsg.umd.edu/admin/structure/block
   on Emergency Alert — has nowhere to wrap, so on a phone it pushed the whole
   page 12px wider than the screen. break-word, not anywhere: it breaks only a
   word that would otherwise overflow, and leaves how narrow a flex or grid
   item may shrink alone. Text blocks only, so a code sample or a table keeps
   its own rules. */
p,
li,
dd,
dt,
blockquote,
figcaption,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

/* A choice in a Forms checkbox or radio list (core 2.72.8). Each was wrapped in
   a misspelled <lable>, which no browser knows, so tapping a choice's name did
   nothing: only the box itself took a tap. A real <label> fixes that, but a
   bare label here is a field heading (bold, uppercase, a block), so a choice
   is put back to plain text beside its box. */
label.es-choice {
    display: inline;
    font-weight: normal;
    text-transform: none;
    margin: 0;
    cursor: pointer;
}

/* checkboxes() puts five or more choices in equal columns across one row: on a
   phone that is three to a row, a word to a line, the box above its name. */
@media (max-width: 760px) {
    .es-choice-list > li {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 6px 10px !important;
    }
}

/* A picture floated beside the text in an editor is held to 45% of it on a
   phone, as it is on the page, or the text beside it is a word to a line. It
   changes only how it shows: the saved width is the one the author set. */
@media (max-width: 760px) {
    .note-editable img[style*="float"] {
        max-width: 45%;
    }
}

/* ── An on/off switch (core 2.77.1) ─────────────────────────────────────────
   User::account_switch(): whether an account can sign in. A track and knob
   beside the state in words; role="switch" + aria-checked carry it for a
   screen reader. Replaces a full-size green "Active" button per row. */
.es-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 2px 6px 2px 2px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: #4A626A;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
}

.es-switch-track {
    position: relative;
    flex: none;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: #C6D3D7;
    transition: background-color .15s;
}

.es-switch-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(18, 49, 59, .3);
    transition: transform .15s;
}

.es-switch.is-on { color: #2E7D47; }
.es-switch.is-on .es-switch-track { background: #2E7D47; }
.es-switch.is-on .es-switch-knob { transform: translateX(14px); }

.es-switch:hover .es-switch-track { box-shadow: 0 0 0 3px #E4F1F4; }
.es-switch:focus-visible { outline: 2px solid #105460; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .es-switch-track, .es-switch-knob { transition: none; }
}

/* An admin table's headers are small capitals (.adm-body th above); a sort
   button in one kept its own case, so a sortable column read "Name" beside a
   plain "STATUS" (core 2.77.1). The button now wears its header's case. */
.admin-shell .adm-body table.table > thead > tr > th .es_list_sort {
    text-transform: inherit;
    letter-spacing: inherit;
}

/* ==== SimpleCRUD views (core 2.79.0) ======================================
   The list, record, form and delete views every SimpleCRUD screen shares:
   BlueSheets' Settings, DeskReservations' desks and holidays, and Admin's
   compact screens. Unscoped (Admin's own copy was scoped to .admin-shell and
   styled the old div rows). Tokens on :root because an es_modal renders
   outside the page. The palette is the intranet's (admin shell, redesigns). */

:root {
    --sc-ink: #12313B;
    --sc-muted: #4A626A;
    --sc-faint: #8CA1A7;
    --sc-line: #D5E3E7;
    --sc-ground: #F3F7F8;
    --sc-primary: #105460;
    --sc-tint: #E4F1F4;
    --sc-live: #2E7D47;
    --sc-live-bg: #E3F2E7;
    --sc-danger: #A3362A;
    --sc-danger-bg: #FBF1EF;
    --sc-danger-line: #E8C7C2;
}

.sc-view {
    color: var(--sc-ink);
}

.sc-view .sc-title {
    font-family: Roboto, "Open Sans", sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--sc-ink);
    margin: 0;
    text-wrap: balance;
    overflow-wrap: anywhere;
}

/* list: a head (title, then Add) and a toolbar (search) */
.sc-view .sc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 14px;
}

.sc-view .sc-head > .sc-add {
    order: 1;
    margin-left: auto;
}

/* what a module puts after the </h1> (an intro, a tool) takes its own line,
   even when it is narrow enough to fit beside the title: a zero-height break
   after Add, then everything else */
.sc-view .sc-head::after {
    content: "";
    order: 1;
    flex-basis: 100%;
    height: 0;
}

.sc-view .sc-head > :not(.sc-title):not(.sc-add) {
    order: 2;
    flex: 1 0 100%;
}

.sc-view .sc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.sc-view .sc-toolbar .sc-list-search {
    flex: 1 1 260px;
    max-width: 420px;
}

.sc-view .sc-toolbar .sc-list-search input {
    width: 100%;
}

.sc-view .sc-add {
    white-space: nowrap;
}

.sc-view .sc-list-head {
    display: flex;
    justify-content: flex-end;
    color: var(--sc-muted);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    margin: 0 0 6px;
}

/* the table */
.sc-view .sc-table-wrap {
    border: 1px solid var(--sc-line);
    border-radius: 10px;
    background: #fff;
}

.sc-view table.sc-table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

.sc-view .sc-table th {
    text-align: left;
    background: var(--sc-ground);
    color: var(--sc-muted);
    font-size: 12.5px;
    font-weight: 600;
    padding: 9px 12px;
    border-bottom: 1px solid var(--sc-line);
    white-space: nowrap;
    vertical-align: bottom;
}

.sc-view .sc-table th:first-child {
    border-top-left-radius: 10px;
}

.sc-view .sc-table th:last-child {
    border-top-right-radius: 10px;
}

/* a sortable header's padding is its button's (ListView: .es_list_sortable
   has none, so the whole cell is the control) */
.sc-view .sc-table th .es_list_sort {
    background: none;
    border: 0;
    padding: 9px 12px;
    color: inherit;
    font: inherit;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}

.sc-view .sc-table th .es_list_sort:focus-visible {
    outline: 2px solid var(--sc-primary);
    outline-offset: -2px;
}

.sc-view .sc-table th.es_list_sorted,
.sc-view .sc-table th.es_list_sorted .es_list_sort {
    color: var(--sc-primary);
}

.sc-view .sc-table td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--sc-line);
    vertical-align: middle;
    overflow-wrap: anywhere;
}

.sc-view .sc-table tbody tr:last-child td {
    border-bottom: 0;
}

.sc-view .sc-table tbody tr:hover td {
    background: var(--sc-ground);
}

.sc-view .sc-table td.sc-name a {
    color: var(--sc-primary);
    font-weight: 600;
    text-decoration: none;
}

.sc-view .sc-table td.sc-name a:hover,
.sc-view .sc-table td.sc-name a:focus-visible {
    text-decoration: underline;
}

.sc-view .sc-table .sc-actions {
    width: 48px;
    text-align: right;
}

.sc-view .sc-mono {
    font-family: "Roboto Mono", ui-monospace, Menlo, monospace;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.sc-view .sc-none {
    color: var(--sc-faint);
}

.sc-view .sc-list-pager {
    display: flex;
    justify-content: flex-end;
    margin-top: 10px;
}

.sc-view .sc-list-empty {
    color: var(--sc-muted);
    padding: 28px 16px;
    text-align: center;
    background: var(--sc-ground);
    border: 1px dashed var(--sc-line);
    border-radius: 8px;
    margin: 0;
}

/* a yes/no column, as a word */
.sc-view .sc-pill {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.sc-view .sc-pill-on { background: var(--sc-tint); color: var(--sc-primary); }
.sc-view .sc-pill-off,
.sc-view .sc-pill-quiet { background: var(--sc-ground); color: var(--sc-muted); font-weight: 400; }
.sc-view .sc-pill-live { background: var(--sc-live-bg); color: var(--sc-live); }

/* the ⋯ menu: details.adm-menu, which core_js.js closes on a click elsewhere */
.sc-menu {
    position: relative;
    display: inline-block;
}

.sc-menu > summary {
    list-style: none;
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 6px;
    color: var(--sc-muted);
    font-size: 18px;
    line-height: 1;
}

.sc-menu > summary::-webkit-details-marker {
    display: none;
}

.sc-menu > summary:hover,
.sc-menu > summary:focus-visible,
.sc-menu[open] > summary {
    background: var(--sc-tint);
    color: var(--sc-ink);
}

.sc-menu > summary:focus-visible {
    outline: 2px solid var(--sc-primary);
    outline-offset: 1px;
}

.sc-menu .adm-menu-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    z-index: 20;
    min-width: 160px;
    background: #fff;
    border: 1px solid var(--sc-line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(18, 49, 59, 0.14);
    padding: 4px;
    text-align: left;
}

.sc-menu .adm-menu-panel a {
    display: block;
    padding: 7px 10px;
    border-radius: 5px;
    color: var(--sc-ink);
    text-decoration: none;
    font-size: 14px;
    white-space: nowrap;
}

.sc-menu .adm-menu-panel a:hover,
.sc-menu .adm-menu-panel a:focus-visible {
    background: var(--sc-ground);
}

.sc-menu .adm-menu-panel a.adm-menu-danger {
    color: var(--sc-danger);
}

/* a record */
.sc-view .sc-crumb {
    font-size: 13px;
    color: var(--sc-muted);
    margin: 0 0 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.sc-view .sc-crumb a {
    color: var(--sc-primary);
    text-decoration: none;
}

.sc-view .sc-crumb a:hover {
    text-decoration: underline;
}

.sc-view .sc-card {
    border: 1px solid var(--sc-line);
    border-radius: 10px;
    background: #fff;
}

.sc-view .sc-card-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sc-line);
}

.sc-view .sc-card-head .sc-title {
    flex: 1 1 260px;
    font-size: 20px;
}

.sc-view dl.sc-pairs {
    display: grid;
    grid-template-columns: minmax(120px, 200px) minmax(0, 1fr);
    margin: 0;
}

.sc-view dl.sc-pairs > dt,
.sc-view dl.sc-pairs > dd {
    margin: 0;
    padding: 10px 16px;
    border-bottom: 1px solid var(--sc-line);
    overflow-wrap: anywhere;
}

.sc-view dl.sc-pairs > dt {
    color: var(--sc-muted);
    font-size: 13px;
    font-weight: 400;
}

.sc-view dl.sc-pairs > dt:last-of-type,
.sc-view dl.sc-pairs > dd:last-of-type {
    border-bottom: 0;
}

.sc-view .sc-record-quiet {
    opacity: 0.75;
}

.sc-record-quiet .sc-card {
    background: var(--sc-ground);
}

/* a form: six columns, each field sized by what it holds */
.sc-view.sc-form > .sc-title {
    margin-bottom: 16px;
}

.sc-view .sc-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px 16px;
}

.sc-view .sc-field {
    min-width: 0;
    margin-bottom: 10px;
}

.sc-view .sc-field > label,
.sc-view .sc-field label:first-child {
    display: block;
    margin-bottom: 4px;
    text-transform: none;
    letter-spacing: normal;
}

.sc-view .sc-field .form-control,
.sc-view .sc-field input[type="text"],
.sc-view .sc-field input[type="email"],
.sc-view .sc-field input[type="url"],
.sc-view .sc-field input[type="number"] {
    width: 100%;
    max-width: none;
}

/* the grid sizes a field; a builder's inline width (state_drop's 200px) does not */
.sc-view .sc-field select {
    width: 100% !important;
    max-width: none !important;
}

.sc-view .sc-w1 { grid-column: span 1; }
.sc-view .sc-w2 { grid-column: span 2; }
.sc-view .sc-w3 { grid-column: span 3; }
.sc-view .sc-w6 { grid-column: 1 / -1; }

/* a ZIP box is narrow, but its label is not cut off on a mid-size screen */
@media (max-width: 991px) {
    .sc-view .sc-w1 { grid-column: span 2; }
    .sc-view .sc-w3 { grid-column: span 3; }
}

.sc-view .sc-group {
    border: 1px solid var(--sc-line);
    border-radius: 10px;
    padding: 14px 18px 6px;
    margin: 0 0 16px;
    background: #fff;
}

.sc-view .sc-group-label {
    font-family: Roboto, "Open Sans", sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--sc-ink);
    width: auto;
    padding: 0 6px;
    margin: 0 0 4px -6px;
    border: 0;
    text-transform: none;
    letter-spacing: normal;
}

.sc-view .sc-group-intro {
    color: var(--sc-muted);
    font-size: 13px;
    margin: 0 0 10px;
}

/* the form's own buttons (wrap_form()): one quiet rule above them */
form:has(> .sc-view) > hr {
    border: 0;
    border-top: 1px solid var(--sc-line);
    margin: 6px 0 14px;
}

/* the delete question */
.sc-confirm {
    border: 1px solid var(--sc-danger-line);
    background: var(--sc-danger-bg);
    border-radius: 10px;
    padding: 16px 18px;
    margin: 0 0 4px;
}

.sc-confirm .sc-title {
    font-family: Roboto, "Open Sans", sans-serif;
    font-size: 20px;
    font-weight: 500;
    color: var(--sc-danger);
    margin: 0 0 6px;
}

.sc-confirm p {
    margin: 0;
    max-width: 70ch;
}

.sc-confirm-form > hr {
    display: none;
}

.sc-confirm-form > div:last-child {
    text-align: left !important;
    margin: 12px 0 18px;
}

@media (max-width: 640px) {
    .sc-view .sc-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-view .sc-w1,
    .sc-view .sc-w2,
    .sc-view .sc-w3,
    .sc-view .sc-w6 {
        grid-column: 1 / -1;
    }

    .sc-view dl.sc-pairs {
        grid-template-columns: minmax(0, 1fr);
    }

    .sc-view dl.sc-pairs > dt {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .sc-view dl.sc-pairs > dd {
        padding-top: 2px;
    }

    /* a row becomes a small card: the name across the top, the rest beneath */
    .sc-view .sc-table thead {
        display: none;
    }

    .sc-view .sc-table,
    .sc-view .sc-table tbody,
    .sc-view .sc-table tr {
        display: block;
    }

    .sc-view .sc-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 2px 14px;
        padding: 10px 12px;
        border-bottom: 1px solid var(--sc-line);
    }

    .sc-view .sc-table tbody tr:last-child {
        border-bottom: 0;
    }

    .sc-view .sc-table td {
        display: block;
        padding: 0;
        border: 0;
        font-size: 13px;
        color: var(--sc-muted);
    }

    .sc-view .sc-table td.sc-name {
        flex: 1 1 calc(100% - 48px);
        order: 0;
        font-size: 15px;
        color: inherit;
    }

    .sc-view .sc-table td.sc-actions {
        order: 1;
        width: auto;
    }

    .sc-view .sc-table td:not(.sc-name):not(.sc-actions) {
        order: 2;
    }

    .sc-view .sc-table tbody tr:hover td {
        background: transparent;
    }
}