body {padding-top:56px;}
img {max-width:100%;}
td,th {
    text-align: left;
}
table {
    margin-bottom: 1em;
}
label {
    min-width:6em;
}

/* ---------------------------------------------------------------------------
   Brand: the same palette and buttons as the marketing page at
   /bm-loyalty/ (navy #281e41, teal #23d99c). Bootstrap 4's own button
   classes are restyled here rather than renamed, so the pages keep their
   markup. The gijgo date picker's .btn-default and .btn-link are left alone.
   --------------------------------------------------------------------------- */
:root {
    --bml-navy: #281e41;
    --bml-teal: #23d99c;
    --bml-teal-dark: #1cc48c;
    --bml-grey: #4a4a4a;
    --bml-line: #e6e6e6;
}

body {
    color: var(--bml-navy);
}
h1, h2, h3, h4, h5, h6, legend {
    color: var(--bml-navy);
}
a {
    color: var(--bml-navy);
}
a:hover {
    color: var(--bml-teal-dark);
}
/* Link-style buttons (Back to login, Forgot password?) follow the links,
   not Bootstrap's blue. */
.btn-link {
    color: var(--bml-navy);
}
.btn-link:hover, .btn-link:focus {
    color: var(--bml-teal-dark);
}

.btn:not(.btn-link):not(.btn-default):not(.input-group-append .btn):not(.input-group-prepend .btn) {
    border-radius: 999rem;
    font-size: .875rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 12px 26px;
    border-width: 2px;
    transition: all .2s ease-in;
}
.btn-sm:not(.btn-link):not(.btn-default):not(.input-group-append .btn):not(.input-group-prepend .btn) {
    font-size: .75rem;
    padding: 6px 16px;
    letter-spacing: .5px;
}
.btn-lg:not(.btn-link):not(.btn-default):not(.input-group-append .btn):not(.input-group-prepend .btn) {
    font-size: .9375rem;
    padding: 14px 32px;
}

/* Primary action: teal, as on the marketing page's "Start a 30-day trial". */
.btn-brand, .btn-lg[type="submit"] {
    background-color: var(--bml-teal);
    border-color: var(--bml-teal);
    color: var(--bml-navy);
}
.btn-brand:hover, .btn-brand:focus, .btn-lg[type="submit"]:hover, .btn-lg[type="submit"]:focus {
    background-color: var(--bml-teal-dark);
    border-color: var(--bml-teal-dark);
    color: var(--bml-navy);
}

/* Everyday action: navy, as on the marketing page's dark buttons. */
.btn-dark {
    background-color: var(--bml-navy);
    border-color: var(--bml-navy);
    color: #fff;
}
.btn-dark:hover, .btn-dark:focus, .btn-dark:not(:disabled):not(.disabled):active {
    background-color: #1b1430;
    border-color: #1b1430;
    color: #fff;
}
.btn-outline-dark {
    color: var(--bml-navy);
    border-color: var(--bml-navy);
    background-color: transparent;
}
.btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:not(:disabled):not(.disabled):active,
.btn-outline-dark.active {
    background-color: var(--bml-navy);
    border-color: var(--bml-navy);
    color: #fff;
}

.badge-brand, .bml-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999rem;
    background: var(--bml-teal);
    color: var(--bml-navy);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.card {
    border-color: var(--bml-line);
    border-radius: .5rem;
}
.form-control:focus, .custom-select:focus {
    border-color: var(--bml-teal);
    box-shadow: 0 0 0 .2rem rgba(35, 217, 156, .25);
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--bml-teal);
    border-color: var(--bml-teal);
}
.alert-info {
    background-color: rgba(35, 217, 156, .12);
    border-color: rgba(35, 217, 156, .4);
    color: var(--bml-navy);
}
.alert-success {
    background-color: rgba(35, 217, 156, .18);
    border-color: var(--bml-teal);
    color: var(--bml-navy);
}

/* Login, sign-up, forgot and reset pages on a phone: the primary button
   spans the form and the links sit together on the line beneath it. */
@media (max-width: 575.98px) {
    form .btn-brand {
        display: block;
        width: 100%;
        margin-bottom: .5rem;
    }
    form .btn-brand ~ .btn-link {
        padding-left: 0;
        padding-right: 1.25rem;
    }
}

/* Narrow screens. Ids in tables stay on one line (the table scrolls
   instead), and a heading row with a button wraps rather than overflowing. */
.table code {
    white-space: nowrap;
}
.table-responsive {
    margin-bottom: 1em;
}
.table-responsive > .table {
    margin-bottom: 0;
}
@media (max-width: 575.98px) {
    .container > .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: .5rem;
    }
}

/* Tables on a phone: tighter cells, and the row's action buttons stack in the
   last column instead of running off the right-hand edge. */
@media (max-width: 575.98px) {
    .table th,
    .table td {
        padding: .5rem .4rem;
    }
    .table td:last-child .btn {
        display: block;
        width: 100%;
        margin: 0 0 .3rem;
    }
    .table td:last-child .btn:last-child {
        margin-bottom: 0;
    }
}

/* Business card pass preview.
   Measured from Wallet on an iPhone 17 (card 361pt wide, 501pt tall); the
   preview is 320px wide, so sizes are points x 0.886.
     header area 60pt, banner edge to edge at 2.5:1,
     label 13pt semibold uppercase 10pt below the banner, value 28pt regular,
     name over banner: 48pt light, forced white, title 21pt regular below it,
     QR 128pt in a 10pt white box, 14pt from the bottom. */
.pass-preview {
    position: relative;
    width: 320px;
    height: 444px;
    border-radius: 11px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    padding: 0 13px;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    overflow: hidden;
}
.pass-header {
    height: 53px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
.pass-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    height: 53px;   /* the logo (up to 44px) sits centred in the header row */
}
.pass-logo {
    max-height: 44px;
    max-width: 142px;
    width: auto;
    height: auto;
}
.pass-header-points {
    text-align: right;
    flex-shrink: 0;
    padding-top: 12px;
}
.pass-row {
    display: flex;
    gap: 14px;
    margin-top: 9px;
}
.pass-row-primary {
    align-items: center;
    justify-content: space-between;
}
.pass-cell {
    min-width: 0;
    flex: 1 1 auto;
}
.pass-row .pass-value {
    font-size: 14.5px;
}
.pass-preview .pass-row-primary .pass-primary-cell .pass-value {
    font-size: 25px;
}
/* Wallet shows the thumbnail as a square with slightly rounded corners
   inside a thin light frame, not a circle. */
.pass-thumb {
    width: 80px;
    height: 80px;
    border-radius: 5px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 3px;
    background: #fff;
    object-fit: cover;
    flex-shrink: 0;
}
.pass-qr-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    text-align: center;
    font-size: 10px;
    color: #222;
}
.pass-preview .pass-qr {
    bottom: 26px;
}
.pass-header-value {
    /* Wallet draws the header value at about 25pt, its label at 12pt */
    font-size: 22px;
    font-weight: 400;
    line-height: 1.1;
}
.pass-header-points .pass-label {
    font-size: 10.5px;
}
.pass-strip-wrap {
    position: relative;
    margin: 0 -13px;
}
.pass-strip {
    display: block;
    width: 100%;
    height: auto;
}
.pass-strip-empty {
    height: 128px;
    border-top: 1px dashed rgba(128, 128, 128, 0.6);
    border-bottom: 1px dashed rgba(128, 128, 128, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(128, 128, 128, 0.9);
    font-size: 0.85em;
}
.pass-primary {
    position: absolute;
    top: 21px;
    left: 13px;
    right: 13px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}
.pass-primary .pass-value {
    font-size: 42px;
    font-weight: 300;
    line-height: 1.05;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pass-primary .pass-label {
    margin-top: 12px;
    font-size: 18.5px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #fff !important;
}
.pass-field {
    margin-top: 9px;
}
.pass-label {
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.3;
    min-height: 1em;
}
.pass-value {
    margin-top: 4px;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pass-qr {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    width: 131px;
    height: 131px;
    background: #fff;
    padding: 9px;
    border-radius: 6px;
}
.pass-qr img, .pass-qr canvas {
    display: block;
    width: 113px;
    height: 113px;
}
.artwork-preview canvas {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    margin-top: 8px;
    background: repeating-conic-gradient(#f3f3f3 0 25%, #fff 0 50%) 0 0 / 16px 16px;
}

/* Dark mode: follows the system setting. Bootstrap 4 has no dark theme, so
   the surfaces the dashboard uses are restyled here. The pass preview keeps
   the company's own colours, and the nav is coloured by paintNav() in i2u.js. */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #121212;
        color: #e6e6e6;
    }
    label {
        color: #f0f0f0;
    }

    /* Brand in dark mode: teal keeps its contrast, navy surfaces lift. */
    body, h1, h2, h3, h4, h5, h6, legend {
        color: #e6e6e6;
    }
    a {
        color: var(--bml-teal);
    }
    a:hover {
        color: #6fe8bd;
    }
    .btn-link {
        color: var(--bml-teal);
    }
    .btn-link:hover, .btn-link:focus {
        color: #6fe8bd;
    }
    .btn-dark {
        background-color: #3a2d5c;
        border-color: #3a2d5c;
        color: #fff;
    }
    .btn-dark:hover, .btn-dark:focus, .btn-dark:not(:disabled):not(.disabled):active {
        background-color: #4a3a74;
        border-color: #4a3a74;
    }
    .btn-outline-dark {
        color: #e6e6e6;
        border-color: #6b5f8c;
    }
    .btn-outline-dark:hover, .btn-outline-dark:focus, .btn-outline-dark:not(:disabled):not(.disabled):active,
    .btn-outline-dark.active {
        background-color: #6b5f8c;
        border-color: #6b5f8c;
        color: #fff;
    }
    .card {
        background-color: #1e1e1e;
        border-color: #333;
    }
    .alert-info {
        background-color: rgba(35, 217, 156, .12);
        border-color: rgba(35, 217, 156, .35);
        color: #cfeee1;
    }
    .alert-success {
        background-color: #1e3a2e;
        border-color: #2f7d5c;
        color: #b7e4c7;
    }
    .text-muted, .form-text, .pass-preview-note {
        color: #a0a0a0 !important;
    }
    hr {
        border-color: #333;
    }

    .table {
        color: #e6e6e6;
    }
    .table td, .table th {
        border-color: #333;
    }
    .thead-light th, .table .thead-light th {
        background-color: #1f1f1f;
        color: #e0e0e0;
        border-color: #333;
    }
    .table-hover tbody tr:hover {
        color: #ffffff;
        background-color: rgba(255, 255, 255, 0.06);
    }

    .form-control, .custom-select, select, textarea {
        background-color: #1e1e1e;
        color: #eeeeee;
        border-color: #444;
    }
    .form-control:focus {
        background-color: #1e1e1e;
        color: #ffffff;
        border-color: #8ab4f8;
        box-shadow: 0 0 0 0.2rem rgba(138, 180, 248, 0.25);
    }
    .form-control[readonly], .form-control:disabled {
        background-color: #2a2a2a;
        color: #bbbbbb;
    }
    .form-control::placeholder {
        color: #777;
    }
    input[type="file"], .form-control-file {
        color: #dddddd;
    }
    .input-group-text {
        background-color: #2a2a2a;
        color: #dddddd;
        border-color: #444;
    }

    .card {
        background-color: #1b1b1b;
        border-color: #333;
    }
    .modal-content {
        background-color: #1b1b1b;
        color: #e6e6e6;
    }
    .modal-header, .modal-footer {
        border-color: #333;
    }
    .close {
        color: #ffffff;
        text-shadow: none;
    }

    .btn-outline-danger {
        color: #ff7b7b;
        border-color: #ff7b7b;
    }
    .btn-outline-danger:hover {
        background-color: #ff7b7b;
        color: #121212;
    }

    .alert-success {
        background-color: #1e3a26;
        border-color: #2f5e3d;
        color: #b7e4c7;
    }
    .alert-danger {
        background-color: #3d1f22;
        border-color: #5e2f34;
        color: #f5b5b5;
    }
    .alert-warning {
        background-color: #3d3520;
        border-color: #5e532f;
        color: #f2e2a6;
    }

    .artwork-preview canvas {
        border-color: #444;
        background: repeating-conic-gradient(#2a2a2a 0 25%, #1b1b1b 0 50%) 0 0 / 16px 16px;
    }
    .pass-preview {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    }
    .alert-light {
        background-color: #1e1e1e;
        border-color: #333 !important;
        color: #e6e6e6;
    }
    body .site-footer {
        color: #a0a0a0;
    }
}

/* The logo on the dark-mode nav bar of a light brand: a chip of the brand's
   own background colour, so a logo drawn for that background still shows. */
.nav-logo-chip {
    padding: 4px 8px;
    border-radius: 6px;
}

/* Footer and legal pages */
.site-footer {
    margin-top: 3rem;
    padding: 1rem 0 1.5rem;
    font-size: 0.85em;
    color: #5f6770;
    text-align: center;
}
.site-footer a {
    color: inherit;
    text-decoration: underline;
}
.legal {
    max-width: 760px;
}
.legal p {
    line-height: 1.6;
}

/* Share modal: wide enough for the links and the full-size pass preview */
@media (min-width: 992px) {
    .modal-share .modal-dialog {
        max-width: 960px;
    }
}
.modal-share .pass-preview {
    margin: 0 auto;
}

.points-positive { color: #2e7d32; }
.points-negative { color: #c62828; }

/* Auxiliary field on a loyalty-style pass (the prize draw row): Wallet
   draws it smaller than the secondary field and lets it wrap. */
.pass-aux .pass-value {
    font-size: 14.5px;
    line-height: 1.25;
    white-space: normal;
}

.pass-preview-note {
    width: 320px;
    margin: 6px auto 0;   /* centred under the pass, which is centred the same way */
    text-align: center;
    font-size: 10px;
    color: #6c757d;   /* Bootstrap's secondary text colour */
}

/* Queue ticket: Wallet's event ticket. Nearly square corners and a notch cut
   from the top edge, with the fields closer together than on a store card:
   status about 20pt, place in line 17pt, the message line 14pt. The shadow
   is a filter on the wrapper so that it follows the notch. */
.pass-ticket-wrap {
    width: 320px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.18));
}
.pass-preview.pass-ticket {
    border-radius: 3px;
    box-shadow: none;
    -webkit-mask: radial-gradient(circle 36px at 50% -21px, transparent 35.5px, #000 36px);
    mask: radial-gradient(circle 36px at 50% -21px, transparent 35.5px, #000 36px);
}
.pass-ticket .pass-field {
    margin-top: 12px;
}
.pass-ticket .pass-header + .pass-field {
    margin-top: 7px;
}
.pass-ticket .pass-field .pass-label {
    line-height: 1.15;
}
.pass-ticket .pass-field .pass-value {
    margin-top: 0;
    font-size: 14.5px;
    line-height: 1.2;
    white-space: normal;
}
.pass-ticket .pass-ticket-status .pass-value {
    font-size: 18px;
}
.pass-ticket .pass-ticket-message .pass-value {
    font-size: 12.5px;
}
@media (prefers-color-scheme: dark) {
    .pass-ticket-wrap {
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
    }
}