/* Dotační monitor — design system
   Plain CSS, no build step, no framework. */

:root {
    --color-bg: #f4f6f8;
    --color-surface: #ffffff;
    --color-border: #e1e4e9;
    --color-border-strong: #cbd1d9;
    --color-text: #1c2230;
    --color-muted: #667085;
    --color-muted-light: #98a2b3;

    --color-primary: #2454a3;
    --color-primary-dark: #1b3f80;
    --color-primary-bg: #eaf1fb;

    --color-success: #1a7f4e;
    --color-success-bg: #e6f6ee;
    --color-success-border: #b7e4cd;

    --color-warning: #9a6400;
    --color-warning-bg: #fef3e0;
    --color-warning-border: #f3d791;

    --color-danger: #b3261e;
    --color-danger-bg: #fbe9e7;
    --color-danger-border: #f2c1bc;

    --color-info: #2f6fa8;
    --color-info-bg: #eaf3fb;
    --color-info-border: #bcdaf2;

    --color-neutral: #4b5563;
    --color-neutral-bg: #eef1f4;
    --color-neutral-border: #dbe0e6;

    /* Source matrix mode badges only (AUTO/SEMI-AUTO/MANUAL/WATCHLIST reuse
       success/info/neutral/warning above) — AGGREGATOR and OUT need their
       own color since neither existing status meaning fits. */
    --color-aggregator: #6b3fa0;
    --color-aggregator-bg: #f1ebf8;
    --color-aggregator-border: #ddccee;

    --color-out: #3f3f46;
    --color-out-bg: #e4e4e7;
    --color-out-border: #52525b;

    --radius-sm: 5px;
    --radius-md: 8px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 2px 8px rgba(16, 24, 40, 0.08);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    --content-max-width: 1600px;
    --content-max-width-narrow: 760px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; font-weight: 600; }
h1 { font-size: 1.5rem; margin: 0 0 var(--space-5); }
h2 { font-size: 1.05rem; margin: 0 0 var(--space-3); }
a { color: var(--color-primary); }

/* ---------- Header / navigation ---------- */

.site-header {
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 10;
}

.site-header .header-inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: 0 var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-5);
    min-height: 58px;
}

.brand {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--color-text);
    text-decoration: none;
    white-space: nowrap;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
    flex-wrap: wrap;
}

.nav-link {
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-link:hover { background: var(--color-neutral-bg); color: var(--color-text); }

.nav-link.active {
    background: var(--color-primary-bg);
    color: var(--color-primary-dark);
}

.header-user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    white-space: nowrap;
}

.header-user .user-chip {
    font-size: 0.85rem;
    color: var(--color-muted);
}

.header-user form { margin: 0; }

.header-user .btn-link {
    background: none;
    border: none;
    color: var(--color-muted);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.35rem 0.5rem;
    border-radius: var(--radius-sm);
}

.header-user .btn-link:hover { background: var(--color-neutral-bg); color: var(--color-text); }

/* ---------- Layout ---------- */

main {
    max-width: var(--content-max-width);
    margin: var(--space-6) auto;
    padding: 0 var(--space-5);
    /* Opacity-only entrance — no transform, so no layout shift. */
    animation: main-fade-in 0.18s ease-out;
}

@keyframes main-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

main.narrow { max-width: var(--content-max-width-narrow); }

/* ---------- Cards / sections ---------- */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-5);
}

.section { margin-bottom: var(--space-5); }
.section h2 {
    font-size: 1rem;
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-4);
}

.muted { color: var(--color-muted); }

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
}
.page-header h1 { margin: 0; }
.page-header .page-lead { color: var(--color-muted); font-size: 0.9rem; margin-top: 0.2rem; }

/* ---------- Alerts / messages ---------- */

.messages { list-style: none; padding: 0; margin: 0 0 var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.alert {
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius-sm);
    background: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
    color: var(--color-text);
    font-size: 0.9rem;
}

/* ---------- Forms ---------- */

label { display: block; margin-bottom: 0.3rem; font-weight: 500; font-size: 0.9rem; }

input[type="text"], input[type="password"], input[type="date"], input[type="number"],
input[type="url"], input[type="email"], select, textarea {
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-4);
    font-size: 0.92rem;
    font-family: inherit;
    background: var(--color-surface);
    color: var(--color-text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-bg);
}

textarea { min-height: 6rem; resize: vertical; }

.errorlist { color: var(--color-danger); padding-left: 1.1rem; margin: 0 0 0.6rem; font-size: 0.85rem; }

form.card > div { margin-bottom: var(--space-1); }

.checkbox-row label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 400;
    margin-right: var(--space-4);
}
.checkbox-row input[type="checkbox"] { width: auto; margin: 0; }

/* ---------- Buttons ---------- */

button, .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--color-primary);
    color: #fff;
    border: 1px solid var(--color-primary);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.3;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

button:hover, .btn:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

.btn-secondary {
    background: var(--color-surface);
    color: var(--color-primary);
    border: 1px solid var(--color-border-strong);
}
.btn-secondary:hover { background: var(--color-neutral-bg); border-color: var(--color-muted-light); }

.btn-danger { background: var(--color-danger); border-color: var(--color-danger); }
.btn-danger:hover { background: #8f1e17; border-color: #8f1e17; }

/* Review resolution actions (Relevantní/Nerelevantní) — outline, not solid:
   solid red is reserved for the genuinely irreversible soft-delete action
   (.btn-danger above), so Nerelevantní reads as "flagged/cautionary" rather
   than as loudly as an actual delete button, while still being clearly
   distinct from the positive Relevantní action next to it. */
.btn-success-outline {
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-success-border);
}
.btn-success-outline:hover { background: var(--color-success); color: #fff; border-color: var(--color-success); }

.btn-danger-outline {
    background: var(--color-danger-bg);
    color: var(--color-danger);
    border: 1px solid var(--color-danger-border);
}
.btn-danger-outline:hover { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }

.btn-sm { padding: 0.3rem 0.7rem; font-size: 0.82rem; }

/* ---------- Badges ---------- */

.badge {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--color-neutral-bg);
    color: var(--color-neutral);
    border: 1px solid var(--color-neutral-border);
}
.badge-success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success-border); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning-border); }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger); border-color: var(--color-danger-border); }
.badge-info { background: var(--color-info-bg); color: var(--color-info); border-color: var(--color-info-border); }
.badge-neutral { background: var(--color-neutral-bg); color: var(--color-neutral); border-color: var(--color-neutral-border); }
.badge-aggregator { background: var(--color-aggregator-bg); color: var(--color-aggregator); border-color: var(--color-aggregator-border); }
.badge-out { background: var(--color-out); color: #fff; border-color: var(--color-out-border); }

/* Relevance badges use the outline variant so a status badge and a
   relevance badge with the same text (both "Ke kontrole" are two
   different, unrelated fields — see GrantCall.Status/Relevance) stay
   visually distinguishable even without reading the column/label next to
   them, not just by their (identical) text and color. */
.badge-outline.badge-success,
.badge-outline.badge-warning,
.badge-outline.badge-danger,
.badge-outline.badge-info,
.badge-outline.badge-neutral {
    background: transparent;
    font-weight: 500;
}

.badge-group { display: inline-flex; align-items: center; gap: 0.3rem; }
.badge-group .badge-label { font-size: 0.72rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.02em; }

.meta-row { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); margin-bottom: var(--space-2); }
.meta-item { display: flex; flex-direction: column; gap: 0.2rem; }
.meta-item .meta-label { font-size: 0.72rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.flag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--space-2); }

.review-action-bar { border-top: 3px solid var(--color-primary); }
.review-action-bar-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.review-action-bar-header h2 { margin: 0; padding-bottom: 0; border-bottom: none; }
.review-action-bar-status { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.review-action-bar .actions { margin-top: 0; }

/* ---------- Tables ---------- */

.table-responsive { width: 100%; overflow-x: auto; }

table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td {
    text-align: left;
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.88rem;
    vertical-align: top;
}
table.data th {
    background: #f8f9fb;
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--color-muted);
    white-space: nowrap;
}
table.data tbody tr { transition: background-color 0.12s ease; }
table.data tbody tr:hover { background: #f7f9fc; }
table.data td.nowrap, table.data th.nowrap { white-space: nowrap; }

.truncate {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}

/* Two-line clamp for long provider/programme names in tables: the full
   name is almost always readable in place, the title tooltip stays as a
   complement (never the only way to read it). */
.clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.col-title { width: 32%; min-width: 240px; }
.col-provider { width: 22%; min-width: 220px; }
.col-narrow { width: 10%; min-width: 90px; }

/* Review Queue Compact Layout hotfix — table-layout: fixed makes the table
   respect the colgroup percentages below no matter what a cell contains, so
   a long value can never grow the table past its container (the "část
   tabulky je mimo obraz" complaint) the way plain table-layout: auto did.
   Column widths intentionally sum to 100%. */
.review-table { table-layout: fixed; }
.review-table .col-review-select { width: 4%; min-width: 32px; }
.review-table .col-review-title { width: 28%; }
.review-table .col-review-provider { width: 16%; }
.review-table .col-review-status { width: 13%; }
.review-table .col-review-relevance { width: 13%; }
.review-table .col-review-deadline { width: 11%; }
.review-table .col-review-actions { width: 15%; }

.review-call-title { font-weight: 500; }

/* Review Queue Bulk Resolution — a compact toolbar above the table, same
   `.actions` flex row the rest of the app already uses for button groups,
   just with the "Vybrat vše" label folded into the same line so the panel
   never adds real vertical height. Checkboxes themselves reuse
   .checkbox-row's `input[type="checkbox"] { width: auto; margin: 0; }`
   rule, so no new checkbox styling is needed either. */
.bulk-panel { flex-wrap: wrap; }
.bulk-select-all { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--color-muted); }
.bulk-select-all input[type="checkbox"] { width: auto; margin: 0; }

/* Secondary detail lines under a review queue call's title (former
   "Žadatelé / oblast"/"Financování" columns) — capped to roughly 3 lines
   total via max-height regardless of how many of the conditional rows are
   present, and each row is forced to a single truncated line, so this
   block can never be what makes a table row tall again. Full values are
   never put in a `title` attribute here — that would just re-introduce the
   same "huge HTML per row" problem in a different attribute; the complete
   text stays reachable only on the call's own detail page. */
.review-call-meta {
    margin-top: 0.25rem;
    max-height: 3.6rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.review-call-meta-row {
    font-size: 0.78rem;
    color: var(--color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------- Empty states ---------- */

.empty-state {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    color: var(--color-muted);
}
.empty-state p { margin: 0; font-size: 0.9rem; }

/* ---------- Filters ---------- */

.filters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-3) var(--space-4);
    align-items: end;
}
.filters .field { display: flex; flex-direction: column; min-width: 0; }
.filters .field label { font-size: 0.78rem; margin-bottom: 0.25rem; }
.filters .field select, .filters .field input[type="text"] { margin-bottom: 0; text-overflow: ellipsis; }
.filters .field-actions { display: flex; align-items: center; gap: var(--space-2); }
.filters .field-checkboxes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
/* Options like "Konec příjmu (nejpozději)" need more than one 180px track
   to stay readable in the closed select box. */
.filters .field-wide { grid-column: span 2; }
@media (max-width: 480px) {
    .filters .field-wide { grid-column: span 1; }
}

/* ---------- Actions bar ---------- */

.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: var(--space-5); align-items: center; }
.actions form { display: inline; margin: 0; }
/* Destructive action stands apart from the routine buttons: pushed to the
   far edge so it can't be hit by muscle memory next to "Upravit". */
.actions > .btn-danger, .actions > form:last-child:has(.btn-danger) { margin-left: auto; }

/* Compact horizontal action list inside a table cell (Review Queue Cockpit)
   — keeps Detail/Upravit/Zdroj/Schválit on one wrapping line instead of
   stacking with <br>, so a row's height is driven by its text content, not
   by how many actions it has. */
.row-actions { display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem; align-items: center; }
.row-actions form { display: inline; margin: 0; }

/* ---------- Pagination ---------- */

.pagination {
    margin-top: var(--space-5);
    display: flex;
    gap: var(--space-3);
    align-items: center;
    justify-content: center;
}
.pagination a, .pagination .page-current {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border-strong);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-text);
    background: var(--color-surface);
}
.pagination a { transition: background-color 0.15s ease, border-color 0.15s ease; }
.pagination a:hover { background: var(--color-neutral-bg); }
.pagination .page-current { border-color: transparent; color: var(--color-muted); background: none; }

/* ---------- Dashboard stat grid ---------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
@media (max-width: 1100px) {
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
    .stat-grid { grid-template-columns: 1fr; }
}
.stat-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-4) var(--space-5);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat-card .value { font-size: 1.9rem; font-weight: 700; line-height: 1.15; }
.stat-card .label { color: var(--color-muted); font-size: 0.82rem; margin-top: 0.3rem; }
.stat-card.accent { border-top-color: var(--color-primary); }
.stat-card.accent .value { color: var(--color-primary); }
.stat-card.warn { border-top-color: var(--color-warning); }
.stat-card.warn .value { color: var(--color-warning); }
.stat-card.danger { border-top-color: var(--color-danger); }
.stat-card.danger .value { color: var(--color-danger); }

/* ---------- Detail grid ---------- */

dl.detail-grid { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1.25rem; margin: 0; }
dl.detail-grid dt { color: var(--color-muted); font-size: 0.8rem; padding-top: 0.15rem; }
dl.detail-grid dd { margin: 0; }
dl.detail-grid dd p { margin: 0 0 0.4rem; }
dl.detail-grid dd p:last-child { margin-bottom: 0; }

.note {
    padding: 0.7rem 0.9rem;
    border-radius: var(--radius-sm);
    font-size: 0.86rem;
    margin: 0;
}
.note-monitoring {
    background: var(--color-neutral-bg);
    border: 1px dashed var(--color-border-strong);
    color: var(--color-muted);
}

.field-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.field-row > div { flex: 1; min-width: 200px; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    main { padding: 0 var(--space-4); margin: var(--space-4) auto; }
    .site-header .header-inner { padding: 0 var(--space-4); flex-wrap: wrap; min-height: auto; padding-top: var(--space-2); padding-bottom: var(--space-2); }
    .main-nav { order: 3; width: 100%; gap: 0.2rem; }
    .header-user { margin-left: auto; }
    dl.detail-grid { grid-template-columns: 1fr; }
    dl.detail-grid dt { padding-top: 0.6rem; }
    .card { padding: var(--space-4); }
}

/* ---------- Motion preferences ----------
   All animation here is decorative; anyone who asked their OS to reduce
   motion gets an effectively static UI. */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .stat-card:hover { transform: none; }
}