/* CentOps – portál pro uživatele (/portal). Staví na tokenech a prvcích app.css (vzhled podle značky instance);
   jen rozvržení portálu: vzdušnější, větší písmo, dva hlavní vstupy, konverzace u tiketu. */
.portal { background: var(--bg); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 50; background: var(--panel); color: var(--ink); padding: var(--sp-2) var(--sp-3); border-radius: var(--r); }
.skip:focus { left: 8px; }
.pt-top-in { max-width: 1040px; align-items: center; justify-content: space-between; }
.pt-brand { gap: var(--sp-3); order: 0; }
.pt-top .pt-nav { order: 1; display: flex; }
.pt-top .pt-nav[hidden] { display: none; }
.pt-user { order: 2; margin-left: auto; }
.pt-brand .brand-svg svg { height: 24px; }
.pt-brand-sub { font-size: var(--fs-sm); color: var(--head-ink); opacity: .75; border-left: 1px solid currentColor; padding-left: var(--sp-3); }
.pt-nav { flex: 1; }
.pt-nav a:visited { color: var(--head-ink); }
.pt-count { display: inline-block; min-width: 20px; padding: 0 6px; margin-left: 4px; border-radius: 10px; background: var(--head-active); color: #1c1c1c; font-size: var(--fs-2xs); font-weight: 700; text-align: center; line-height: 20px; }
.pt-user { display: flex; align-items: center; gap: var(--sp-2); }
.pt-lang { font: inherit; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .04em; background: transparent; color: var(--head-ink); border: 1px solid color-mix(in srgb, var(--head-ink) 40%, transparent); border-radius: var(--r-btn); padding: 4px 10px; cursor: pointer; min-height: 32px; }
.pt-menu { position: relative; }
.pt-menu summary { list-style: none; cursor: pointer; color: var(--head-ink); font-size: var(--fs-sm); font-weight: 500; padding: 6px 10px; border-radius: var(--r-btn); border: 1px solid color-mix(in srgb, var(--head-ink) 40%, transparent); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-menu summary::-webkit-details-marker { display: none; }
.pt-menu-b { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; display: grid; gap: var(--sp-2); min-width: 240px; padding: var(--sp-3); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: 0 12px 32px rgb(0 0 0 / .16); }
.pt-menu-b a { color: var(--link); }
.pt-lang:focus-visible, .pt-menu summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.pt-main { max-width: 1040px; margin: 0 auto; padding: var(--sp-6) max(16px, env(safe-area-inset-right, 0px)) 64px max(16px, env(safe-area-inset-left, 0px)); display: grid; gap: var(--sp-5); outline: none; }
.pt-main h1 { font-size: var(--fs-3xl); line-height: 1.2; margin: 0; font-weight: 500; letter-spacing: -.01em; text-wrap: balance; }
.pt-main h2 { font-size: var(--fs-lg); margin: 0 0 var(--sp-3); font-weight: 500; }
.pt-loading { padding: var(--sp-6) 0; }
.pt-lead { font-size: var(--fs-lg); color: var(--muted); margin: 0; max-width: 68ch; }
.pt-back { font-size: var(--fs-sm); text-decoration: none; justify-self: start; }

/* úvod */
.pt-hero { display: grid; gap: var(--sp-4); padding: var(--sp-5) 0 var(--sp-3); }
.pt-hero h1 { font-size: clamp(28px, 4vw, 40px); }
.pt-hero-q { display: block; color: var(--muted); }
.pt-welcome { margin: 0; max-width: 68ch; color: var(--ink); }
.pt-search { display: flex; gap: var(--sp-2); max-width: 680px; }
.pt-search-in { flex: 1; min-width: 0; min-height: 52px; font-size: var(--fs-lg); padding: 0 var(--sp-4); }
.pt-search .btn { min-height: 52px; }
.pt-alerts { display: grid; gap: var(--sp-2); }
.pt-alert { display: block; padding: var(--sp-3) var(--sp-4); border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--line)); background: color-mix(in srgb, var(--warn) 9%, var(--panel)); border-radius: var(--r-card); color: var(--ink); text-decoration: none; }
.pt-alert:visited { color: var(--ink); }
.pt-alert:hover { border-color: var(--warn); color: var(--ink); }
.pt-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: var(--sp-4); }
.pt-action { display: grid; grid-template-columns: auto 1fr; grid-template-rows: 1fr auto; gap: var(--sp-2) var(--sp-4); padding: var(--sp-5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); text-decoration: none; color: var(--ink); min-height: 150px; transition: border-color .15s, box-shadow .15s; }
.pt-action:visited { color: var(--ink); }
.pt-action:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgb(0 0 0 / .07); color: var(--ink); }
.pt-action:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pt-action-ic { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-xl); background: var(--accent-soft); color: var(--accent); }
.pt-action b { display: block; font-size: var(--fs-xl); font-weight: 500; margin-bottom: 4px; }
.pt-action span span { color: var(--muted); }
.pt-action-go { color: var(--link); font-weight: 500; align-self: end; }

/* seznamy */
.pt-sec { display: grid; gap: var(--sp-2); min-width: 0; }
.pt-sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.pt-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--panel); overflow: hidden; }
.pt-list li + li { border-top: 1px solid var(--line); }
.pt-row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); text-decoration: none; color: var(--ink); }
.pt-row:visited { color: var(--ink); }
.pt-row:hover { background: var(--soft); color: var(--ink); }
.pt-row-main { display: grid; gap: 2px; min-width: 0; }
.pt-row-main b { font-weight: 500; overflow-wrap: anywhere; }
.pt-filter { max-width: 520px; width: 100%; }
.pt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--sp-3); }
.pt-tile { display: grid; gap: 6px; align-content: start; padding: var(--sp-4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); text-decoration: none; color: var(--ink); }
.pt-tile:visited { color: var(--ink); }
.pt-tile:hover { border-color: var(--accent); color: var(--ink); }
.pt-tile b { font-weight: 500; }
.pt-tile span:not(.meta) { color: var(--muted); font-size: var(--fs-sm); }
.pt-tabs { display: flex; gap: var(--sp-1); border-bottom: 1px solid var(--line); }
.pt-tabs a { padding: var(--sp-2) var(--sp-3); text-decoration: none; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.pt-tabs a[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 500; }
.pt-empty { padding: var(--sp-6) 0; display: grid; gap: var(--sp-3); justify-items: start; }
.pt-help { margin: 0; color: var(--muted); }

/* stavy z pohledu žadatele */
.pill.pt-ph-received, .pill.pt-ph-approval, .pill.pt-ph-waiting { color: var(--warn); }
.pill.pt-ph-working { color: var(--accent); }
.pill.pt-ph-resolved, .pill.pt-ph-done { color: var(--ok); }
.pill.pt-ph-closed, .pill.pt-ph-cancelled { color: var(--off); }
.pill.pt-ph-rejected { color: var(--bad); }

/* formuláře */
.pt-form { display: grid; gap: var(--sp-4); padding: var(--sp-5); max-width: 720px; }
.pt-field { display: grid; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.pt-lbl { font-weight: 500; font-size: var(--fs-ui); padding: 0; }
.pt-req { color: var(--bad); }
.pt-field input[type=text], .pt-field input[type=number], .pt-field select, .pt-field textarea { width: 100%; }
.pt-urg { display: grid; gap: var(--sp-2); }
.pt-urg-o input { width: auto; flex: none; margin: 0; min-height: 0; }
.pt-urg-o { display: flex; gap: var(--sp-3); align-items: center; justify-content: flex-start; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r); cursor: pointer; }
.pt-urg-o:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pt-file-in { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pt-field .btn[for] { justify-self: start; }
.pt-files { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-sm); }
.pt-files li { display: flex; align-items: center; gap: var(--sp-2); }
.pt-form-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.pt-pick-w { position: relative; }
.pt-pick { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; list-style: none; margin: 2px 0 0; padding: 4px 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 8px 24px rgb(0 0 0 / .12); max-height: 260px; overflow: auto; }
.pt-pick li { padding: 6px var(--sp-3); cursor: pointer; }
.pt-pick li:hover, .pt-pick li:focus { background: var(--soft); outline: none; }

/* detail tiketu */
.pt-t-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.pt-t-head h1 { font-size: var(--fs-2xl); overflow-wrap: anywhere; }
.pt-t-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: var(--sp-5); align-items: start; }
.pt-t-main { display: grid; gap: var(--sp-5); min-width: 0; }
.pt-t-side { padding: var(--sp-4); display: grid; gap: var(--sp-3); position: sticky; top: 96px; }
.pt-kv { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--sp-3); margin: 0; font-size: var(--fs-sm); }
.pt-kv dt { color: var(--muted); }
.pt-kv dd { margin: 0; overflow-wrap: anywhere; }
.pt-t-side .pt-kv { grid-template-columns: 1fr; gap: 2px; }
.pt-t-side .pt-kv dd { margin-bottom: var(--sp-2); }
.pt-pre { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.pt-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; counter-reset: s; }
.pt-steps li { position: relative; padding: 26px 4px 0; font-size: var(--fs-sm); color: var(--muted); text-align: center; }
.pt-steps li::before { content: ""; position: absolute; top: 7px; left: 0; right: 0; height: 3px; background: var(--line); }
.pt-steps li::after { content: ""; position: absolute; top: 2px; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; background: var(--panel); border: 3px solid var(--line); box-sizing: border-box; }
.pt-steps li.done { color: var(--ink); }
.pt-steps li.done::before, .pt-steps li.cur::before { background: var(--accent); }
.pt-steps li.done::after { background: var(--accent); border-color: var(--accent); }
.pt-steps li.cur { color: var(--ink); font-weight: 500; }
.pt-steps li.cur::after { border-color: var(--accent); }
.pt-confirm, .pt-csat { padding: var(--sp-4) var(--sp-5); display: grid; gap: var(--sp-3); border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.pt-reopen { display: grid; gap: var(--sp-2); }
.pt-chat { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.pt-msg { display: grid; gap: 4px; max-width: 82%; justify-self: start; }
.pt-msg.mine { justify-self: end; text-align: right; }
.pt-msg-who { font-size: var(--fs-xs); color: var(--muted); font-weight: 500; }
.pt-msg-b { white-space: pre-wrap; overflow-wrap: anywhere; text-align: left; padding: var(--sp-3) var(--sp-4); border-radius: 14px 14px 14px 4px; background: var(--panel); border: 1px solid var(--line); }
.pt-msg.mine .pt-msg-b { border-radius: 14px 14px 4px 14px; background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.pt-evt { justify-self: center; text-align: center; font-size: var(--fs-sm); color: var(--muted); display: grid; gap: 2px; max-width: 90%; }
.pt-evt > span:first-child { font-weight: 500; color: var(--ink); }
.pt-evt-resolved > span:first-child, .pt-evt-approved > span:first-child, .pt-evt-fulfilled > span:first-child { color: var(--ok); }
.pt-evt-rejected > span:first-child { color: var(--bad); }
.pt-evt-t { white-space: pre-wrap; color: var(--ink); background: var(--panel); border: 1px dashed var(--line); border-radius: var(--r); padding: var(--sp-2) var(--sp-3); text-align: left; }
.pt-composer { display: grid; gap: var(--sp-2); margin-top: var(--sp-3); }
.pt-composer textarea { width: 100%; }
.pt-attach { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-sm); }
.pt-stars { display: flex; gap: 4px; }
.pt-stars button { font-size: 28px; line-height: 1; background: none; border: 0; padding: 2px; cursor: pointer; color: var(--line); }
.pt-stars button.on { color: var(--warn); }
.pt-stars button:disabled { cursor: default; }
.pt-stars button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.pt-csat textarea { width: 100%; }

/* schvalování a články */
.pt-appr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.pt-appr { padding: var(--sp-4); display: grid; gap: var(--sp-3); }
.pt-appr textarea { width: 100%; }
.pt-article { display: grid; gap: var(--sp-3); max-width: 72ch; }
.pt-md { display: grid; gap: var(--sp-2); }
.pt-md h2, .pt-md h3, .pt-md h4 { margin: var(--sp-3) 0 0; }
.pt-md p, .pt-md ul, .pt-md ol { margin: 0; }
.pt-md code { font-family: var(--f-mono); font-size: .92em; background: var(--soft); padding: 1px 5px; border-radius: 3px; }

.pt-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 60; max-width: min(560px, calc(100vw - 32px)); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-card); background: var(--ink); color: var(--bg); box-shadow: 0 10px 30px rgb(0 0 0 / .2); }
.pt-toast.bad { background: var(--bad); color: #fff; }

@media (max-width: 760px) {
  .pt-top-in { flex-wrap: wrap; }
  .pt-top .pt-nav.nav { display: flex; order: 3; flex-basis: 100%; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; max-height: none; padding: 0; margin: 0; }
  .pt-top .pt-nav.nav[hidden] { display: none; }
  .pt-top .pt-nav.nav a { white-space: nowrap; padding: 8px 10px 6px; }
  .pt-brand-sub { display: none; }
  .pt-main { padding-top: var(--sp-5); }
  .pt-t-grid { grid-template-columns: 1fr; }
  .pt-t-side { position: static; order: -1; }
  .pt-t-head { flex-direction: column; }
  .pt-msg { max-width: 92%; }
  .pt-steps li { font-size: var(--fs-2xs); }
  .pt-form { padding: var(--sp-4); }
  .pt-search { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .pt-action { transition: none; } }