:root {
    --sustain-navy: #003b73;
    --sustain-blue: #005f9e;
    --sustain-sky: #7bc4e8;
    --sustain-ink: #0f172a;
    --sustain-muted: #64748b;
    --sustain-surface: #f6f8fb;
    --sustain-border: #e2e8f0;
    --sustain-radius: 14px;
    --sustain-radius-control: 10px;
    --sustain-shadow: 0 10px 30px rgba(15, 23, 42, .06);
    --sustain-success: #198754;
    --sustain-danger: #dc3545;
    --sustain-warning: #ffc107;
    --sustain-info: #0dcaf0;
}

.sustain-skip-link {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 2000;
    padding: .65rem .9rem;
    color: #fff;
    background: var(--sustain-navy);
    border-radius: 8px;
    transform: translateY(-180%);
    transition: transform .15s ease;
}

.sustain-skip-link:focus {
    color: #fff;
    transform: translateY(0);
}

body.sustain-app,
body.sustain-auth {
    color: var(--sustain-ink);
    background: var(--sustain-surface);
}

body.sustain-app,
body.sustain-auth,
body.sustain-app button,
body.sustain-auth button,
body.sustain-app input,
body.sustain-auth input,
body.sustain-app select,
body.sustain-auth select,
body.sustain-app textarea,
body.sustain-auth textarea {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.sustain-app a:focus-visible,
body.sustain-app button:focus-visible,
body.sustain-app input:focus-visible,
body.sustain-app select:focus-visible,
body.sustain-app textarea:focus-visible,
body.sustain-auth a:focus-visible,
body.sustain-auth button:focus-visible,
body.sustain-auth input:focus-visible,
body.sustain-auth select:focus-visible,
body.sustain-auth textarea:focus-visible {
    outline: 3px solid var(--sustain-sky);
    outline-offset: 2px;
}

/* Shared authenticated shell */
body.sustain-app #page-topbar {
    border-bottom: 1px solid var(--sustain-border);
    box-shadow: 0 4px 18px rgba(15, 23, 42, .05);
}

body.sustain-app .navbar-brand-box {
    border-right: 1px solid var(--sustain-border);
}

body.sustain-app .main-content {
    background: var(--sustain-surface);
}

body.sustain-app .vertical-menu {
    background: var(--sustain-navy);
    box-shadow: 8px 0 24px rgba(0, 59, 115, .12);
}

body.sustain-app #sidebar-menu ul li a {
    color: rgba(255, 255, 255, .72);
    margin: 3px 12px;
    border-radius: 10px;
}

body.sustain-app #sidebar-menu ul li a i {
    color: rgba(255, 255, 255, .62);
}

body.sustain-app #sidebar-menu ul li a:hover,
body.sustain-app #sidebar-menu ul li a:hover i,
body.sustain-app #sidebar-menu ul li a.active,
body.sustain-app #sidebar-menu ul li a.active i,
body.sustain-app #sidebar-menu .mm-active > a,
body.sustain-app #sidebar-menu .mm-active > a i {
    color: #fff !important;
}

body.sustain-app #sidebar-menu ul li a:hover,
body.sustain-app #sidebar-menu ul li a.active,
body.sustain-app #sidebar-menu .mm-active > a {
    background: rgba(123, 196, 232, .16);
}

body.sustain-app #sidebar-menu ul li ul.sub-menu li a {
    color: rgba(255, 255, 255, .64);
    margin-left: 22px;
}

body.sustain-app #sidebar-menu .menu-title {
    color: rgba(255, 255, 255, .42);
}

body.sustain-app .page-title-box h4,
body.sustain-app .card-title {
    color: var(--sustain-ink);
    letter-spacing: 0;
    text-transform: none;
}

body.sustain-app .sustain-page-header {
    gap: .75rem;
}

body.sustain-app .sustain-page-header :is(h1, h2, h3, h4) {
    color: var(--sustain-ink);
    font-weight: 700;
    letter-spacing: -.015em;
}

body.sustain-app .sustain-page-header .breadcrumb {
    font-size: .78rem;
}

body.sustain-app .page-content :is(h1, h2, h3) {
    letter-spacing: -.015em;
}

body.sustain-app .page-title-box .breadcrumb a,
body.sustain-app .page-title-box .breadcrumb-item.active {
    color: var(--sustain-muted);
}

body.sustain-app .card {
    border: 1px solid var(--sustain-border);
    border-radius: var(--sustain-radius);
    box-shadow: var(--sustain-shadow);
}

body.sustain-app .card-header {
    background: transparent;
    border-bottom: 1px solid var(--sustain-border);
}

body.sustain-app .form-control,
body.sustain-app .form-select,
body.sustain-auth .form-control,
body.sustain-auth .form-select {
    border-color: #cbd5e1;
    border-radius: 10px;
    color: var(--sustain-ink);
}

body.sustain-app .form-control:focus,
body.sustain-app .form-select:focus,
body.sustain-auth .form-control:focus,
body.sustain-auth .form-select:focus {
    border-color: var(--sustain-blue);
    box-shadow: 0 0 0 .2rem rgba(0, 95, 158, .14);
}

body.sustain-app .btn-primary,
body.sustain-auth .btn-primary {
    background-color: var(--sustain-blue);
    border-color: var(--sustain-blue);
}

body.sustain-app .btn-primary:hover,
body.sustain-app .btn-primary:focus,
body.sustain-auth .btn-primary:hover,
body.sustain-auth .btn-primary:focus {
    background-color: var(--sustain-navy);
    border-color: var(--sustain-navy);
}

body.sustain-app .btn-outline-primary,
body.sustain-auth .btn-outline-primary {
    color: var(--sustain-blue);
    border-color: var(--sustain-blue);
}

body.sustain-app .btn-outline-primary:hover,
body.sustain-auth .btn-outline-primary:hover {
    color: #fff;
    background-color: var(--sustain-blue);
    border-color: var(--sustain-blue);
}

body.sustain-app .footer {
    background: #fff;
    border-top: 1px solid var(--sustain-border);
}

body.sustain-app .sustain-dashboard-hero {
    position: relative;
    overflow: hidden;
    min-height: 220px;
    padding: 2rem;
    color: #fff;
    border-radius: 18px;
    background:
        radial-gradient(circle at 90% 10%, rgba(123, 196, 232, .35), transparent 34%),
        linear-gradient(135deg, var(--sustain-navy), var(--sustain-blue));
    box-shadow: 0 18px 36px rgba(0, 59, 115, .18);
}

body.sustain-app .sustain-dashboard-hero h1 {
    max-width: 18ch;
    margin-bottom: .75rem;
    color: #fff;
    font-size: clamp(1.6rem, 2.6vw, 2.35rem);
    font-weight: 700;
    line-height: 1.15;
}

body.sustain-app .sustain-dashboard-hero p {
    max-width: 58ch;
    color: rgba(255, 255, 255, .78);
}

body.sustain-app .sustain-dashboard-hero .btn-light {
    color: var(--sustain-navy);
    border: 0;
    font-weight: 600;
}

body.sustain-app .sustain-action-card {
    height: 100%;
    padding: 1.5rem;
    border: 1px solid var(--sustain-border);
    border-radius: var(--sustain-radius);
    background: #fff;
    box-shadow: var(--sustain-shadow);
}

body.sustain-app .sustain-action-card h2,
body.sustain-app .sustain-action-card h3 {
    color: var(--sustain-ink);
}

body.sustain-app .sustain-kpi {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1rem;
    border: 1px solid var(--sustain-border);
    border-radius: 12px;
    background: #fff;
}

body.sustain-app .sustain-kpi .sustain-kpi-value {
    color: var(--sustain-navy);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

body.sustain-app .sustain-kpi .sustain-kpi-label {
    color: var(--sustain-muted);
    font-size: .78rem;
}

body.sustain-app .sustain-section-title {
    margin: 1.75rem 0 .85rem;
    color: var(--sustain-ink);
    font-size: 1.05rem;
    font-weight: 700;
}

body.sustain-app .sustain-inbox-summary {
    border: 1px solid var(--sustain-border);
    border-radius: var(--sustain-radius);
    background: #fff;
    box-shadow: var(--sustain-shadow);
}

body.sustain-app .sustain-inbox-summary .summary-item {
    min-height: 86px;
    padding: 1rem 1.1rem;
    border-right: 1px solid var(--sustain-border);
}

body.sustain-app .sustain-inbox-summary .summary-item:last-child {
    border-right: 0;
}

body.sustain-app .sustain-inbox-summary .summary-value {
    color: var(--sustain-navy);
    font-size: 1.4rem;
    font-weight: 700;
}

body.sustain-app .sustain-inbox-summary .summary-label {
    color: var(--sustain-muted);
    font-size: .78rem;
}

body.sustain-app .sustain-empty-state {
    padding: 2rem;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: var(--sustain-muted);
    text-align: center;
}

body.sustain-app .sustain-empty-state-icon {
    display: block;
    margin: 0 auto 1rem;
    color: var(--sustain-sky);
    font-size: 3rem;
    line-height: 1;
}

body.sustain-app .sustain-table-empty {
    padding: 2.5rem 1rem !important;
    text-align: center;
    color: var(--sustain-muted);
}

body.sustain-app .sustain-table-empty i {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--sustain-sky);
    font-size: 1.75rem;
}

body.sustain-app .sustain-table-empty strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--sustain-ink);
}

body.sustain-app .sustain-activity-list {
    margin-bottom: 0;
}

body.sustain-app .sustain-activity-list .list-group-item {
    margin-bottom: .75rem;
    padding: 1.15rem;
    border: 1px solid var(--sustain-border);
    border-radius: var(--sustain-radius);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}

body.sustain-app .sustain-activity-list .list-group-item:last-child {
    margin-bottom: 0;
}

body.sustain-app .sustain-activity-list .list-group-item img {
    border-radius: 10px;
}

body.sustain-app .sustain-inbox-table th,
body.sustain-app .sustain-inbox-table td {
    vertical-align: middle;
    white-space: nowrap;
}

body.sustain-app .sustain-inbox-table th:first-child,
body.sustain-app .sustain-inbox-table td:first-child {
    width: 1%;
}

body.sustain-app .sustain-inbox-table .dropdown-item {
    text-align: left;
}

body.sustain-app .sustain-exam-card {
    border: 1px solid var(--sustain-border);
    border-radius: var(--sustain-radius);
    box-shadow: var(--sustain-shadow);
}

body.sustain-app .sustain-exam-card h2 {
    color: var(--sustain-ink);
}

body.sustain-app .sustain-exam-context {
    color: var(--sustain-muted);
    font-size: .9rem;
    font-weight: 600;
}

body.sustain-app .sustain-exam-status {
    flex-shrink: 0;
    padding: .5rem .75rem;
    font-size: .78rem;
}

body.sustain-app .sustain-exam-meta {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .85rem 1rem;
    border: 1px solid var(--sustain-border);
    border-radius: 10px;
    background: #f8fafc;
}

body.sustain-app .sustain-exam-meta span,
body.sustain-app .sustain-exam-meta small {
    color: var(--sustain-muted);
    font-size: .75rem;
}

body.sustain-app .sustain-exam-meta strong {
    color: var(--sustain-ink);
    font-size: .9rem;
}

body.sustain-app .sustain-certificate-intro,
body.sustain-app .sustain-certificate-section {
    border: 1px solid var(--sustain-border);
    border-radius: var(--sustain-radius);
    box-shadow: var(--sustain-shadow);
}

body.sustain-app .sustain-certificate-intro {
    overflow: hidden;
}

body.sustain-app .sustain-certificate-intro .card-body {
    background: linear-gradient(120deg, #fff 55%, #f2f8fc);
}

body.sustain-app .sustain-certificate-count {
    display: flex;
    min-width: 92px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .65rem .9rem;
    border: 1px solid var(--sustain-border);
    border-radius: 10px;
    background: #fff;
}

body.sustain-app .sustain-certificate-count strong {
    color: var(--sustain-navy);
    font-size: 1.2rem;
    line-height: 1.2;
}

body.sustain-app .sustain-certificate-count span {
    margin-top: .2rem;
    color: var(--sustain-muted);
    font-size: .72rem;
    white-space: nowrap;
}

body.sustain-app .sustain-certificate-count.is-pending {
    border-color: #f4d58d;
    background: #fffaf0;
}

body.sustain-app .sustain-certificate-count.is-pending strong {
    color: #8a5a00;
}

body.sustain-app .sustain-certificate-list {
    display: grid;
    gap: .75rem;
    margin: 0;
}

body.sustain-app .sustain-certificate-item {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 1.1rem;
    padding: 1.1rem;
    border: 1px solid var(--sustain-border);
    border-radius: 12px;
    background: #fff;
}

body.sustain-app .sustain-certificate-thumbnail {
    width: 112px;
    height: 88px;
    flex: 0 0 112px;
    border-radius: 10px;
    object-fit: cover;
    background: #f1f5f9;
}

body.sustain-app .sustain-certificate-item-main {
    min-width: 0;
    flex: 1 1 auto;
}

body.sustain-app .sustain-certificate-item h3 {
    color: var(--sustain-ink);
    overflow-wrap: anywhere;
}

body.sustain-app .sustain-certificate-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem 1.25rem;
    margin-top: .8rem;
}

body.sustain-app .sustain-certificate-meta span {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .1rem;
}

body.sustain-app .sustain-certificate-meta small {
    color: var(--sustain-muted);
    font-size: .72rem;
}

body.sustain-app .sustain-certificate-meta strong {
    color: #334155;
    font-size: .82rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

body.sustain-app .sustain-certificate-actions {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
}

body.sustain-app .sustain-certificate-search {
    position: relative;
    width: min(100%, 24rem);
}

body.sustain-app .sustain-certificate-search > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: .85rem;
    color: var(--sustain-muted);
    transform: translateY(-50%);
}

body.sustain-app .sustain-certificate-search input {
    height: 42px;
    padding-left: 2.4rem;
    border-color: var(--sustain-border);
    border-radius: 10px;
}

body.sustain-app .sustain-certificate-section .sustain-empty-state {
    margin-top: .25rem;
}

body.sustain-app .sustain-certificate-section .sustain-section-title {
    color: var(--sustain-ink);
}

body.sustain-app .sustain-exam-progress-card,
body.sustain-app .sustain-exam-review-card,
body.sustain-app .sustain-exam-result-card {
    border: 1px solid var(--sustain-border);
    border-radius: var(--sustain-radius);
    box-shadow: var(--sustain-shadow);
}

body.sustain-app .sustain-exam-progress-card .progress {
    height: .55rem;
    overflow: hidden;
    border-radius: 999px;
    background: #e7edf4;
}

body.sustain-app .sustain-exam-progress-card .progress-bar {
    border-radius: inherit;
    background: var(--sustain-blue);
    transition: width .2s ease;
}

body.sustain-app .sustain-exam-question {
    border: 1px solid var(--sustain-border);
    border-radius: 12px;
    background: #fff;
}

body.sustain-app .sustain-exam-option {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .85rem 1rem;
    cursor: pointer;
}

body.sustain-app .sustain-exam-option:hover {
    background: #f8fafc;
}

body.sustain-app .sustain-exam-option .form-check-input {
    margin-top: .2rem;
}

body.sustain-app .sustain-exam-result-card {
    overflow: hidden;
}

body.sustain-app .sustain-exam-result-card .card-body {
    background: linear-gradient(135deg, #fff 65%, #f2f8fc);
}

body.sustain-app .sustain-exam-answer-list .list-group-item {
    display: flex;
}

body.sustain-app .sustain-exam-feedback {
    padding: .9rem 1rem;
    border-left: 3px solid var(--sustain-blue);
    border-radius: 0 8px 8px 0;
    background: #f2f8fc;
}

@media (max-width: 575.98px) {
    body.sustain-app .sustain-exam-card .card-body {
        padding: 1.15rem !important;
    }

    body.sustain-app .sustain-exam-result-card .card-body {
        padding: 1.25rem !important;
    }

    body.sustain-app .sustain-certificate-intro .card-body,
    body.sustain-app .sustain-certificate-section .card-body {
        padding: 1.15rem !important;
    }

    body.sustain-app .sustain-certificate-item {
        flex-wrap: wrap;
        gap: .85rem;
        padding: .9rem;
    }

    body.sustain-app .sustain-certificate-thumbnail {
        width: 76px;
        height: 64px;
        flex-basis: 76px;
    }

    body.sustain-app .sustain-certificate-item-main {
        flex-basis: calc(100% - 96px);
    }

    body.sustain-app .sustain-certificate-meta {
        grid-template-columns: 1fr;
        gap: .5rem;
    }

    body.sustain-app .sustain-certificate-actions {
        width: 100%;
    }

    body.sustain-app .sustain-certificate-actions .btn {
        width: 100%;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    body.sustain-app .sustain-certificate-item {
        flex-wrap: wrap;
    }

    body.sustain-app .sustain-certificate-actions {
        width: 100%;
        flex-direction: row;
    }
}

/* Authentication pages */
body.sustain-auth {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 10%, rgba(123, 196, 232, .22), transparent 30%),
        var(--sustain-surface);
}

body.sustain-auth .account-pages {
    padding-bottom: 2rem;
}

body.sustain-auth .account-pages .card {
    overflow: hidden;
    border: 1px solid var(--sustain-border);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 59, 115, .10);
}

body.sustain-auth .account-pages .bg-primary.bg-soft {
    background: linear-gradient(135deg, rgba(0, 95, 158, .12), rgba(123, 196, 232, .24)) !important;
}

body.sustain-auth .account-pages .text-primary {
    color: var(--sustain-navy) !important;
}

body.sustain-auth .auth-logo a,
body.sustain-auth .account-pages a {
    text-decoration: none;
}

body.sustain-auth .google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sustain-ink);
    border-color: var(--sustain-border);
}

body.sustain-auth .invalid-feedback {
    display: block;
}

@media (max-width: 991.98px) {
    body.sustain-app .vertical-menu {
        box-shadow: 8px 0 24px rgba(0, 59, 115, .18);
    }
}

@media (max-width: 767.98px) {
    body.sustain-app .sustain-activity-list .list-group-item .text-end {
        margin-top: 1rem;
        text-align: left !important;
    }

    body.sustain-app .sustain-activity-list .btn-group,
    body.sustain-app .sustain-activity-list .btn-group > .dropdown-toggle {
        width: 100%;
    }

    body.sustain-app .sustain-activity-list .list-group-item img {
        width: 100%;
        max-height: 180px;
        object-fit: cover;
        margin-bottom: 1rem;
    }

    body.sustain-app .sustain-inbox-summary .summary-item {
        border-right: 0;
        border-bottom: 1px solid var(--sustain-border);
    }

    body.sustain-app .sustain-inbox-summary .summary-item:last-child {
        border-bottom: 0;
    }
}

body.sustain-app .sustain-voucher-intro,
body.sustain-app .sustain-voucher-claim,
body.sustain-app .sustain-voucher-wallet {
    border: 1px solid var(--sustain-border);
    border-radius: var(--sustain-radius);
    box-shadow: var(--sustain-shadow);
}

body.sustain-app .sustain-voucher-intro {
    overflow: hidden;
}

body.sustain-app .sustain-voucher-intro .card-body {
    background: linear-gradient(120deg, #fff 55%, #f2f8fc);
}

body.sustain-app .sustain-voucher-count {
    display: flex;
    min-width: 120px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .7rem 1rem;
    border: 1px solid var(--sustain-border);
    border-radius: 10px;
    background: #fff;
}

body.sustain-app .sustain-voucher-count strong {
    color: var(--sustain-navy);
    font-size: 1.25rem;
    line-height: 1.2;
}

body.sustain-app .sustain-voucher-count span {
    margin-top: .2rem;
    color: var(--sustain-muted);
    font-size: .75rem;
    white-space: nowrap;
}

body.sustain-app .sustain-voucher-claim {
    border-left: 4px solid var(--sustain-blue);
}

body.sustain-app .sustain-voucher-step {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    margin-bottom: .65rem;
    border-radius: 50%;
    color: #fff;
    background: var(--sustain-blue);
    font-size: .85rem;
    font-weight: 700;
}

body.sustain-app .sustain-voucher-claim-copy {
    max-width: 34rem;
}

body.sustain-app .sustain-voucher-claim-form {
    display: flex;
    align-items: end;
    gap: .75rem;
}

body.sustain-app .sustain-voucher-claim-form .form-label {
    color: var(--sustain-ink);
    font-size: .82rem;
    font-weight: 600;
}

body.sustain-app .sustain-voucher-claim-form .form-control {
    min-height: 44px;
    border-color: var(--sustain-border);
    border-radius: 10px;
}

body.sustain-app .sustain-voucher-claim-form .btn {
    min-height: 44px;
    flex: 0 0 auto;
    white-space: nowrap;
}

body.sustain-app .sustain-voucher-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--sustain-border);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}

body.sustain-app .sustain-voucher-card-accent {
    height: 5px;
    background: linear-gradient(90deg, var(--sustain-navy), var(--sustain-sky));
}

body.sustain-app .sustain-voucher-card.is-used .sustain-voucher-card-accent {
    background: #94a3b8;
}

body.sustain-app .sustain-voucher-card.is-expired .sustain-voucher-card-accent {
    background: #dc3545;
}

body.sustain-app .sustain-voucher-card-body {
    padding: 1.2rem;
}

body.sustain-app .sustain-voucher-type {
    color: var(--sustain-muted);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

body.sustain-app .sustain-voucher-benefit {
    margin-top: .2rem;
    color: var(--sustain-navy);
    font-size: 1.45rem;
    font-weight: 750;
    line-height: 1.25;
}

body.sustain-app .sustain-voucher-terms {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .7rem 1rem;
    padding: .85rem 0;
    border-top: 1px solid var(--sustain-border);
    border-bottom: 1px solid var(--sustain-border);
}

body.sustain-app .sustain-voucher-terms span,
body.sustain-app .sustain-voucher-code-row > div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .15rem;
}

body.sustain-app .sustain-voucher-terms small,
body.sustain-app .sustain-voucher-code-row small {
    color: var(--sustain-muted);
    font-size: .72rem;
}

body.sustain-app .sustain-voucher-terms strong {
    color: #334155;
    font-size: .83rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

body.sustain-app .sustain-voucher-code-row {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: .75rem;
    margin-top: .9rem;
}

body.sustain-app .sustain-voucher-code-row code {
    color: var(--sustain-ink);
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .05em;
    overflow-wrap: anywhere;
}

body.sustain-app .sustain-voucher-copy-status:empty {
    display: none;
}

/* Shared controls and data views across admin, user, partner, and public pages */
body.sustain-app .btn:not(.btn-link),
body.sustain-auth .btn:not(.btn-link) {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .48rem .85rem;
    border-radius: var(--sustain-radius-control);
    font-size: .84rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

body.sustain-app .btn-sm:not(.btn-link),
body.sustain-auth .btn-sm:not(.btn-link) {
    min-height: 32px;
    padding: .34rem .65rem;
    border-radius: 8px;
    font-size: .76rem;
}

body.sustain-app .btn-lg:not(.btn-link),
body.sustain-auth .btn-lg:not(.btn-link) {
    min-height: 46px;
    padding: .65rem 1.15rem;
    font-size: .95rem;
}

body.sustain-app .btn:focus-visible,
body.sustain-auth .btn:focus-visible {
    outline: 3px solid rgba(123, 196, 232, .75);
    outline-offset: 2px;
    box-shadow: 0 0 0 .2rem rgba(0, 95, 158, .14);
}

body.sustain-app .btn:disabled,
body.sustain-app .btn.disabled,
body.sustain-auth .btn:disabled,
body.sustain-auth .btn.disabled {
    cursor: not-allowed;
}

body.sustain-app .btn-warning,
body.sustain-auth .btn-warning {
    color: #332600;
}

body.sustain-app .btn-info,
body.sustain-auth .btn-info {
    color: #073b46;
}

body.sustain-app .form-check-input:checked,
body.sustain-auth .form-check-input:checked {
    border-color: var(--sustain-blue);
    background-color: var(--sustain-blue);
}

body.sustain-app .form-check-input:focus,
body.sustain-auth .form-check-input:focus {
    border-color: var(--sustain-blue);
    box-shadow: 0 0 0 .2rem rgba(0, 95, 158, .14);
}

body.sustain-app input[type="checkbox"],
body.sustain-app input[type="radio"],
body.sustain-auth input[type="checkbox"],
body.sustain-auth input[type="radio"],
body.sustain-frontend input[type="checkbox"],
body.sustain-frontend input[type="radio"] {
    accent-color: var(--sustain-blue);
}

body.sustain-app .btn-group > .btn:first-child:not(:last-child),
body.sustain-auth .btn-group > .btn:first-child:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

body.sustain-app .btn-group > .btn:not(:first-child):not(:last-child),
body.sustain-auth .btn-group > .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}

body.sustain-app .btn-group > .btn:last-child:not(:first-child),
body.sustain-auth .btn-group > .btn:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

body.sustain-app .btn-group-vertical > .btn:first-child:not(:last-child),
body.sustain-auth .btn-group-vertical > .btn:first-child:not(:last-child) {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

body.sustain-app .btn-group-vertical > .btn:not(:first-child):not(:last-child),
body.sustain-auth .btn-group-vertical > .btn:not(:first-child):not(:last-child) {
    border-radius: 0;
}

body.sustain-app .btn-group-vertical > .btn:last-child:not(:first-child),
body.sustain-auth .btn-group-vertical > .btn:last-child:not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

body.sustain-app .table,
body.sustain-app .dataTable {
    margin-bottom: 0;
    color: #334155;
    border-color: var(--sustain-border);
}

body.sustain-app .table > :not(caption) > * > *,
body.sustain-app .dataTable > :not(caption) > * > * {
    padding: .72rem .85rem;
    vertical-align: middle;
    border-bottom-color: var(--sustain-border);
}

body.sustain-app .table > thead > tr > th,
body.sustain-app .dataTable > thead > tr > th {
    color: #475569;
    background: #f8fafc;
    font-size: .79rem;
    font-weight: 700;
    white-space: nowrap;
}

body.sustain-app .table-hover > tbody > tr:hover > *,
body.sustain-app .dataTable tbody > tr:hover > * {
    --bs-table-accent-bg: #f8fafc;
    background-color: #f8fafc;
}

body.sustain-app .table-responsive,
body.sustain-app .dataTables_wrapper {
    max-width: 100%;
}

body.sustain-app .table-responsive {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

body.sustain-app .table-responsive > .table,
body.sustain-app .table-responsive > .dataTable {
    min-width: 100%;
}

body.sustain-app .table tbody td .btn,
body.sustain-app .dataTable tbody td .btn {
    min-height: 32px;
    padding: .33rem .62rem;
    font-size: .75rem;
    white-space: nowrap;
}

body.sustain-app .table tbody td > .btn + .btn,
body.sustain-app .dataTable tbody td > .btn + .btn {
    margin-left: .25rem;
}

body.sustain-app .table .dropdown-menu,
body.sustain-app .dataTable .dropdown-menu {
    z-index: 1055;
}

body.sustain-app .dataTables_wrapper .dataTables_length select,
body.sustain-app .dataTables_wrapper .dataTables_filter input,
body.sustain-app .dataTables_wrapper .form-control,
body.sustain-app .dataTables_wrapper .form-select {
    min-height: 36px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    color: var(--sustain-ink);
}

body.sustain-app .dataTables_wrapper .dataTables_filter input {
    margin-left: .45rem;
    padding: .35rem .65rem;
}

body.sustain-app .dataTables_wrapper .dataTables_length select {
    margin: 0 .35rem;
    padding: .3rem 1.8rem .3rem .55rem;
}

body.sustain-app .dataTables_wrapper .dataTables_info {
    padding-top: .7rem;
    color: var(--sustain-muted);
    font-size: .78rem;
}

body.sustain-app .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 34px;
    min-height: 34px;
    margin-left: .2rem;
    padding: .35rem .55rem;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--sustain-blue) !important;
    font-size: .8rem;
}

body.sustain-app .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
body.sustain-app .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.sustain-app .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    border-color: var(--sustain-blue) !important;
    color: #fff !important;
    background: var(--sustain-blue) !important;
}

body.sustain-app .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.sustain-app .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    color: #94a3b8 !important;
    background: transparent !important;
    border-color: transparent !important;
}

body.sustain-app .dataTables_empty {
    padding: 2rem 1rem !important;
    color: var(--sustain-muted);
    text-align: center;
}

body.sustain-app .form-label,
body.sustain-app .col-form-label,
body.sustain-auth .form-label,
body.sustain-auth .col-form-label {
    color: #334155;
    font-size: .84rem;
    font-weight: 600;
}

body.sustain-app .form-control,
body.sustain-app .form-select,
body.sustain-auth .form-control,
body.sustain-auth .form-select {
    min-height: 40px;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

body.sustain-app textarea.form-control,
body.sustain-auth textarea.form-control {
    min-height: 100px;
}

body.sustain-app .input-group-text,
body.sustain-auth .input-group-text {
    color: #475569;
    background: #f8fafc;
    border-color: #cbd5e1;
    border-radius: var(--sustain-radius-control);
}

body.sustain-app .form-control::placeholder,
body.sustain-auth .form-control::placeholder {
    color: #94a3b8;
    opacity: 1;
}

body.sustain-app .form-control:disabled,
body.sustain-app .form-select:disabled,
body.sustain-auth .form-control:disabled,
body.sustain-auth .form-select:disabled {
    color: #64748b;
    background-color: #f1f5f9;
}

body.sustain-app .select2-container--default .select2-selection--single,
body.sustain-app .select2-container--default .select2-selection--multiple {
    min-height: 40px;
    border-color: #cbd5e1;
    border-radius: var(--sustain-radius-control);
}

body.sustain-app .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
}

body.sustain-app .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
}

body.sustain-app .alert,
body.sustain-auth .alert {
    border-radius: 10px;
    line-height: 1.5;
}

body.sustain-app .badge,
body.sustain-auth .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 22px;
    padding: .28rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.2;
    vertical-align: middle;
}

/* Bootstrap 5.0 does not provide the later subtle/emphasis status utilities. */
body.sustain-app .bg-primary-subtle,
body.sustain-auth .bg-primary-subtle { background-color: #e8f1f8 !important; }
body.sustain-app .text-primary-emphasis,
body.sustain-auth .text-primary-emphasis { color: #003b73 !important; }
body.sustain-app .bg-secondary-subtle,
body.sustain-auth .bg-secondary-subtle { background-color: #f1f3f5 !important; }
body.sustain-app .text-secondary-emphasis,
body.sustain-auth .text-secondary-emphasis { color: #495057 !important; }
body.sustain-app .bg-success-subtle,
body.sustain-auth .bg-success-subtle { background-color: #eaf6ef !important; }
body.sustain-app .text-success-emphasis,
body.sustain-auth .text-success-emphasis { color: #146c43 !important; }
body.sustain-app .bg-danger-subtle,
body.sustain-auth .bg-danger-subtle { background-color: #fdecec !important; }
body.sustain-app .text-danger-emphasis,
body.sustain-auth .text-danger-emphasis { color: #a61e2a !important; }
body.sustain-app .bg-warning-subtle,
body.sustain-auth .bg-warning-subtle { background-color: #fff4d6 !important; }
body.sustain-app .text-warning-emphasis,
body.sustain-auth .text-warning-emphasis { color: #7a5200 !important; }
body.sustain-app .bg-info-subtle,
body.sustain-auth .bg-info-subtle { background-color: #e6f6fb !important; }
body.sustain-app .text-info-emphasis,
body.sustain-auth .text-info-emphasis { color: #087990 !important; }

body.sustain-app .pagination .page-link,
body.sustain-auth .pagination .page-link {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: var(--sustain-blue);
}

body.sustain-app .pagination .page-item.active .page-link,
body.sustain-auth .pagination .page-item.active .page-link {
    color: #fff;
    background: var(--sustain-blue);
    border-color: var(--sustain-blue);
}

body.sustain-frontend {
    color: var(--sustain-ink);
    background-color: var(--sustain-surface);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.sustain-frontend :is(h1, h2, h3) {
    letter-spacing: -.02em;
}

body.sustain-frontend :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    min-height: 44px;
    border-radius: var(--sustain-radius-control);
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.sustain-frontend :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
    border-color: var(--sustain-blue);
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(0, 95, 158, .14);
}

body.sustain-frontend :is(input, select, textarea).border-red-500,
body.sustain-frontend :is(input, select, textarea)[aria-invalid="true"] {
    border-color: #ef4444;
}

body.sustain-frontend :is(a, button)[class~="bg-sustain-dark"] {
    min-height: 42px;
    border-radius: var(--sustain-radius-control);
    font-weight: 600;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

body.sustain-frontend :is(a, button)[class*="bg-"][class*="text-white"] {
    min-height: 42px;
    border-radius: var(--sustain-radius-control);
    font-weight: 600;
    transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

body.sustain-frontend :is(a, button)[class~="border-sustain-dark"] {
    border-radius: var(--sustain-radius-control);
    font-weight: 600;
}

body.sustain-frontend [role="alert"] {
    border-radius: 10px;
}

body.sustain-frontend .sustain-empty-state {
    padding: 2rem;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc;
    color: var(--sustain-muted);
    text-align: center;
}

body.sustain-frontend .sustain-empty-state h2,
body.sustain-frontend .sustain-empty-state h3 {
    color: var(--sustain-ink);
}

body.sustain-frontend .sustain-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
}

body.sustain-app .sustain-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .55rem;
}

@media (max-width: 767.98px) {
    body.sustain-app .dataTables_wrapper .dataTables_length,
    body.sustain-app .dataTables_wrapper .dataTables_filter {
        float: none;
        width: 100%;
        margin-bottom: .65rem;
        text-align: left;
    }

    body.sustain-app .dataTables_wrapper .dataTables_filter input {
        width: min(100%, 17rem);
        margin-left: .25rem;
    }

    body.sustain-app .dataTables_wrapper .dataTables_paginate {
        float: none;
        margin-top: .5rem;
        text-align: left;
    }

    body.sustain-app .table-responsive > .table,
    body.sustain-app .table-responsive > .dataTable {
        min-width: 40rem;
    }

    body.sustain-app .page-title-box .btn {
        margin-bottom: .35rem;
    }

    body.sustain-frontend .sustain-actions {
        align-items: stretch;
    }

    body.sustain-frontend .sustain-actions > :is(a, button) {
        flex: 1 1 auto;
    }
}

@media (max-width: 575.98px) {
    body.sustain-app .btn:not(.btn-link),
    body.sustain-auth .btn:not(.btn-link) {
        min-height: 40px;
    }

    body.sustain-app .table > :not(caption) > * > *,
    body.sustain-app .dataTable > :not(caption) > * > * {
        padding: .62rem .7rem;
    }

    body.sustain-app .table tbody td .btn,
    body.sustain-app .dataTable tbody td .btn {
        min-height: 38px;
    }

    body.sustain-app .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 32px;
        padding: .3rem .45rem;
    }

    body.sustain-frontend .sustain-empty-state {
        padding: 1.35rem 1rem;
    }
}

@media (max-width: 575.98px) {
    body.sustain-app .sustain-voucher-intro .card-body,
    body.sustain-app .sustain-voucher-claim .card-body,
    body.sustain-app .sustain-voucher-wallet .card-body {
        padding: 1.15rem !important;
    }

    body.sustain-app .sustain-voucher-count {
        min-width: 0;
        flex: 1;
    }

    body.sustain-app .sustain-voucher-claim-form {
        align-items: stretch;
        flex-direction: column;
    }

    body.sustain-app .sustain-voucher-claim-form .btn {
        width: 100%;
    }

    body.sustain-app .sustain-voucher-card-body {
        padding: 1rem;
    }

    body.sustain-app .sustain-voucher-terms {
        grid-template-columns: 1fr;
    }

    body.sustain-app .sustain-voucher-code-row {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.sustain-app *,
    body.sustain-auth *,
    body.sustain-app *::before,
    body.sustain-auth *::before,
    body.sustain-app *::after,
    body.sustain-auth *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================================
   Public site: focus ring, touch targets and the phone action bar
   ========================================================================== */

/* One clear keyboard focus ring (3:1 or better against the page), white on dark backgrounds. */
body.sustain-frontend :focus-visible {
    outline: 3px solid #005f9e;
    outline-offset: 3px;
}

body.sustain-frontend :is(footer, [class*="from-sustain-dark"], .bg-sustain-dark, .bg-sustain-navy, .bg-gray-900, .bg-gray-800) :focus-visible {
    outline-color: #fff;
}

/* Controls are at least 44 x 44 px so they are easy to hit on a phone. */
body.sustain-frontend :is(header:not(.hx), #mobile-menu) a:not([class*="bg-"]),
body.sustain-frontend footer:not(.hx) ul a,
body.sustain-frontend nav[aria-label="Breadcrumb"] a,
body.sustain-frontend [role="tab"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
}

body.sustain-frontend :is(#mobile-menu-btn, .pagination-link) {
    min-width: 44px;
    min-height: 44px;
}

body.sustain-frontend footer:not(.hx) a[aria-label] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
}

body.sustain-frontend :is(#training-filters, #event-filters, #category-filters) label {
    display: flex;
    align-items: center;
    min-height: 44px;
}

body.sustain-frontend :is(button, select, input:not([type="hidden"], [type="checkbox"], [type="radio"])) {
    min-height: 44px;
}

body.sustain-auth :is(.form-control, .form-select, .btn) {
    min-height: 44px;
}

/* Phones: the main action stays reachable while reading, and the chat button moves clear of it. */
.sustain-mobile-cta {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #e5e7eb;
    box-shadow: 0 -4px 14px rgba(15, 23, 42, .08);
}

body.sustain-frontend:has(.sustain-mobile-cta) {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
}

body.sustain-frontend:has(.sustain-mobile-cta) .sustain-wa {
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 1024px) {
    body.sustain-frontend:has(.sustain-mobile-cta) {
        padding-bottom: 0;
    }

    body.sustain-frontend:has(.sustain-mobile-cta) .sustain-wa {
        bottom: 1.5rem;
    }
}