/*
 * Component styling layered on top of Bootstrap 5.3.
 *
 * Bootstrap compiles most component colours into per-component --bs-*-* variables
 * (for example .btn-primary sets --bs-btn-bg to a literal hex), so re-tinting the
 * global palette in tokens.css is not enough. This file overrides those component
 * variables. It only ever reads values from tokens.css - no raw colours here.
 */

/* ===== Base ===== */

html,
body {
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

body {
    transition: background-color 0.15s ease, color 0.15s ease;
}

::selection {
    background: var(--accent);
    color: var(--bg);
}

/* ===== Headings ===== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text);
}

h1, .h1 { font-size: 26px; }
h2, .h2 { font-size: var(--fs-page-title); }
h3, .h3 { font-size: var(--fs-page-title); }
h4, .h4 { font-size: 16px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: var(--fs-body); }

/* ===== Buttons =====
   Primary is the solid ink-on-paper button of the reference design, not the
   accent colour. The accent is reserved for links and identifiers. */

.btn {
    --bs-btn-font-family: var(--font-mono);
    --bs-btn-font-size: var(--fs-small);
    --bs-btn-font-weight: 600;
    --bs-btn-padding-y: 6px;
    --bs-btn-padding-x: 12px;
    --bs-btn-border-radius: 0;
    letter-spacing: 0.5px;
}

.btn-sm {
    --bs-btn-font-size: var(--fs-micro);
    --bs-btn-padding-y: 4px;
    --bs-btn-padding-x: 9px;
}

.btn:focus-visible {
    box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent);
}

.btn-primary {
    --bs-btn-color: var(--bg);
    --bs-btn-bg: var(--text);
    --bs-btn-border-color: var(--text);
    --bs-btn-hover-color: var(--bg);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-color: var(--bg);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
    --bs-btn-disabled-color: var(--bg);
    --bs-btn-disabled-bg: var(--text-faint);
    --bs-btn-disabled-border-color: var(--text-faint);
}

.btn-outline-primary {
    --bs-btn-color: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: var(--bg);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-color: var(--bg);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--accent);
    --bs-btn-disabled-color: var(--text-faint);
    --bs-btn-disabled-border-color: var(--border);
}

.btn-outline-secondary {
    --bs-btn-color: var(--text);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-bg: var(--bg-hover);
    --bs-btn-hover-border-color: var(--text);
    --bs-btn-active-color: var(--text);
    --bs-btn-active-bg: var(--bg-hover);
    --bs-btn-active-border-color: var(--text);
    --bs-btn-disabled-color: var(--text-faint);
    --bs-btn-disabled-border-color: var(--border);
}

.btn-outline-danger {
    --bs-btn-color: var(--negative);
    --bs-btn-border-color: var(--negative);
    --bs-btn-hover-color: var(--bg);
    --bs-btn-hover-bg: var(--negative);
    --bs-btn-hover-border-color: var(--negative);
    --bs-btn-active-color: var(--bg);
    --bs-btn-active-bg: var(--negative);
    --bs-btn-active-border-color: var(--negative);
    --bs-btn-disabled-color: var(--text-faint);
    --bs-btn-disabled-border-color: var(--border);
}

.btn-outline-success {
    --bs-btn-color: var(--positive);
    --bs-btn-border-color: var(--positive);
    --bs-btn-hover-color: var(--bg);
    --bs-btn-hover-bg: var(--positive);
    --bs-btn-hover-border-color: var(--positive);
    --bs-btn-active-color: var(--bg);
    --bs-btn-active-bg: var(--positive);
    --bs-btn-active-border-color: var(--positive);
    --bs-btn-disabled-color: var(--text-faint);
    --bs-btn-disabled-border-color: var(--border);
}

.btn-outline-warning {
    --bs-btn-color: var(--warning);
    --bs-btn-border-color: var(--warning);
    --bs-btn-hover-color: var(--bg);
    --bs-btn-hover-bg: var(--warning);
    --bs-btn-hover-border-color: var(--warning);
    --bs-btn-active-color: var(--bg);
    --bs-btn-active-bg: var(--warning);
    --bs-btn-active-border-color: var(--warning);
}

.btn-success {
    --bs-btn-color: var(--bg);
    --bs-btn-bg: var(--positive);
    --bs-btn-border-color: var(--positive);
    --bs-btn-hover-color: var(--bg);
    --bs-btn-hover-bg: var(--positive);
    --bs-btn-hover-border-color: var(--text);
    --bs-btn-active-color: var(--bg);
    --bs-btn-active-bg: var(--positive);
    --bs-btn-active-border-color: var(--text);
}

.btn-danger {
    --bs-btn-color: var(--bg);
    --bs-btn-bg: var(--negative);
    --bs-btn-border-color: var(--negative);
    --bs-btn-hover-color: var(--bg);
    --bs-btn-hover-bg: var(--negative);
    --bs-btn-hover-border-color: var(--text);
    --bs-btn-active-color: var(--bg);
    --bs-btn-active-bg: var(--negative);
    --bs-btn-active-border-color: var(--text);
}

.btn-warning {
    --bs-btn-color: var(--bg);
    --bs-btn-bg: var(--warning);
    --bs-btn-border-color: var(--warning);
    --bs-btn-hover-color: var(--bg);
    --bs-btn-hover-bg: var(--warning);
    --bs-btn-hover-border-color: var(--text);
}

.btn-link {
    --bs-btn-color: var(--accent);
    --bs-btn-hover-color: var(--accent-soft);
    --bs-btn-font-weight: 600;
    text-decoration: none;
}
.btn-link:hover { text-decoration: underline; }

/* ===== Forms ===== */

.form-label {
    font-size: var(--fs-micro);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-faint);
    margin-bottom: 4px;
}

/* .form-label.small must not shrink below the micro size */
.form-label.small { font-size: var(--fs-micro); }

.form-control,
.form-select {
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    padding: 5px 8px;
    background-color: var(--bg-panel);
    border-color: var(--border);
    color: var(--text);
    border-radius: 0;
}

.form-control-sm,
.form-select-sm {
    font-size: var(--fs-body);
    padding: 5px 8px;
    border-radius: 0;
}

.form-control:focus,
.form-select:focus {
    background-color: var(--bg-panel);
    border-color: var(--text);
    color: var(--text);
    box-shadow: none;
}

.form-control::placeholder { color: var(--text-faint); }

.form-control:disabled,
.form-select:disabled {
    background-color: var(--bg-hover);
    color: var(--text-muted);
}

.form-check-input {
    border-radius: 0;
    border-color: var(--text-faint);
    background-color: var(--bg-panel);
}
.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--accent);
}
.form-check-input:focus {
    border-color: var(--text);
    box-shadow: none;
}

.input-group-text {
    font-family: var(--font-mono);
    font-size: var(--fs-body);
    background-color: var(--bg-hover);
    border-color: var(--border);
    color: var(--text-muted);
    border-radius: 0;
}

/* Blazor validation */
.valid.modified:not([type=checkbox]) { outline: 1px solid var(--positive); }
.invalid { outline: 1px solid var(--negative); }
.validation-message {
    color: var(--negative);
    font-size: var(--fs-small);
}

/* ===== Tables ===== */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    --bs-table-hover-bg: var(--bg-hover);
    --bs-table-hover-color: var(--text);
    font-size: var(--fs-body);
    margin-bottom: 12px;
}

.table > thead > tr > th {
    font-weight: 600;
    color: var(--text-muted);
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: 7px 12px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

/* Bootstrap draws a heavier divider under thead - the design has one weight */
.table > :not(caption) > * > * { box-shadow: none; }
.table > tbody { border-top: 0; }

.table-sm > thead > tr > th,
.table-sm > tbody > tr > td { padding: 5px 10px; }

/* Row state tints. Colour is never the only signal - pages repeat it in text. */
.table > tbody > tr.table-danger > td {
    --bs-table-bg: var(--row-negative);
    --bs-table-color: var(--text);
    background-color: var(--row-negative);
    color: var(--text);
}
.table > tbody > tr.table-warning > td {
    --bs-table-bg: var(--row-warning);
    --bs-table-color: var(--text);
    background-color: var(--row-warning);
    color: var(--text);
}
.table > tbody > tr.table-light > td,
.table > thead > tr.table-light > th {
    --bs-table-bg: var(--bg-hover);
    --bs-table-color: var(--text);
    background-color: var(--bg-hover);
    color: var(--text);
}

/* ===== Badges used as status pills ===== */

.badge {
    --bs-badge-padding-x: 6px;
    --bs-badge-padding-y: 3px;
    --bs-badge-font-size: var(--fs-micro);
    --bs-badge-font-weight: 600;
    --bs-badge-border-radius: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge.text-bg-success {
    color: var(--status-positive-fg) !important;
    background-color: var(--status-positive-bg) !important;
}
.badge.text-bg-secondary,
.badge.text-bg-light {
    color: var(--status-neutral-fg) !important;
    background-color: var(--status-neutral-bg) !important;
}
.badge.text-bg-danger {
    color: var(--status-negative-fg) !important;
    background-color: var(--status-negative-bg) !important;
}
.badge.text-bg-warning {
    color: var(--status-warning-fg) !important;
    background-color: var(--status-warning-bg) !important;
}
.badge.text-bg-primary,
.badge.text-bg-info {
    color: var(--status-info-fg) !important;
    background-color: var(--status-info-bg) !important;
}
.badge.text-bg-dark {
    color: var(--status-strong-fg) !important;
    background-color: var(--status-strong-bg) !important;
}

/* ===== Cards and panels ===== */

.card {
    --bs-card-bg: var(--bg-panel);
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: 0;
    --bs-card-inner-border-radius: 0;
    --bs-card-cap-bg: var(--bg-hover);
    --bs-card-cap-color: var(--text-muted);
    --bs-card-spacer-y: 12px;
    --bs-card-spacer-x: 14px;
    --bs-card-cap-padding-y: 8px;
    --bs-card-cap-padding-x: 14px;
}

.card-header {
    font-size: var(--fs-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom-color: var(--border);
}

/* ===== Alerts ===== */

.alert {
    --bs-alert-border-radius: 0;
    --bs-alert-padding-y: 9px;
    --bs-alert-padding-x: 12px;
    font-size: var(--fs-body);
    border: 1px solid var(--border);
}

.alert-danger {
    --bs-alert-color: var(--status-negative-fg);
    --bs-alert-bg: var(--status-negative-bg);
    --bs-alert-border-color: var(--status-negative-bg);
}
.alert-warning {
    --bs-alert-color: var(--status-warning-fg);
    --bs-alert-bg: var(--status-warning-bg);
    --bs-alert-border-color: var(--status-warning-bg);
}
.alert-success {
    --bs-alert-color: var(--status-positive-fg);
    --bs-alert-bg: var(--status-positive-bg);
    --bs-alert-border-color: var(--status-positive-bg);
}
.alert-info {
    --bs-alert-color: var(--status-info-fg);
    --bs-alert-bg: var(--status-info-bg);
    --bs-alert-border-color: var(--status-info-bg);
}
.alert-secondary,
.alert-light {
    --bs-alert-color: var(--text-muted);
    --bs-alert-bg: var(--bg-panel);
    --bs-alert-border-color: var(--border);
}

/* ===== Links ===== */

a {
    color: var(--accent);
    text-decoration: none;
}
a:hover {
    color: var(--accent-soft);
    text-decoration: underline;
}

/* ===== Utilities that the pages already use ===== */

.small { font-size: var(--fs-small); }

/* ===== Scrollbars ===== */

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); }
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ===== Blazor error UI ===== */

.blazor-error-boundary {
    background: var(--status-negative-bg);
    color: var(--status-negative-fg);
    padding: 12px 14px;
    border: 1px solid var(--negative);
}
.blazor-error-boundary::after { content: "Nastala neočakávaná chyba."; }