/* Light Bootstrap 5 chrome for public tools. Loaded after each tool stylesheet.
   Drawing strokes (--trace, --handle, --bend) and team colours (--home, --away) stay. */

html:has(body.tool-bs5) {
    color-scheme: light;
}

body.tool-bs5 {
    --bg0: #f8f9fa;
    --bg1: #f8f9fa;
    --bg: #f8f9fa;
    --surface: #fff;
    --surface-strong: #f8f9fa;
    --line: #dee2e6;
    --text: #212529;
    --muted: #6c757d;
    --accent: #198754;
    --accent-deep: #146c43;
    --control-bg: #fff;
    --danger: #dc3545;
    --card: #fff;
    --radius: 0.75rem;
    color-scheme: light;
    background: #f8f9fa !important;
    color: #212529;
    font-family: var(--bs-body-font-family);
}

body.tool-bs5 .brand,
body.tool-bs5 .hometime-banner,
body.tool-bs5 .page-header-brand,
body.tool-bs5 .wrap > header h1 {
    display: none !important;
}

body.tool-bs5.is-workspace .ht-tool-hero {
    display: none !important;
}

body.tool-bs5 .ht-tool-hero h1 {
    margin: 0;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1.2;
    letter-spacing: -0.02em;
    text-transform: none;
    color: #212529;
}

body.tool-bs5 .page {
    padding-top: 1.5rem;
}

body.tool-bs5 .lede,
body.tool-bs5 .hint,
body.tool-bs5 .foot,
body.tool-bs5 .drop-sub,
body.tool-bs5 .muted {
    color: #6c757d;
}

body.tool-bs5 .field,
body.tool-bs5 .field-label,
body.tool-bs5 .page label,
body.tool-bs5 .wrap label {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    color: #212529;
}

body.tool-bs5 .panel,
body.tool-bs5 .page .card,
body.tool-bs5 .wrap .card,
body.tool-bs5 .banner,
body.tool-bs5 .dropzone,
body.tool-bs5 .drop-zone,
body.tool-bs5 .image-drop,
body.tool-bs5 .qr-stage,
body.tool-bs5 .settings-bar,
body.tool-bs5 .block,
body.tool-bs5 .presets,
body.tool-bs5 .status,
body.tool-bs5 .result,
body.tool-bs5 .preview-stage,
body.tool-bs5 .crop-dialog {
    background: #fff;
    color: #212529;
    border-color: #dee2e6;
}

body.tool-bs5 .dropzone,
body.tool-bs5 .drop-zone,
body.tool-bs5 .image-drop {
    border-style: dashed;
    border-color: #198754;
}

body.tool-bs5 .banner-voice {
    background: #d1e7dd;
    border-color: #a3cfbb;
    color: #0f5132;
}

body.tool-bs5 .status.is-error,
body.tool-bs5 .alert.danger {
    color: #842029;
    background: #f8d7da;
    border-color: #f1aeb5;
}

body.tool-bs5 .status.is-ok {
    color: #0f5132;
    background: #d1e7dd;
    border-color: #a3cfbb;
}

body.tool-bs5 .alert.warning,
body.tool-bs5 .dirty-hint {
    color: #664d03;
    background: #fff3cd;
    border-color: #ffe69c;
}

body.tool-bs5 .dirty-hint {
    background: transparent;
    border: 0;
}

body.tool-bs5 .page textarea,
body.tool-bs5 .page input[type="text"],
body.tool-bs5 .page input[type="search"],
body.tool-bs5 .page input[type="number"],
body.tool-bs5 .page input[type="email"],
body.tool-bs5 .page select,
body.tool-bs5 .wrap input,
body.tool-bs5 .wrap select,
body.tool-bs5 .file-control {
    background-color: #fff !important;
    color: #212529 !important;
    border-color: #dee2e6 !important;
    color-scheme: light;
    box-shadow: none;
}

body.tool-bs5 .page input:-webkit-autofill,
body.tool-bs5 .page textarea:-webkit-autofill {
    -webkit-text-fill-color: #212529;
    box-shadow: 0 0 0 1000px #fff inset;
}

body.tool-bs5 .page .btn,
body.tool-bs5 .wrap .btn,
body.tool-bs5 .crop-dialog .btn {
    background: #198754;
    color: #fff;
    border: 1px solid #198754;
    border-radius: 0.375rem;
    font-weight: 600;
    filter: none;
}

body.tool-bs5 .page .btn:hover,
body.tool-bs5 .wrap .btn:hover,
body.tool-bs5 .crop-dialog .btn:hover {
    background: #157347;
    border-color: #146c43;
    filter: none;
}

body.tool-bs5 .page .btn.secondary,
body.tool-bs5 .page .btn.ghost,
body.tool-bs5 .page .btn.btn-ghost,
body.tool-bs5 .page .btn-ghost,
body.tool-bs5 .wrap .btn.secondary,
body.tool-bs5 .crop-dialog .btn.btn-ghost,
body.tool-bs5 .crop-dialog .btn-ghost {
    background: transparent;
    color: #6c757d;
    border: 1px solid #6c757d;
}

body.tool-bs5 .page .btn.secondary:hover,
body.tool-bs5 .page .btn.ghost:hover,
body.tool-bs5 .page .btn-ghost:hover,
body.tool-bs5 .wrap .btn.secondary:hover {
    background: #6c757d;
    color: #fff;
}

body.tool-bs5 .page .btn.danger,
body.tool-bs5 .wrap .btn.danger {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

body.tool-bs5 .page .btn.danger-outline,
body.tool-bs5 .page .btn.danger.small {
    background: transparent;
    color: #dc3545;
    border: 1px solid #dc3545;
}

body.tool-bs5 .page .btn.small,
body.tool-bs5 .page .btn.btn-sm {
    padding: 0.25rem 0.55rem;
    font-size: 0.875rem;
}

body.tool-bs5 .tab {
    background: #fff;
    color: #212529;
    border-color: #dee2e6;
}

body.tool-bs5 .tab.is-active {
    background: #198754;
    color: #fff;
    border-color: #198754;
}

body.tool-bs5 .tool-btn {
    background: #fff;
    color: #212529;
    border: 1px solid #dee2e6;
}

body.tool-bs5 .tool-btn.secondary {
    color: #6c757d;
}

body.tool-bs5 .tool-btn.is-active {
    background: #198754;
    color: #fff;
    border-color: #198754;
}

body.tool-bs5 .tool-btn-danger:not(:disabled) {
    color: #dc3545;
    border-color: #dc3545;
    background: #fff;
}

body.tool-bs5 .suggestions {
    background: #fff;
    color: #212529;
    border-color: #dee2e6;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.08);
}

body.tool-bs5 .suggestions li:hover,
body.tool-bs5 .suggestions li.active {
    background: #d1e7dd;
}

body.tool-bs5 .foot a:hover {
    color: #198754;
}