/* Header Area */
.responsive-logo-container {
    display: flex;
    align-items: center;
    padding: 15px;
}

    .responsive-logo-container > * {
        display: flex;
        align-items: center;
    }

    .responsive-logo-container > .csu-border-right {
        /* Light-mode default. dark-mode.css repaints this to #ffffff for the dark topbar - see
           the comment on .site-identifier below for why this can't just be white here too. */
        border-right: 2px solid #1E4D2B;
    }

    .responsive-logo-container .csu-signature {
        display: inline-block;
        background: url('../img/signature-oneline.svg') no-repeat center center;
        min-height: 43px;
        width: 356px;
        margin-right: 15px;
    }

    .responsive-logo-container .site-identifier {
        font-family: 'Poppins', sans-serif !important;
        font-size: 18px;
        letter-spacing: 2px;
        text-transform: uppercase;
        text-decoration: none;
        margin-left: 15px;
        /* Light-mode default: the topbar is Bootstrap's bg-white here, so white text was
           invisible until dark-mode.css also darkened the bar behind it. dark-mode.css
           overrides this back to #ffffff for [data-bs-theme="dark"], matching how
           .csu-signature already swaps to a white logo SVG in dark mode. */
        color: #1E4D2B;
    }

@media only screen and (max-width: 1120px) {
    .responsive-logo-container .csu-signature {
        background: url('../img/signature-stacked.svg') no-repeat center center;
        width: 175px;
    }
}

@media only screen and (max-width: 640px) {
    .responsive-logo-container .csu-signature {
        background: url('../img/signature-acronym.svg') no-repeat center center;
        width: 115px;
    }
}

h1, h2, h3, h4, h5 {
    color: #1E4D2B
}

#content header {
    max-width: 1240px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

@media (min-width: 1200px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
        max-width: 1240px;
    }
}

/* Handle sidebar collapse toggle layout */
.sidebar.toggled .dark-mode-toggle {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
}

    .sidebar.toggled .dark-mode-toggle .icon-label {
        flex-direction: column;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    .sidebar.toggled .dark-mode-toggle .form-check {
        margin: 0;
    }


/* Replace .bg-primary with your brand green (#1E4D2B) */
.bg-primary {
    background-color: #1E4D2B !important;
}

/* Replace .bg-secondary with brand gold (#C8C372) */
.bg-secondary {
    background-color: #C8C372 !important;
}

/* Replace .bg-success with brand orange (#D9782D) */
.bg-success {
    background-color: #D9782D !important;
}

/* Replace .bg-danger with coral red (#E56A54) */
.bg-danger {
    background-color: #E56A54 !important;
}

/* Replace .bg-warning with bright yellow (#CFFC00) */
.bg-warning {
    background-color: #FFC038 !important;
}

/* Replace .bg-info with blue (#008FB3) */
.bg-info {
    background-color: #008FB3 !important;
}

.btn-primary {
    background-color: #D9782D !important;
    border-color: #D9782D !important;
    color: #fff !important;
}

    .btn-primary:hover,
    .btn-primary:focus {
        background-color: #163b21 !important; /* Slightly darker */
        border-color: #163b21 !important;
    }

/* Secondary (gold) */
.btn-secondary {
    background-color: #C8C372 !important;
    border-color: #C8C372 !important;
    color: #000 !important;
}

    .btn-secondary:hover,
    .btn-secondary:focus {
        background-color: #b9b25e !important;
        border-color: #b9b25e !important;
    }

/* Success (orange) */
.btn-success {
    background-color: #006144 !important;
    border-color: #006144 !important;
    color: #fff !important;
}

    .btn-success:hover,
    .btn-success:focus {
        background-color: #1E4D2B !important;
        border-color: #1E4D2B !important;
    }

/* Danger (coral) */
.btn-danger {
    background-color: #E56A54 !important;
    border-color: #E56A54 !important;
    color: #fff !important;
}

    .btn-danger:hover,
    .btn-danger:focus {
        background-color: #cc5d49 !important;
        border-color: #cc5d49 !important;
    }

/* Info (blue) */
.btn-info {
    background-color: #008FB3 !important;
    border-color: #008FB3 !important;
    color: #fff !important;
}

    .btn-info:hover,
    .btn-info:focus {
        background-color: #00779a !important;
        border-color: #00779a !important;
    }

table {
    clear: both;
    margin-top: 6px !important;
    margin-bottom: 6px !important;
    max-width: none !important;
    border-collapse: separate !important;
    border-spacing: 0;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 192, 56, 0.05); /* FFC038 with 10% transparency */
}

.container table {
    color: rgb(33, 37, 41);
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.15); /* true transparency */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.custom-spinner {
    width: 5vw; 
    height: 5vw;
}

.ui-autocomplete {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 100% !important;
    box-sizing: border-box;
}

/* Admin menu icons */
.adminmenu i {
    font-size: 3rem;
    padding: 16px;
    border-radius: 10%;
    margin: 1rem .5rem;
    filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, .15));
    transition: all 1s;
    transform-style: preserve-3d;
    background-color: #c9d84542;
    min-width: 140px;
    min-height: 120px;
    border: 1px solid #fff;
    vertical-align: middle;
}

.adminmenu a {
    text-align: center;
    cursor: pointer;
    display: inline-block;
    color: #1e4d2b;
}
.adminmenu i span {
    font-family: Nunito, sans-serif;
    font-size: 16px;
    padding-top: 10px;
    font-weight: normal;
    display: block;
}
.adminmenu a:hover {
    opacity: 0.8;
}

form {
    margin-block-end:0;
}

/* ------------------------------------------------------------------ */
/* Rich-text merge editor (Quill wrapper - _MergeEditor partial)      */
/* ------------------------------------------------------------------ */
.merge-editor__surface {
    min-height: 260px;
    background-color: #fff;
    border-bottom-left-radius: .35rem;
    border-bottom-right-radius: .35rem;
}

.merge-editor .ql-toolbar.ql-snow,
.merge-editor .ql-container.ql-snow {
    border-color: #d1d3e2;
}

.merge-editor .ql-editor {
    font-family: Nunito, sans-serif;
    font-size: 1rem;
}

.merge-editor .dropdown-item code {
    color: #1E4D2B;
}

[data-bs-theme="dark"] .merge-editor__surface,
[data-bs-theme="dark"] .merge-editor .ql-editor {
    background-color: #2c2c2c;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .merge-editor .ql-toolbar.ql-snow,
[data-bs-theme="dark"] .merge-editor .ql-container.ql-snow {
    border-color: #444;
}

/* HTML source mode - a plain textarea shown in place of the Quill surface (see
   merge-editor.js's Visual/HTML source toggle). Monospace + roomy so pasting a full pre-built
   email template's markup is actually legible. */
.merge-editor__source {
    width: 100%;
    min-height: 260px;
    font-family: 'Courier New', Consolas, monospace;
    font-size: .85rem;
    padding: .75rem;
    border: 1px solid #d1d3e2;
    border-radius: .35rem;
    resize: vertical;
}

[data-bs-theme="dark"] .merge-editor__source {
    background-color: #2c2c2c;
    color: #e0e0e0;
    border-color: #444;
}

/* Live template preview on the Content step's slot form (ADR 0029). Sticks alongside the form so the sender can see
   where their text lands while they type it, instead of finding out on the Preview step. */
.fill-preview {
    position: sticky;
    top: 1rem;
}

.fill-preview__frame {
    display: block;
    width: 100%;
    height: 68vh;
    min-height: 380px;
    border: 0;
    /* The email supplies its own background; white keeps a transparent one from picking up the
       admin theme and misrepresenting how the message will look. */
    background-color: #ffffff;
}

@media (max-width: 991.98px) {
    /* Stacked under the form on narrow screens, where sticky would pin the preview over the
       fields the sender is trying to type into. */
    .fill-preview {
        position: static;
    }

    .fill-preview__frame {
        height: 50vh;
    }
}

.merge-editor__mode-toggle .btn.active {
    background-color: #1E4D2B;
    border-color: #1E4D2B;
    color: #fff;
}

/* ------------------------------------------------------------------ */
/* Wizard step indicator (shared _WizardSteps partial)                */
/* ------------------------------------------------------------------ */
.wizard-steps {
    margin-bottom: 1.75rem;
}

.wizard-steps__list {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 0;
}

.wizard-steps__item {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 .5rem;
}

/* Connector lines running behind the markers */
.wizard-steps__item::before,
.wizard-steps__item::after {
    content: "";
    position: absolute;
    top: 1.25rem; /* vertical centre of a 2.5rem marker */
    height: 3px;
    background-color: #e3e6ea;
    z-index: 0;
}

.wizard-steps__item::before { left: 0; width: 50%; }
.wizard-steps__item::after { right: 0; width: 50%; }
.wizard-steps__item:first-child::before { display: none; }
.wizard-steps__item:last-child::after { display: none; }

/* Completed portions of the track turn brand green */
.wizard-steps__item.is-complete::before,
.wizard-steps__item.is-complete::after,
.wizard-steps__item.is-active::before {
    background-color: #1E4D2B;
}

/* Inner wrapper - an <a> for completed steps, a <span> otherwise */
.wizard-steps__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.wizard-steps__link--static {
    cursor: default;
}

a.wizard-steps__link,
button.wizard-steps__link {
    cursor: pointer;
}

/* Non-active steps on Properties/Content render as <button> (posts the current step's
   in-progress edits before navigating - see _WizardSteps.cshtml) rather than <a>, so they need
   the browser's default button chrome reset to look identical to the plain-link steps. */
button.wizard-steps__link {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
}

a.wizard-steps__link:hover .wizard-steps__marker,
button.wizard-steps__link:hover .wizard-steps__marker {
    box-shadow: 0 0 0 4px rgba(30, 77, 43, .15);
}

a.wizard-steps__link:hover .wizard-steps__title,
button.wizard-steps__link:hover .wizard-steps__title {
    text-decoration: underline;
}

.wizard-steps__marker {
    position: relative;
    z-index: 1;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .95rem;
    background-color: #fff;
    color: #858796;
    border: 3px solid #e3e6ea;
    transition: all .2s ease;
}

.wizard-steps__item.is-complete .wizard-steps__marker {
    background-color: #1E4D2B;
    border-color: #1E4D2B;
    color: #fff;
}

.wizard-steps__item.is-active .wizard-steps__marker {
    background-color: #D9782D; /* brand orange, matches primary button */
    border-color: #D9782D;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(217, 120, 45, .2);
}

.wizard-steps__text {
    display: flex;
    flex-direction: column;
    margin-top: .5rem;
}

.wizard-steps__eyebrow {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    color: #858796;
}

.wizard-steps__title {
    font-size: .9rem;
    font-weight: 600;
    color: #5a5c69;
}

.wizard-steps__item.is-active .wizard-steps__title,
.wizard-steps__item.is-complete .wizard-steps__title {
    color: #1E4D2B;
}

@media (max-width: 575.98px) {
    .wizard-steps__eyebrow { display: none; }
    .wizard-steps__title { font-size: .75rem; }
    .wizard-steps__marker { width: 2.1rem; height: 2.1rem; font-size: .85rem; }
    .wizard-steps__item::before,
    .wizard-steps__item::after { top: 1.05rem; }
}

/* Dark mode: lift the muted track / upcoming markers off the dark bg */
[data-bs-theme="dark"] .wizard-steps__item::before,
[data-bs-theme="dark"] .wizard-steps__item::after {
    background-color: #3a3f44;
}

[data-bs-theme="dark"] .wizard-steps__marker {
    background-color: #2c2c2c;
    border-color: #3a3f44;
    color: #adb5bd;
}

[data-bs-theme="dark"] .wizard-steps__title {
    color: #cdd0d5;
}

[data-bs-theme="dark"] .wizard-steps__item.is-active .wizard-steps__title,
[data-bs-theme="dark"] .wizard-steps__item.is-complete .wizard-steps__title {
    color: #7fbf95;
}
/* ---------------------------------------------------------------------------
   Sidebar submenus: don't let the server's "open the section you're in" default
   apply on narrow screens.  (Shaun, 2026-08-05)

   Under 768px base.css makes `.sidebar .nav-item .collapse` position:absolute -
   an icon-rail flyout, not an inline accordion - so a submenu opened at render
   time floats over the page you just loaded and hides it.  SB Admin 2's own JS
   only closes submenus on `resize`, which a phone never fires, so it stays open.

   `.autoexpand` is emitted by _Layout.cshtml alongside `show` ONLY when the
   server chose to open a section from the URL; a submenu the user taps open
   never has it.  Hiding it here rather than in script means no flash - the
   sidebar is markup at the top of <body> and admin.min.js loads at the bottom.
   admin.min.js then strips the marker on DOM ready so Bootstrap's toggling
   behaves normally from that point on; see the note there before changing this.

   `display: none` rather than removing `show`, because `show` is Bootstrap's
   state and this rule must not be what decides it.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .sidebar .nav-item .collapse.autoexpand {
        display: none !important;
    }
}

/* ------------------------------------------------------------------ */
/* Admin section nav (_AdminNav partial): soft pill chips rather than */
/* Bootstrap's default solid nav-pills, so the row of ~9 sections      */
/* reads as one quiet strip instead of a row of buttons. (Shaun,      */
/* 2026-09-09)                                                        */
/* ------------------------------------------------------------------ */
.scm-admin-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .5rem;
}

.scm-admin-nav .nav-link {
    background-color: #f1f7f2;
    border: 1px solid #cfe3d4;
    border-radius: 999px;
    padding: .3rem .9rem;
    color: #1E4D2B;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.4;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.scm-admin-nav .nav-link:hover,
.scm-admin-nav .nav-link:focus {
    background-color: #dcecdf;
    border-color: #b7d6bd;
    color: #163b21;
}

.scm-admin-nav .nav-link.active {
    background-color: #1E4D2B;
    border-color: #1E4D2B;
    color: #fff;
}

[data-bs-theme="dark"] .scm-admin-nav .nav-link {
    background-color: rgba(30, 77, 43, .18);
    border-color: rgba(127, 191, 149, .35);
    color: #9fd6ae;
}

[data-bs-theme="dark"] .scm-admin-nav .nav-link:hover,
[data-bs-theme="dark"] .scm-admin-nav .nav-link:focus {
    background-color: rgba(30, 77, 43, .32);
    border-color: rgba(127, 191, 149, .55);
    color: #c3e8cc;
}

[data-bs-theme="dark"] .scm-admin-nav .nav-link.active {
    background-color: #1E4D2B;
    border-color: #1E4D2B;
    color: #fff;
}