/* Klientska zóna. Farby a rozmery sa menia iba v :root. */
:root {
    --color-primary: #4f46e5;
    --color-primary-hover: #4338ca;
    --color-primary-soft: #eef2ff;
    --color-on-primary: #ffffff;
    --color-text: #1f2333;
    --color-text-muted: #636a7e;
    --color-heading: #14172a;
    --color-bg: #f5f6fb;
    --color-surface: #ffffff;
    --color-border: #e1e5ef;
    --color-success: #1a7f4b;
    --color-success-soft: #e6f6ee;
    --color-warning: #92600a;
    --color-warning-soft: #fdf3dc;
    --color-danger: #b42335;
    --color-danger-soft: #fdecee;
    --color-neutral-soft: #eef0f5;
    --font-base: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: ui-monospace, Menlo, Consolas, monospace;
    --fs-xs: .78rem;
    --fs-sm: .875rem;
    --fs-base: 1rem;
    --fs-lg: 1.125rem;
    --fs-xl: 1.6rem;
    --fs-hero: clamp(1.75rem, 1.25rem + 2.2vw, 2.75rem);
    --stage-done: #1a7f4b;
    --stage-in_progress: #4f46e5;
    --stage-waiting: #d9960f;
    --stage-received: #bcc2d2;
    --unit-height: 1.75rem;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --radius-sm: .375rem;
    --radius: .625rem;
    --radius-pill: 999px;
    --shadow-card: 0 1px 2px rgb(20 23 42 / 6%);
    --focus-ring: 0 0 0 3px rgb(79 70 229 / 25%);
    --wrap-width: 68rem;
    --wrap-gutter: 1rem;
    --auth-width: 26rem;
    --form-width: 42rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-base); font-size: var(--fs-base); line-height: 1.55; }
h1, h2 { margin: 0; color: var(--color-heading); line-height: 1.25; }
h1 { font-size: var(--fs-xl); overflow-wrap: anywhere; }
h2 { font-size: var(--fs-lg); }
p { margin: 0; }
a { color: var(--color-primary); }
a:hover { color: var(--color-primary-hover); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.text-muted { color: var(--color-text-muted); }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: var(--space-3); top: var(--space-3); padding: var(--space-2) var(--space-3); background: var(--color-surface); border-radius: var(--radius-sm); }
.wrap { width: 100%; max-width: var(--wrap-width); margin-inline: auto; padding-inline: var(--wrap-gutter); }

/* Hlavička */
.portal-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.portal-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); }
.portal-brand { color: var(--color-heading); font-weight: 700; text-decoration: none; }
.portal-brand:hover { color: var(--color-heading); }
.portal-brand__soft { color: var(--color-primary); }
.portal-brand__zone { margin-left: var(--space-2); padding-left: var(--space-2); border-left: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--fs-sm); font-weight: 500; }
.portal-nav { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.portal-nav__link { color: var(--color-text); font-size: var(--fs-sm); text-decoration: none; overflow-wrap: anywhere; }
.portal-nav__link:hover { color: var(--color-primary); }
.portal-main { padding-block: var(--space-6) var(--space-7); }

/* Hlavná ponuka */
.portal-menu { border-top: 1px solid var(--color-border); }
.portal-menu__inner { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.portal-menu__link { padding: var(--space-2) 0; border-bottom: 2px solid transparent; color: var(--color-text-muted); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.portal-menu__link:hover { color: var(--color-primary); }
.portal-menu__link--active { border-bottom-color: var(--color-primary); color: var(--color-heading); }

/* Tlačidlá */
.btn-theme { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 2.75rem; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-on-primary); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.btn-theme:hover { border-color: var(--color-primary-hover); background: var(--color-primary-hover); color: var(--color-on-primary); }
.btn-theme--outline { background: transparent; color: var(--color-primary); }
.btn-theme--sm { min-height: 2.25rem; padding: var(--space-1) var(--space-3); font-size: var(--fs-sm); }
.btn-theme--block { width: 100%; }

/* Povrchy a rozloženie */
.card-surface { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.page-title { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.page-title__text { display: grid; gap: var(--space-2); flex: 1 1 18rem; min-width: 0; justify-items: start; }
.back-link { display: inline-block; margin-bottom: var(--space-3); color: var(--color-text-muted); font-size: var(--fs-sm); text-decoration: none; overflow-wrap: anywhere; }
.back-link:hover { color: var(--color-primary); }
.section-block { margin-bottom: var(--space-5); }
.section-block > h2 { margin-bottom: var(--space-3); }
.section-card { padding: var(--space-4); margin-bottom: var(--space-4); }
.section-card > h2 { margin-bottom: var(--space-3); }
.count { color: var(--color-text-muted); font-size: var(--fs-sm); font-weight: 500; }
.empty-note { padding: var(--space-6) var(--space-4); text-align: center; }
.empty-line { padding: var(--space-4); }
.detail-grid { display: grid; gap: var(--space-4); }
.detail-grid__main, .detail-grid__side { min-width: 0; }

/* Karty projektov */
.item-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.item-card { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-4); color: var(--color-text); text-decoration: none; }
.item-card:hover { border-color: var(--color-primary); color: var(--color-text); }
.item-card__title { margin: 0; color: var(--color-heading); font-size: var(--fs-lg); line-height: 1.25; overflow-wrap: anywhere; }

/* Priebeh */
.progress-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); width: 100%; }
.progress-line__bar { flex: 1 1 8rem; max-width: 20rem; height: .5rem; border: 0; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-neutral-soft); appearance: none; }
.progress-line__bar::-webkit-progress-bar { background: var(--color-neutral-soft); }
.progress-line__bar::-webkit-progress-value { background: var(--color-success); }
.progress-line__bar::-moz-progress-bar { background: var(--color-success); }
.progress-line__label { color: var(--color-text-muted); font-size: var(--fs-sm); }

/* Stavy */
.status-badge { display: inline-block; padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); background: var(--color-neutral-soft); color: var(--color-text); font-size: var(--fs-xs); font-weight: 600; line-height: 1.2; white-space: nowrap; }
.status-badge--in_progress, .status-badge--new { background: var(--color-primary-soft); color: var(--color-primary-hover); }
.status-badge--waiting { background: var(--color-warning-soft); color: var(--color-warning); }
.status-badge--done { background: var(--color-success-soft); color: var(--color-success); }
.status-badge--neutral { background: var(--color-neutral-soft); color: var(--color-text); }
.status-badge--cancelled { background: var(--color-danger-soft); color: var(--color-danger); }

/* Zoznam požiadaviek */
.request-row { display: grid; grid-template-columns: 1fr; gap: var(--space-1); justify-items: start; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; }
.request-row:last-child { border-bottom: 0; }
.request-row:hover { background: var(--color-bg); color: var(--color-text); }
.request-row__title { font-weight: 600; overflow-wrap: anywhere; }
.request-row__meta { color: var(--color-text-muted); font-size: var(--fs-sm); }

/* Prehľad */
.status-hero { margin-bottom: var(--space-6); }
.status-hero__top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-bottom: var(--space-5); }
.status-hero__headline { flex: 1 1 18rem; max-width: 32ch; font-size: var(--fs-hero); font-weight: 700; letter-spacing: -.02em; line-height: 1.12; }
.unit-bar { display: flex; gap: 3px; margin-bottom: var(--space-3); }
.unit-bar__unit { flex: 1 1 0; min-width: 2px; height: var(--unit-height); border-radius: 3px; }
.unit-bar__unit:first-child { border-radius: var(--radius-sm) 3px 3px var(--radius-sm); }
.unit-bar__unit:last-child { border-radius: 3px var(--radius-sm) var(--radius-sm) 3px; }
.unit-bar__unit--done { background: var(--stage-done); }
.unit-bar__unit--in_progress { background: var(--stage-in_progress); }
.unit-bar__unit--waiting { background: var(--stage-waiting); }
.unit-bar__unit--received { background: var(--stage-received); }
.stage-legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: 0; padding: 0; list-style: none; color: var(--color-text-muted); font-size: var(--fs-sm); }
.stage-legend__item { display: flex; align-items: center; gap: var(--space-2); }
.stage-legend__item strong { color: var(--color-heading); }
.stage-legend__mark { width: .7rem; height: .7rem; border-radius: 2px; }
.ledger { margin: 0 0 var(--space-4); }
.ledger__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
.ledger__row dt { color: var(--color-text-muted); font-size: var(--fs-sm); font-weight: 400; }
.ledger__row dd { margin: 0; color: var(--color-heading); font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ledger__note { margin: calc(var(--space-2) * -1) 0 var(--space-4); }
.project-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.project-row:last-child { border-bottom: 0; }
.project-row__name { flex: 1 1 12rem; min-width: 0; color: var(--color-heading); font-weight: 600; overflow-wrap: anywhere; text-decoration: none; }
.project-row__name:hover { color: var(--color-primary); }
.project-row .progress-line { flex: 2 1 14rem; width: auto; }
.form-field--date { max-width: 18rem; }
.stat-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--space-5); }
.stat-tile { display: grid; gap: var(--space-1); align-content: start; padding: var(--space-4); }
.stat-tile__label { color: var(--color-text-muted); font-size: var(--fs-sm); }
.stat-tile__value { color: var(--color-heading); font-size: var(--fs-lg); line-height: 1.2; overflow-wrap: anywhere; }
.stat-tile__hint { color: var(--color-text-muted); font-size: var(--fs-xs); }
.dash-grid { display: grid; gap: 0 var(--space-4); }
.dash-grid > * { min-width: 0; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-1) var(--space-3); margin-bottom: var(--space-3); }
.section-head__link { font-size: var(--fs-sm); }
.page-title__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Odpracovaná práca */
.work-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.work-row:last-child { border-bottom: 0; }
.request-list--compact .request-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title status" "meta meta"; align-items: start; gap: var(--space-1) var(--space-3); }
.request-list--compact .request-row > .status-badge { grid-area: status; }
.request-list--compact .request-row__title { grid-area: title; }
.request-list--compact .request-row__meta { grid-area: meta; }
.request-list--compact .work-row { flex-direction: column; align-items: flex-start; }
.request-list--compact .work-row__main { flex: none; width: 100%; }
.work-row__main { display: grid; gap: var(--space-1); flex: 1 1 14rem; min-width: 0; }
.work-row__title { font-weight: 600; overflow-wrap: anywhere; }
.work-row__meta { color: var(--color-text-muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.work-row__figures { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); font-size: var(--fs-sm); }
.work-row__hours { color: var(--color-text-muted); white-space: nowrap; }
.work-row__amount { color: var(--color-heading); font-weight: 600; white-space: nowrap; }
.month-group { margin-bottom: var(--space-3); }
.month-group__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; }
.month-group[open] > .month-group__head { border-bottom: 1px solid var(--color-border); }
.month-group__title { color: var(--color-heading); font-weight: 600; }
.month-group__title::first-letter { text-transform: uppercase; }
.month-group__total { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--color-text-muted); font-size: var(--fs-sm); }
.chip-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.chip { padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); font-size: var(--fs-sm); text-decoration: none; overflow-wrap: anywhere; }
.chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.chip--active { border-color: var(--color-primary); background: var(--color-primary-soft); color: var(--color-primary-hover); }

/* Formuláre */
.form-stack { display: grid; gap: var(--space-4); }
.form-stack > .btn-theme { justify-self: start; }
.form-stack > .btn-theme--block { justify-self: stretch; }
.form-card { max-width: var(--form-width); padding: var(--space-4); }
.form-field { display: grid; gap: var(--space-1); min-width: 0; }
.form-field label { font-size: var(--fs-sm); font-weight: 600; }
.form-input { width: 100%; min-height: 2.75rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; }
.form-input:focus { border-color: var(--color-primary); }
.form-input--secret { font-family: var(--font-mono); font-size: var(--fs-sm); }
.password-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-1); }
.password-tools[hidden], .password-tools > [hidden] { display: none; }
.form-hint:empty { display: none; }
.form-hint { color: var(--color-text-muted); font-size: var(--fs-sm); }
.auth-card { display: grid; gap: var(--space-4); max-width: var(--auth-width); margin: var(--space-6) auto 0; padding: var(--space-5); }

/* Nahrávanie súborov */
.file-drop--ready .file-drop__input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.file-drop__area { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-3); padding: var(--space-4); border: 2px dashed var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); font-size: var(--fs-sm); text-align: center; }
.file-drop__area[hidden] { display: none; }
.file-drop__area--active { border-color: var(--color-primary); background: var(--color-primary-soft); }
.file-drop__area kbd { padding: 0 var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font: inherit; font-size: var(--fs-xs); font-weight: 600; }
.file-drop__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.file-drop__list[hidden] { display: none; }
.file-drop__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--fs-sm); }
.file-drop__item small { color: var(--color-text-muted); }
.file-drop__thumb { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); object-fit: cover; }
.file-drop__name { flex: 1 1 8rem; min-width: 0; overflow-wrap: anywhere; }
.file-drop__errors { color: var(--color-danger); font-size: var(--fs-sm); }

/* Upozornenia */
.notice { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); }
.notice ul { margin: var(--space-1) 0 0; padding-left: var(--space-5); }
.notice--success { background: var(--color-success-soft); color: var(--color-success); }
.notice--danger { background: var(--color-danger-soft); color: var(--color-danger); }

/* Detail požiadavky */
.prose { white-space: pre-line; overflow-wrap: anywhere; }
.message { margin-bottom: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.message--team { border-color: transparent; background: var(--color-primary-soft); }
.message__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); font-size: var(--fs-sm); }
.message__head time { color: var(--color-text-muted); }
.message-form { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.timeline { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.timeline__item { display: grid; padding-left: var(--space-3); border-left: 2px solid var(--color-border); font-size: var(--fs-sm); }
.timeline__item:last-child { border-left-color: var(--color-primary); }
.timeline__item time { color: var(--color-text-muted); }
.file-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.file-list a { display: block; overflow-wrap: anywhere; }
.file-list small { color: var(--color-text-muted); }

@media (min-width: 48rem) {
    .request-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3); }
    .detail-grid { grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); align-items: start; }
    .stat-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .stat-grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stat-tile__value { font-size: var(--fs-xl); }
    .dash-grid--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .request-list--compact .request-row { grid-template-columns: minmax(0, 1fr) auto; }
}

@media (prefers-reduced-motion: no-preference) {
    .unit-bar__unit { animation: unit-rise .35s ease-out backwards; }
    @keyframes unit-rise { from { transform: scaleY(.25); opacity: 0; } }
}