:root {
  --red: #e83030;
  --blue: #1475f7;
  --purple: #7114ef;
  --navy: #0f0f35;
  --text: #383838;
  --heading: #2e2d2d;
  --muted: #7a7a7a;
  --line: #e6eaf0;
  --bg: #f5f7fa;
  --grad: linear-gradient(90deg, #7114ef 0%, #1475f7 50%, #7114ef 100%);
  --bottomnav-h: 60px;
}

html, body { height: 100%; }
body {
  font-family: Roboto, "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  font-size: 15px;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, .fira { font-family: "Fira Sans", Roboto, "Segoe UI", sans-serif; font-weight: 700; color: var(--heading); }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* shell */
.app-shell { min-height: 100vh; display: flex; flex-direction: column; }
.app-main { flex: 1; padding: 16px; padding-bottom: calc(var(--bottomnav-h) + 24px); max-width: 1200px; width: 100%; margin: 0 auto; }
@media (min-width: 992px) { .app-main { padding: 24px 32px; } }

.app-header {
  height: 60px; background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 24px; padding: 0 16px; position: sticky; top: 0; z-index: 1020;
}
@media (min-width: 992px) { .app-header { padding: 0 32px; height: 68px; } }
.logo { display: inline-flex; align-items: center; gap: 5px; text-decoration: none !important; white-space: nowrap; }
.logo .box { background: var(--red); color: #fff; font-weight: 700; font-size: 20px; line-height: 1; padding: 6px 6px 7px; border-radius: 6px; letter-spacing: -.5px; }
.logo .word { color: #c9c9c9; font-weight: 500; font-size: 16px; letter-spacing: -.3px; }
.logo .hd { font-family: "Fira Sans", sans-serif; font-weight: 700; color: var(--heading); margin-left: 8px; font-size: 17px; }
.app-topnav { display: flex; gap: 4px; flex: 1; }
.app-topnav a { padding: 8px 14px; border-radius: 20px; color: var(--heading); font-weight: 500; text-decoration: none !important; }
.app-topnav a:hover { background: var(--bg); }
.app-topnav a.active { background: var(--blue); color: #fff; }
.app-user { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.app-bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottomnav-h); background: #fff; border-top: 1px solid var(--line);
  display: flex; justify-content: space-around; align-items: stretch; z-index: 1020; padding-bottom: env(safe-area-inset-bottom);
}
.app-bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); text-decoration: none !important; gap: 2px; }
.app-bottomnav a .ico { font-size: 20px; line-height: 1; }
.app-bottomnav a.active { color: var(--blue); font-weight: 700; }
.app-bottomnav a.primary .ico { background: var(--grad); color: #fff; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-top: -18px; box-shadow: 0 6px 16px rgba(113,20,239,.35); font-size: 24px; }

/* buttons */
.btn { border-radius: 24px; font-weight: 500; }
.btn-brand { background: var(--grad); background-size: 200% 100%; color: #fff !important; border: 0; box-shadow: 0 6px 16px rgba(113,20,239,.25); transition: background-position .3s; }
.btn-brand:hover { background-position: 100% 0; color: #fff; }
.btn-brand:disabled { opacity: .6; }
.btn-primary { background: var(--blue); border-color: var(--blue); }
.btn-lg { padding: 12px 24px; }
.btn-touch { min-height: 44px; }
.btn-group .btn { border-radius: 24px !important; }

/* cards */
.card { border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 8px rgba(15,15,53,.04); }
.card-header { background: #fff; border-bottom: 1px solid var(--line); border-radius: 14px 14px 0 0 !important; font-family: "Fira Sans", sans-serif; font-weight: 700; }
.ticket-card { display: block; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; margin-bottom: 10px; color: var(--text); text-decoration: none !important; transition: box-shadow .15s; }
.ticket-card:hover { box-shadow: 0 6px 18px rgba(15,15,53,.08); }
.ticket-card .title { font-weight: 700; color: var(--heading); font-size: 15px; }
.ticket-card .meta { font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 4px; }
.ticket-card.overdue { border-left: 4px solid var(--red); }
.ticket-card.p1 { border-left: 4px solid var(--red); }
.ticket-card.p2 { border-left: 4px solid #f59e0b; }

/* badges */
.badge { font-weight: 500; border-radius: 10px; padding: 4px 8px; }
.badge.st-New, .badge.st-PendingVerification { background: #fee2e2; color: #991b1b; }
.badge.st-Accepted, .badge.st-Planned { background: #dbeafe; color: #1e40af; }
.badge.st-InProgress, .badge.st-Ordered, .badge.st-Shipped { background: #ede9fe; color: #5b21b6; }
.badge.st-WaitingForCustomer, .badge.st-QuoteSent { background: #fef3c7; color: #92400e; }
.badge.st-QuoteApproved, .badge.st-Resolved { background: #d1fae5; color: #065f46; }
.badge.st-Closed { background: #e5e7eb; color: #374151; }
.badge.st-Cancelled { background: #f3f4f6; color: #9ca3af; text-decoration: line-through; }
.badge.pr-1 { background: var(--red); color: #fff; }
.badge.pr-2 { background: #f59e0b; color: #fff; }
.badge.pr-3 { background: #3b82f6; color: #fff; }
.badge.pr-4 { background: #9ca3af; color: #fff; }
.badge.ai { background: #ede9fe; color: #5b21b6; border: 1px dashed #a78bfa; }

/* stats */
.stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: block; color: var(--text); text-decoration: none !important; }
.stat .num { font-family: "Fira Sans", sans-serif; font-size: 26px; font-weight: 700; color: var(--heading); line-height: 1.1; }
.stat .lbl { font-size: 12.5px; color: var(--muted); }
.stat.danger .num { color: var(--red); }

/* forms */
.form-control, .form-select { border-radius: 10px; min-height: 44px; border-color: #d5dbe3; }
.form-control:focus, .form-select:focus { border-color: var(--blue); box-shadow: 0 0 0 .2rem rgba(20,117,247,.15); }
textarea.form-control { min-height: 110px; }
.form-label { font-weight: 500; font-size: 13.5px; color: var(--heading); margin-bottom: 4px; }
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg .btn { flex: 1; min-width: 60px; }
.seg .btn-check:checked + .btn { background: var(--blue); color: #fff; border-color: var(--blue); }

/* timeline */
.timeline .item { border-left: 3px solid var(--line); padding: 8px 0 8px 14px; margin-left: 6px; position: relative; }
.timeline .item::before { content: ""; position: absolute; left: -7.5px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--blue); }
.timeline .item.internal { background: #fffbeb; border-left-color: #f59e0b; border-radius: 0 10px 10px 0; }
.timeline .item.internal::before { background: #f59e0b; }
.timeline .item.system { color: var(--muted); font-size: 13px; }
.timeline .item.system::before { background: #cbd5e1; }
.timeline .who { font-weight: 700; font-size: 13px; color: var(--heading); }
.timeline .when { color: var(--muted); font-size: 12px; margin-left: 6px; }
.timeline .body { white-space: pre-wrap; word-break: break-word; margin-top: 2px; }

/* table on mobile */
.table-responsive { border-radius: 12px; }
.table { background: #fff; }
.table > :not(caption) > * > * { padding: .6rem .6rem; }
@media (max-width: 767px) {
  .table-cards thead { display: none; }
  .table-cards tr { display: block; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: #fff; padding: 6px 10px; }
  .table-cards td { display: flex; justify-content: space-between; border: 0; padding: 4px 0; gap: 12px; }
  .table-cards td::before { content: attr(data-label); color: var(--muted); font-size: 12.5px; }
  .table-cards td.actions { justify-content: flex-end; }
  .table-cards td.actions::before { content: none; }
}

.sticky-actions { position: sticky; bottom: calc(var(--bottomnav-h) + 8px); background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px; box-shadow: 0 -4px 20px rgba(15,15,53,.08); z-index: 5; }
@media (min-width: 992px) { .sticky-actions { bottom: 12px; } }

.ai-box { background: #f5f3ff; border: 1px dashed #a78bfa; border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.small-muted { font-size: 12.5px; color: var(--muted); }
.pre { white-space: pre-wrap; word-break: break-word; }
.hero-login { background: var(--navy); min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; position: relative; overflow: hidden; }
.hero-login::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(113,20,239,.85) 0%, rgba(113,20,239,.55) 35%, rgba(20,117,247,.35) 60%, rgba(15,15,53,0) 85%); }
.login-card { position: relative; background: #fff; border-radius: 16px; padding: 28px; width: 100%; max-width: 420px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }

#blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2); box-sizing: border-box; display: none; left: 0; padding: .6rem 1.25rem .7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; }
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }
.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; border-radius: 10px; }
.darker-border-checkbox.form-check-input { border-color: #929292; }
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; font-size: 13px; }

/* ===== Zákaznický portál ===== */
.portal { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }
.portal-wrap { max-width: 1080px; margin: 0 auto; width: 100%; padding: 0 16px; }
@media (min-width: 992px) { .portal-wrap { padding: 0 24px; } }
.portal-top { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1020; }
.portal-top-inner { height: 64px; display: flex; align-items: center; gap: 28px; }
.portal-nav { gap: 4px; flex: 1; }
.portal-nav a { padding: 8px 14px; border-radius: 20px; color: var(--heading); font-weight: 500; text-decoration: none !important; }
.portal-nav a:hover { background: var(--bg); }
.portal-nav a.active { background: var(--blue); color: #fff; }
.portal-user { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.portal-user-name { font-weight: 700; font-size: 14px; line-height: 1.1; }
.portal-user-company { font-size: 12px; color: var(--muted); }
.portal-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--grad); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.portal-main { flex: 1; padding: 24px 0 calc(var(--bottomnav-h) + 32px); }
@media (min-width: 768px) { .portal-main { padding-bottom: 48px; } }
.portal-footer { background: var(--navy); color: rgba(255,255,255,.7); font-size: 13px; padding: 18px 0; margin-bottom: var(--bottomnav-h); }
@media (min-width: 768px) { .portal-footer { margin-bottom: 0; } }
.portal-footer a { color: #fff; }

.p-hero { background: var(--navy); color: #fff; border-radius: 18px; padding: 22px 24px; position: relative; overflow: hidden; margin-bottom: 20px; }
.p-hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(113,20,239,.9) 0%, rgba(113,20,239,.55) 40%, rgba(20,117,247,.45) 70%, rgba(15,15,53,0) 100%); }
.p-hero > * { position: relative; }
.p-hero h1 { color: #fff; font-size: 1.5rem; margin: 0 0 4px; }
.p-hero .sub { color: rgba(255,255,255,.85); font-size: 14px; }
.p-hero .btn-light { border-radius: 24px; font-weight: 700; color: var(--purple); }
.p-kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px; }
@media (min-width: 768px) { .p-kpis { grid-template-columns: repeat(4, 1fr); } }
.p-kpi { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: block; color: var(--text); text-decoration: none !important; transition: box-shadow .15s; }
.p-kpi:hover { box-shadow: 0 6px 18px rgba(15,15,53,.08); }
.p-kpi .num { font-family: "Fira Sans", sans-serif; font-size: 28px; font-weight: 700; color: var(--heading); line-height: 1.1; }
.p-kpi .lbl { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.p-kpi.attn .num { color: var(--red); }
.p-kpi.ok .num { color: #059669; }

.p-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.p-toolbar .seg { flex: 1; }
.p-toolbar .form-control { max-width: 320px; }
.p-list { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.p-row { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none !important; transition: background .12s; }
.p-row:last-child { border-bottom: 0; }
.p-row:hover { background: #f8faff; }
.p-row .num { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px; color: var(--muted); }
.p-row .title { font-weight: 700; color: var(--heading); font-size: 15px; }
.p-row .meta { font-size: 12.5px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.p-row .right { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.p-row.attn { box-shadow: inset 4px 0 0 var(--red); }
.p-empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.p-empty .ico { font-size: 40px; margin-bottom: 8px; }

.p-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; margin-bottom: 16px; }
.p-card h2 { font-size: 1.1rem; margin-bottom: 12px; }
.p-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
@media (min-width: 768px) { .p-meta { grid-template-columns: repeat(3, 1fr); } }
.p-meta .k { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.p-meta .v { font-weight: 500; }
.p-attn { background: #fff7ed; border: 1px solid #fdba74; color: #9a3412; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; display: flex; gap: 10px; align-items: flex-start; }
.p-ok { background: #ecfdf5; border: 1px solid #6ee7b7; color: #065f46; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }

.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 768px) { .tiles.c3 { grid-template-columns: repeat(3, 1fr); } .tiles.c4 { grid-template-columns: repeat(4, 1fr); } }
.tile { border: 2px solid var(--line); border-radius: 12px; padding: 12px; text-align: left; background: #fff; cursor: pointer; transition: border-color .12s, box-shadow .12s; min-height: 44px; }
.tile:hover { border-color: #b9c8e0; }
.tile.on { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(20,117,247,.12); }
.tile .t { font-weight: 700; color: var(--heading); }
.tile .d { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.tile.p1.on { border-color: var(--red); box-shadow: 0 0 0 3px rgba(232,48,48,.12); }

.thread { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.msg { display: flex; gap: 10px; max-width: 85%; }
.msg.me { align-self: flex-end; flex-direction: row-reverse; }
.msg .av { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; background: #e2e8f0; color: var(--heading); }
.msg.me .av { background: var(--grad); color: #fff; }
.msg .bubble { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; }
.msg.me .bubble { background: #eef4ff; border-color: #cfe0ff; }
.msg .who { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.msg .body { white-space: pre-wrap; word-break: break-word; }
.msg .files { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.msg-sys { text-align: center; font-size: 12.5px; color: var(--muted); }
.composer { position: sticky; bottom: calc(var(--bottomnav-h) + 8px); background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; box-shadow: 0 -4px 20px rgba(15,15,53,.08); }
@media (min-width: 768px) { .composer { position: static; box-shadow: none; } }
.pill { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 500; background: #eef2f7; color: var(--heading); }
.pill.attn { background: #fee2e2; color: #991b1b; }
.portal-top .logo .hd { display: none; }
@media (min-width: 576px) { .portal-top .logo .hd { display: inline; } }
.portal-top .btn-outline-secondary { white-space: nowrap; }
.pdf-frame { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #525659; }
.pdf-frame object { width: 100%; height: 560px; display: block; }
@media (max-width: 767px) { .pdf-frame object { height: 420px; } }

/* pravý sloupec detailu – profesionální vzhled */
.side-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 14px; overflow: hidden; }
.side-card .hd { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: "Fira Sans", sans-serif; font-weight: 700; font-size: 14px; color: var(--heading); }
.side-card .hd .badge { font-weight: 500; }
.side-card .bd { padding: 14px 16px; }
.side-card .sec { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; margin: 10px 0 6px; }
.side-card .sec:first-child { margin-top: 0; }

/* zaškrtávací volby (jedna z N) */
.choice { display: flex; flex-direction: column; gap: 6px; }
.choice button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; transition: border-color .12s, background .12s; min-height: 42px; }
.choice button:hover:not(:disabled) { border-color: #b9c8e0; background: #fafcff; }
.choice button:disabled { cursor: default; opacity: .75; }
.choice .box { width: 20px; height: 20px; border: 2px solid #c3cddb; border-radius: 6px; flex: 0 0 20px; display: flex; align-items: center; justify-content: center; background: #fff; }
.choice .box svg { width: 13px; height: 13px; stroke: #fff; display: none; }
.choice button.on { border-color: var(--blue); background: #f2f7ff; }
.choice button.on .box { background: var(--blue); border-color: var(--blue); }
.choice button.on .box svg { display: block; }
.choice button.p1.on { border-color: var(--red); background: #fff5f5; }
.choice button.p1.on .box { background: var(--red); border-color: var(--red); }
.choice .lbl { font-weight: 600; color: var(--heading); font-size: 14px; line-height: 1.2; }
.choice .hint { font-size: 12px; color: var(--muted); }

/* postup řešení */
.steps { display: flex; flex-direction: column; gap: 0; }
.step { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; position: relative; padding-bottom: 12px; }
.step::before { content: ""; position: absolute; left: 10px; top: 20px; bottom: -2px; width: 2px; background: var(--line); }
.step:last-child::before { display: none; }
.step .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c3cddb; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); z-index: 1; }
.step.done .dot { background: var(--blue); border-color: var(--blue); color: #fff; }
.step.now .dot { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(20,117,247,.15); color: var(--blue); }
.step.cancel .dot { background: #9ca3af; border-color: #9ca3af; color: #fff; }
.step .t { font-weight: 600; font-size: 13.5px; color: var(--heading); line-height: 22px; }
.step .d { font-size: 12px; color: var(--muted); }
.step:not(.done):not(.now) .t { color: var(--muted); font-weight: 500; }

.summary-ai { background: linear-gradient(135deg, #f5f3ff, #eef4ff); border: 1px solid #dcd6ff; border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.summary-ai .tag { display: flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--purple); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13.5px; }
.kv .k { color: var(--muted); }
.kv .v { color: var(--heading); font-weight: 500; }
.btn-save { width: 100%; }

/* náhledy příloh ve vláknu */
.att-img { display: block; max-width: 100%; max-height: 360px; border-radius: 10px; border: 1px solid var(--line); margin-top: 8px; cursor: zoom-in; background: #fff; }
.att-pdf { margin-top: 8px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #525659; }
.att-pdf object { width: 100%; height: 420px; display: block; }
.att-pdf .cap { background: #fff; padding: 6px 10px; font-size: 12.5px; display: flex; justify-content: space-between; }
.ai-search { background: linear-gradient(135deg, #f5f3ff, #eef4ff); border: 1px solid #dcd6ff; border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.ai-search .form-control { border-color: #c4b5fd; }
.ai-answer { font-size: 14px; color: var(--heading); margin-top: 8px; }
.ai-reason { font-size: 12.5px; color: var(--purple); }

/* ===== detail požadavku – hlavička a ukazatel postupu ===== */
.t-head { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 22px; margin-bottom: 16px; }
.t-head .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.t-head .num { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; color: var(--blue); background: #eef4ff; border-radius: 14px; padding: 3px 10px; display: inline-block; }
.t-head h1 { font-size: 1.4rem; margin: 6px 0 0; }
.t-head .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.t-head .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--heading); background: #f3f5f9; border-radius: 14px; padding: 4px 10px; }
.t-head .chip svg { width: 14px; height: 14px; stroke: var(--muted); }

.tracker { display: flex; align-items: flex-start; margin-top: 18px; }
.tracker .st { flex: 1; position: relative; text-align: center; }
.tracker .st::before { content: ""; position: absolute; top: 15px; left: 50%; width: 100%; height: 3px; background: var(--line); z-index: 0; }
.tracker .st:last-child::before { display: none; }
.tracker .st.done::before { background: var(--blue); }
.tracker .dot { width: 32px; height: 32px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; border: 3px solid var(--line); background: #fff; position: relative; z-index: 1; font-size: 13px; font-weight: 700; color: var(--muted); transition: all .2s; }
.tracker .dot svg { width: 16px; height: 16px; stroke: #fff; }
.tracker .st.done .dot { background: var(--blue); border-color: var(--blue); }
.tracker .st.now .dot { border-color: var(--blue); color: var(--blue); box-shadow: 0 0 0 5px rgba(20,117,247,.15); animation: pulse 1.8s ease-out infinite; }
.tracker .st.cancel .dot { background: #9ca3af; border-color: #9ca3af; }
.tracker .lbl { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.tracker .st.done .lbl, .tracker .st.now .lbl { color: var(--heading); }
.tracker .sub { font-size: 11.5px; color: var(--muted); margin-top: 2px; padding: 0 4px; }
.tracker .st.now .sub { color: var(--blue); font-weight: 600; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(20,117,247,.35); } 100% { box-shadow: 0 0 0 10px rgba(20,117,247,0); } }
@media (max-width: 575px) { .tracker .lbl { font-size: 11px; } .tracker .sub { display: none; } }

/* dlaždice / volby s ikonou (typ požadavku) */
.tile .ico, .choice .ico { width: 22px; height: 22px; stroke: var(--blue); flex: 0 0 22px; }
.tile.icon-tile { display: flex; align-items: center; gap: 10px; }
.tile.icon-tile .t { margin: 0; }
.choice.compact button { min-height: 40px; padding: 7px 10px; }
.side-card .hd svg { width: 16px; height: 16px; stroke: var(--blue); margin-right: 6px; vertical-align: -3px; }

/* kompaktní hlavička detailu */
.t-head.compact { padding: 12px 16px; margin-bottom: 12px; }
.t-head.compact h1 { font-size: 1.1rem; margin-top: 3px; }
.t-head.compact .chips { margin-top: 5px; }
.t-head.compact .chip { font-size: 11.5px; padding: 3px 8px; }
.t-head.compact .tracker { margin-top: 10px; }
.t-head.compact .tracker .dot { width: 24px; height: 24px; border-width: 2px; font-size: 11px; }
.t-head.compact .tracker .dot svg { width: 12px; height: 12px; }
.t-head.compact .tracker .st::before { top: 11px; height: 2px; }
.t-head.compact .tracker .lbl { font-size: 12px; margin-top: 5px; }
.t-head.compact .tracker .sub { font-size: 11px; }
.t-head.compact .tracker .st.now .dot { box-shadow: 0 0 0 3px rgba(20,117,247,.15); }

/* výjezdy */
.visit-day { display: grid; grid-template-columns: 90px 1fr; gap: 12px; margin-bottom: 14px; }
.visit-day .date { font-family: "Fira Sans", sans-serif; font-weight: 700; color: var(--heading); }
.visit-day .date small { display: block; font-weight: 500; color: var(--muted); font-size: 12px; }
.visit-day.today .date { color: var(--blue); }
.visit { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; }
.visit.done { opacity: .6; }
.visit .vt { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.visit .vt .name { font-weight: 700; color: var(--heading); }
.visit .tk { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 14px; }
.visit .tk .num { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--blue); }

/* ---- file picker (composer / new request) ---- */
.file-picker { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.file-picker-btn { display: inline-flex; align-items: center; gap: .4rem; border-radius: 999px; padding: .3rem .8rem; cursor: pointer; }
.file-picker-btn svg { width: 15px; height: 15px; }
.file-chip { display: inline-flex; align-items: center; gap: .35rem; max-width: 260px; padding: .2rem .35rem .2rem .6rem; border-radius: 999px; background: #eef1ff; color: #2b3a67; font-size: .8rem; }
.file-chip .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip .s { color: #7b86a8; font-size: .72rem; }
.file-chip .x { border: 0; background: transparent; color: #7b86a8; font-size: 1rem; line-height: 1; padding: 0 .25rem; cursor: pointer; border-radius: 50%; }
.file-chip .x:hover { background: #d9def9; color: #2b3a67; }