/* Shared UI, independent of Bootstrap version.
 * Enable with class="huolto-ui" on body or a containing element.
 * Page adapters belong in separate stylesheets; keep workflow colours intact.
 */
.huolto-ui {
    --huolto-primary: #223566;
    --huolto-primary-hover: #17264c;
    --huolto-text: #243247;
    --huolto-muted: #526176;
    --huolto-background: #f3f5f8;
    --huolto-surface: #fff;
    --huolto-surface-soft: #f7f9fc;
    --huolto-border: #d7dfe9;
    --huolto-success: #187347;
    --huolto-danger: #b42332;
    --huolto-warning: #f3c969;
    --huolto-info: #0b6d83;
    --huolto-radius: .625rem;
    --huolto-shadow: 0 2px 8px rgb(25 40 65 / 5%);
    --huolto-space-1: .25rem;
    --huolto-space-2: .5rem;
    --huolto-space-3: .75rem;
    --huolto-space-4: 1rem;
    --huolto-space-6: 1.5rem;
    --huolto-font: system-ui, -apple-system, "Segoe UI", sans-serif;
    --bs-body-font-family: var(--huolto-font);
    --bs-body-color: var(--huolto-text);
    --bs-body-bg: var(--huolto-background);
    --bs-border-color: var(--huolto-border);
    --bs-border-radius: var(--huolto-radius);
    color: var(--huolto-text);
    background: var(--huolto-background);
    font-family: var(--huolto-font);
    font-size: 1rem;
    line-height: 1.5;
}

.huolto-ui .huolto-page {
    box-sizing: border-box;
    width: 100%;
    max-width: 1440px;
    margin: 1.5rem auto;
    padding: 0 1.25rem;
}

.huolto-ui h1 {
    font-size: clamp(1.4rem, 2.5vw, 1.875rem);
    font-weight: 700;
    line-height: 1.25;
}
.huolto-ui h2 { font-size: 1.5rem; font-weight: 650; }
.huolto-ui h3 { font-size: 1.25rem; font-weight: 650; }

.huolto-ui .huolto-page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.huolto-ui .huolto-page-title {
    margin: 0 0 .35rem;
    font-size: clamp(1.4rem, 2.5vw, 1.875rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.025em;
}

.huolto-ui .huolto-page-description,
.huolto-ui .huolto-meta {
    margin: 0;
    color: var(--huolto-muted);
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.huolto-ui .huolto-section-title {
    margin: 1.5rem 0 .75rem;
    font-size: 1.125rem;
    font-weight: 650;
    line-height: 1.4;
}

.huolto-ui .huolto-actions,
.huolto-ui .huolto-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

.huolto-ui :is(.huolto-card, .card, .modal-content) {
    border: 1px solid var(--huolto-border);
    border-radius: var(--huolto-radius);
    box-shadow: var(--huolto-shadow);
}

.huolto-ui .huolto-card {
    margin-bottom: 1rem;
    background: var(--huolto-surface);
}

.huolto-ui :is(.huolto-card-header, .card-header, .modal-header) {
    padding: .875rem 1.25rem;
    border-bottom: 1px solid var(--huolto-border);
    font-weight: 650;
}

.huolto-ui .huolto-card-header {
    border-radius: var(--huolto-radius) var(--huolto-radius) 0 0;
    background: var(--huolto-surface-soft);
}

.huolto-ui :is(.huolto-card-body, .card-body, .modal-body) {
    padding: 1.25rem;
}

.huolto-ui :is(.huolto-button, .btn) {
    box-sizing: border-box;
    display: inline-block;
    min-height: 2.5rem;
    max-width: 100%;
    padding: .5rem .875rem;
    border: 1px solid var(--huolto-border);
    border-radius: var(--huolto-radius);
    background: var(--huolto-surface);
    color: var(--huolto-text);
    font: 600 .875rem/1.4 var(--huolto-font);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    white-space: normal;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}

.huolto-ui :is(.huolto-button, .btn):hover {
    background: var(--huolto-surface-soft);
    color: var(--huolto-text);
    text-decoration: none;
}

.huolto-ui :is(.huolto-button-primary, .btn-primary),
.huolto-ui .btn-outline-primary.active {
    border-color: var(--huolto-primary);
    background: var(--huolto-primary);
    color: #fff;
}

.huolto-ui :is(.huolto-button-primary, .btn-primary):hover {
    border-color: var(--huolto-primary-hover);
    background: var(--huolto-primary-hover);
    color: #fff;
}

.huolto-ui :is(.huolto-button-success, .btn-success) {
    border-color: var(--huolto-success);
    background: var(--huolto-success);
    color: #fff;
}

.huolto-ui :is(.huolto-button-success, .btn-success):hover {
    background: #115b37;
    color: #fff;
}

.huolto-ui :is(.huolto-button-danger, .btn-danger) {
    border-color: var(--huolto-danger);
    background: var(--huolto-danger);
    color: #fff;
}

.huolto-ui :is(.huolto-button-danger, .btn-danger):hover {
    background: #901a27;
    color: #fff;
}

.huolto-ui .btn-warning {
    border-color: var(--huolto-warning);
    background: var(--huolto-warning);
    color: #48330a;
}

.huolto-ui .btn-outline-primary {
    border-color: var(--huolto-primary);
    color: var(--huolto-primary);
}

.huolto-ui .btn-outline-primary:hover {
    border-color: var(--huolto-primary);
    background: var(--huolto-primary);
    color: #fff;
}

/* Keep the meaning of Bootstrap action colours on all program pages. */
.huolto-ui :is(.btn-secondary, .btn-outline-secondary) { --huolto-action: var(--huolto-muted); --huolto-action-text: #fff; }
.huolto-ui :is(.btn-info, .btn-outline-info) { --huolto-action: var(--huolto-info); --huolto-action-text: #fff; }
.huolto-ui :is(.btn-success, .btn-outline-success) { --huolto-action: var(--huolto-success); --huolto-action-text: #fff; }
.huolto-ui :is(.btn-danger, .btn-outline-danger) { --huolto-action: var(--huolto-danger); --huolto-action-text: #fff; }
.huolto-ui :is(.btn-warning, .btn-outline-warning) { --huolto-action: var(--huolto-warning); --huolto-action-text: #48330a; }
.huolto-ui :is(.btn-dark, .btn-outline-dark) { --huolto-action: var(--huolto-text); --huolto-action-text: #fff; }
.huolto-ui :is(.btn-light, .btn-outline-light) { --huolto-action: #e9edf4; --huolto-action-text: var(--huolto-text); }
.huolto-ui :is(.btn-secondary, .btn-info, .btn-dark, .btn-light) {
    border-color: var(--huolto-action);
    background: var(--huolto-action);
    color: var(--huolto-action-text);
}
.huolto-ui :is(.btn-secondary, .btn-info, .btn-dark, .btn-light):hover {
    background: var(--huolto-action);
    color: var(--huolto-action-text);
    filter: brightness(.9);
}
.huolto-ui :is(.btn-outline-secondary, .btn-outline-info, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-dark, .btn-outline-light) {
    border-color: var(--huolto-action);
    color: var(--huolto-action);
    background: transparent;
}
.huolto-ui :is(.btn-outline-secondary, .btn-outline-info, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-dark, .btn-outline-light):is(:hover, .active),
.huolto-ui .btn-check:checked + :is(.btn-outline-secondary, .btn-outline-info, .btn-outline-success, .btn-outline-danger, .btn-outline-warning, .btn-outline-dark, .btn-outline-light) {
    background: var(--huolto-action);
    color: var(--huolto-action-text);
}
.huolto-ui .btn-link {
    border-color: transparent;
    background: transparent;
    color: var(--huolto-primary);
}
.huolto-ui .btn-link:hover { background: transparent; color: var(--huolto-primary-hover); }

.huolto-ui .btn-sm {
    min-height: 2rem;
    padding: .3rem .625rem;
    font-size: .8125rem;
}

.huolto-ui .btn-lg {
    min-height: 2.75rem;
    padding: .625rem 1rem;
    font-size: 1rem;
}

.huolto-ui :is(.huolto-button, .btn):disabled,
.huolto-ui .btn.disabled {
    opacity: .55;
    cursor: default;
}

.huolto-ui :is(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 3px solid #2872c3;
    outline-offset: 3px;
}

.huolto-ui .huolto-field {
    margin-bottom: 1rem;
}

.huolto-ui :is(.huolto-label, .form-label) {
    display: block;
    margin-bottom: .4rem;
    font-size: .875rem;
    font-weight: 600;
}

.huolto-ui :is(.huolto-input, .form-control, .form-select) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 2.5rem;
    padding: .5rem .75rem;
    border: 1px solid var(--huolto-border);
    border-radius: var(--huolto-radius);
    background-color: var(--huolto-surface);
    color: var(--huolto-text);
    font: inherit;
    line-height: 1.4;
}

.huolto-ui textarea.huolto-input,
.huolto-ui textarea.form-control {
    height: auto;
    resize: vertical;
}

.huolto-ui :is(.huolto-input, .form-control, .form-select):disabled {
    background-color: #edf0f5;
    color: var(--huolto-muted);
}

.huolto-ui :is(.form-control-sm, .form-select-sm) {
    min-height: 2rem;
    padding: .3rem .625rem;
    font-size: .8125rem;
}

.huolto-ui :is(.form-control-lg, .form-select-lg) {
    min-height: 3rem;
    padding: .625rem 1rem;
    font-size: 1.125rem;
}

.huolto-ui :is(.form-control, .form-select).is-invalid { border-color: var(--huolto-danger); }
.huolto-ui :is(.form-control, .form-select).is-valid { border-color: var(--huolto-success); }

/* Bootstrap input groups need a flexible basis, rather than a full-width field. */
.huolto-ui .input-group > :is(.form-control, .form-select) {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
}

.huolto-ui .huolto-date-picker {
    width: 18rem;
    max-width: 100%;
}

.huolto-ui input[type="file"] {
    box-sizing: border-box;
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: .75rem;
    border: 1px dashed var(--huolto-border);
    border-radius: var(--huolto-radius);
    background: var(--huolto-surface-soft);
    color: var(--huolto-muted);
    font: .875rem var(--huolto-font);
}

.huolto-ui input[type="file"]::file-selector-button {
    margin-right: .75rem;
    padding: .375rem .625rem;
    border: 1px solid var(--huolto-border);
    border-radius: .375rem;
    background: var(--huolto-surface);
    color: var(--huolto-text);
    font: 600 .8125rem var(--huolto-font);
    cursor: pointer;
}

.huolto-ui .huolto-field-help {
    margin: .35rem 0 0;
    color: var(--huolto-muted);
    font-size: .8125rem;
}

.huolto-ui :is(.huolto-table-wrap, .table-responsive) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.huolto-ui :is(.huolto-table, .table) {
    width: 100%;
    border-collapse: collapse;
    color: inherit;
    font-size: .875rem;
}

.huolto-ui :is(.huolto-table, .table) :is(th, td) {
    padding: .625rem .75rem;
    border-bottom: 1px solid var(--huolto-border);
    vertical-align: middle;
}

.huolto-ui :is(.huolto-table, .table) thead th {
    background: var(--huolto-surface-soft);
    color: var(--huolto-muted);
    font-weight: 650;
    text-align: left;
}

.huolto-ui .table-sm :is(th, td) { padding: .3rem .5rem; }

.huolto-ui .huolto-status {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem .625rem;
    border-radius: 999px;
    background: #e9edf4;
    color: #34445e;
    font-size: .8125rem;
    font-weight: 600;
}

.huolto-ui .huolto-status-success { background: #e2f2e8; color: #115b37; }
.huolto-ui .huolto-status-warning { background: #fff1ce; color: #77520b; }
.huolto-ui .huolto-status-danger { background: #fce7e9; color: #901a27; }

.huolto-ui .huolto-comment {
    padding: 1rem;
    border: 1px solid var(--huolto-border);
    border-radius: var(--huolto-radius);
    background: var(--huolto-surface-soft);
    overflow-wrap: anywhere;
}

.huolto-ui .huolto-comment + .huolto-comment { margin-top: .75rem; }
.huolto-ui .huolto-comment p:last-child { margin-bottom: 0; }

.huolto-ui .huolto-nav {
    padding: .875rem 1.25rem;
    background: var(--huolto-primary);
    color: #fff;
}

.huolto-ui .huolto-nav a { color: inherit; }
.huolto-ui .huolto-nav-brand { font-weight: 700; text-decoration: none; }

/* The shared navbar and legacy footer have inline backgrounds. */
.huolto-ui #navbarold { background-color: var(--huolto-primary) !important; }
.huolto-ui .huolto-activity--work { --activity-color: #187347; --activity-background: #e9f6ee; }
.huolto-ui .huolto-activity--break { --activity-color: #805818; --activity-background: #fff1d5; }
.huolto-ui .huolto-activity--duty { --activity-color: #245ba2; --activity-background: #eaf1ff; }
.huolto-ui .huolto-activity-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 2rem; height: 2rem; border-radius: .5rem;
    color: var(--activity-color); background: var(--activity-background);
}
.huolto-ui .huolto-activity-icon svg {
    width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.huolto-ui #navbarold .huolto-activity-status { align-items: center; gap: .35rem; padding: 0; flex-wrap: wrap; }
.huolto-ui #navbarold .huolto-activity-chip {
    display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .5rem;
    border: 1px solid transparent; border-radius: .5rem; text-decoration: none;
    color: var(--activity-color); background: var(--activity-background);
    font-size: .8rem; line-height: 1.2; font-weight: 700; font-variant-numeric: tabular-nums;
}
.huolto-ui #navbarold .huolto-activity-chip:hover { border-color: currentColor; }
.huolto-ui #navbarold .huolto-activity-chip .huolto-activity-icon { width: 1rem; height: 1rem; }
.huolto-ui #navbarold .huolto-activity-chip svg { width: 1rem; height: 1rem; }
@media (max-width: 991.98px) {
    .huolto-ui #navbarold .huolto-activity-status { display: flex; margin-left: auto; max-width: 100%; }
    .huolto-ui #navbarold .huolto-activity-chip { font-size: .72rem; padding: .3rem .35rem; gap: .25rem; }
}
.huolto-ui #navbarold .huolto-nav-search .form-control {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}
.huolto-ui #navbarold .huolto-nav-search .btn-outline-success {
    border-color: #c5d7f0;
    color: #fff;
    background: transparent;
}
.huolto-ui #navbarold .huolto-nav-search .btn-outline-success:hover {
    background: #fff;
    color: var(--huolto-primary);
}
.huolto-ui .huolto-footer { background-color: var(--huolto-primary) !important; }
.huolto-ui .huolto-footer td { padding: .75rem .25rem; }
.huolto-ui .huolto-footer img { max-width: 40px; height: auto; }

@media (max-width: 575.98px) {
    .huolto-ui .huolto-page { margin: 1rem auto; padding: 0 .75rem; }
    .huolto-ui :is(.huolto-card-body, .card-body, .modal-body) { padding: 1rem; }
    .huolto-ui .huolto-page-header { gap: .75rem; }
    .huolto-ui .huolto-tabs > :is(.btn, .huolto-button) { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .huolto-ui :is(.huolto-button, .btn) { transition: none; }
}

@media print {
    .huolto-ui { background: #fff; color: #000; font-size: 10pt; }
    .huolto-ui .huolto-page { max-width: none; margin: 0; padding: 0; }
    .huolto-ui :is(.huolto-nav, #navbarold, .huolto-footer, .huolto-no-print) { display: none; }
    .huolto-ui :is(.huolto-card, .card) { box-shadow: none; }
    .huolto-ui :is(.huolto-table-wrap, .table-responsive) { overflow: visible; }
    .huolto-ui :is(.huolto-table, .table) { font-size: 9pt; }
}