/* ============================================================
   SEPSIMED 4.0 - Redesign layer
   Bold conference brand. Loaded LAST in PublicMaster.master so
   it wins over style-starter.css / style2.css / bootstrap-theme.

   Scope: visual only. No markup contract, no control IDs, no
   postback behaviour depends on anything in this file.
   ============================================================ */

:root {
    /* ---- Palette -------------------------------------------------------
       Deliberately narrow. Blue carries brand, headers and ACTIVE states.
       Orange is reserved for ONE thing: the primary call to action.
       Everything else is neutral grey. Do not add a third hue.            */

    /* Primary accent - brand / headers / active states */
    --sm-ink: #0a1f4d;
    --sm-primary: #12307d;
    --sm-primary-600: #0c2461;
    --sm-primary-300: #4f7fa5;
    --sm-primary-soft: #eef2fb;

    /* Action / CTA - primary buttons only */
    --sm-cta: #ea580c;
    --sm-cta-600: #c2410c;

    /* Neutrals (Tailwind slate/grey ramp, per spec) */
    --sm-body: #374151;
    --sm-label: #374151;
    --sm-muted: #6b7280;
    --sm-line: #e5e7eb;
    --sm-line-strong: #d1d5db;
    --sm-disabled: #f3f4f6;
    --sm-bg: #f8fafc;
    --sm-surface: #ffffff;

    --sm-danger: #d92d20;
    --sm-success: #067647;

    /* ---- 8px baseline grid --------------------------------------------- */
    --sm-1: 8px;    /* label -> input                */
    --sm-2: 16px;   /* between form groups           */
    --sm-3: 24px;   /* inside a section              */
    --sm-4: 32px;   /* between sections              */

    --sm-radius: 14px;
    --sm-radius-sm: 8px;
    --sm-shadow: 0 1px 2px rgba(10, 31, 77, .05), 0 12px 28px -14px rgba(10, 31, 77, .16);
    --sm-shadow-lg: 0 2px 4px rgba(10, 31, 77, .06), 0 28px 60px -20px rgba(10, 31, 77, .26);

    --sm-font: 'Barlow', 'Rubik', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ---------- Base ---------- */

body {
    font-family: var(--sm-font);
    color: var(--sm-body);
    background: var(--sm-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;   /* nothing may push the page sideways on mobile */
}

/* legacy fixed widths (Width="90%", TextBox sizing, etc.) are the usual cause
   of sideways scroll on small screens -- never let a control exceed its column */
.sm-card,
.sm-card__body,
.sm-page,
.sm-shell {
    max-width: 100%;
    min-width: 0;
}

.sm-card__body img,
.sm-card__body table {
    max-width: 100%;
}

.tinted-image {
    background: radial-gradient(1200px 600px at 12% -10%, #eaf0fb 0%, rgba(234, 240, 251, 0) 60%), var(--sm-bg);
    background-attachment: scroll;
    padding-bottom: 48px;
}

/* ---------- Page shell ---------- */

.sm-page {
    padding: 34px 0 12px;
}

.sm-shell {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 16px;
}

.sm-shell--narrow {
    max-width: 520px;
}

/* ---------- Card ---------- */

/* The card is a single white container. The blue title block sits INSIDE its
   padding as an inset banner, so it can never appear to break out of the
   container edge the way a full-bleed header does. */
.sm-card {
    background: var(--sm-surface);
    border: 1px solid var(--sm-line);
    border-radius: var(--sm-radius);
    box-shadow: var(--sm-shadow);
    padding: var(--sm-2);
}

.sm-card__head {
    position: relative;
    padding: var(--sm-3) var(--sm-3);
    border-radius: var(--sm-radius-sm);
    background: linear-gradient(120deg, var(--sm-primary-600) 0%, var(--sm-primary) 100%);
    color: #fff;
    overflow: hidden;
}

.sm-card__head h1,
.sm-card__head h2,
.sm-card__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #fff;
    line-height: 1.25;
}

.sm-card__sub {
    margin: var(--sm-1) 0 0;
    font-size: .93rem;
    font-weight: 400;
    color: rgba(255, 255, 255, .8);
}

.sm-card__body {
    padding: var(--sm-3) var(--sm-2) var(--sm-2);
}

/* ---------- Section blocks inside a long form ---------- */

.sm-section {
    margin-top: var(--sm-4);
    padding-top: var(--sm-3);
    border-top: 1px solid var(--sm-line);
}

.sm-section:first-of-type {
    margin-top: var(--sm-1);
    padding-top: 0;
    border-top: 0;
}

/* Section headers: uppercase, medium weight, wide tracking. Deliberately a
   different TYPE treatment from field labels rather than just a bigger size. */
.sm-section__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 var(--sm-3);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sm-primary);
}

.sm-section__title::before {
    content: "";
    flex: 0 0 auto;
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background: var(--sm-primary);
}

/* ---------- Notices ---------- */

/* Informational notice - neutral/blue, NOT a third colour */
.sm-note {
    display: flex;
    gap: 12px;
    padding: var(--sm-2) var(--sm-2);
    border-radius: var(--sm-radius-sm);
    background: var(--sm-primary-soft);
    border: 1px solid #dbe3f5;
    color: var(--sm-body);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.6;
}

.sm-note strong,
.sm-note b {
    font-weight: 600;
    color: var(--sm-ink);
}

.sm-note__icon {
    flex: 0 0 auto;
    color: var(--sm-primary);
    font-size: 1rem;
    line-height: 1.6;
}

/* ---------- Links / inline actions ---------- */

.sm-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--sm-primary);
    text-decoration: none;
    border-bottom: 1.5px solid rgba(18, 48, 125, .3);
    padding-bottom: 1px;
    transition: color .18s ease, border-color .18s ease;
}

.sm-link:hover,
.sm-link:focus {
    color: var(--sm-primary-600);
    border-bottom-color: var(--sm-primary);
    text-decoration: none;
}

/* ---------- Form fields ---------- */

/* ---- 8px baseline grid for form layout ----
   Every form group is 16px apart; every label sits 8px above its input.
   .font_label is the legacy grid-column class used on ~30 field wrappers,
   so it carries the group spacing rather than any text styling. */
.sm-field,
.font_label,
.font-label,
.row.form-group > [class*="col-"] {
    margin-bottom: var(--sm-2);
}

.row.form-group {
    margin-bottom: 0;
}

.sm-label,
label.sm-label {
    display: block;
    margin-bottom: var(--sm-1);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--sm-label);
}

/* the legacy wrapper must not force bold onto everything inside it */
.font_label,
.font-label {
    font-weight: 400;
    color: var(--sm-body);
}

.font_label .form-control,
.font-label .form-control {
    font-weight: 400;
}

/* helper / note text under a field */
.font_label .LabelStyles,
.sm-help {
    display: inline-block;
    margin-top: var(--sm-1);
    font-size: .8rem;
    font-weight: 400;
    color: var(--sm-muted) !important;
}

.form-control,
input[type="text"].form-control,
input[type="password"].form-control,
input[type="email"].form-control,
select.form-control,
textarea.form-control {
    width: 100%;
    min-height: 46px;
    height: auto;
    padding: 10px 14px;
    line-height: 1.5;
    font-family: var(--sm-font);
    font-size: .97rem;
    color: var(--sm-body);
    background: #fff;
    border: 1.5px solid var(--sm-line);
    border-radius: var(--sm-radius-sm);
    box-shadow: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}

textarea.form-control {
    min-height: 110px;
}

.form-control::placeholder {
    color: #9aa3b2;
}

.form-control:focus {
    outline: 0;
    border-color: var(--sm-primary);
    box-shadow: 0 0 0 3.5px rgba(18, 48, 125, .13);
}

/* Read-only / disabled must be unmistakably non-editable */
.form-control:disabled,
.form-control[readonly],
input[readonly].form-control,
input[disabled].form-control {
    background: var(--sm-disabled) !important;
    border-color: var(--sm-line) !important;
    border-style: dashed !important;
    color: var(--sm-muted) !important;
    font-weight: 600;
    cursor: not-allowed;
    box-shadow: none !important;
}

.form-control[readonly]:focus,
.form-control:disabled:focus {
    border-color: var(--sm-line) !important;
    box-shadow: none !important;
}

select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%236b7688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 38px;
}

input[type="file"] {
    font-size: .9rem;
    color: var(--sm-muted);
}

/* ---------- Radio / checkbox lists (asp:RadioButtonList etc.) ---------- */

/* .sm-choice is a block wrapper; .RadioButtonWidth lands on the RadioButtonList
   TABLE itself, and forcing that to 100% is what spread Dr./Mr./Ms./Mrs. and
   Male/Female to opposite ends of the row. Size those to content. */
.sm-choice {
    width: 100%;
}

table.RadioButtonWidth,
.font_label table[id*="rbl"],
.font_label table[id*="Rdb"] {
    width: auto;
}

/* the cell owns the horizontal rhythm, so the label's own right margin is
   zeroed here - otherwise the two stack up into an oversized gap */
table.RadioButtonWidth td input[type="radio"] + label,
table.RadioButtonWidth td input[type="checkbox"] + label,
.font_label table[id*="rbl"] td input + label,
.font_label table[id*="Rdb"] td input + label {
    margin-right: 0;
}

table.RadioButtonWidth td,
.font_label table[id*="rbl"] td,
.font_label table[id*="Rdb"] td {
    padding: 4px 0;
    padding-right: var(--sm-3);
}

table.RadioButtonWidth td:last-child,
.font_label table[id*="rbl"] td:last-child,
.font_label table[id*="Rdb"] td:last-child {
    padding-right: 0;
}

/* asp:RadioButtonList / CheckBoxList render <td><input><label></td>. The input and
   its label must sit on ONE line -- so the label stays inline (never a block) and
   the cell is kept from wrapping between them. */
input[type="radio"],
input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    vertical-align: middle;
    accent-color: var(--sm-primary);
    cursor: pointer;
    flex: 0 0 auto;
}

/* consistent 16px horizontal rhythm between inline choices */
input[type="radio"] + label,
input[type="checkbox"] + label {
    display: inline;
    margin: 0 var(--sm-2) 0 var(--sm-1);
    font-size: .9rem;
    font-weight: 400;
    color: var(--sm-body);
    vertical-align: middle;
    cursor: pointer;
}

/* the radio and its caption must never break across lines */
table[id*="rbl"] td,
table[id*="Rdb"] td,
table[id*="chk"] td,
.RadioButtonWidth td,
.sm-choice td {
    padding: 5px 0;
    white-space: nowrap;
    vertical-align: middle;
}

/* Long captions (fee categories) MUST wrap inside their own cell.
   The nowrap rule above is `table[id*="rbl"] td`, which out-specifies a plain
   `.sm-choice--fees td` -- and rblSubCategory's id matches [id*="rbl"], so the
   fee labels were held on one line and ran off the screen on mobile. Qualify
   the selector so it wins. */
.sm-choice--fees table td,
.sm-choice--fees td {
    white-space: normal !important;
    word-break: break-word;
}

/* ---------- Buttons ---------- */

.btn,
input[type="submit"].btn,
input[type="button"].btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 11px 26px;
    font-family: var(--sm-font);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .02em;
    border: 1.5px solid transparent;
    border-radius: var(--sm-radius-sm);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease;
}

.btn:focus {
    outline: 0;
    box-shadow: 0 0 0 3.5px rgba(242, 96, 12, .28);
}

.btn:active {
    transform: translateY(1px);
}

.btn-primary,
input[type="submit"].btn-primary,
input[type="button"].btn-primary {
    background: var(--sm-cta);
    border-color: var(--sm-cta);
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(242, 96, 12, .75);
}

.btn-primary:hover,
.btn-primary:focus,
input[type="submit"].btn-primary:hover,
input[type="button"].btn-primary:hover {
    background: var(--sm-cta-600);
    border-color: var(--sm-cta-600);
    color: #fff;
}

/* Secondary / outline. The border must be strong enough to read as a button on
   a white card -- at --sm-line it disappeared and looked like plain text. */
.btn-secondary,
.sm-btn-ghost,
input[type="button"].sm-btn-ghost,
input[type="submit"].sm-btn-ghost {
    background: #fff;
    border-color: var(--sm-line-strong);
    color: var(--sm-primary);
    font-weight: 600;
}

.btn-secondary:hover,
.sm-btn-ghost:hover,
.sm-btn-ghost:focus {
    background: var(--sm-primary-soft);
    border-color: var(--sm-primary);
    color: var(--sm-primary-600);
}

.sm-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
    padding-top: 24px;
    border-top: 1px solid var(--sm-line);
}

/* neutralise the bootstrap modal-footer look used on plain pages */
.sm-card .modal-footer {
    justify-content: flex-start;
    gap: 12px;
    padding: 24px 0 0;
    margin-top: 30px;
    border-top: 1px solid var(--sm-line);
}

/* ---------- Validators ---------- */

.LabelStyleRequired,
span[id*="RequiredFieldValidator"],
span[id*="RegularExpressionValidator"],
span[id*="CompareValidator"],
span[id*="CustomValidator"] {
    display: inline-block;
    margin-top: 5px;
    font-size: .83rem;
    font-weight: 600;
    color: var(--sm-danger) !important;
}

.validators {
    text-align: left !important;
}

/* ---------- Legacy label helpers ---------- */

.LabelStyles {
    color: var(--sm-primary);
    font-weight: 700;
}

/* ---------- Tables / GridView ---------- */

.table-responsive {
    border-radius: var(--sm-radius-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.fee-container {
    border: 1px solid var(--sm-line);
    border-radius: var(--sm-radius);
    box-shadow: var(--sm-shadow);
    overflow: hidden;
    background: #fff;
}

.fee-header {
    background: var(--sm-ink) !important;
    color: #fff;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.fee-header h6 {
    font-weight: 800;
    letter-spacing: .04em;
}

.close-btn {
    border: 0;
    background: rgba(255, 255, 255, .14);
    color: #fff !important;
    border-radius: 8px;
    width: 32px;
    height: 32px;
    line-height: 1;
    font-size: 1.15rem;
    cursor: pointer;
}

.close-btn:hover {
    background: var(--sm-cta);
}

.fee-table,
table.Admingridtable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--sm-font);
    font-size: .93rem;
    background: #fff;
    border: 1px solid var(--sm-line);
    border-radius: var(--sm-radius-sm);
    overflow: hidden;
}

.fee-table th,
table.Admingridtable th {
    padding: 13px 14px;
    background: var(--sm-primary) !important;
    color: #fff !important;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: left;
    border: 0;
    border-bottom: 3px solid var(--sm-cta);
    white-space: nowrap;
}

.fee-table td,
table.Admingridtable td {
    padding: 12px 14px;
    text-align: left;
    color: var(--sm-body) !important;
    background: #fff !important;
    border: 0;
    border-bottom: 1px solid var(--sm-line);
    vertical-align: middle;
}

.fee-table td span,
table.Admingridtable td span {
    font-size: .93rem;
}

/* legacy alternating colours were unreadable - replace with a subtle zebra */
.fee-table tr:nth-child(odd) td,
table.Admingridtable tr:nth-child(odd) td {
    background: #fbfcfe !important;
}

.fee-table tbody tr:hover td,
table.Admingridtable tbody tr:hover td {
    background: #eef3fc !important;
}

.fee-table tr:last-child td,
table.Admingridtable tr:last-child td {
    border-bottom: 0;
}

/* ---------- Admin pages (Home / ViewRegistration) ---------- */

.sm-pagehead {
    margin: 0 0 26px;
    padding: 22px 26px;
    border-radius: var(--sm-radius);
    background: linear-gradient(120deg, var(--sm-primary-600) 0%, var(--sm-primary) 55%, #1c48ad 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.sm-pagehead::after {
    content: "";
    position: absolute;
    right: -60px;
    top: -80px;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(242, 96, 12, .5) 0%, rgba(242, 96, 12, 0) 70%);
    pointer-events: none;
}

.sm-pagehead__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #fff;
}

.sm-pagehead__sub {
    margin: 6px 0 0;
    font-size: .92rem;
    font-weight: 500;
    color: rgba(255, 255, 255, .82);
}

/* section header bar used on several admin panels */
.sm-bar {
    padding: 13px 18px;
    border-radius: var(--sm-radius-sm) var(--sm-radius-sm) 0 0;
    background: var(--sm-primary);
    border-bottom: 3px solid var(--sm-cta);
    color: #fff;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: .02em;
}

/* dashboard summary tables: header cells were inline-styled #4f7fa5 */
td.sm-th {
    padding: 12px 14px !important;
    background: var(--sm-primary) !important;
    color: #fff !important;
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-bottom: 3px solid var(--sm-cta) !important;
}

.feature-block {
    border-radius: var(--sm-radius);
    padding: 22px;
    box-shadow: var(--sm-shadow) !important;
}

.info-box {
    border-radius: var(--sm-radius-sm);
    box-shadow: var(--sm-shadow);
    border: 1px solid var(--sm-line);
}

/* ---------- Navigation / menu toggle ----------
   The toggle was a bare "Menu" word. Give it an icon, a hit area and a clear
   affordance so it reads as a control rather than a stray link. */

/* #menu-toggle is the MOBILE hamburger. style.css hides it by default and only
   reveals it under 992px -- so all styling here must stay inside that media
   query, otherwise it appears on desktop above the real menu bar. */

@media only screen and (max-width: 992px) {

    #menu-toggle {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        float: right;
        padding: 9px 16px;
        border: 1px solid rgba(255, 255, 255, .3);
        border-radius: var(--sm-radius-sm);
        background: rgba(255, 255, 255, .12);
        color: #fff;
        font-family: var(--sm-font);
        font-size: .82rem;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        text-decoration: none;
        transition: background-color .18s ease, border-color .18s ease;
    }

    #menu-toggle:hover,
    #menu-toggle:focus {
        background: rgba(255, 255, 255, .22);
        border-color: rgba(255, 255, 255, .55);
        color: #fff;
        text-decoration: none;
    }

    #menu-toggle i {
        font-size: 1rem;
        line-height: 1;
    }
}

/* ---------- Admin search / filter panel ----------
   The filters were Bootstrap columns of mixed spans (col-md-2/3/4), which is
   what produced the uneven horizontal and vertical gaps. Override to a single
   responsive grid so every filter occupies an identical cell. */

/* The panel is ONE continuous grid. Each markup .row is dissolved with
   display:contents so every filter flows into the same 4-column track --
   otherwise a row holding only 2 filters wastes 2 empty cells and adds its
   own gap, which is what made the panel so tall. */
.sm-search {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px 14px;
    align-items: start;
    margin-bottom: var(--sm-2);
    padding: 12px 14px;
    border: 1px solid var(--sm-line);
    border-radius: var(--sm-radius-sm);
    background: #fcfdfe;
}

.sm-search .row {
    display: contents;
}

/* neutralise the Bootstrap column widths and the inline Width="90%" attrs */
.sm-search .row > [class*="col-"] {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0;
}

.sm-search .form-control {
    width: 100% !important;
    min-height: 30px;
    height: 30px;
    padding: 3px 9px;
    font-size: .82rem;
    line-height: 1.3;
    border-radius: 6px;
}

.sm-search select.form-control {
    background-position: right 8px center;
    padding-right: 26px;
}

.sm-search .LabelStyles,
.sm-search .LabelStyle {
    display: block;
    margin-bottom: 2px;
    font-size: .67rem !important;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--sm-muted) !important;
}

/* ---- Radio groups: flow horizontally and wrap ----
   The lists are declared RepeatDirection="vertical", so each option renders as
   its own <tr> -- a 4-option filter became 4 stacked rows and dominated the
   panel height. Forcing the table parts to inline-block lets the options wrap
   onto one or two lines instead, without touching the markup or the controls
   the code-behind reads. */
.sm-search table {
    display: block !important;
    width: auto !important;
    margin: 0;
    line-height: 1.15;
    border-collapse: collapse;
}

/* display:contents dissolves the row wrappers so every <td> becomes a direct
   inline-block child of the table and they wrap as a group. Using block on the
   <tr> instead would keep each option on its own line -- the very thing we are
   trying to remove. */
.sm-search tbody,
.sm-search tr {
    display: contents !important;
}

.sm-search td {
    display: inline-block !important;
    padding: 1px 10px 1px 0 !important;
    white-space: nowrap;
    vertical-align: middle;
}

.sm-search input[type="radio"],
.sm-search input[type="checkbox"] {
    width: 13px;
    height: 13px;
}

.sm-search input[type="radio"] + label,
.sm-search input[type="checkbox"] + label {
    margin: 0 0 0 5px;
    font-size: .78rem;
    line-height: 1.3;
}

/* Cap tall option lists, but high enough that the longest one (Payment Mode,
   8 options over ~3 wrapped lines) shows in full -- a hidden scroll here means
   an admin silently misses filter options. */
.sm-search .RadioButtonWidth {
    max-height: 78px;
    overflow-y: auto;
}

/* the action row sits tight under the filters */
.sm-search + .row .btn,
.sm-search ~ .row .btn {
    min-height: 36px;
    padding: 7px 18px;
    font-size: .84rem;
}

@media (max-width: 1200px) {
    .sm-search { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .sm-search { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .sm-search { grid-template-columns: 1fr; }
    .sm-search .RadioButtonWidth { max-height: none; }
}

/* export button - distinct from primary/secondary */
.sm-btn-excel {
    background: #067647;
    border-color: #067647;
    color: #fff;
}

.sm-btn-excel:hover,
.sm-btn-excel:focus {
    background: #05603a;
    border-color: #05603a;
    color: #fff;
}

/* ---------- Wide admin data grid ---------- */

.sm-gridwrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--sm-radius-sm);
}

table.sm-grid {
    font-size: .84rem;
}

table.sm-grid th {
    padding: 9px 8px !important;
    font-size: .72rem;
    letter-spacing: .03em;
    white-space: nowrap;
}

table.sm-grid td {
    padding: 7px 8px !important;
    white-space: nowrap;
}

/* alternating rows for scanability across wide tables */
table.sm-grid tr:nth-child(odd) td {
    background: #f8fafc !important;
}

table.sm-grid tr:nth-child(even) td {
    background: #ffffff !important;
}

table.sm-grid tbody tr:hover td {
    background: var(--sm-primary-soft) !important;
}

/* action columns hold small icon buttons - keep them tight */
table.sm-grid td a,
table.sm-grid td input[type="image"],
table.sm-grid td img {
    vertical-align: middle;
}

/* ---------- Loading overlay ----------
   Shown during postbacks and while navigating to the payment gateway, so a
   slow round trip never looks like a dead page. Driven by sm-loader.js. */

.sm-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sm-3);
    background: rgba(248, 250, 252, .86);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}

.sm-loader.is-on {
    opacity: 1;
    visibility: visible;
}

.sm-loader__spin {
    width: 46px;
    height: 46px;
    border: 3.5px solid var(--sm-line);
    border-top-color: var(--sm-primary);
    border-radius: 50%;
    animation: sm-spin .7s linear infinite;
}

@keyframes sm-spin {
    to { transform: rotate(360deg); }
}

.sm-loader__msg {
    font-family: var(--sm-font);
    font-size: .88rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--sm-muted);
}

/* ---------- Skeleton placeholders ---------- */

.sm-skel {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: #eceff4;
}

.sm-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
    animation: sm-shimmer 1.3s infinite;
}

@keyframes sm-shimmer {
    100% { transform: translateX(100%); }
}

.sm-skel--line   { height: 12px; margin-bottom: 10px; }
.sm-skel--title  { height: 22px; width: 52%; margin-bottom: 16px; }
.sm-skel--input  { height: 46px; margin-bottom: 16px; border-radius: var(--sm-radius-sm); }
.sm-skel--short  { width: 38%; }

@media (prefers-reduced-motion: reduce) {
    .sm-loader__spin { animation-duration: 2s; }
    .sm-skel::after  { animation: none; }
}

/* ---------- Footer ---------- */

.site-footer-bottom {
    background: var(--sm-ink) !important;
    color: rgba(255, 255, 255, .72) !important;
    padding: 22px 0;
    font-size: .9rem;
}

.site-footer-bottom a {
    color: #ffb27a !important;
    font-weight: 700;
}

.site-footer-bottom a:hover {
    color: #fff !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 768px) {
    .sm-page {
        padding: 20px 0 8px;
    }

    .sm-card__head {
        padding: 22px 20px;
    }

    .sm-card__head h1,
    .sm-card__head h2,
    .sm-card__title {
        font-size: 1.3rem;
    }

    .sm-card__body {
        padding: 22px 20px 26px;
    }

    .sm-actions,
    .sm-card .modal-footer {
        flex-direction: column;
    }

    .sm-actions .btn,
    .sm-card .modal-footer .btn {
        width: 100%;
    }
}