@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

body.sss3-body {
    --sss3-ink: #21384d;
    --sss3-muted: #8b98a7;
    --sss3-blue: #168bd0;
    --sss3-cyan: #05b9e8;
    --sss3-lime: #99ce4d;
    --sss3-green: #7aa936;
    --sss3-pale: #f1f6fa;
    --sss3-line: #e7edf1;
    --sss3-shadow: 0 2px 14px rgba(28, 65, 91, .08);
    --sss3-radius: 28px;
}

/* Primary actions keep the same blue/cyan gradient used by the dashboard. */
body.sss3-body .btn-primary,
body.sss3-body .submitbutton {
    color: #fff !important;
    background: linear-gradient(100deg, var(--sss3-blue), var(--sss3-cyan)) !important;
    border: 0 !important;
    border-radius: var(--sss3-radius) !important;
    box-shadow: none !important;
    font-weight: 700;
    transition: filter .2s, transform .2s;
}

body.sss3-body .btn-primary:hover,
body.sss3-body .btn-primary:focus,
body.sss3-body .btn-primary:active,
body.sss3-body .submitbutton:hover,
body.sss3-body .submitbutton:focus {
    color: #fff !important;
    background: linear-gradient(100deg, var(--sss3-blue), var(--sss3-cyan)) !important;
    border: 0 !important;
    filter: brightness(1.06);
    box-shadow: none !important;
    transform: translateY(-1px);
}

/* Secondary and confirmation actions use the dark ink tone. */
body.sss3-body .btn-dark,
body.sss3-body .btn-add,
body.sss3-body .btn-success {
    color: #fff !important;
    background: var(--sss3-ink) !important;
    border: 0 !important;
    border-radius: var(--sss3-radius) !important;
    box-shadow: none !important;
    font-weight: 700;
    transition: background .2s, transform .2s;
}

body.sss3-body .btn-dark:hover,
body.sss3-body .btn-dark:focus,
body.sss3-body .btn-add:hover,
body.sss3-body .btn-add:focus,
body.sss3-body .btn-success:hover,
body.sss3-body .btn-success:focus {
    color: #fff !important;
    background: #2e4b64 !important;
    border: 0 !important;
    box-shadow: none !important;
    transform: translateY(-1px);
}

body.sss3-body .btn-add a {
    color: #fff !important;
}

/* Keep destructive actions distinguishable. */
body.sss3-body .btn-cancel {
    border-radius: var(--sss3-radius) !important;
}

/* Progress bars share the dashboard palette. */
body.sss3-body .progress {
    background-color: var(--sss3-line) !important;
    box-shadow: none !important;
}

body.sss3-body .progress .progress-bar,
body.sss3-body .progress-bar.bg-secondary {
    background: linear-gradient(90deg, var(--sss3-blue), var(--sss3-cyan)) !important;
    box-shadow: none !important;
    color: #fff;
}

body.sss3-body .progress-bar.bu-progress--complete {
    background: linear-gradient(90deg, var(--sss3-lime), var(--sss3-green)) !important;
}

body.sss3-body .progress-label {
    color: #fff;
    font-weight: 700;
}

body.sss3-body .sss3-primary-button,
body.sss3-body .primary-button {
    background: linear-gradient(100deg, var(--sss3-blue), var(--sss3-cyan));
    border: 0;
    border-radius: var(--sss3-radius);
    color: #fff;
    font-weight: 800;
}

body.sss3-body .sss3-primary-button:hover,
body.sss3-body .primary-button:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}