/* Bootstrap Validation Summary Override */
/* Bootstrap Validation Summary Override */
.validation-summary-valid {
    display: none;
}

.validation-summary-errors ul {
    margin-bottom: 0;
    padding-left: 1rem;
}

.alert.validation-summary-errors {
    margin-bottom: 1rem;
}

.col-0 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 4.166665%;
    flex: 0 0 4.166665%;
    max-width: 4.166665%;
    width: 4.166665%;
}

.col-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 8.33333%;
    flex: 0 0 8.33333%;
    max-width: 8.33333%;
    width: 8.33333%;
}

.col-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 16.66666%;
    flex: 0 0 16.66666%;
    max-width: 16.66666%;
    width: 16.66666%;
}

.dataTables_empty {
    font-size: 1.5rem !important;
}

/* Reference classes, no implementation */
.base,
.needs-validation,
.flex-start,
.text-faded,
.app-container-demo,
.lang-js,
.lang-csharp,
.has-tooltip,
.has-popover {
}

/* Keeps analyzers happy */
.js-waves-off,
.js-waves-on,
.js-get-date,
.js-collapse,
.js-modal-settings,
.js-filter-message,
.js-buttons,
.js-icon-class,
.js-icon-copy,
.js-bg-color,
.js-bg-gradient,
.js-bg-gradient-demo,
.js-bg-target {
}

/* Small word wrap correction */
section > ol > li {
    word-break: break-all;
}

code {
    border: 1px solid silver;
    padding: 0.03rem 0.2rem !important;
    /* Bootstrap's default #e83e8c on the #f8f8f8 code background is 3.60:1 -- below the 4.5:1
       WCAG AA threshold. Darkening the same hue (#a3195b, 6.94:1) passed the contrast test but
       was still reported as hard to read on Bug Reports, where the Page value is a long URL:
       a saturated colour over a whole line of small monospace text reads as decoration
       fighting the text. Dark grey instead, as asked (2026-09-03) -- 12.6:1, and a URL now
       reads as a URL. The border and tinted background still mark it as code.

       Here in site.css, not a theme file: the theme picker swaps the whole #mytheme stylesheet,
       and the themes only set the code BACKGROUND, so a colour set there would be lost on switch.
       This covers all 33 <code> values across the app -- domains, coupon codes, recovery codes. */
    color: #343a40;
}

pre.prettyprint {
    border-radius: 0.2rem;
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
}

.documentation h2 {
    color: var(--primary);
}

.documentation th:first-child,
.documentation th:nth-child(3) {
    width: 16%;
}

.documentation blockquote {
    margin-left: 1rem;
    padding: 1rem 1rem 0.01rem 1rem;
    font-weight: 400;
    border-radius: 0 4px 4px 0;
    background: #edf2f9;
    border-left: 3px solid var(--primary);
}

    .documentation blockquote.info {
        background: #edf2f9;
        border-left: 3px solid var(--info);
    }

    .documentation blockquote.warning {
        background: #fff4db;
        border-left: 3px solid var(--warning);
    }

    .documentation blockquote.danger {
        background: #fadeeb;
        border-left: 3px solid var(--danger);
    }


.nav-function-minify:not(.nav-function-top) .page-sidebar .primary-nav .nav-menu > li > a > .nav-link-text {
    display: none;
    position: absolute;
    text-align: left;
    background: trasparent;
    padding-left: 1.375rem;
    color: #777777;
    top: 0;
    left: 5.6875rem;
    height: 100%;
    width: 13.75rem;
    font-weight: 500;
    margin-top: -1.563rem;
}

/* Enter custom CSS rules for your application here */
.modal-header {
    border-bottom: 1px solid #dee2e6 !important;
    background-color: rgb(136, 136, 136);
    color: #fff;
}
.modal-header-dark {
    border-bottom: 1px solid #dee2e6 !important;
    background-color: none !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 1.25rem 1.25rem;
    border-bottom: 0px solid #dee2e6;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.close {
    color: #fff;
}
    element .style {
}

table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable th:last-child, table.table-bordered.dataTable td:last-child, table.table-bordered.dataTable td:last-child {
    border-right-width: 1px;
}

.mod-skin-dark:not(.mod-skin-light) .table, .mod-skin-dark:not(.mod-skin-light) .table-bordered th, .mod-skin-dark:not(.mod-skin-light) .table-bordered td, .mod-skin-dark:not(.mod-skin-light) .table thead th, .mod-skin-dark:not(.mod-skin-light) .table th, .mod-skin-dark:not(.mod-skin-light) .table td {
    border-color: rgba(255, 255, 255, 0.25);
    background: #26272b;
}

table.table-bordered.dataTable tbody th, table.table-bordered.dataTable tbody td {
    border-bottom-width: 0;
}

table.table-bordered.dataTable th, table.table-bordered.dataTable td {
    border-left-width: 0;
}

table.dataTable td.dataTables_empty, table.dataTable th.dataTables_empty {
    text-align: center;
}

table.dataTable td, table.dataTable th {
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.table-bordered th, .table-bordered td {
    border: 1px solid #e9e9e9;
}

.table th, .table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #e9e9e9;
}

.dataTables_empty {
    color: #c8c8c8 !important;
}

.odd .sorting_1 {
    background-color: transparent !important;
}

.sorting_asc, .sorting_desc, .even .sorting_1 {
    background-color: transparent !important;
}

.bootbox .modal-header {
    background-color: transparent !important;
    border-bottom:none !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: #1A80B6 !important;
    color: #fff;
}
.select2-container--default .select2-results__option[aria-selected=true] {
    background: #e8f0f7;
    color: #4a6078 !important;
}

.select2-search--dropdown:before {
    content: "\f002";
    font-family: 'Font Awesome 5 Pro';
    position: absolute;
    left: calc(1rem + 0.875rem);
    top: calc(0.6rem + 0.875rem);
    color: #1A80B6 !important;
}
.select2-container--open .select2-dropdown--below {
    -webkit-box-shadow: 0px 3px 8px 0px rgb(90 80 105 / 10%);
    box-shadow: 0px 3px 8px 0px rgb(90 80 105 / 10%);
    border-color: #1A80B6 !important;
}

.select2-container--open .select2-dropdown--above {
    -webkit-box-shadow: 0px 3px 8px 0px rgb(90 80 105 / 10%);
    box-shadow: 0px 3px 8px 0px rgb(90 80 105 / 10%);
    border-color: #1A80B6 !important;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple, .select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
    position: relative;
    z-index: 1151;
    border-color: #1A80B6 !important;
}

.select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: #1A80B6 !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 5px 3px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    padding-right: 0;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: rgba(26,128,182,0.15) !important;
    border-color: #1A80B6 !important;
    color: #1A80B6 !important;
}
    .select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
        margin: 0;
        padding-left: 7px;
        padding-right: 7px;
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1;
        font-size: 16px;
        border-left: 1px solid rgba(0, 0, 0, 0.1);
        margin-left: 5px;
        color: #1A80B6 !important;
    }

.select2-container--default .select2-results__option[aria-selected=true] {
    background: rgba(26,128,182,0.15) !important;
    color: #626262 !important;
}

body:not(.mod-skin-dark) .notification li.unread {
    background: #fff !important;
}

.hideMobile {
  
}

@media only screen and (max-width: 440px) {
    .width-lg {
        min-width: 10rem !important;
    }
    .dataTables_info {
        display:none !important;
    }
}
@media only screen and (max-width: 768px) {
    .dataTables_length {
        display: none !important;
    }
    .hideMobile {
        display:none !important;
    }
}

div::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

div::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

div::-webkit-scrollbar-thumb {
    background-color: grey;
    outline: 1px solid slategrey;
}

div::-webkit-scrollbar:vertical {
    display: none;
}

/* Thicker, darker sidebar scrollbar (overrides SlimScroll inline styles) */
.page-sidebar .slimScrollBar {
    width: 8px !important;
    background-color: rgba(80, 80, 80, 0.9) !important;
    border-radius: 4px !important;
}

.page-sidebar .slimScrollRail {
    width: 8px !important;
    background: rgba(60, 60, 60, 0.8) !important;
    opacity: 0.8 !important;
    border-radius: 4px !important;
}

table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > th:first-child:before,
table.dataTable.dtr-column > tbody > tr > td.control:before,
table.dataTable.dtr-column > tbody > tr > th.control:before {
    background-color: #a4a4a480 !important;
}



table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before,
table.dataTable.dtr-column > tbody > tr.parent td.control:before,
table.dataTable.dtr-column > tbody > tr.parent th.control:before {
    color: #a4a4a480 !important;
}

table.dataTable > tbody > tr > td {
    vertical-align:middle !important;
}

.dataTables_wrapper tr.child td.child .dtr-details:before {
    color: #a4a4a480 !important;
}



.dataTables_wrapper tr.child td.child .dtr-details:after {
    color: #a4a4a450 !important;
}
.dataTables_wrapper tr.child td.child .dtr-details:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 1rem;
    background: #1A80B6 !important;
}



.header-icon:not(.btn)[data-toggle="dropdown"][aria-expanded="true"] > [class*='fa-']:first-child, .header-icon:not(.btn)[data-toggle="dropdown"][aria-expanded="true"] > .ni:first-child {
    color: #fff !important;
}

.align-center {
    text-align:center !important;
}

.select2-dropdown--below {
    z-index: 3500 !important;
}

.minimized-logo {
    display: none;
}

.nav-function-minify .minimized-logo {
    display: inline;
}

.nav-function-minify .main-logo {
    display: none;
}


.data-merge-table input[type="radio"] + .custom-control-label {
    color: #1A80B6;
}

.data-merge-table input[type="radio"]:checked + .custom-control-label {
    color: #DEAC11;
}

.tooltip {
    padding-top: 0 !important;
    border-radius: 6px !important;
}

.daterangepicker td.start-date {
    background-color: #DEAC11 !important;
    color: #121A26;
}

.daterangepicker td.end-date {
    background-color: #DEAC11 !important;
    color: #121A26;
}

.in-range.available {
    background-color: #d3d3d3 !important;
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: #e9e9e9 !important;
}


.page-header{
   z-index: 2000 !important;
}

/* Lead Email Log */
.btn-clear {
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    color: #999;
}

.btn-clear:hover {
    color: #000;
}

.email-row-checkbox:checked {
    accent-color: #DEAC11;
}

body:not(.mod-skin-dark) .card-title.collapsed {
    background-color: #FFF;
}

/* Wizard step-indicator — kept global (site.css loads on every page and is NOT
   swapped by the SmartAdmin theme picker). Several cust-theme-*.css files omit
   these rules, so the campaign wizard stepper went unstyled when one was active. */
.step-indicator {
    border-collapse: separate;
    display: table;
    margin-left: 0;
    position: relative;
    table-layout: fixed;
    text-align: center;
    vertical-align: middle;
    padding-left: 0;
    padding-top: 20px;
}
.step-indicator li {
    display: table-cell;
    position: relative;
    float: none;
    padding: 0;
    width: 1%;
}
.step-indicator li:after {
    background-color: #cecece;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    width: 100%;
    top: 15px;
    left: 50%;
}
.step-indicator li:last-child:after {
    display: none;
}
.step-indicator li.active .step {
    border-color: #1A80B6;
    background-color: #1A80B6;
    color: #ffffff;
}
.step-indicator li.active .caption {
    color: #1A80B6;
}
.step-indicator li.complete .step {
    border-color: #adadad;
    color: #adadad;
}
.step-indicator li.complete .caption {
    color: #adadad;
}
.step-indicator .step {
    background-color: #f9f9f9;
    border-radius: 50%;
    border: 1px solid #212225;
    color: #212225;
    font-size: 1em;
    height: 30px;
    line-height: 30px;
    margin: 0 auto;
    position: relative;
    width: 30px;
    z-index: 1;
}
.step-indicator .caption {
    color: #212225;
    padding: 11px 16px;
}
.step-indicator li .step-link {
    text-decoration: none;
    color: inherit;
    display: block;
    cursor: pointer;
}
.step-indicator li .step-link:hover .step {
    border-color: #1A80B6;
    color: #1A80B6;
    transform: scale(1.1);
    transition: all 0.2s ease;
}
.step-indicator li .step-link:hover .caption span {
    color: #1A80B6;
}
.step-indicator li.complete .step-link:hover .step {
    background-color: #1A80B6;
    color: #ffffff;
}

/* Super-slim scrollbar for the side navigation (scoped to the sidebar so the
   main content scrollbar is untouched). */
.page-sidebar,
.page-sidebar .primary-nav,
.page-sidebar .nav-menu {
    scrollbar-width: thin;                                 /* Firefox */
    scrollbar-color: rgba(255, 255, 255, 0.28) transparent;
}
.page-sidebar::-webkit-scrollbar,
.page-sidebar ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
.page-sidebar::-webkit-scrollbar-thumb,
.page-sidebar ::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.28);
    border-radius: 10px;
}
.page-sidebar::-webkit-scrollbar-thumb:hover,
.page-sidebar ::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.45);
}
.page-sidebar::-webkit-scrollbar-track,
.page-sidebar ::-webkit-scrollbar-track {
    background: transparent;
}

/* My Account avatar — replace the default white active/focus ring with warning yellow */
.header-icon[data-toggle="dropdown"] .profile-image {
    transition: box-shadow .15s ease;
}
.header-icon[data-toggle="dropdown"]:focus,
.header-icon[data-toggle="dropdown"]:active,
.header-icon[data-toggle="dropdown"][aria-expanded="true"] {
    outline: none !important;
    box-shadow: none !important;
}
.header-icon[data-toggle="dropdown"]:focus .profile-image,
.header-icon[data-toggle="dropdown"][aria-expanded="true"] .profile-image {
    box-shadow: 0 0 0 2px #ffc107 !important; /* warning yellow */
    border-radius: 50%;
}

/* Left nav: a leaf item (direct link, no submenu <ul>) must never show the
   collapse caret. SmartAdmin's nav init only appends a .collapse-sign to items
   with a child <ul>, but it can leave a stale one behind when the menu is
   re-initialised (filter/AJAX), which shows a caret under a childless item.
   Hide the caret on any nav item that has no direct child <ul>. */
.page-sidebar .nav-menu > li:not(:has(> ul)) > a > .collapse-sign,
.page-sidebar .nav-menu li:not(:has(> ul)) > a > .collapse-sign {
    display: none !important;
}

/* Gateway brand gradient override for SmartAdmin's translucent gradient class.
   Uses the Gateway navy but slightly lightened so it reads as brand-blue, not near-black. */
.bg-trans-gradient {
    background: #121A26 !important;
}

/* ============================================================
   DARK MODE OVERRIDES (body.mod-skin-dark — SmartAdmin toggle)
   All light-surface rules added below to avoid touching light mode.
   ============================================================ */

/* P2-10: unread notification row */
body.mod-skin-dark .notification li.unread {
    background: #22262c !important;
}

/* P2-11: accordion card-title collapsed */
body.mod-skin-dark .card-title.collapsed {
    background-color: #22262c;
}

/* P2-9: wizard step indicator bubbles + captions */
body.mod-skin-dark .step-indicator .step {
    background-color: #2b3038;
    color: #c4c9d2;
    border-color: #c4c9d2;
}
body.mod-skin-dark .step-indicator .caption {
    color: #c4c9d2;
}

/* P2-12: HelpCenter blockquote variants */
body.mod-skin-dark .documentation blockquote,
body.mod-skin-dark .documentation blockquote.info {
    background: rgba(26,128,182,.1);
}
body.mod-skin-dark .documentation blockquote.warning {
    background: rgba(222,172,17,.1);
}
body.mod-skin-dark .documentation blockquote.danger {
    background: rgba(229,26,56,.1);
}

/* QA 2026-08-17 (#28 / #40 / #42), widened 2026-09-08 ("Word in button floating"):
   the light-font (fal) icons carry a tall ascent, so an inline button box sits its
   content above centre. This was first patched only for DataTable action buttons —
   but the cause is the font, not the table, and it turned up next on a plain filter
   button (F&B Customers > Clear). Centre the content of every button instead, so the
   next one does not have to be reported too.

   inline-flex over the button's own box does not change where the button sits in the
   layout; .btn-block keeps its full width via its own width:100%, restated below so
   its display stays block-level. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* QA 2026-08-24 ("Icons low"): flex drops the whitespace text node between <i>
       and the label, so icon and text run together. Put the gap back explicitly. */
    gap: .375rem;
}

.btn-block {
    display: flex;
    width: 100%;
}

.btn > i {
    line-height: inherit;
}

/* QA 2026-08-24 ("x is falling"): Bootstrap pins .alert-dismissible .close to
   the top-left of a fixed .75rem/1.25rem padding box, which only lands centred
   on a default-padding alert. Our compact alerts (py-2, e.g. the tenant scope
   banner) are shorter than that, so the x hangs below centre. Anchor it to the
   middle instead — works at any alert height. */
.alert-dismissible .close {
    top: 50%;
    transform: translateY(-50%);
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
}

/* QA 2026-08-24 ("Help Hover"): help icons used the native title= tooltip, which
   the browser delays ~1s and paints as a plain black box. They are Bootstrap
   tooltips now (instant, see initHelpTips in site.js) wearing this lighter,
   on-brand card style instead of the stock dark pill. */
.help-tip {
    cursor: help;
}

.btn.help-tip,
a.help-tip {
    cursor: pointer;
}

.tooltip.help-tooltip {
    opacity: 1;
}

.tooltip.help-tooltip .tooltip-inner {
    max-width: 320px;
    padding: .5rem .7rem;
    text-align: left;
    font-size: .8125rem;
    line-height: 1.45;
    color: #2b2f6b;
    background-color: #fff;
    border: 1px solid #d3d6e4;
    border-radius: 6px;
    box-shadow: 0 4px 14px rgba(27, 30, 66, .18);
}

.tooltip.help-tooltip .arrow::before {
    border-top-color: #d3d6e4;
    border-bottom-color: #d3d6e4;
    border-left-color: #d3d6e4;
    border-right-color: #d3d6e4;
}

body.mod-skin-dark .tooltip.help-tooltip .tooltip-inner {
    color: #dfe2ea;
    background-color: #2b3038;
    border-color: #444b56;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
}

body.mod-skin-dark .tooltip.help-tooltip .arrow::before {
    border-top-color: #444b56;
    border-bottom-color: #444b56;
    border-left-color: #444b56;
    border-right-color: #444b56;
}

/* Names the selected property beside the page title, on every tenant-scoped screen.
   QA 2026-08-24 ("Selected Tenant is a little hard on the eyes"): a solid badge-primary
   pill put bold white on saturated navy right next to the title. Softer since, and
   2026-09-03 brought it onto the Gateway palette proper — a gold rule on the leading
   edge ties it to the brand without competing with the heading it sits beside. */
.tenant-scope-badge {
    font-weight: 500;
    font-size: .72rem;
    letter-spacing: .01em;
    padding: .35em .7em;
    border-radius: 3px;
    color: #21245B;
    background-color: #eef1f8;
    border: 1px solid #d8dceb;
    border-left: 3px solid #DEAC11;
    text-shadow: none;
    vertical-align: middle;
}

.tenant-scope-badge > i {
    color: #1A80B6;
    opacity: .85;
}

body.mod-skin-dark .tenant-scope-badge {
    color: #dbe0f0;
    background-color: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
    border-left-color: #DEAC11;
}

body.mod-skin-dark .tenant-scope-badge > i {
    color: #DEAC11;
}

/* QA 2026-08-24 ("Bottom of characters cut off", user Edit -> Email Address):
   the theme sizes inputs with `height: calc(1.47em + 1rem + 2px)` while the text
   inside is laid out at `line-height: 1.47`. Those should agree, but Chrome
   resolves the calc to 1/64px LayoutUnit precision and floors it, landing one
   LayoutUnit BELOW the line box the same font actually needs (34.90625px of box
   leaves a 17.90625px content box for a 17.921875px line box). At 100% display
   scaling the shortfall is sub-pixel and invisible; at 125% — which is what the
   reporter runs — it lands on a whole device pixel and shaves the bottom off
   descenders, so "waysideco" loses the tail of its y.

   Deriving the height from the content instead of asserting it removes the
   disagreement: padding + line-height + border is what the calc was reaching for
   anyway, so the boxes keep their size but can no longer come up short. Each
   size variant keeps its own padding/line-height, hence min-height on the base
   rather than one fixed value for all of them.

   Deliberately NOT extended to .custom-file / .custom-file-label: that widget
   stacks an invisible input over an absolutely-positioned label whose ::after
   draws the Browse button, and letting any of those heights go auto pulls the
   stack apart. It is left on the theme's fixed height. */
.form-control,
.form-control-sm,
.form-control-lg,
.custom-select {
    height: auto;
}

.form-control:not(.dropdown) {
    min-height: calc(1.47em + 1rem + 2px);
}

/* Bootstrap's tinted table rows come from its own palette, so .table-success is a
   mint derived from SmartAdmin's teal (#1dc9b7) — nothing to do with Gateway, whose
   success is the olive #7F9C3D. Retinted from the theme's own --theme-success-50. */
.table-success,
.table-success > th,
.table-success > td {
    background-color: #f2f5e8;
}

/* QA 2026-08-24 ("Checkboxes yellow" + "Success is yellow and empty"):
   gateway-theme.css defines --theme-success: #7F9C3D and repaints .bg-success /
   .text-success green, but the form-validation block in gateway-base-theme.css
   was never updated with it and still paints every valid/success affordance the
   brand gold #DEAC11 — the tick, the border, the checked box, and the label text
   beside it. So a passing field and a checked Tenant Access box read as "warning"
   against a UI where success is green everywhere else.

   These live in site.css rather than the theme file on purpose: the SmartAdmin
   theme picker swaps the #mytheme href wholesale, and anything written there is
   lost the moment another theme is selected. site.css loads last, so equal
   specificity is enough. */
.was-validated .form-control:valid,
.form-control.is-valid,
.was-validated .custom-select:valid,
.custom-select.is-valid,
.was-validated .custom-file-input:valid ~ .custom-file-label,
.custom-file-input.is-valid ~ .custom-file-label,
.was-validated .custom-control-input:valid ~ .custom-control-label::before,
.custom-control-input.is-valid ~ .custom-control-label::before {
    border-color: #7F9C3D;
}

.valid-feedback,
.was-validated .custom-control-input:valid ~ .custom-control-label,
.custom-control-input.is-valid ~ .custom-control-label {
    color: #7F9C3D;
}

.was-validated .custom-control-input:valid:checked ~ .custom-control-label::before,
.custom-control-input.is-valid:checked ~ .custom-control-label::before {
    border-color: #7F9C3D;
    background-color: #7F9C3D;
}

.was-validated .form-control:valid,
.form-control.is-valid {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%237F9C3D' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
}

.was-validated .form-control:valid:focus,
.form-control.is-valid:focus,
.was-validated .custom-select:valid:focus,
.custom-select.is-valid:focus {
    border-color: #7F9C3D;
    box-shadow: 0 0 0 0.2rem rgba(127, 156, 61, 0.25);
}

/* Second half of "Success is yellow and empty": the tick also appeared beside
   fields the user never filled. Submitting puts .was-validated on the whole
   form, and Bootstrap then decorates every :valid control — but an EMPTY input
   with no `required` attribute is valid by HTML5 rules, so First Name, Last Name
   and Phone all claimed success while blank. Only Email carries `required`,
   which is why it alone showed the error.

   An optional field has nothing to confirm, so it gets no success affordance at
   all. This is presentation only — it does not change what the form accepts.
   (Worth noting separately: First/Last name render an "…you missed this one"
   message but are NOT [Required] on InputModel, so a blank name really does
   submit. Making them required is a behaviour change and is left as a decision.) */
.was-validated .form-control:not([required]):valid,
.was-validated .custom-select:not([required]):valid {
    background-image: none;
    border-color: #E5E5E5;
}

/* Second half of "Checkboxes yellow": with the multi_select.css bleed scoped off
   (see that file), the app's own checkboxes fall back to the base theme's grey
   #7a7a7a. The request was green/success, which also matches --theme-success and
   the rest of the UI. No !important: the Settings page deliberately keeps its
   switches on the theme gold via higher-specificity .authentication-panel rules
   (#41), and those still win. */
.custom-control-input:checked ~ .custom-control-label::before {
    border-color: #7F9C3D;
    background-color: #7F9C3D;
}

.custom-control-input:checked ~ .custom-control-label {
    color: #7F9C3D;
}

/* QA 2026-09-08 ("Letter Spacing"): the theme sets letter-spacing: 0.1px on <body>, so
   every string in the app carries a hair of tracking it was never designed with. Tracking
   belongs on uppercase runs, not on body copy — and the app already fights it back with
   inline letter-spacing:0 in places (see the F&B mapping table headers). Reset it at the
   source instead. Uppercase treatments that DO want tracking set their own. */
body {
    letter-spacing: normal;
}

/* QA 2026-09-08 ("outline colour on Campaign is ready to send alert"): .alert-success kept
   SmartAdmin's teal (#45a197 on #a3ebe4), so the one alert that means "this worked" was the
   only success affordance in the app not wearing --theme-success. Read as a caution next to
   the green used everywhere else. Retinted onto the Gateway olive, same treatment the
   validation affordances got above. */
.alert-success {
    color: #55742a;
    background-color: #f6f9ee;
    border-color: #cbdba6;
}

.alert-success .fal,
.alert-success .fas {
    color: #7F9C3D;
}

/* QA 2026-09-08 ("Titles next to radio buttons floating"): Bootstrap's custom radio/checkbox
   label is positioned against a fixed 1rem-tall pseudo-element, so a label whose line-height
   differs from that box sits above its own control. Give the label the control's height and
   centre the text in it — works for one-line labels and leaves wrapped ones alone. */
.custom-control-label {
    display: inline-flex;
    align-items: center;
    min-height: 1.25rem;
}

/* QA 2026-09-09 ("Notification extending" / "Odd looking Notification"): a relayed board comment
   can carry a URL longer than the panel it lands in, and an unbroken token does not wrap on its
   own — it overflowed the row on the list and ran off the page on the detail view. Break inside
   the token only when there is no other option, so ordinary prose still wraps between words. */
.gw-notification-body {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Notifications page: the category buttons on the left, "Mark all as read" on the right. They
   wrap under each other on a phone rather than squeezing the buttons. */
.gw-noti-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 1rem;
}
.gw-noti-bar .btn-group { flex-wrap: wrap; }

/* ─────────────────────────────────────────────────────────────────────────────
   QA 2026-09-09, "Word in button floating" / "Field content floating high",
   both returned as still-an-issue after the flex fix. They were right.

   Centring the flex line was necessary but not sufficient: inside the line, the
   glyphs sit above its middle because the face's ascent and descent are not
   symmetrical, and no amount of align-items reaches inside a line box. Measured
   on this build, ink to the top of the content box vs ink to the bottom:

       .btn      2.00 / 3.91      .btn-sm   2.00 / 3.88
       .btn-xs   2.00 / 3.75      .btn-lg   3.00 / 4.50

   The skew is ~1.9px at every size, not a proportion of it — a fixed 1px shift
   corrects all four rather than a per-size ratio. Applied as padding so the box
   keeps its height, and only where there is text to centre: an icon-only button
   has no glyph asymmetry to correct and would be pushed low by the same nudge.
   ───────────────────────────────────────────────────────────────────────────── */
.btn:not(.btn-icon) {
    padding-top: calc(.5rem + 1px);
    padding-bottom: calc(.5rem - 1px);
}

.btn-sm:not(.btn-icon),
.btn-group-sm > .btn:not(.btn-icon) {
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem - 1px);
}

.btn-xs:not(.btn-icon) {
    padding-top: 2px;
    padding-bottom: 0;
}

.btn-lg:not(.btn-icon),
.btn-group-lg > .btn:not(.btn-icon) {
    padding-top: calc(.75rem + 1px);
    padding-bottom: calc(.75rem - 1px);
}

/* Single-line text inputs carry the same asymmetry — this is the "Enter a campaign
   name sits high" report. Selects and textareas are left alone: a select's text is
   painted by the browser, and a textarea's first line is not a centring problem. */
/* Text only. A date, time or colour input is painted by the browser — its calendar glyph
   and spinners are placed against the box, not a text baseline — so the optical correction
   for glyph asymmetry does not apply to them, and applying it pushed the calendar icon a
   pixel low ("calendar icons are sinking", QA, on the dashboard's custom range). */
input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="date"]):not([type="datetime-local"]):not([type="time"]):not([type="month"]):not([type="week"]):not([type="color"]):not([type="range"]):not([type="file"]) {
    padding-top: calc(.5rem + 1px);
    padding-bottom: calc(.5rem - 1px);
}

input.form-control-sm {
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(.375rem - 1px);
}

/* QA 2026-09-09 ("Vetically centered", and "titles still high" on the roles detail
   page): table cells inherit the theme's top alignment, so a row mixing a one-line
   value with a badge, a button or a radio reads as ragged.
 
   Body TH as well as TD — the first pass covered only td, and a table that puts its
   row title in a th (the access-role matrix does exactly that: "Campaign Performance"
   in a th, its three radios in tds) ended up with the title top-aligned against
   middle-aligned controls, which is precisely the "floating high" that came back. */
.table > tbody > tr > td,
.table > tbody > tr > th,
table.dataTable > tbody > tr > td,
table.dataTable > tbody > tr > th {
    vertical-align: middle;
}

/* The section headings in these matrices sit in a thead th beside their column
   labels ("Dashboards" against Read Only / Read Write / Not Available). Same
   treatment, or the heading rides above the labels it belongs with. */
.table > thead > tr > th {
    vertical-align: middle;
}

.table > thead > tr > th > h5 {
    line-height: 1.4;
}

/* ─────────────────────────────────────────────────────────────────────────────
   QA 2026-09-09 ("Alert Colours"): every alert but success was still on the
   stock template palette, so none of them matched --theme-*, and info was the
   giveaway she spotted — its background was mixed from one teal (46,161,186)
   and its border from another (26,128,182), so the box did not even agree with
   its own edge. Each variant is now a tint of its own theme colour, on the same
   recipe as success: near-white ground, mid-tint edge, dark text for contrast.
   ───────────────────────────────────────────────────────────────────────────── */
.alert-info {          /* --theme-info #1A80B6 */
    color: #10506F;
    background-color: #EAF4FA;
    border-color: #ADD3E8;
}

.alert-warning {       /* --theme-warning #DEAC11 */
    color: #7A5D06;
    background-color: #FDF8E8;
    border-color: #F0DDA0;
}

.alert-danger {        /* --theme-danger #E51A38 */
    color: #8E1023;
    background-color: #FDEDEF;
    border-color: #F5B3BC;
}

.alert-primary {       /* --theme-primary #121A26 */
    color: #121A26;
    background-color: #EEF0F3;
    border-color: #C3C8D0;
}

.alert-secondary {     /* --theme-secondary #21245B */
    color: #21245B;
    background-color: #EDEEF5;
    border-color: #BFC2DB;
}

.alert-dark {
    color: #121A26;
    background-color: #E6E8EC;
    border-color: #B7BDC7;
}

.alert-info .fal,   .alert-info .fas   { color: #1A80B6; }
.alert-warning .fal, .alert-warning .fas { color: #B98A0C; }
.alert-danger .fal, .alert-danger .fas { color: #E51A38; }

/* ─────────────────────────────────────────────────────────────────────────────
   The campaign wizard's footer bar, in one place.

   Each step used to style its own: pinned to the bottom of the viewport, which
   needed an opaque white background and a top border to stop content showing
   through underneath. That box matched nothing else on the page, and fixing it
   on the audience step alone earned "it is still an issue on other steps" —
   correctly, because Variable Data had its own copy of the same rule.

   Nothing is pinned now (each step's long content scrolls inside its own
   wrapper), so the bar needs no ground of its own, and there is one definition
   to change the next time it is wrong.

   Spacing, from the same round: each button sat in its own grid column, so
   Bootstrap's 30px gutter separated them while every other pair in the app sits
   about .5rem apart.
   ───────────────────────────────────────────────────────────────────────────── */
.gw-wizard-nav {
    padding: .75rem 0;
    background: none;
    border-top: 0;
}

/* The count, or the "no audience yet" warning, reads as a caption for the buttons —
   so it sits with them rather than stranded at the far left of an empty row. */
.gw-wizard-nav .audience-nav-note {
    text-align: right;
}

.gw-wizard-nav > .col-auto + .col-auto {
    padding-left: .25rem;
}

.gw-wizard-nav > .col-auto:not(:last-child) {
    padding-right: .25rem;
}

.btn + .btn {
    margin-left: .5rem;
}

/* ...except where a container already owns the spacing: input groups butt their controls up
   against each other on purpose, and btn-group draws one continuous control. */
.input-group .btn + .btn,
.btn-group .btn + .btn,
.btn-group-vertical .btn + .btn {
    margin-left: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   QA 2026-09-09 ("Send Test Illegible"). Measured white-on-colour contrast for
   every solid button, against the 4.5:1 that normal text needs:

       success 3.12    warning 2.42    danger 4.49    info 4.37
       primary 17.48   secondary 15.91   light 13.83   dark 15.91

   So four of the eight were at or under the line before anything else happened
   to them — and the button she could not read was a DISABLED one, where the
   theme's .65 opacity takes 4.37 down to roughly 2.5. Fixed at both ends: the
   backgrounds carry enough contrast on their own, and a disabled button is
   muted without being unreadable.

   Warning keeps its gold and takes dark text instead — white on gold cannot be
   rescued by darkening without losing the colour, and dark on gold reads 8.34.
   ───────────────────────────────────────────────────────────────────────────── */
/* !important on these two only, and not for the fun of it: gateway-theme.css declares
   .btn-success and .btn-info with !important, so ordinary weight loses to it. Kept here
   rather than edited there because the theme file is swappable and site.css is not. */
.btn-success {
    background-color: #657C30 !important;   /* was #7F9C3D — white now 4.69 */
    border-color: #657C30 !important;
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
    background-color: #566A29 !important;
    border-color: #566A29 !important;
}

.btn-info {
    background-color: #1773A3 !important;   /* was #1A80B6 — white now 5.23 */
    border-color: #1773A3 !important;
}

.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active {
    background-color: #14638C !important;
    border-color: #14638C !important;
}

.btn-danger {
    background-color: #C0393E;   /* was #D64045 — white now 5.39 */
    border-color: #C0393E;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
    background-color: #A83036;
    border-color: #A83036;
}

.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
    color: #121A26;              /* dark on gold reads 8.34; white read 2.42 */
}

/* A disabled control should look unavailable, not unreadable. .65 was thin
   enough to erase low-contrast labels entirely — this still reads as "off". */
.btn:disabled,
.btn.disabled,
fieldset:disabled .btn {
    opacity: .78;
}

/* F&B import wizard, from QA's mockups: the requirements stated on step 1 rather than
   discovered from a rejection on step 2, and the list named at the top of step 2. */
.fb-required {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .75rem;
    align-items: baseline;
    border: 1px solid #e5e7ee;
    border-radius: 6px;
    background: #fbfbfd;
    padding: .7rem .9rem;
    font-size: .85rem;
    color: #55585f;
}

.fb-required-label {
    font-weight: 600;
    color: #3B4353;
}

.fb-map-lede {
    font-size: .95rem;
    color: #55585f;
}

/* QA 2026-09-09 ("Titles floating"): panel headers carry the same font asymmetry as the
   buttons — measured 15px above the text and 17px below it inside a 46px header. Nudged
   the same 1px, with position rather than padding so the header's own flex layout, its
   toolbar and its collapse control are all left exactly where they are. */
.panel-hdr > h2 {
    position: relative;
    top: 1px;
}

/* The access-role matrix puts a radio alone in each cell. The cell is middle-aligned now,
   but the control itself sits on the cell's text baseline, which left it about 3px above
   the row's middle — the other half of "titles still high, as well as the checkboxes".
   Aligning the control to the middle puts it on the same line as the row title it answers. */
.table .custom-control-inline {
    vertical-align: middle;
}

/* The solid buttons were darkened for contrast, and their outline twins were not — so a
   selected pill filled #1773A3 while the pill beside it drew its border, its text and its
   own hover fill in the old #1A80B6. Two blues where there should be one ("Current Month
   ... doesn't fill with the colour like the others", QA). Outlines follow their solids. */
.btn-outline-info {
    color: #1773A3;
    border-color: #1773A3;
}

.btn-outline-info:hover,
.btn-outline-info:focus,
.btn-outline-info:active,
.btn-outline-info.active {
    background-color: #1773A3;
    border-color: #1773A3;
    color: #fff;
}

.btn-outline-success {
    color: #657C30;
    border-color: #657C30;
}

.btn-outline-success:hover,
.btn-outline-success:focus,
.btn-outline-success:active,
.btn-outline-success.active {
    background-color: #657C30;
    border-color: #657C30;
    color: #fff;
}

.btn-outline-danger {
    color: #C0393E;
    border-color: #C0393E;
}

.btn-outline-danger:hover,
.btn-outline-danger:focus,
.btn-outline-danger:active,
.btn-outline-danger.active {
    background-color: #C0393E;
    border-color: #C0393E;
    color: #fff;
}

/* =============================================================================
   Panel corner radius — platform-wide.

   The Text-to-Win mockup the client signed off on uses a 10px panel radius, noticeably
   softer than SmartAdmin's stock 4px. Rather than leave one module looking different from
   the rest of the CDP, the mockup's radius becomes the platform's.

   It lives here in site.css and NOT in a theme file on purpose: the SmartAdmin theme picker
   swaps the #mytheme stylesheet at runtime, so anything shared that lives in a theme
   disappears the moment somebody changes colour scheme.

   The header and footer corners have to move with it. SmartAdmin sets `border-radius:
   4px 4px 0 0` on .panel-hdr; left alone, its square-ish corners sit proud of a 10px panel
   and the join shows as a notch.
   ============================================================================= */
.panel {
    border-radius: 10px;
}

.panel .panel-hdr {
    border-radius: 10px 10px 0 0;
}

/* Whatever ends the panel carries the bottom corners. The container is the usual case; the
   footer wins when a panel has one. */
.panel .panel-container:last-child,
.panel .panel-container > .panel-content:last-child {
    border-radius: 0 0 10px 10px;
}

.panel .panel-footer {
    border-radius: 0 0 10px 10px;
}

/* A fullscreen panel fills the viewport — rounded corners against the window edge look like
   a rendering fault, so it stays square while it is up. */
.panel.panel-fullscreen,
.panel.panel-fullscreen .panel-hdr,
.panel.panel-fullscreen .panel-container:last-child {
    border-radius: 0;
}

/* =============================================================================
   Breathing room under the top bar.

   Page content started hard against the header, which reads as cramped now that panels
   have a softer corner. 20px applies to the content region rather than to <body>: the
   header is inside the same flow, so spacing the body would push the header itself down
   and leave a band of background above it.
   ============================================================================= */
.page-content {
    padding-top: 20px;
}

/* Row actions in a panel toolbar: give a plain icon link the same box as the
   3-dot toggle beside it.

   .panel-toolbar is already flex/align-items:center, so the two were being centred
   correctly as boxes -- but .btn-toolbar-master is height:3rem with its own internal
   centring and font-size:1.5625rem, while a bare <a> is only as tall as its icon's
   line box at body font size. Centring two boxes that different leaves the glyphs at
   visibly different heights, which reads as the eye floating above the dots.

   Matching the height is the fix; the icons keep their own sizes. Lives in site.css
   rather than a theme file because the theme picker swaps #mytheme wholesale and
   shared component rules have to survive that. */
.panel-toolbar .panel-toolbar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 3rem;
}

/* QA 2026-09-21, the same pair still reads as misaligned. Matching the boxes was right and
   is what makes the rest of this stable -- but centring is done on the line box, and the two
   glyphs do not fill their line boxes the same way. fa-ellipsis-v is a tall column of dots
   set at 1.5625rem; fa-eye is a short wide glyph at body size. Two boxes centred perfectly
   can still look 3px apart when the ink inside them sits differently, and no amount of
   further box alignment closes that -- it is an optical correction, so it is done by eye and
   by hand.

   The nudge is on the glyph rather than on the <a>, so the 3rem hit area it sits in does not
   move with it. */
.panel-toolbar .panel-toolbar-icon > i {
    position: relative;
    top: 3px;
}

/* QA 2026-09-21, "Notification extending" returned a third time. The two earlier fixes were
   never in force on the list page: DataTables' own `table.dataTable.nowrap td` sets
   white-space:nowrap on every cell, the expanded detail panel is injected INTO one of those
   cells, and nowrap inherits straight through it. overflow-wrap and word-break cannot wrap
   anything while white-space says not to, so both rules were inert exactly where the bug was
   reported. Restore normal wrapping across the injected panel -- everything inside it, so a
   field added later is covered -- and hold the text off the panel edge. */
.gw-notification-detail,
.gw-notification-detail * {
    white-space: normal;
}

.gw-notification-detail .panel-content,
.gw-notification-detail .panel-hdr {
    padding-right: 20px;
}

/* QA 2026-09-18, "Notification extending" returned. The 2026-09-09 fix gave the message body
   somewhere to break, and it works -- but a notification panel has three fields, and only one
   of them got the rule. The title and the subject sit in the same panel and still ran outside
   it, which is the same bug wearing a different field. Same treatment, applied to the headings
   rather than to another single field, so the next one added is covered by default. */
.gw-notification-heading {
    overflow-wrap: anywhere;
    word-break: break-word;
}