/* Witra v2 – pracovní plocha s okny. Barvy WANET: vínová #9b0030, krémová #f3eee6. */
@import url('fonts.css');
:root {
  --bg: #f4f3f0; --bg-2: #ebe9e4; --surface: #ffffff; --surface-2: #f8f7f4; --line: #e6e3dc; --line-2: #d9d5cc;
  --fg: #1c1b1a; --fg-2: #4b4844; --muted: #8a867e;
  --brand: #9b0030; --brand-hover: #7e0027; --brand-soft: #fbe9ee; --brand-ink: #5c001d; --cream: #f3eee6;
  --ok: #178a4c; --ok-soft: #e4f5ea; --warn: #c7760a; --warn-soft: #fff1dc; --bad: #c92a2a; --bad-soft: #fde7e7; --info: #2b6cb0; --info-soft: #e5eefa;
  --r: 12px; --r-sm: 8px; --nav: 240px; --nav-c: 64px; --top: 52px; --task: 40px;
  --sh-1: 0 1px 2px rgba(28,27,26,.05), 0 1px 1px rgba(28,27,26,.03); --sh-2: 0 8px 24px rgba(28,27,26,.10), 0 2px 6px rgba(28,27,26,.06); --sh-win: 0 18px 50px rgba(28,27,26,.22), 0 2px 8px rgba(28,27,26,.10);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #121212; --bg-2: #181818; --surface: #1d1d1d; --surface-2: #242424; --line: #2c2c2c; --line-2: #383838; --fg: #ececea; --fg-2: #c3c1bc; --muted: #8d8a84;
  --brand: #e0335f; --brand-hover: #f04b74; --brand-soft: #3a1420; --brand-ink: #ffd3de; --ok-soft: #0f2d1c; --warn-soft: #3a2608; --bad-soft: #3a1515; --info-soft: #132742;
  --sh-1: 0 1px 2px rgba(0,0,0,.35); --sh-2: 0 8px 24px rgba(0,0,0,.5); --sh-win: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px #383838;
}}
:root[data-theme="dark"] { --bg: #121212; --bg-2: #181818; --surface: #1d1d1d; --surface-2: #242424; --line: #2c2c2c; --line-2: #383838; --fg: #ececea; --fg-2: #c3c1bc; --muted: #8d8a84; --brand: #e0335f; --brand-hover: #f04b74; --brand-soft: #3a1420; --brand-ink: #ffd3de; --ok-soft: #0f2d1c; --warn-soft: #3a2608; --bad-soft: #3a1515; --info-soft: #132742; --sh-1: 0 1px 2px rgba(0,0,0,.35); --sh-2: 0 8px 24px rgba(0,0,0,.5); --sh-win: 0 18px 50px rgba(0,0,0,.6), 0 0 0 1px #383838; }

* { box-sizing: border-box } html, body { margin: 0; height: 100% }
body { font: 13.5px/1.5 Inter, "Segoe UI", system-ui, sans-serif; background: var(--bg); color: var(--fg); overflow: hidden; -webkit-font-smoothing: antialiased }
a { color: var(--brand); text-decoration: none } a:hover { text-decoration: underline }
button { font: inherit }
h1 { font-size: 20px; font-weight: 650; margin: 0; letter-spacing: -.01em } h2 { font-size: 14px; font-weight: 600; margin: 0 }
.muted { color: var(--muted) } .fg2 { color: var(--fg-2) } .small { font-size: 12px } .xs { font-size: 11px } .mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12.5px } .num { font-variant-numeric: tabular-nums; text-align: right } .right { text-align: right }
.row { display: flex; align-items: center; gap: 8px } .grow { flex: 1 } .wrap { flex-wrap: wrap }

/* ---- shell */
.shell { display: grid; grid-template-columns: var(--nav) 1fr; grid-template-rows: var(--top) 1fr var(--task); height: 100vh }
body.nav-c .shell { grid-template-columns: var(--nav-c) 1fr }
.side { grid-row: 1 / 3; background: var(--surface); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 10px; overflow: hidden }
.side .logo { display: flex; align-items: center; gap: 10px; padding: 6px 8px 14px; height: 52px }
.side .logo .mark { width: 30px; height: 30px; border-radius: 9px; background: var(--brand); color: #fff; display: grid; place-items: center; flex: none }
.side .logo .mark svg { width: 18px; height: 18px } .side .logo b { font-size: 16px; font-weight: 700; letter-spacing: -.01em } .side .logo small { display: block; color: var(--muted); font-size: 11px; font-weight: 400 }
.side .item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--fg-2); cursor: pointer; white-space: nowrap; user-select: none }
.side .item:hover { background: var(--surface-2); color: var(--fg); text-decoration: none } .side .item.active { background: var(--brand-soft); color: var(--brand); font-weight: 600 }
.side .item svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.side .item .cnt { margin-left: auto; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 99px; background: var(--surface-2); color: var(--fg-2) } .side .item .cnt.bad { background: var(--bad-soft); color: var(--bad) } .side .item .cnt.info { background: var(--info-soft); color: var(--info) }
.side .sec { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 14px 10px 4px; white-space: nowrap }
.side .foot { margin-top: auto; border-top: 1px solid var(--line); padding-top: 8px }
.side .foot .by { display: flex; align-items: center; gap: 6px; padding: 8px 10px 2px; color: var(--muted); font-size: 11px } .side .foot .by svg { height: 11px; width: auto; color: var(--brand) }
body.nav-c .side .logo b, body.nav-c .side .logo small, body.nav-c .side .item span, body.nav-c .side .sec, body.nav-c .side .cnt, body.nav-c .side .by { display: none }
body.nav-c .side .item { justify-content: center; padding: 10px }
.top { grid-column: 2; display: flex; align-items: center; gap: 10px; padding: 0 18px; background: var(--surface); border-bottom: 1px solid var(--line) }
.top .ham { width: 32px; height: 32px; border: 0; background: transparent; border-radius: var(--r-sm); color: var(--fg-2); cursor: pointer; display: grid; place-items: center } .top .ham:hover { background: var(--surface-2) }
.top .crumbs { color: var(--muted); font-size: 13px } .top .crumbs b { color: var(--fg); font-weight: 600 }
.top .search { margin-left: auto; width: 360px; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--bg); color: var(--muted); cursor: text }
.top .search kbd { margin-left: auto; font: 11px Inter; border: 1px solid var(--line-2); border-radius: 5px; padding: 1px 5px; color: var(--muted); background: var(--surface) }
.top .ib { width: 34px; height: 34px; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--fg-2); cursor: pointer; display: grid; place-items: center; position: relative } .top .ib:hover { background: var(--surface-2); border-color: var(--line) }
.top .ib svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.top .ib .dotn { position: absolute; top: 7px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--bad); border: 2px solid var(--surface) }
.top .cust { height: 34px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); padding: 0 10px; color: var(--fg); cursor: pointer }
.top .me { display: flex; align-items: center; gap: 8px; padding-left: 8px; border-left: 1px solid var(--line); margin-left: 4px }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-weight: 600; font-size: 12px; flex: none }
.work { grid-column: 2; position: relative; overflow: hidden }
.page { position: absolute; inset: 0; overflow: auto; padding: 20px 22px 30px }
.task { grid-column: 1 / 3; background: var(--surface); border-top: 1px solid var(--line); display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 12px; overflow: hidden }
#chips { display: flex; gap: 6px; overflow: hidden; min-width: 0 }
.task .tl { color: var(--muted); padding-right: 8px; border-right: 1px solid var(--line); margin-right: 4px }
.task .chip { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--surface-2); cursor: pointer; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.task .chip.active { border-color: var(--brand); box-shadow: inset 0 -2px 0 var(--brand) } .task .chip:hover { background: var(--bg-2) }
.task .status { margin-left: auto; color: var(--muted); display: flex; gap: 14px }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); display: inline-block; flex: none } .dot.on { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft) } .dot.off { background: var(--bad) } .dot.warn { background: var(--warn) }

/* ---- components */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-1); padding: 16px 18px }
.card > h2 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px } .card > h2 .muted { font-weight: 400 } .card > h2 .act { margin-left: auto; font-size: 12px; font-weight: 500 }
.grid { display: grid; gap: 14px } .g2 { grid-template-columns: 1fr 1fr } .g3 { grid-template-columns: repeat(3,1fr) } .g4 { grid-template-columns: repeat(4,1fr) } .g-main { grid-template-columns: minmax(0,1.7fr) minmax(0,1fr) }
@media (max-width: 1200px) { .g4 { grid-template-columns: 1fr 1fr } .g-main, .g3 { grid-template-columns: 1fr } }
.kpi { padding: 14px 16px; display: flex; flex-direction: column; gap: 4px } .kpi .l { font-size: 12px; color: var(--muted) } .kpi .v { font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1 } .kpi .d { font-size: 12px; color: var(--fg-2); display: flex; gap: 6px; flex-wrap: wrap }
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap }
.b-ok { background: var(--ok-soft); color: var(--ok) } .b-warn { background: var(--warn-soft); color: var(--warn) } .b-bad { background: var(--bad-soft); color: var(--bad) } .b-info { background: var(--info-soft); color: var(--info) } .b-brand { background: var(--brand-soft); color: var(--brand) } .b-muted { background: var(--surface-2); color: var(--fg-2); border: 1px solid var(--line) }
.btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--r-sm); border: 1px solid var(--line-2); background: var(--surface); color: var(--fg); cursor: pointer; font-size: 13px; font-weight: 500; white-space: nowrap }
.btn:hover { background: var(--surface-2); text-decoration: none } .btn.primary { background: var(--brand); border-color: var(--brand); color: #fff } .btn.primary:hover { background: var(--brand-hover) } .btn.sm { height: 26px; padding: 0 9px; font-size: 12px } .btn.ghost { border-color: transparent; background: transparent } .btn.ghost:hover { background: var(--surface-2) } .btn.danger { color: var(--bad) }
.btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r-sm); overflow: hidden } .seg a { padding: 5px 11px; font-size: 12.5px; color: var(--fg-2); border-right: 1px solid var(--line-2); cursor: pointer } .seg a:last-child { border-right: 0 } .seg a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600 } .seg a:hover { text-decoration: none; background: var(--surface-2) }
select.btn { appearance: auto; padding-right: 8px }
table.t { width: 100%; border-collapse: collapse; font-size: 13px } table.t th { text-align: left; font-weight: 500; font-size: 11.5px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; text-transform: uppercase; letter-spacing: .04em } table.t td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: middle } table.t tr:last-child td { border-bottom: 0 } table.t tbody tr:hover td { background: var(--surface-2) } table.t tr.click { cursor: pointer } table.t td.num, table.t th.num { text-align: right; font-variant-numeric: tabular-nums }
.bar { height: 6px; background: var(--bg-2); border-radius: 4px; overflow: hidden } .bar i { display: block; height: 100%; background: var(--brand); border-radius: 4px } .bar i.ok { background: var(--ok) } .bar i.warn { background: var(--warn) } .bar i.bad { background: var(--bad) }
.spark { height: 56px; width: 100%; display: block } .chart { height: 130px; width: 100%; display: block }
.ev { display: grid; grid-template-columns: 3px 1fr auto; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start } .ev:last-child { border-bottom: 0 } .ev i { display: block; height: 100%; min-height: 32px; border-radius: 2px; background: var(--info) } .ev.warn i { background: var(--warn) } .ev.bad i { background: var(--bad) } .ev .t b { font-weight: 600 } .ev .m { color: var(--muted); font-size: 12px; margin-top: 1px }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto } .tabs a { padding: 9px 12px; color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; font-weight: 500; cursor: pointer } .tabs a.active { color: var(--brand); border-color: var(--brand) } .tabs a:hover { text-decoration: none; color: var(--fg) }
dl.kv { display: grid; grid-template-columns: 150px 1fr; gap: 7px 12px; margin: 0; font-size: 13px } dl.kv dt { color: var(--muted) } dl.kv dd { margin: 0 }
.tree details > details { margin-left: 16px } .tree summary { list-style: none; cursor: pointer; padding: 6px 8px; border-radius: 6px; display: flex; gap: 8px; align-items: center } .tree summary::-webkit-details-marker { display: none } .tree summary::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: .15s; margin-right: 2px } .tree details[open] > summary::before { transform: rotate(45deg) } .tree summary:hover { background: var(--surface-2) } .tree .leaf { display: grid; grid-template-columns: 180px 1fr; gap: 10px; padding: 4px 8px 4px 32px; font-size: 12.5px } .tree .leaf span:first-child { color: var(--muted) }
.field label { display: block; font-size: 12px; color: var(--muted); margin: 10px 0 4px; font-weight: 500 } .field input, .field select, .field textarea { width: 100%; height: 36px; padding: 0 10px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--surface); color: var(--fg); font: inherit } .field textarea { height: auto; padding: 8px 10px } .field input:focus { outline: 2px solid var(--brand-soft); border-color: var(--brand) }
.note { background: var(--cream); color: var(--brand-ink); border-radius: var(--r-sm); padding: 9px 12px; font-size: 12.5px; border: 1px solid #e8dfd0 } :root[data-theme="dark"] .note { background: var(--brand-soft); border-color: transparent } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .note { background: var(--brand-soft); border-color: transparent } }

/* ---- windows */
.win { position: absolute; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--sh-win); display: flex; flex-direction: column; min-width: 420px; min-height: 240px; overflow: hidden; resize: both }
.win.max { inset: 10px !important; width: auto !important; height: auto !important; resize: none } .win.min { display: none } .win.focus { border-color: var(--brand) }
.win .wh { height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; background: var(--surface-2); border-bottom: 1px solid var(--line); cursor: move; user-select: none; flex: none }
.win .wh .wt { font-weight: 600; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis } .win .wh .wt .muted { font-weight: 400 }
.win .wh .wb { margin-left: auto; display: flex; gap: 2px } .win .wh .wb button { width: 30px; height: 28px; border: 0; background: transparent; border-radius: 6px; color: var(--fg-2); cursor: pointer; display: grid; place-items: center } .win .wh .wb button:hover { background: var(--line) } .win .wh .wb button.x:hover { background: var(--bad); color: #fff }
.win .wh .wb svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2 }
.win .wc { flex: 1; overflow: auto; padding: 14px 16px; min-height: 0 }
.win .wf { border-top: 1px solid var(--line); padding: 8px 12px; display: flex; gap: 8px; align-items: center; background: var(--surface); flex: none }
.wtabs { display: flex; gap: 2px; margin: -6px -16px 12px; padding: 0 12px; border-bottom: 1px solid var(--line); background: var(--surface) } .wtabs a { padding: 8px 10px; font-size: 12.5px; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; font-weight: 500 } .wtabs a.active { color: var(--brand); border-color: var(--brand) } .wtabs a:hover { text-decoration: none; color: var(--fg) }
.wkpi { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin-bottom: 12px } .wkpi div { background: var(--surface-2); border-radius: var(--r-sm); padding: 9px 11px } .wkpi .l { font-size: 11px; color: var(--muted) } .wkpi .v { font-size: 17px; font-weight: 700; letter-spacing: -.01em }
.chat { display: flex; flex-direction: column; gap: 8px } .msg { max-width: 78%; padding: 8px 11px; border-radius: 12px; background: var(--surface-2); font-size: 13px } .msg.me { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 4px } .msg.them { align-self: flex-start; border-bottom-left-radius: 4px } .msg .m { font-size: 10.5px; opacity: .7; margin-top: 2px }
.modal-bg { position: absolute; inset: 0; background: rgba(28,27,26,.35); backdrop-filter: blur(2px); display: grid; place-items: center; z-index: 500 } .modal { width: 440px; background: var(--surface); border-radius: var(--r); box-shadow: var(--sh-win); padding: 20px 22px } .modal h2 { font-size: 16px; margin-bottom: 8px }
.palette { position: absolute; left: 50%; top: 80px; transform: translateX(-50%); width: 560px; background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r); box-shadow: var(--sh-win); z-index: 600; overflow: hidden }
.palette input { width: 100%; height: 48px; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 0 16px; font: 15px Inter; color: var(--fg); outline: 0 }
.palette .it { display: flex; gap: 10px; align-items: center; padding: 9px 16px; cursor: pointer; font-size: 13px } .palette .it:hover, .palette .it.sel { background: var(--brand-soft) } .palette .it .k { color: var(--muted); margin-left: auto; font-size: 11px }
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; overflow: auto } .login-art { background: var(--brand); color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden }
.login-art .big { font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; max-width: 520px } .login-art .wlogo { width: 150px; color: #fff; opacity: .95 } .login-art .deco { position: absolute; right: -140px; bottom: -140px; width: 520px; opacity: .08 }
.login-form { display: grid; place-items: center; padding: 40px } .login-form .box { width: 380px }
@media (max-width: 900px) { .login-wrap { grid-template-columns: 1fr } .login-art { display: none } }
.hint { position: fixed; right: 14px; bottom: 50px; background: #1c1b1a; color: #fff; padding: 7px 11px; border-radius: 8px; font-size: 11.5px; opacity: .85; z-index: 900 } .hint a { color: #ffb3c6 }