:root{ --ink:#2b2730; --ink-soft:#655f6c; --ink-faint:#948d9c; --plum:#6b4c7a; --plum-deep:#4a3358; --plum-tint:#f2ecf4; --sage:#7f9b83; --sage-deep:#5f7a63; --sage-tint:#eef3ee; --bg:#f5f3f7; --card:#ffffff; --line:#e6e1eb; --amber:#b9702f; --amber-tint:#faf1e6; --red:#a24444; --red-tint:#f9ecec; --blue:#3d7a99; --blue-tint:#eaf3f7; --radius:14px; --radius-sm:9px; --shadow:0 1px 2px rgba(43,39,48,.05), 0 6px 18px rgba(43,39,48,.06); --shadow-lift:0 4px 10px rgba(43,39,48,.08), 0 18px 40px rgba(43,39,48,.12); } /* ========================================================= BAREVNÁ SCHÉMATA (Nastavení -> Uživatel -> Barevné schéma, 4.9.2026) Appka mění jen "značkové" proměnné (--plum/--plum-deep/--plum-tint), které appka používá pro zvýraznění/branding (postranní menu, primární tlačítka, aktivní stavy) — barvy stavů appky (--sage = volno/potvrzeno, --amber = upozornění, --red = zrušeno/nebezpečné) appka NEmění, ať zůstanou čitelné a jednoznačné ve všech schématech stejně. Výchozí (žádný atribut na ) zůstává fialová = přesně barvy appky, které appka měla od začátku, viz :root výš. Přidání dalšího schématu = jeden další blok tady + jedna volba v BAREVNA_SCHEMATA v public/app.js, nic dalšího appka měnit nemusí (appka je jinde barvy jen přes var(--plum...)). ========================================================= */ html[data-theme="ruzova"]{ --plum:#ad4a76; --plum-deep:#7a3253; --plum-tint:#fbeef3; } html[data-theme="modra"]{ --plum:#3b6ea5; --plum-deep:#284a70; --plum-tint:#eaf1f8; } html[data-theme="tyrkysova"]{ --plum:#2f8f86; --plum-deep:#1f635c; --plum-tint:#e9f5f3; } html[data-theme="grafitova"]{ --plum:#4f5766; --plum-deep:#343a44; --plum-tint:#eef0f2; } /* ROLE A OPRÁVNĚNÍ (kolo 40) — appka pod rolí 'hygiena' (viz aplikujRoliUI v public/app.js) schová levé menu i Nastavení jen na to, co hygienistce patří: .lekar-only-settings appka používá jak v levém menu (položka Mzdy), tak v Nastavení (karty appka výslovně nenabízí). */ html[data-role="hygiena"] .lekar-only-settings{display:none !important;} *{box-sizing:border-box;} body{margin:0; background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; -webkit-font-smoothing:antialiased;} h1,h2,h3{font-family:ui-serif,Georgia,'Times New Roman',serif; font-weight:600; margin:0; color:var(--ink);} button{font-family:inherit; cursor:pointer;} input,select,textarea{font-family:inherit;} .app{display:flex; min-height:100vh;} .sidebar{width:216px; flex-shrink:0; background:var(--plum-deep); color:#e7dcec; padding:20px 16px; display:flex; flex-direction:column; gap:22px; position:sticky; top:0; height:100vh; overflow-y:auto;} .side-brand strong{color:#fff; font-family:ui-serif,Georgia,serif; font-size:14.5px; font-weight:600; display:block;} .side-brand span{font-size:11px; color:#c9b9d1;} .side-search{position:relative; margin:2px 0 4px;} .side-search input{width:100%; background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.18); border-radius:9px; padding:9px 12px; font-size:13px; color:#fff;} .side-search input::placeholder{color:#c9b9d1;} .side-search input:focus{background:rgba(255,255,255,.16); outline:none;} .side-search-results{position:absolute; left:0; right:0; top:100%; margin-top:5px; background:#fff; border-radius:9px; box-shadow:var(--shadow-lift); max-height:340px; overflow-y:auto; z-index:50;} .side-search-item{padding:9px 12px; cursor:pointer; border-bottom:1px solid var(--line);} .side-search-item:last-child{border-bottom:none;} .side-search-item:hover{background:var(--plum-tint);} .side-search-item.suggest-hl{background:var(--plum-tint);} .ssi-name{display:block; font-weight:700; font-size:13px; color:var(--ink);} .ssi-date{display:block; font-size:11.5px; color:var(--ink-faint); margin-top:1px;} .side-search-empty{padding:12px; font-size:12.5px; color:var(--ink-faint); text-align:center;} .side-nav{display:flex; flex-direction:column; gap:2px;} .side-nav a{display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:10px; color:#d8cbdd; text-decoration:none; font-size:14px; font-weight:600; cursor:pointer;} .side-nav a:hover{background:rgba(255,255,255,.06); color:#fff;} .side-nav a.active{background:rgba(255,255,255,.14); color:#fff;} .side-backup{display:flex; flex-direction:column; gap:6px; margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.14);} .side-backup-label{font-size:10.5px; color:#c9b9d1; text-transform:uppercase; letter-spacing:.04em; padding:0 2px; margin-bottom:2px;} .side-backup button{background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:#e7dcec; border-radius:9px; padding:8px 12px; font-size:12.5px; font-weight:600; cursor:pointer; text-align:left; font-family:inherit;} .side-backup button:hover{background:rgba(255,255,255,.17); color:#fff;} .side-logout{margin-top:8px; padding-top:9px; border-top:1px solid rgba(255,255,255,.14);} .side-logout-btn{width:100%; background:transparent; border:1px solid rgba(255,255,255,.18); color:#e7dcec; border-radius:9px; padding:8px 12px; font-size:12.5px; font-weight:600; cursor:pointer; text-align:center; font-family:inherit;} .side-logout-btn:hover{background:rgba(255,255,255,.1); color:#fff;} .main{flex:1; min-width:0; padding:26px 30px 60px;} .workspace{display:flex;} .diar-main{flex:1; min-width:0;} .detail-inline{width:0; flex-shrink:0; overflow:hidden; background:#fff; border-left:1px solid var(--line); box-shadow:var(--shadow-lift); transition:width .22s ease; position:sticky; top:0; align-self:flex-start; max-height:100vh;} .detail-inline.open{width:400px;} .detail-inline-inner{width:400px; height:100%; box-sizing:border-box; padding:26px 24px; overflow-y:auto; position:relative;} .name-row{display:flex; align-items:center; gap:8px;} .name-row h2{flex:1; min-width:0;} .nav-arrow{width:28px; height:28px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--ink-soft); font-size:15px; display:flex; align-items:center; justify-content:center; flex-shrink:0;} .nav-arrow:hover:not(:disabled){background:var(--plum-tint); border-color:var(--plum); color:var(--plum);} .nav-arrow:disabled{opacity:.35; cursor:default;} .hover-tip{position:fixed; pointer-events:none; background:var(--ink); color:#fff; font-size:12px; font-weight:700; padding:5px 9px; border-radius:7px; z-index:90; opacity:0; transform:translate(10px,-130%); transition:opacity .08s; white-space:nowrap;} .hover-tip.show{opacity:1;} .info-btn{display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%; border:1px solid var(--ink-faint); color:var(--ink-faint); background:#fff; font-size:10px; font-style:italic; font-weight:700; font-family:Georgia,serif; cursor:pointer; margin-left:4px; padding:0; line-height:1; vertical-align:middle;} .info-btn:hover{background:var(--plum-tint); border-color:var(--plum); color:var(--plum);} .info-text{display:block; font-size:12px; color:var(--ink-soft); margin-top:6px; line-height:1.5; background:var(--plum-tint); padding:8px 10px; border-radius:8px;} .slot-list{display:flex; flex-direction:column; gap:8px; margin-top:16px;} .slot-item{display:flex; justify-content:space-between; align-items:center; padding:11px 14px; border:1px solid var(--line); border-radius:10px; cursor:pointer;} .slot-item:hover{background:var(--plum-tint); border-color:var(--plum);} .slot-date{font-weight:700; font-size:13.5px;} .slot-year{font-weight:400; color:var(--ink-faint); margin-left:2px;} .slot-time{font-weight:800; color:var(--plum); font-size:13.5px;} .slot-empty{font-size:13px; color:var(--ink-faint); padding:16px 0; text-align:center;} .slot-nav{display:flex; align-items:center; justify-content:space-between; margin-top:14px;} .slot-count{font-size:12px; color:var(--ink-faint); font-weight:600;} .new-appt-grid{display:flex; gap:16px; margin-top:10px;} .new-appt-main{flex:1; min-width:0;} .new-appt-prefs{width:148px; flex-shrink:0; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:11px 12px; display:flex; flex-direction:column; gap:7px; align-self:flex-start;} .prefs-title{font-size:11px; font-weight:800; text-transform:uppercase; color:var(--ink-faint);} .prefs-group{display:flex; flex-direction:column; gap:5px; padding-bottom:6px; border-bottom:1px solid var(--line);} .prefs-group:last-of-type{border-bottom:none; padding-bottom:0;} .pref-item{display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; line-height:1.15;} .pref-item input[type="checkbox"]{width:auto; flex-shrink:0;} .btn-find{width:100%; text-align:center; justify-content:center; font-size:12px; padding:7px 6px;} .panel.wide{width:480px;} .view{display:none;} .view.active{display:block;} .topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px;} .topbar .sub{font-size:13px; color:var(--ink-soft); margin-top:3px;} .btn{display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:10px; border:none; font-weight:700; font-size:13.5px;} .btn-primary{background:var(--plum); color:#fff; box-shadow:var(--shadow);} .btn-primary:hover{background:var(--plum-deep);} .btn-outline{background:#fff; border:1.5px solid var(--plum); color:var(--plum); padding:9px 15px; border-radius:9px; font-weight:700; font-size:13px;} .btn-outline:hover{background:var(--plum-tint);} .btn-danger{background:#fff; border:1.5px solid #c56a6a; color:#a24444; padding:9px 15px; border-radius:9px; font-weight:700; font-size:13px;} .btn-danger:hover{background:#fbeeee;} .btn-ok{background:#fff; border:1.5px solid var(--sage-deep); color:var(--sage-deep); padding:9px 15px; border-radius:9px; font-weight:700; font-size:13px;} .controls{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px;} .view-switch{display:flex; background:var(--card); border:1px solid var(--line); border-radius:11px; padding:3px; box-shadow:var(--shadow);} .view-switch button{border:none; background:transparent; padding:8px 16px; border-radius:8px; font-size:13.5px; font-weight:700; color:var(--ink-soft);} .view-switch button.active{background:var(--plum); color:#fff;} .view-switch-group{display:flex; align-items:center; gap:10px;} .date-nav{display:flex; align-items:center; gap:10px;} .date-nav button{width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:var(--card);} .date-nav .period-label{font-family:ui-serif,serif; font-size:16.5px; font-weight:600; min-width:200px; text-align:center;} .date-nav .period-label{display:flex; flex-direction:column; align-items:center; line-height:1.25;} /* lichý/sudý pod rozsahem týdne — záměrně bez zvýraznění (menší, tenčí, tlumená barva), ať primárně padne oko na datum a paritu si přečte jen ten, koho zajímá */ .period-label-parity{font-family:ui-sans-serif,system-ui,sans-serif; font-size:11px; font-weight:400; color:var(--ink-soft); margin-top:1px;} .today-btn{width:auto; padding:0 14px; font-size:12.5px; font-weight:700; color:var(--plum); background:none; border:none;} /* Skok o 6 měsíců vpřed/zpět — appka je zobrazuje v týdenním i měsíčním pohledu (viz updatePeriodLabel v app.js), v denním jsou display:none. */ .halfyear-nav-group{display:none; align-items:center; gap:6px;} .halfyear-nav-group .halfyear-nav-btn{width:auto; padding:0 9px; font-size:13px;} .stats{display:flex; gap:12px; margin:16px 0 20px; flex-wrap:wrap;} .stat-pill{background:var(--card); border:1px solid var(--line); border-radius:11px; padding:10px 16px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:1px;} .stat-pill b{font-family:ui-serif,serif; font-size:18px;} .stat-pill span{font-size:11.5px; color:var(--ink-faint); font-weight:600;} .cal-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;} .grid-scroll{overflow-x:auto;} .cal-grid{display:grid;} .cal-head{display:grid; border-bottom:1px solid var(--line); background:var(--card);} .cal-head .col-label{position:relative; padding:13px 10px; text-align:center; border-left:1px solid var(--line); cursor:pointer;} .cal-head .col-label:first-child{border-left:none;} .cal-head .col-label .dow{font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint);} .cal-head .col-label .dnum{font-family:ui-serif,serif; font-size:19px; font-weight:600; margin-top:2px;} .cal-head .col-label.today .dnum{color:var(--plum);} .cal-body{display:grid; position:relative;} .hour-col{border-right:1px solid var(--line);} .half-label{font-size:10.5px; color:var(--ink-faint); text-align:right; padding-right:8px; transform:translateY(-6px); font-weight:600;} .half-label.hh{font-size:11.5px; color:var(--ink-soft); font-weight:800;} .day-col{position:relative; border-left:1px solid var(--line); cursor:pointer;} .half-line{border-bottom:1px solid var(--line);} .half-line.hh-line{border-bottom:1px solid #d9d2e0;} .day-col.past{filter:grayscale(.65) opacity(.48);} .reserved{position:absolute; left:0; right:0; overflow:hidden;} .reserved .rlabel{position:absolute; font-size:10.5px; font-weight:800; text-transform:uppercase; left:6px; top:4px; opacity:.85;} .reserved.akut{background:repeating-linear-gradient(135deg, rgba(162,68,68,.09), rgba(162,68,68,.09) 7px, rgba(162,68,68,.03) 7px, rgba(162,68,68,.03) 14px);} .reserved.akut .rlabel{color:var(--red);} .reserved.tel,.reserved.ster{background:repeating-linear-gradient(135deg, rgba(148,141,156,.09), rgba(148,141,156,.09) 7px, rgba(148,141,156,.03) 7px, rgba(148,141,156,.03) 14px);} .reserved.tel .rlabel,.reserved.ster .rlabel{color:var(--ink-faint);} .reserved.obed{background:repeating-linear-gradient(135deg, rgba(107,102,114,.32), rgba(107,102,114,.32) 6px, rgba(107,102,114,.11) 6px, rgba(107,102,114,.11) 12px); border-top:1px solid rgba(107,102,114,.4); border-bottom:1px solid rgba(107,102,114,.4);} .reserved.obed .rlabel{color:var(--ink); font-weight:900; font-size:12.5px;} .reserved.obed .rlabel .obed-note{font-weight:400; text-transform:none; opacity:.9; font-size:11.5px;} /* OBĚD posunutý na náhradní volnou půlhodinu (viz computeObedSlot v app.js) — schválně jinou barvou, ať je na první pohled jasné, že jde o přesunutou položku, ne o skutečný čas oběda */ .reserved.obed.moved{background:repeating-linear-gradient(135deg, rgba(185,112,47,.30), rgba(185,112,47,.30) 6px, rgba(185,112,47,.11) 6px, rgba(185,112,47,.11) 12px); border-top:1px solid var(--amber); border-bottom:1px solid var(--amber);} .reserved.obed.moved .rlabel{color:var(--amber);} .obed-moved-mark{font-weight:700; font-size:9.5px; text-transform:none; opacity:.9;} .reserved.outside-hours{background:repeating-linear-gradient(135deg, rgba(43,39,48,.16), rgba(43,39,48,.16) 6px, rgba(43,39,48,.06) 6px, rgba(43,39,48,.06) 12px);} /* "od"/"do" omezení s tlačítkem na zrušení: text "Zavřeno — důvod" a tlačítko vedle sebe v jedné řádce (stejný princip jako u banneru celodenní dovolené), ať se navzájem nepřekrývají — bez tohohle byl popisek absolutně umístěný přesně přes tlačítko */ .reserved.outside-hours.has-cancel{display:flex; align-items:flex-start; gap:5px; padding:4px 6px;} .reserved.outside-hours.has-cancel .rlabel{position:static; left:auto; top:auto;} /* .hygiene-banner (celodenní záplata na dnech hygieny) appka od kola 45 už nikde nevykresluje — dny hygieny teď místo toho ohraničuje .work-outline.hygiena-outline (viz níž). */ .vacation-banner{position:absolute; left:0; right:0; top:0; bottom:0; border-radius:8px; display:flex; align-items:flex-start; justify-content:center; padding:10px; background:rgba(127,155,131,.28); border:1.5px dashed rgba(95,122,99,.55);} .vacation-banner span{font-family:ui-serif,serif; font-weight:800; color:var(--sage-deep); font-size:16px; margin-top:14px; letter-spacing:.01em;} .vacation-banner.pending{background:repeating-linear-gradient(135deg, rgba(185,112,47,.16), rgba(185,112,47,.16) 8px, rgba(185,112,47,.06) 8px, rgba(185,112,47,.06) 16px); border-color:rgba(185,112,47,.55);} .vacation-banner.pending span{color:var(--amber);} /* Dočasně zablokováno (9.9.2026, sedmé kolo zadání) — appka mu dává vlastní (plum) barvu, ať se opticky neplete s "pending" (amber = čeká na přeobjednání pacienta) ani s obyčejnou potvrzenou dovolenou (sage/zelená) — dočasné zablokování čeká na RUČNÍ potvrzení nebo zrušení appkou. */ .vacation-banner.docasne{background:repeating-linear-gradient(135deg, rgba(107,76,122,.16), rgba(107,76,122,.16) 8px, rgba(107,76,122,.06) 8px, rgba(107,76,122,.06) 16px); border-color:rgba(107,76,122,.55);} .vacation-banner.docasne span{color:var(--plum-deep);} .volno-edit-btn,.volno-confirm-btn{width:16px; height:16px; border-radius:50%; border:1px solid rgba(43,39,48,.25); background:rgba(255,255,255,.7); color:var(--ink-soft); font-size:9px; display:inline-flex; align-items:center; justify-content:center; padding:0; margin-left:6px; position:relative; z-index:10;} .volno-edit-btn:hover{background:#fff; border-color:var(--plum); color:var(--plum);} .volno-confirm-btn:hover{background:#fff; border-color:var(--sage-deep); color:var(--sage-deep);} .now-line{position:absolute; left:0; right:0; height:0; border-top:2px solid #d64545; z-index:6; pointer-events:none;} .work-outline{position:absolute; left:2px; right:2px; border:3px solid var(--ink); border-radius:12px; pointer-events:none; z-index:4;} .appt{position:absolute; left:3px; right:3px; border-radius:8px; padding:5px 7px; overflow:hidden; color:#fff; cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.12); border:1px solid rgba(255,255,255,.25); display:flex; flex-direction:column; justify-content:center; z-index:2;} .appt.dragging{opacity:.4;} .appt:hover{transform:translateY(-1px) scale(1.01); box-shadow:0 4px 10px rgba(0,0,0,.18); z-index:5;} .appt .row1{display:flex; align-items:flex-start; justify-content:space-between; gap:4px;} .appt .name{font-size:12.5px; font-weight:800; line-height:1.15; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;} .appt .note{font-size:10.5px; opacity:.88; font-style:italic; margin-top:1px;} /* v denním pohledu čitelnější, stejná velikost jako jméno pacienta (.appt .name) */ .cal-grid.is-day .appt .note{font-size:12.5px;} .appt .tag{font-size:9.5px; font-weight:800; background:rgba(255,255,255,.28); padding:2px 5px; border-radius:5px; flex-shrink:0;} .appt.tiny .note{display:none;} /* velmi krátká (vmáčknutá) objednávka do 10 minut — zúžený vnitřní prostor, aby se jméno vešlo čitelně */ .appt.micro{padding:1px 6px; z-index:3;} .appt.micro .name{font-size:11px; line-height:1.15;} .appt.micro .note{display:none;} .appt.micro .tag{display:none;} .squeeze-mark{font-size:12.5px; color:#fff; flex-shrink:0; margin-right:1px;} .appt.micro .squeeze-mark{font-size:10.5px;} .appt.pending-reschedule{border:2px dashed #fff; box-shadow:0 0 0 2px var(--amber);} /* ROLE A OPRÁVNĚNÍ (kolo 40) — "cizí" objednávka (patřící druhé roli, než appka právě zobrazuje, viz efektivniZobrazovaciRole v public/app.js) appka vykreslí jako pod vodotiskem: ztlumenou, se šrafováním a bez zvýraznění při najetí myší, ať je na první pohled jasné, komu pacient patří, i bez čtení jména — přesně princip "jako den, který už uplynul", viz zadání. */ .appt.apt-cizi{opacity:.5; filter:grayscale(.25); cursor:default; background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.3) 0, rgba(255,255,255,.3) 5px, transparent 5px, transparent 11px);} .appt.apt-cizi:hover{transform:none; box-shadow:0 1px 3px rgba(0,0,0,.12); z-index:2;} /* ROLE A OPRÁVNĚNÍ — grafické oddělení dne hygienistky od dnů lékaře (zadání uživatele, 21.9.2026). Z pohledu lékaře se den hygienistky invertuje (růžové pozadí inline dopočítané z nastavené profilové barvy hygieny, viz renderTimeGrid v app.js; kartičky objednávek se přebarví na bílé) a navíc se přes celý sloupec nechá jemná "mléčná" vrstva (nižší saturace/vyšší jas, filter níž) — den je tak na první pohled jasně poznat, ale nepřebíjí pozornost nad vlastníma čtyřma dnama. Naopak z pohledu hygienistky se dny lékaře ještě víc ztlumí (celý sloupec se odbarví/ztlumí filtrem), ať vůbec nerušily. */ .day-col.day-col-hyg-inverted{filter:saturate(.6) brightness(1.03);} .day-col.day-col-hyg-inverted .appt{background-color:inherit !important; color:var(--ink) !important; border-color:rgba(43,39,48,.14);} .day-col.day-col-hyg-inverted .appt .tag{background:rgba(43,39,48,.08); color:var(--ink-soft);} .day-col.day-col-hyg-inverted .appt .squeeze-mark{color:var(--ink-soft);} /* Jméno pacienta u "cizí" objednávky (patřící druhé roli) šedé místo černého (žádost uživatele 22.9.2026) — stejný odstín jako .tag výš, ať jméno ještě víc splyne s okolím, ale zůstane čitelné. */ .day-col.day-col-hyg-inverted .appt.apt-cizi .name{color:var(--ink-soft);} .day-col.day-col-hyg-inverted .appt.apt-cizi{opacity:1; filter:none; background-image:none; cursor:pointer;} .day-col.day-col-hyg-inverted .appt.apt-cizi:hover{transform:translateY(-1px) scale(1.01); box-shadow:0 4px 10px rgba(0,0,0,.18);} .day-col.day-col-hyg-inverted .appt.done::before,.day-col.day-col-hyg-inverted .appt.nedostavil_se::before{color:rgba(43,39,48,.4);} /* Kolo 46 (bod 4): appka zrcadlově obrátila zobrazení lékařova dne z pohledu hygienistky — přesně stejný princip jako u .day-col-hyg-inverted výš (mléčné pozadí z profilové barvy, kartičky jednotně ink-barevné, bez rozlišení podle výkonu), jen appka barvu bere z barvaLekarProfilu() v app.js místo HYGIENA_NASTAVENI.barva. */ .day-col.day-col-lekar-muted{filter:saturate(.6) brightness(1.03);} .day-col.day-col-lekar-muted .appt{background-color:inherit !important; color:var(--ink) !important; border-color:rgba(43,39,48,.14);} .day-col.day-col-lekar-muted .appt .tag{background:rgba(43,39,48,.08); color:var(--ink-soft);} .day-col.day-col-lekar-muted .appt .squeeze-mark{color:var(--ink-soft);} /* Stejná úprava jako u .day-col-hyg-inverted výš — jméno "cizí" objednávky šedé, ne černé. */ .day-col.day-col-lekar-muted .appt.apt-cizi .name{color:var(--ink-soft);} .day-col.day-col-lekar-muted .appt.apt-cizi{opacity:1; filter:none; background-image:none;} .day-col.day-col-lekar-muted .appt.done::before,.day-col.day-col-lekar-muted .appt.nedostavil_se::before{color:rgba(43,39,48,.4);} /* Odznak výjimky "Hygiena i o svátku" (vykresluje se jen na dni, který se jinak vede jako zavřený státní svátek, viz else if(sched.hygieneOnly) v app.js). */ .hyg-slot-presets{display:flex; flex-direction:column; gap:6px;} .hyg-slot-presets .btn-outline{width:100%; text-align:center; justify-content:center; padding:7px 6px; font-size:12.5px;} .hyg-slot-presets .btn-outline.is-active{background:var(--plum); border-color:var(--plum); color:#fff;} .hyg-svatek-tag{position:absolute; left:4px; right:4px; top:4px; display:flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; color:#7a3253; background:rgba(255,255,255,.75); border:1px solid rgba(122,50,83,.3); border-radius:7px; padding:3px 6px; z-index:5;} .appt.done{opacity:.55;} .appt.done::before{content:'✓'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; color:rgba(255,255,255,.55); font-weight:800; z-index:0;} .appt.nedostavil_se{opacity:.55;} .appt.nedostavil_se::before{content:'✕'; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:26px; color:rgba(255,255,255,.6); font-weight:800; z-index:0;} /* "čeká na potvrzení" — podobný princip jako .done/.nedostavil_se (ztlumený vzhled + ikona uprostřed), ale méně ztlumené (.82 místo .55) -- na rozdíl od těch dvou tahle objednávka ještě NENÍ vyřízená, pořád potřebuje pozornost, jen signalizuje "ještě nepotvrzeno". Barevný prstenec navíc (stejná červená jako confirm-banner níže), ať je od ošetřeno/nedostavil se na první pohled odlišitelná i bez čtení textu. */ .appt.ceka-potvrzeni{opacity:.82; box-shadow:inset 0 0 0 2px rgba(164,68,68,.75);} .appt.ceka-potvrzeni::before{content:'⏳'; position:absolute; top:2px; right:3px; font-size:13px; z-index:1; filter:drop-shadow(0 1px 1px rgba(0,0,0,.35));} /* position+z-index schválně navíc: tlačítko sedí v "Zavřeno" pruhu, který může být (u varianty "od", kdy pevný blok jako Pohotovost sedí hned na začátku dne) vizuálně i klikací plochou překrytý JINÝM pevným blokem vykresleným později (bez z-indexu vyhrává pořadí v HTML) — bez vlastního z-indexu by pak na křížek nešlo vůbec kliknout, i když je v DOM přítomný */ .cancel-off-btn{width:16px; height:16px; border-radius:50%; border:1px solid rgba(43,39,48,.25); background:rgba(255,255,255,.7); color:var(--ink-soft); font-size:9px; display:inline-flex; align-items:center; justify-content:center; padding:0; margin-left:6px; position:relative; z-index:10;} .cancel-off-btn:hover{background:#fff; border-color:var(--red); color:var(--red);} .month-grid{display:grid; grid-template-columns:40px repeat(7,1fr); position:relative;} .month-vacation-bar{position:absolute; height:20px; line-height:20px; padding:0 8px; font-size:10.5px; font-weight:700; color:#3f5c44; background:rgba(127,155,131,.55); border-top:1px solid rgba(95,122,99,.55); border-bottom:1px solid rgba(95,122,99,.55); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; cursor:pointer; z-index:3;} .month-vacation-bar.round-l{border-left:1px solid rgba(95,122,99,.55); border-top-left-radius:6px; border-bottom-left-radius:6px;} .month-vacation-bar.round-r{border-right:1px solid rgba(95,122,99,.55); border-top-right-radius:6px; border-bottom-right-radius:6px;} .month-vacation-bar:hover{background:rgba(127,155,131,.75);} .month-vacation-bar.pending{background:rgba(201,161,90,.5); color:#7a5f2a; border-color:rgba(180,138,60,.6);} .month-vacation-bar.pending:hover{background:rgba(201,161,90,.7);} /* Dočasně zablokováno (9.9.2026, sedmé kolo zadání) — vlastní (plum) barva, viz komentář u .vacation-banner.docasne výš. */ .month-vacation-bar.docasne{background:rgba(107,76,122,.32); color:#4a3358; border-color:rgba(107,76,122,.55);} .month-vacation-bar.docasne:hover{background:rgba(107,76,122,.48);} .month-vacation-bar .volno-edit-btn,.month-vacation-bar .volno-confirm-btn{width:14px; height:14px; font-size:8px; vertical-align:middle; margin-left:0; margin-right:4px;} .month-head{display:grid; grid-template-columns:40px repeat(7,1fr); border-bottom:1px solid var(--line);} .month-head div{padding:10px; text-align:center; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-faint);} .month-cell{border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-height:96px; padding:8px; position:relative; display:flex; flex-direction:column; gap:6px; cursor:pointer;} .month-cell:hover{background:var(--plum-tint);} .month-cell:nth-child(8n){border-right:none;} .month-cell.outside{background:#fbfafc; color:var(--ink-faint);} .month-cell.no-hours{background:#d9d2df;} .month-cell.no-hours.today{background:#cfc4d8;} /* Mimořádné dny appka barví přes celou buňku, ne jen malým popiskem (9.9.2026, osmé kolo zadání) — svátek/víkend zůstává appce šedý (.no-hours výš, beze změny), hygiena a dovolená dostaly vlastní barvu, dočasné zablokování appka udělala nejvýraznější ze všech (proužkovaný sytý amber — appka čeká na rozhodnutí, potvrdit nebo zrušit). */ .month-cell.hygiene-day{background:#e3cdd7;} .month-cell.hygiene-day.today{background:#d7b9c6;} .month-cell.vacation-day{background:#d3e3d5;} .month-cell.vacation-day.today{background:#bcd6c0;} .month-cell.docasne-day{ background:repeating-linear-gradient(135deg, rgba(201,120,40,.55), rgba(201,120,40,.55) 11px, rgba(201,120,40,.38) 11px, rgba(201,120,40,.38) 22px); box-shadow:inset 0 0 0 2px rgba(168,88,20,.6); } .month-cell.docasne-day.today{ background:repeating-linear-gradient(135deg, rgba(201,120,40,.72), rgba(201,120,40,.72) 11px, rgba(201,120,40,.52) 11px, rgba(201,120,40,.52) 22px); box-shadow:inset 0 0 0 2px rgba(168,88,20,.8); } /* Dny sousedních měsíců appka dřív u mimořádných dnů barvila zpátky do šeda (přebíjelo to hygiene-day/vacation-day/docasne-day) — appka to opravila (10.9.2026): teď nechává barvu mimořádného dne i mimo zvolený měsíc, ať jsou opravdu všechny viditelné dny správně vykreslené. Odlišení "je/není v tomto měsíci" appka teď dělá rámečkem kolem celého měsíčního bloku, ne ztlumením barvy jednotlivých buněk — viz .month-cell.frame-* níž. */ /* den, který už kompletně proběhl (minulost) — stejný "vodotiskový" princip jako u ošetřeného pacienta (`.appt.done`): den zůstává čitelný, ale je jasně vizuálně utlumený. Stejný filtr jako `.day-col.past` v denním/týdenním pohledu, ať to napříč pohledy vypadá jednotně. */ .month-cell.past{filter:grayscale(.65) opacity(.55);} /* Lem kolem zvoleného měsíce (10.9.2026) — appka orámuje jen buňky, co do zvoleného měsíce opravdu patří, podobně jako `.work-outline` orámuje pracovní dobu v týdenním pohledu. Lem appka kreslí přes samostatný ::after (ne přes border/box-shadow na .month-cell), ať nekoliduje s box-shadow appky .docasne-day ani neposune rozměry buňky. Podle sousedních buněk (viz frameClasses v app.js) appka rozhodne, na které straně buňka lem potřebuje — appka tak vykreslí i "schodovitý" tvar prvního/posledního týdne, kdy měsíc nezačíná/nekončí přesně na okraji mřížky. */ .month-cell.frame-top::after,.month-cell.frame-right::after,.month-cell.frame-bottom::after,.month-cell.frame-left::after{ content:''; position:absolute; inset:0; pointer-events:none; z-index:5; border:3px solid transparent; } .month-cell.frame-top::after{border-top-color:var(--ink);} .month-cell.frame-right::after{border-right-color:var(--ink);} .month-cell.frame-bottom::after{border-bottom-color:var(--ink);} .month-cell.frame-left::after{border-left-color:var(--ink);} .month-cell .dnum{font-family:ui-serif,serif; font-weight:600; font-size:14px;} .month-cell.today .dnum{color:#fff; background:var(--plum); width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:12.5px;} .month-pill{font-size:10.5px; font-weight:700; padding:3px 7px; border-radius:6px; color:#fff; align-self:flex-start;} .month-closed-tag,.month-hyg-tag{font-size:10px; font-weight:700; color:var(--ink-faint);} .month-buckets{display:flex; gap:4px; flex-wrap:wrap;} .month-bucket-tag{font-size:9.5px; font-weight:700; color:var(--ink-faint); background:rgba(0,0,0,.06); padding:2px 6px; border-radius:5px; letter-spacing:.02em;} .month-hyg-tag{color:#8a3f63; background:rgba(212,106,160,.18); padding:3px 7px; border-radius:6px; align-self:flex-start;} .week-num{display:flex; align-items:center; justify-content:center; border-right:1px solid var(--line); border-bottom:1px solid var(--line); font-size:11.5px; font-weight:800; color:var(--ink-faint); cursor:pointer; background:#fbfafc;} .week-num:hover{background:var(--plum-tint); color:var(--plum);} /* ========================================================= POZNÁMKY — denní pohled (pravý panel) a týdenní pohled (řádek pod mřížkou) ========================================================= */ .day-layout{display:flex;} .day-grid-wrap{flex:2; min-width:0;} .day-notes-panel{flex:1; min-width:210px; max-width:340px; border-left:1px solid var(--line); padding:16px 16px 20px; overflow-y:auto;} .notes-panel-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;} .notes-panel-head span{font-size:11.5px; font-weight:700; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.04em;} .btn-add-note{font-size:11.5px; font-weight:700; color:var(--plum); background:none; border:none; padding:0;} .notes-list{display:flex; flex-direction:column; gap:9px;} .notes-empty{font-size:12.5px; color:var(--ink-faint); font-style:italic;} .note-card{position:relative; background:#faf8f2; border:1px solid rgba(148,141,156,.28); border-radius:9px; padding:9px 26px 9px 11px; cursor:pointer;} .note-card:hover{background:#f5f1e6;} .note-card.important{background:#fdecec; border:1px solid var(--red); box-shadow:0 0 0 1px rgba(164,68,68,.18);} .note-card.important:hover{background:#fbdede;} /* dřív zvýrazněné amber pozadí — na žádost appka teď oběd posunutý mimo ordinační dobu vypadá jako úplně běžná poznámka (.note-card), aby to zbytečně nekřičelo; klikání a chování (otevře úpravu poznámky k obědu) zůstává stejné, jen bez barevného odlišení. */ .note-title{font-size:13px; font-weight:700; color:var(--ink); line-height:1.3;} .note-important-mark{color:var(--red);} .note-body{font-size:12px; color:var(--ink-soft); margin-top:4px; line-height:1.4; white-space:pre-wrap;} .note-del{position:absolute; top:6px; right:6px; width:18px; height:18px; border-radius:50%; border:none; background:rgba(43,39,48,.08); color:var(--ink-faint); font-size:10px; display:flex; align-items:center; justify-content:center; padding:0;} .note-del:hover{background:var(--red); color:#fff;} /* "Vyřízeno" (15.9.2026, pětadvacáté kolo zadání) — appka vyřízenou poznámku nechává ve výpisu dál plně čitelnou, jen ji appka zesvětlí, jako by byla za vodotiskem (ne přeškrtne — přeškrtnutí by vypadalo jako "smazáno", to appka poznámka pořád má, jen je hotová). */ .note-card.done{opacity:.5;} .note-card.done:hover{opacity:.75;} .poznamka-done-toggle{display:inline-block; cursor:pointer; margin-right:3px; color:var(--ink-faint); font-size:12.5px; line-height:1;} .poznamka-done-toggle:hover{color:var(--plum);} .cal-notes-row{display:grid; border-top:1px solid var(--line); background:#faf8f2;} .week-notes-cell{border-left:1px solid var(--line); padding:8px; display:flex; flex-direction:column; gap:5px; min-height:36px; border-radius:6px; transition:background .2s, box-shadow .2s;} .week-notes-cell:first-child{border-left:none;} .week-notes-cell.flash-highlight{background:#fdecec; box-shadow:inset 0 0 0 2px var(--red);} .week-note-chip{font-size:11.5px; color:var(--ink); background:#fff; border:1px solid rgba(148,141,156,.32); border-radius:6px; padding:3px 7px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .week-note-chip:hover{background:var(--plum-tint); border-color:var(--plum);} .week-note-chip.important{background:#fdecec; border:1px solid var(--red); color:#8a2f2f; font-weight:700;} .week-note-chip.important:hover{background:#fbdede;} .week-note-chip.done{opacity:.5;} .week-note-chip.done:hover{opacity:.75;} /* viz vysvětlení u .note-card.obed-overflow výše — stejná změna i pro týdenní chip. */ .col-warn{position:absolute; top:5px; right:6px; font-size:13.5px; line-height:1; color:var(--red); cursor:pointer; animation:warn-pulse 1.8s ease-in-out infinite;} @keyframes warn-pulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.55; transform:scale(1.18); } } .week-note-add{font-size:10.5px; font-weight:700; color:var(--ink-faint); background:none; border:none; padding:0; text-align:left;} .week-note-add:hover{color:var(--plum);} .overlay{position:fixed; inset:0; background:rgba(43,39,48,.28); opacity:0; pointer-events:none; transition:opacity .18s; z-index:40;} .overlay.open{opacity:1; pointer-events:auto;} .panel{position:fixed; top:0; right:0; height:100%; width:440px; max-width:92vw; background:#fff; z-index:41; box-shadow:-12px 0 40px rgba(43,39,48,.18); transform:translateX(100%); transition:transform .22s ease; padding:26px 24px; overflow-y:auto;} .panel.open{transform:translateX(0);} .panel-close{position:absolute; top:18px; right:18px; width:30px; height:30px; border-radius:8px; border:none; background:var(--bg); font-size:16px; color:var(--ink-soft);} .panel-tag{display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:700; padding:4px 10px; border-radius:999px; color:#fff; margin-bottom:14px;} .panel h2, .detail-inline-inner h2{font-size:20px; margin-bottom:4px;} .panel .meta, .detail-inline-inner .meta{font-size:13.5px; color:var(--ink-soft); margin-bottom:6px;} .panel-row{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); font-size:13.5px;} .panel-row span:first-child{color:var(--ink-faint); font-weight:600;} .panel-row span:last-child{font-weight:700; text-align:right;} .panel-field{margin-top:14px;} .panel-field label{font-size:12px; font-weight:700; color:var(--ink-faint); display:block; margin-bottom:6px;} .panel-field input,.panel-field select,.panel-field textarea{width:100%; border:1px solid var(--line); border-radius:9px; padding:10px; font-size:13.5px;} .panel-field-row{display:flex; gap:10px;} .panel-field-row .panel-field{flex:1;} .pwd-wrap{position:relative;} .pwd-wrap input{padding-right:40px !important;} .pwd-eye{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:none; border:none; border-radius:7px; cursor:pointer; color:var(--ink-faint); padding:0; } .pwd-eye:hover{ background:var(--plum-tint); color:var(--ink); } .dur-options{display:flex; gap:14px; flex-wrap:wrap; margin-top:2px;} .dur-opt{display:flex; align-items:center; gap:5px; font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer;} .panel-check{display:flex; align-items:flex-start; gap:10px; margin-top:16px; background:var(--plum-tint); border-radius:10px; padding:12px 14px;} .panel-check .txt strong{display:block; font-size:13px; margin-bottom:2px;} .panel-check .txt span{font-size:12px; color:var(--ink-soft); line-height:1.5;} .panel-actions{display:flex; gap:10px; margin-top:22px; flex-wrap:wrap;} .tag-preview{font-size:11.5px; font-weight:700; color:var(--sage-deep); margin-top:6px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;} .tag-preview.warn{color:var(--ink-faint);} /* Feature "Upravit" u rozpoznané kategorie výkonu — malé textové tlačítko hned vedle náhledu rozpoznání, a pod ním (po rozkliknutí) checklist všech kategorií k ručnímu zaškrtání. Ruční zaškrtnutí pak úplně nahradí automatické rozpoznání z textu (viz previewTags v app.js). */ .tag-edit-btn{font-size:11px; font-weight:700; color:var(--plum); background:none; border:none; cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:2px;} .tag-edit-btn:hover{color:var(--plum-deep);} .tag-manual-panel{width:100%; margin-top:8px; padding:10px 12px; background:var(--bg); border:1px solid var(--line); border-radius:9px;} .tag-manual-list{display:flex; flex-direction:column; gap:7px; margin-bottom:10px;} .tag-manual-actions{display:flex; flex-direction:column; align-items:flex-start; gap:7px;} .tag-manual-confirm{font-size:12px; font-weight:700; color:#fff; background:var(--plum); border:none; border-radius:6px; padding:5px 14px; cursor:pointer;} .tag-manual-confirm:hover{background:var(--plum-deep);} .tag-manual-back{font-size:11px; color:var(--ink-faint); background:none; border:none; cursor:pointer; padding:0; text-decoration:underline; text-underline-offset:2px;} .tag-manual-back:hover{color:var(--ink-soft);} /* Rozšířené výsledkové okno hledání pacienta (Enter v levém "Hledat pacienta…") */ .search-filter-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:10px 0 14px; border-bottom:1px solid var(--line); margin-bottom:12px;} .search-filter-row .pref-item{font-size:12.5px;} .search-result-list{display:flex; flex-direction:column; gap:2px; max-height:50vh; overflow-y:auto;} .search-result-item{display:flex; align-items:center; gap:10px; padding:10px 8px; border-bottom:1px solid var(--line); cursor:pointer; border-radius:8px;} .search-result-item:hover{background:var(--plum-tint);} /* Zaškrtávátko má samo o sobě jen 16px, ale kolem něj (viz label.search-result-check-wrap v renderSearchResultsWindow) je mnohem větší polstrovaná klikací plocha — záporný margin srazí vizuální rozměr zpátky, ať se řádek nezvětší (10.9.2026, deváté kolo zadání). */ .search-result-check-wrap{flex:none; display:flex; align-items:center; justify-content:center; padding:10px; margin:-10px; cursor:pointer;} .search-result-check{width:16px; height:16px; cursor:pointer; pointer-events:none;} /* Tlačítko "Tisk" (10.9.2026, dvanácté kolo zadání; oprava 14.9.2026, třinácté kolo) je schválně přesunuté na začátek lišty — je vlevo, blízko zaškrtávátek (ta se vždycky kreslí jako úplně první sloupec vlevo v tabulce/seznamu), ne vpravo přes celou šířku obrazovky, kam měl klik na tlačítko hned po zaškrtnutí zbytečně daleko. flex-direction:row-reverse otočí jen VIZUÁLNÍ pořadí dvou dětí (v HTML zůstává značka s počtem první, tlačítko se ukáže první zleva) — musí se ale zároveň otočit i to, ke KTERÉMU okraji justify-content celou dvojici přilepí: u row-reverse se "hlavní začátek" prohodí na PRAVOU stranu, takže se doopravdy vlevo přilepí dvojice pomocí justify-content:flex-end (flex-start by ji omylem vrátil zpátky doprava — odhaleno až kontrolou, dřív se to jen chybně předpokládalo). Platí pro všechny sdílené výběrové lišty k tisku — Poslední objednávky, výsledky hledání pacienta i detail pacienta. */ .search-print-bar{display:none; align-items:center; justify-content:flex-end; flex-direction:row-reverse; gap:10px; padding:0 8px 12px;} .search-print-bar span{font-size:12.5px; font-weight:700; color:var(--plum-deep);} .search-result-name{font-weight:700; font-size:13px; color:var(--ink); flex:1; min-width:0;} .search-result-meta{font-size:11.5px; color:var(--ink-faint); white-space:nowrap;} .search-result-stav{font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:6px; white-space:nowrap;} .search-result-stav.zruseno{background:var(--red-tint); color:var(--red);} .search-result-stav.nedostavil_se{background:var(--red-tint); color:var(--red);} .search-result-stav.osetreno{background:var(--sage-tint); color:var(--sage-deep);} .search-result-stav.ceka_na_potvrzeni{background:var(--amber-tint); color:var(--amber);} .search-result-empty{padding:24px 10px; text-align:center; color:var(--ink-faint); font-size:13px;} .search-result-truncated{padding:10px; text-align:center; color:var(--ink-faint); font-size:11.5px; font-style:italic;} /* Zaškrtávátko k výběru objednávek k tisku v tabulce "Poslední objednávky" (10.9.2026, desáté kolo zadání) — appka sdílí stejný obalovací trik (viz .search-result-check-wrap výš) přímo uvnitř buňky tabulky, ať i tady platí, že klik pár pixelů vedle appce zaškrtne, ne appku pošle na klik celého řádku (ten řádek appka má taky klikací, otevírá objednávku). */ .tbl-check-td{width:34px; text-align:center; padding:0 !important;} .tbl-check-td .search-result-check-wrap{margin:0; display:inline-flex;} /* Detail pacienta se všemi objednávkami (10.9.2026, osmé kolo zadání) — appka sdílí vzhled se seznamem výsledků hledání výš (.search-result-item/.search-result-list), jen minulé appce opticky ztlumí, ať appka první pohled dá spíš budoucím termínům. */ .pacient-detail-minula{opacity:.55;} .suggest-list{position:absolute; left:0; right:0; top:100%; margin-top:2px; background:#fff; border:1px solid var(--line); border-radius:9px; box-shadow:var(--shadow-lift); z-index:10;} .suggest-item{padding:9px 12px; font-size:13.5px; cursor:pointer;} .suggest-item:hover{background:var(--plum-tint);} .suggest-item.suggest-hl{background:var(--plum-tint);} .legend{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px;} .legend-group{display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:var(--card); border:1px solid var(--line); border-radius:11px; padding:9px 14px; box-shadow:var(--shadow);} .legend-item{display:flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); font-weight:600;} .legend-dot{width:9px; height:9px; border-radius:3px; flex-shrink:0;} .legend-title{font-size:10.5px; font-weight:800; text-transform:uppercase; color:var(--ink-faint); margin-right:2px;} .toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:#fff; padding:12px 20px; border-radius:10px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow-lift); opacity:0; pointer-events:none; transition:opacity .2s, transform .2s; z-index:60; max-width:340px; text-align:center;} .toast.show{opacity:1; transform:translateX(-50%) translateY(0);} /* Přihlašovací obrazovka (Nastavení -> Zabezpečení) — fixní overlay přes celou appku, appka pod ním existuje v DOM (kvůli jednoduchosti se nic jiného nemusí odkládat na později), jen se nedá použít, dokud se gate nezavře. Stejný barevný/stínový jazyk jako .overlay/.panel jinde v appce, jen o něco tmavší podklad (heslová obrazovka má být jednoznačně "před appkou"). */ .login-gate{position:fixed; inset:0; z-index:100; background:rgba(43,39,48,.55); display:flex; align-items:center; justify-content:center;} .login-box{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lift); padding:34px 32px; width:340px; max-width:90vw; text-align:center;} .login-box h2{font-size:22px;} .login-box .sub{font-size:13px; color:var(--ink-soft); margin:6px 0 20px;} .login-box .panel-field{text-align:left; margin-top:0;} .login-submit{width:100%; margin-top:16px; padding:11px; font-size:14px;} .login-chyba{color:var(--red); font-size:12.5px; font-weight:600; margin-top:10px; text-align:left;} /* Výběr role při přihlášení (role a oprávnění, kolo 40, 19.9.2026) */ .login-role-vyber{display:flex; flex-direction:column; gap:10px;} .login-role-dlazdice{display:flex; flex-direction:column; align-items:flex-start; gap:2px; width:100%; text-align:left; padding:13px 16px; border-radius:12px; border:1px solid var(--line); background:var(--bg); cursor:pointer; font-family:inherit;} .login-role-dlazdice:hover{border-color:var(--plum); background:var(--plum-tint);} .login-role-dlazdice strong{font-size:14.5px; color:var(--ink);} .login-role-dlazdice span{font-size:12px; color:var(--ink-soft);} .login-role-zpet{background:none; border:none; color:var(--ink-soft); font-size:12px; padding:6px 0 0; cursor:pointer; text-decoration:underline;} .settings-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:22px; margin-bottom:20px;} .settings-card h3{font-size:15px; margin-bottom:14px;} /* Nastavení jako rozbalovací menu — každá karta je
, ať je s tolika kategoriemi přehlednější (sbaleno = jen nadpisy, kliknutím se rozbalí obsah dané karty). */ .settings-card > summary{cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px;} .settings-card > summary::-webkit-details-marker{display:none;} .settings-card > summary h3{margin:0;} .settings-card > summary::after{content:'▾'; font-size:12px; color:var(--ink-faint); flex-shrink:0; transition:transform .15s;} .settings-card:not([open]) > summary::after{transform:rotate(-90deg);} .settings-card[open] > summary{margin-bottom:14px;} .settings-card > summary:hover h3{color:var(--plum);} .settings-row{display:grid; grid-template-columns:70px 1fr 1fr 1fr 1fr; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); font-size:13px;} .rozvrh-parita-title{font-size:12px; font-weight:800; text-transform:uppercase; color:var(--plum); margin:18px 0 8px; padding-bottom:6px; border-bottom:2px solid var(--plum-tint);} .rozvrh-parita-title:first-child{margin-top:0;} .rozvrh-den{border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px; background:#fbfafc;} .rozvrh-den-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap;} .rozvrh-den-head .dname{font-weight:800; width:70px; flex-shrink:0;} .rozvrh-den-head input[type=time]{border:1px solid var(--line); border-radius:7px; padding:6px 8px; font-size:13px;} .rozvrh-den-head .hyg-toggle{display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--ink-soft); margin-left:auto;} .rozvrh-den.is-hygiena .rozvrh-hours,.rozvrh-den.is-hygiena .rozvrh-bloky{display:none;} .rozvrh-bloky{margin-top:10px; padding-top:10px; border-top:1px dashed var(--line);} .rozvrh-blok-row{display:grid; grid-template-columns:1.3fr 1fr 1fr 28px; gap:8px; align-items:center; margin-bottom:6px;} .rozvrh-blok-row input{border:1px solid var(--line); border-radius:7px; padding:5px 7px; font-size:12.5px;} .rozvrh-blok-row .del-btn{width:26px; height:26px; font-size:12px;} .add-blok-btn{font-size:11.5px; font-weight:700; color:var(--plum); background:none; border:none; padding:4px 0; cursor:pointer;} .add-blok-btn:hover{text-decoration:underline;} .proc-row{display:grid; grid-template-columns:52px 70px 1.2fr 1.6fr 32px; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px;} .proc-card{border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px; background:#fbfafc;} .proc-card.new-row{background:var(--sage-tint);} .proc-card-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap;} .proc-card-head input[type=color]{width:38px; height:32px; padding:2px; border:1px solid var(--line); border-radius:7px; cursor:pointer;} .proc-card-head input[type=text],.proc-card-head input[type=number]{border:1px solid var(--line); border-radius:7px; padding:6px 8px; font-size:13px;} .proc-card-body input[type=text]{border:1px solid var(--line); border-radius:7px; padding:6px 8px; font-size:12.5px;} .proc-varianty-list{display:flex; flex-direction:column; gap:6px; margin-bottom:6px;} .proc-varianta-row{display:grid; grid-template-columns:1.6fr 80px 30px 70px 28px; gap:8px; align-items:center;} .pasmo-proc-list{display:flex; flex-wrap:wrap; gap:6px 16px;} /* Nastavení -> "Pacienti — vyhledání a trvalé smazání" (5.9.2026) */ #pacientSpravaSuggestions{max-height:340px; overflow-y:auto;} .proc-varianta-row input{border:1px solid var(--line); border-radius:7px; padding:5px 7px; font-size:12.5px;} .proc-row input[type=color]{width:100%; height:32px; padding:2px; border:1px solid var(--line); border-radius:7px; cursor:pointer;} .proc-row input[type=text]{width:100%; border:1px solid var(--line); border-radius:7px; padding:6px 8px; font-size:13px;} .proc-row .del-btn{width:28px; height:28px; border-radius:7px; border:1px solid var(--line); background:#fff; color:var(--red); font-size:13px;} .proc-row .del-btn:hover{background:var(--red-tint); border-color:var(--red);} .proc-row.new-row{background:var(--sage-tint);} /* Klávesové zkratky (bod 11 balíku, Nastavení) — jednoduchý řádek popis/klávesa/vypnout, vlastní třída místo sdíleného .settings-row appka volila záměrně, protože .settings-row je pětisloupcová mřížka pro jiný, širší formulář (appka by appce tady zbytečně nechala tři prázdné sloupce). */ .klavesa-row{display:grid; grid-template-columns:1fr 70px 28px; gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line); font-size:13.5px;} .klavesa-row:last-child{border-bottom:none;} .klavesa-row input{width:100%; text-align:center; text-transform:uppercase; border:1px solid var(--line); border-radius:7px; padding:6px 4px; font-size:13.5px; cursor:pointer; background:#fff;} .klavesa-row .del-btn{width:28px; height:28px; border-radius:7px; border:1px solid var(--line); background:#fff; color:var(--red); font-size:13px;} .klavesa-row .del-btn:hover{background:var(--red-tint); border-color:var(--red);} .settings-row:last-child{border-bottom:none;} .settings-row input,.settings-row select{width:100%; border:1px solid var(--line); border-radius:7px; padding:6px 8px; font-size:13px;} /* appka tabulku obaluje vodorovně posuvným kontejnerem (stejný princip jako .grid-scroll u mřížky dne/týdne) — na desktopu se nijak neprojeví (tabulka se vejde celá), na užší obrazovce appka radši nabídne posun stranou než aby sloupce zmizely za okrajem karty (.cal-card kolem appka drží overflow:hidden kvůli zaobleným rohům). */ .table-scroll{overflow-x:auto;} .report-table{width:100%; border-collapse:collapse; font-size:13.5px;} .report-table th{text-align:left; padding:9px; border-bottom:2px solid var(--line); font-size:11px; text-transform:uppercase; color:var(--ink-faint);} .report-table td{padding:9px; border-bottom:1px solid var(--line);} .filter-row{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px; align-items:flex-end;} .filter-row .panel-field{margin-top:0; min-width:160px;} /* ========================================================= SKLAD (10.9.2026, osmé kolo zadání) — checklist zásob k objednání. Každá kategorie appka vykresluje jako vlastní kartu s vlastní .report-table (sdílí vzhled s ostatními tabulkami appky) a čtyřmi úzkými sloupci pro zaškrtávací políčka; appka mezi kategoriemi nechává výraznější odstup, ať jsou v delším seznamu vidět jako oddělené celky. ========================================================= */ .sklad-topbar-ovladani{display:flex; align-items:center; gap:8px; flex-wrap:wrap;} .sklad-topbar-ovladani .panel-field{width:190px;} .sklad-topbar-ovladani .panel-field input{padding:9px 10px; font-size:13px;} .sklad-kategorie{margin-bottom:26px; break-inside:avoid; -webkit-column-break-inside:avoid;} .sklad-kategorie:last-child{margin-bottom:8px;} /* Dvousloupcové zobrazení skladu na dostatečně širokém okně (10.9.2026, jedenácté kolo zadání) — nechává se na prohlížeči, ať sám rozhodne, kolik kapitol se vejde do prvního sloupce, díky break-inside:avoid výš se jen zaručí, že se žádná kapitola nikdy nerozdělí napůl — celá kapitola tak vždycky začíná i končí ve stejném sloupci. Breakpoint je zvolený tak, ať se do dvou sloupců vejdou i dvě tabulky (max-width 480px každá) vedle sebe i s levým menu a jeho odsazením (počítáno se šířkou menu — viz .sidebar 216px). */ @media (min-width: 1300px){ .sklad-sloupce{column-count:2; column-gap:36px;} } .sklad-kategorie-nadpis{font-size:14px; margin:0 0 8px; color:var(--plum-deep); text-transform:uppercase; letter-spacing:.03em;} /* Tabulka je schválně nenechaná roztáhnout na celou šířku karty (.report-table má jinak width:100%) — na širší obrazovce by tak byl název položky od zaškrtávacích políček zbytečně daleko a hůř by se hlídalo, jestli je zaškrtnutý opravdu ten správný řádek (9. kolo zadání, proto zúžení + přidané zvýraznění celého řádku myší, ať se řádek dá spolehlivě sledovat i přes tu mezeru, co zbyla). */ .sklad-table{width:auto; max-width:480px;} .sklad-table th{text-align:left;} .sklad-table td:first-child, .sklad-table th:first-child{max-width:220px;} .sklad-table th:not(:first-child), .sklad-check-td{text-align:center; width:48px;} .sklad-check-td input[type=checkbox]{width:17px; height:17px; cursor:pointer;} .sklad-table tbody tr:hover{background:var(--plum-tint);} .sklad-radek-ok td:first-child{color:var(--ink-faint); text-decoration:line-through;} .sklad-prazdno{color:var(--ink-faint); font-style:italic; text-align:center; padding:14px !important;} .sklad-pridat-radek{display:flex; gap:8px; margin-top:8px;} .sklad-pridat-input{flex:1; border:1px solid var(--line); border-radius:7px; padding:7px 10px; font-size:13px;} /* Fulltextové hledání položek skladu (9. kolo zadání) — appka nalezenou položku krátce zvýrazní (scrollIntoView + tahle třída), appka ji zase sama odebere po pár vteřinách, ať příště řádek zase appce vypadá normálně (viz zvyraznitSkladPolozku v app.js). */ .sklad-radek-hl{outline:2px solid var(--plum); outline-offset:-1px; background:var(--plum-tint); transition:background 1.2s ease, outline-color 1.2s ease;} .sklad-radek-hl.sklad-radek-hl-fade{outline-color:transparent; background:transparent;} /* "Seznam položek k objednání" — appka v panelu (i v tisku) drží stejné tři sekce v pevném pořadí není → expirace → hlídat, viz otevritSeznamKObjednani/tiskHtmlSkladSeznam v app.js. */ .sklad-obj-sekce{margin-bottom:18px;} .sklad-obj-sekce:last-child{margin-bottom:4px;} .sklad-obj-sekce h3{font-size:13px; margin:0 0 6px; color:var(--plum-deep); text-transform:uppercase; letter-spacing:.03em;} .sklad-obj-seznam{margin:0; padding-left:20px; font-size:13.5px; line-height:1.8;} .sklad-obj-kategorie{color:var(--ink-faint); font-size:11.5px;} /* Editace kapitol a položek skladu (9. kolo zadání) — appka sdílí vzhled s kartami kategorií výkonů (.proc-card/.proc-card-head) výš, appka jen přidala vlastní třídy pro řádek položky uvnitř karty a příslušné tlačítko "✕" appka pro tenhle kontext obarvila stejně jako jinde. */ .sklad-edit-kategorie{margin-bottom:12px;} .sklad-edit-kategorie-head input[type=text]{flex:1; min-width:140px; font-weight:700;} .sklad-edit-kategorie-head .del-btn{width:28px; height:28px; border-radius:7px; border:1px solid var(--line); background:#fff; color:var(--red); font-size:13px; flex:none;} .sklad-edit-kategorie-head .del-btn:hover{background:var(--red-tint); border-color:var(--red);} .sklad-edit-polozka-row{display:flex; align-items:center; gap:8px; margin-bottom:6px;} .sklad-edit-polozka-row input[type=text]{flex:1;} .sklad-edit-polozka-row .del-btn{width:26px; height:26px; border-radius:7px; border:1px solid var(--line); background:#fff; color:var(--red); font-size:12px; flex:none;} .sklad-edit-polozka-row .del-btn:hover{background:var(--red-tint); border-color:var(--red);} .sklad-edit-nova-kategorie{display:flex; gap:8px; margin-top:14px; padding-top:14px; border-top:1px solid var(--line);} /* ========================================================= MZDY (17.9.2026, kolo 37 zadání) — dvě karty (úklid, dentální hygiena) vedle sebe, appka výsledky výpočtu drží ve stejném zobecněném "číslo se štítkem" vzhledu jako .stat-pill jinde v appce, jen appka řádky skládá pod sebe místo vedle sebe, ať appka bez problémů zvládne i delší nadpisy (např. "Minimální doporučená částka daru"). ========================================================= */ .mzdy-picker{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap; margin-bottom:20px;} .mzdy-picker select{border:1px solid var(--line); border-radius:9px; padding:10px; font-size:13.5px; min-width:120px;} .mzdy-cards{display:grid; grid-template-columns:1fr 1fr; gap:20px;} @media (max-width: 820px){ .mzdy-cards{grid-template-columns:1fr;} } .mzdy-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px;} .mzdy-card h3{font-size:15px; margin-bottom:14px;} .mzdy-card-radek{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px;} .mzdy-card-radek label{font-size:12.5px; font-weight:700; color:var(--ink-soft);} .mzdy-card-radek input[type=number]{width:90px; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13.5px; text-align:right;} .mzdy-card-cisla{display:flex; flex-direction:column; gap:8px; margin-bottom:14px;} .mzdy-card-cisla > div{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding-bottom:7px; border-bottom:1px solid var(--line); font-size:13px;} .mzdy-card-cisla > div span{color:var(--ink-faint); font-weight:600;} .mzdy-card-cisla > div b{font-size:14.5px; white-space:nowrap;} .mzdy-material-info{color:var(--ink-faint); font-size:11.5px; font-weight:400;} .mzdy-vysledky{margin-top:14px; padding-top:14px; border-top:1px solid var(--line);} .mzdy-vysledky-grid{display:flex; flex-direction:column; gap:7px;} .mzdy-vysledky-grid > div{display:flex; align-items:baseline; justify-content:space-between; gap:10px; font-size:13px;} .mzdy-vysledky-grid > div span{color:var(--ink-faint); font-weight:600;} .mzdy-vysledek-hlavni{font-size:14.5px !important; font-weight:700;} .mzdy-vysledek-hlavni b{color:var(--plum-deep); font-size:16px;} /* appka řádek "Neomluvení pacienti" / "Nemzdový dar" (kolo 38 zadání, 18.9.2026) — oba labely mívají různou délku a různě se zalamují, takže bez pevné rezervované výšky appka pole nezačínala na stejné výšce; min-height + zarovnání textu labelu dolů appka drží vstupní pole vždy na stejné úrovni bez ohledu na to, kolik řádků label zabere. */ .mzdy-dh-extra-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:12px;} @media (max-width: 640px){ .mzdy-dh-extra-row{grid-template-columns:1fr;} } .mzdy-dh-extra-row .panel-field{margin-top:0;} .mzdy-dh-extra-row .panel-field label{min-height:32px; display:flex; align-items:flex-end;} .mzdy-platby{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin-top:20px;} .mzdy-platby h3{font-size:15px; margin-bottom:14px;} .mzdy-platby-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px;} @media (max-width: 820px){ .mzdy-platby-grid{grid-template-columns:1fr;} } .mzdy-platby .panel-actions{margin-top:16px;} .mzdy-akce{display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-top:20px; padding-top:18px; border-top:1px solid var(--line);} .mzdy-uzavreno-badge{background:var(--plum-tint); color:var(--plum-deep); border-radius:9px; padding:10px 14px; font-size:13px; font-weight:600; margin-bottom:18px;} .mzdy-sazby-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px 18px;} @media (max-width: 900px){ .mzdy-sazby-grid{grid-template-columns:1fr 1fr;} } .mzdy-cenik-radek{display:flex; align-items:center; gap:8px; margin-bottom:6px;} .mzdy-cenik-radek input[type=text]{flex:2; min-width:0;} .mzdy-cenik-radek input[type=number]{flex:1; min-width:0;} .mzdy-cenik-radek input{border:1px solid var(--line); border-radius:7px; padding:7px 9px; font-size:13px;} .mzdy-cenik-vikend{display:flex; align-items:center; gap:5px; font-size:12px; color:var(--ink-soft); white-space:nowrap; flex:none;} .mzdy-cenik-radek .del-btn{width:26px; height:26px; border-radius:7px; border:1px solid var(--line); background:#fff; color:var(--red); font-size:12px; flex:none;} .mzdy-cenik-radek .del-btn:hover{background:var(--red-tint); border-color:var(--red);} .mzdy-cenik-pridat{display:flex; gap:8px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line);} .mzdy-cenik-pridat input{flex:1; border:1px solid var(--line); border-radius:7px; padding:7px 10px; font-size:13px;} .mzdy-roster-list{display:flex; flex-direction:column; gap:8px; margin-bottom:10px;} .mzdy-roster-radek{display:flex; align-items:center; justify-content:space-between; gap:12px; border:1px solid var(--line); border-radius:9px; padding:9px 12px; font-size:13px;} .mzdy-roster-radek .meta{font-size:12px;} /* ========================================================= CHECKLISTY PRAVIDELNÝCH ÚKOLŮ — nápadný, ale nerušivý banner nahoře v diáři (napříč všemi obrazovkami appky — viz #checklistBanner umístěný hned za
, ne uvnitř jednotlivých .view), + karty šablon v Nastavení (sdílejí .proc-card vzhled s ostatními sekcemi Nastavení, jen s vlastní třídou .checklist-card pro cílení JS) ========================================================= */ .checklist-banner{ background:var(--amber-tint); border:1.5px solid var(--amber); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:20px; overflow:hidden; } .checklist-banner-head{ display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer; } .checklist-banner-icon{font-size:16px; flex-shrink:0;} .checklist-banner-summary{font-weight:700; font-size:13.5px; color:var(--amber); flex:1; min-width:0;} .checklist-banner-toggle{font-size:12px; font-weight:700; color:var(--amber); flex-shrink:0;} .checklist-banner-body{padding:0 16px 14px; display:flex; flex-direction:column; gap:12px;} .checklist-banner-item{background:#fff; border:1px solid rgba(185,112,47,.35); border-radius:10px; padding:10px 14px;} .checklist-banner-item-head{font-weight:700; font-size:13px; color:var(--ink); margin-bottom:6px;} .checklist-banner-date{font-weight:400; font-size:11.5px; color:var(--ink-faint);} .checklist-banner-check{display:flex; align-items:flex-start; gap:8px; font-size:13px; color:var(--ink-soft); padding:4px 0; cursor:pointer;} .checklist-banner-check input{margin-top:2px; flex-shrink:0;} /* ========================================================= OBJEDNÁVKY ČEKAJÍCÍ NA POTVRZENÍ — stejný banner princip jako checklisty výše (i stejné #confirmBanner umístění hned vedle #checklistBanner), jen v červené (--red), ať jsou obě varovná hlášení navzájem rozeznatelná i letmým pohledem na barvu, ne jen podle textu. ========================================================= */ .confirm-banner{ background:var(--red-tint); border:1.5px solid var(--red); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:20px; overflow:hidden; } .confirm-banner-head{display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer;} .confirm-banner-icon{font-size:16px; flex-shrink:0;} .confirm-banner-summary{font-weight:700; font-size:13.5px; color:var(--red); flex:1; min-width:0;} .confirm-banner-toggle{font-size:12px; font-weight:700; color:var(--red); flex-shrink:0;} .confirm-banner-body{padding:0 16px 14px; display:flex; flex-direction:column; gap:10px;} .confirm-banner-item{background:#fff; border:1px solid rgba(164,68,68,.35); border-radius:10px; padding:10px 14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;} .confirm-banner-item-main{flex:1; min-width:160px; cursor:pointer;} .confirm-banner-item-name{font-weight:700; font-size:13px; color:var(--ink);} .confirm-banner-item-meta{font-weight:400; font-size:11.5px; color:var(--ink-faint); margin-top:2px;} .confirm-banner-item-actions{display:flex; gap:6px; flex-shrink:0;} /* ========================================================= OBJEDNÁVKY ČEKAJÍCÍ NA PŘEOBJEDNÁNÍ KVŮLI OMEZENÍ (kolo 47, žádost uživatele 23.9.2026) — appka appce hlásila kolizi po přidání omezení/volna dřív jen uvnitř diáře (⚠ appka a zvýrazněný box v detailu objednávky), ne v horní liště napříč celou appkou — appka teď přidala další banner stejného vzoru jako #confirmBanner výš (i stejné umístění hned vedle), jen v appkou používané jantarové (--amber), protože stejnou barvu appka už používá jinde právě pro tenhle konkrétní druh upozornění (⚠ appka appce u objednávky, box v detailu). ========================================================= */ .preobjednat-banner{ background:var(--amber-tint); border:1.5px solid var(--amber); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:20px; overflow:hidden; } .preobjednat-banner-head{display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer;} .preobjednat-banner-icon{font-size:16px; flex-shrink:0;} .preobjednat-banner-summary{font-weight:700; font-size:13.5px; color:var(--amber); flex:1; min-width:0;} .preobjednat-banner-toggle{font-size:12px; font-weight:700; color:var(--amber); flex-shrink:0;} .preobjednat-banner-body{padding:0 16px 14px; display:flex; flex-direction:column; gap:10px;} .preobjednat-banner-item{background:#fff; border:1px solid rgba(185,112,47,.35); border-radius:10px; padding:10px 14px; cursor:pointer;} .preobjednat-banner-item-name{font-weight:700; font-size:13px; color:var(--ink);} .preobjednat-banner-item-meta{font-weight:400; font-size:11.5px; color:var(--ink-faint); margin-top:2px;} /* ========================================================= VZKAZY MEZI UŽIVATELI (kolo 46, bod 7 zadání) — banner nahoře v diáři stejným vzorem jako checklisty/potvrzení výš, jen v modré (--blue), ať appka barevně odliší i tenhle třetí typ upozornění; k tomu odznak s počtem nepřečtených u položky menu "Vzkazy" a karty jednotlivých vzkazů na obrazovce Vzkazy (screen-vzkazy). ========================================================= */ .vzkazy-banner{ background:var(--blue-tint); border:1.5px solid var(--blue); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:20px; overflow:hidden; } .vzkazy-banner-head{display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer;} .vzkazy-banner-icon{font-size:16px; flex-shrink:0;} .vzkazy-banner-summary{font-weight:700; font-size:13.5px; color:var(--blue); flex:1; min-width:0;} .vzkazy-banner-toggle{font-size:12px; font-weight:700; color:var(--blue); flex-shrink:0;} .vzkazy-banner-body{padding:0 16px 14px; display:flex; flex-direction:column; gap:10px;} .vzkazy-banner-item{background:#fff; border:1px solid rgba(61,122,153,.35); border-radius:10px; padding:10px 14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;} .vzkazy-banner-item-main{flex:1; min-width:160px; cursor:pointer;} .vzkazy-banner-item-text{font-weight:600; font-size:13px; color:var(--ink);} .vzkazy-banner-item-meta{font-weight:400; font-size:11.5px; color:var(--ink-faint); margin-top:2px;} .nav-badge{ display:inline-block; margin-left:6px; min-width:18px; padding:0 5px; height:18px; line-height:18px; text-align:center; font-size:11px; font-weight:700; color:#fff; background:var(--red); border-radius:9px; vertical-align:middle; } .vzkazy-alert-list{display:flex; flex-direction:column; gap:10px; max-height:320px; overflow-y:auto; margin:14px 0;} .vzkazy-alert-item{background:var(--blue-tint); border:1px solid rgba(61,122,153,.3); border-radius:10px; padding:10px 14px;} .vzkazy-alert-item-text{font-size:13.5px; color:var(--ink); white-space:pre-wrap;} .vzkazy-alert-item-meta{font-size:11.5px; color:var(--ink-faint); margin-top:4px;} .vzkaz-compose{display:flex; gap:10px; align-items:flex-start;} .vzkaz-compose textarea{flex:1; resize:vertical; font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:#fff;} .vzkaz-item{background:#fff; border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px;} .vzkaz-item-odemne{background:var(--plum-tint); border-color:rgba(107,76,122,.3);} .vzkaz-item-head{display:flex; justify-content:space-between; gap:10px; margin-bottom:6px;} .vzkaz-item-autor{font-weight:700; font-size:12.5px; color:var(--ink-soft);} .vzkaz-item-cas{font-size:11.5px; color:var(--ink-faint);} .vzkaz-item-text{font-size:13.5px; color:var(--ink); white-space:pre-wrap;} .vzkaz-item-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px;} .vzkaz-item-precteno{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink-soft); cursor:pointer;} .vzkaz-item-stav{font-size:12px; font-weight:700; color:var(--sage-deep);} /* ========================================================= "K VYŘÍZENÍ" (kolo 46, bod 6 zadání) — blok pod týdenním diářem, tři sloupce drží ve flex řádku, díky čemuž výška bloku sama sleduje ten nejdelší sloupec, bez zvlášť počítané logiky v JS. Vstup pro přidání nové položky je v každém sloupci NAD seznamem, ne pod ním, ať při přidávání zůstává na místě a nové položky přibývají pod něj (žádost uživatele 22.9.2026, viz kVyrizeniSloupecHtml v app.js). ========================================================= */ .k-vyrizeni-blok{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:14px 16px 16px; margin-top:16px; } .k-vyrizeni-head{font-weight:700; font-size:14px; color:var(--ink); margin-bottom:10px;} .k-vyrizeni-cols{display:flex; gap:16px; align-items:stretch; flex-wrap:wrap;} .k-vyrizeni-col{flex:1 1 220px; min-width:200px; display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--line); border-radius:10px; padding:10px 12px;} .k-vyrizeni-col-head{font-weight:700; font-size:12.5px; color:var(--ink-soft); margin-bottom:8px; text-transform:uppercase; letter-spacing:.02em;} .k-vyrizeni-col-items{display:flex; flex-direction:column; gap:5px; flex:1;} .k-vyrizeni-item{display:flex; align-items:center; gap:7px;} .k-vyrizeni-item input[type=checkbox]{flex-shrink:0;} .k-vyrizeni-item-text{flex:1; min-width:0; border:1px solid transparent; background:transparent; font:inherit; font-size:12.5px; color:var(--ink); padding:4px 6px; border-radius:6px;} .k-vyrizeni-item-text:hover, .k-vyrizeni-item-text:focus{border-color:var(--line); background:#fff;} .k-vyrizeni-col-add{margin-bottom:8px; border:1px dashed var(--line); background:#fff; font:inherit; font-size:12.5px; color:var(--ink-soft); padding:6px 8px; border-radius:6px;} .k-vyrizeni-col-add:focus{border-style:solid; border-color:var(--plum);} /* ========================================================= VÍCE NÁVŠTĚV — banner v diáři + mimořádné zvýraznění objednávek v rozjeté sekvenci (5.9.2026, viz viceNavstevSession a renderViceNavstevBanner v app.js). Appka záměrně používá vlastní pevnou (na barevném schématu appky nezávislou) barvu #c94914 a jemné pulzování — appka nesahá po --plum/--amber/--red, ať je tenhle stav vždycky na první pohled jednoznačně odlišitelný od běžných barev appky (bez ohledu na zvolené schéma) i od ostatních bannerů. ========================================================= */ @keyframes viceNavstevPulseBanner{ 0%,100% { box-shadow:0 0 0 0 rgba(201,73,20,.35), var(--shadow); } 50% { box-shadow:0 0 0 6px rgba(201,73,20,0), var(--shadow); } } .vice-navstev-banner{ background:#fff4e0; border:1.5px dashed #c94914; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:20px; padding:12px 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; animation:viceNavstevPulseBanner 1.8s ease-in-out infinite; } .vice-navstev-banner-icon{font-size:17px; flex-shrink:0;} .vice-navstev-banner-text{flex:1; min-width:220px; font-weight:700; font-size:13.5px; color:#8a4a10;} .vice-navstev-banner-text small{display:block; font-weight:400; font-size:12px; color:var(--ink-soft); margin-top:2px;} /* ========================================================= HLEDÁNÍ NOVÉHO TERMÍNU PRO EXISTUJÍCÍ OBJEDNÁVKU — banner v diáři (viz reschedSearch a updateReschedSearchBanner v app.js). Appka záměrně použila barvu --plum (stejnou jako panel-tag "Upravit objednávku"), ať je vizuálně spojená s úpravou objednávky a zároveň jasně odlišná od pevné oranžové "Více návštěv" i od zelené "poslední uložená" — appka tu navíc nepulzuje, jde jen o klidný režim listování, ne o čekání na okamžitou akci. ========================================================= */ .resched-search-banner{ background:var(--plum-tint); border:1.5px solid var(--plum); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:20px; padding:12px 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; } .resched-search-banner-icon{font-size:16px; flex-shrink:0;} .resched-search-banner-text{flex:1; min-width:220px; font-weight:700; font-size:13.5px; color:var(--plum-deep);} .resched-search-banner-text small{display:block; font-weight:400; font-size:12px; color:var(--ink-soft); margin-top:2px;} /* appka zesílila zvýraznění (zadání 5.9.2026, druhé kolo: "ještě výraznější") — silnější plný obrys (dřív přerušovaný), přidaný zářící "glow" prstenec a poskakující špendlíková značka v rohu, appka navíc zrychlila pulzování — appka to na malých "tiny" políčkách v týdenním pohledu jinak dřív mohla přehlédnout. Appka na .appt::after sahá jen tady, jinde appka pseudoelement u .appt nepoužívá, není riziko kolize. */ @keyframes viceNavstevPulseAppt{ 0%,100% { box-shadow:0 0 0 0 rgba(255,94,26,.7), 0 0 10px 2px rgba(255,94,26,.5); outline-color:#ff5e1a; } 50% { box-shadow:0 0 0 7px rgba(255,94,26,0), 0 0 18px 5px rgba(255,94,26,.85); outline-color:#ffb020; } } @keyframes viceNavstevBadgePulse{ 0%,100% { transform:scale(1); } 50% { transform:scale(1.35); } } .appt.vice-navstev-hl{ outline:4px solid #ff5e1a; outline-offset:1px; animation:viceNavstevPulseAppt 1.1s ease-in-out infinite; z-index:6; } .appt.vice-navstev-hl::after{ content:"📍"; position:absolute; top:1px; right:1px; font-size:13px; line-height:1; filter:drop-shadow(0 1px 1px rgba(0,0,0,.5)); animation:viceNavstevBadgePulse 1.1s ease-in-out infinite; } /* Upozornění v panelu nové objednávky, že jde o navazující termín v rozjeté sekvenci "Více návštěv" (viz renderNewApptForm) — stejná pevná barva jako banner/zvýraznění výš. */ .vn-hint{ background:#fff4e0; border:1px solid #c94914; border-radius:9px; color:#8a4a10; font-size:12.5px; font-weight:700; padding:8px 12px; margin-bottom:10px; } .checklist-polozky-list{display:flex; flex-direction:column; gap:6px; margin-bottom:6px;} .checklist-polozka-row{display:grid; grid-template-columns:1fr 28px; gap:8px; align-items:center;} .checklist-polozka-row input{border:1px solid var(--line); border-radius:7px; padding:6px 8px; font-size:12.5px;} .checklist-typ-fields{gap:10px; margin-bottom:6px;} /* ========================================================= RESPONZIVNÍ / MOBILNÍ ZOBRAZENÍ (bod 9 zadání) — appka od šířky ~860px dolů schová postranní menu do vysouvací zásuvky (hamburger tlačítko vlevo nahoře), formulář nové objednávky/čekací listiny naskládá pod sebe místo dvou sloupců vedle sebe a detail objednávky (na desktopu úzký sloupec vedle diáře) se otevírá jako plnohodnotný překryv. Appka záměrně NEmění pixelovou mřížku dne/týdne (min-width + .grid-scroll) — na té je postavený i přesun objednávky tažením (bod 4 balíku), takže appka radši nechala její vodorovné posouvání beze změny, stejně jako appka dělá už dnes při zúženém okně na desktopu, než aby riskovala rozbití přesných výpočtů pozice bublin objednávek. ========================================================= */ /* ========================================================= NÁPOVĚDA (4.9.2026) — kapitoly jako vnořené
(viz index.html, "logické větvení": kapitola -> sekce), seznam kapitol vlevo a hypertextové vyhledávání appka postaví za běhu v public/app.js (initNapoveda / hledatVNapovede). ========================================================= */ .napoveda-search-wrap{position:relative; max-width:520px; margin-bottom:20px;} .napoveda-search{width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 14px; font-size:14px; background:#fff;} .napoveda-search:focus{outline:none; border-color:var(--plum);} .napoveda-search-results{position:absolute; left:0; right:0; top:100%; margin-top:6px; background:#fff; border-radius:10px; box-shadow:var(--shadow-lift); max-height:360px; overflow-y:auto; z-index:40;} .napoveda-search-item{display:block; padding:10px 14px; cursor:pointer; border-bottom:1px solid var(--line); text-decoration:none; color:inherit;} .napoveda-search-item:last-child{border-bottom:none;} .napoveda-search-item:hover{background:var(--plum-tint);} .napoveda-search-item .nsi-kapitola{display:block; font-weight:700; font-size:13px; color:var(--ink);} .napoveda-search-item .nsi-snippet{display:block; font-size:12px; color:var(--ink-faint); margin-top:2px;} .napoveda-search-empty{padding:12px 14px; font-size:12.5px; color:var(--ink-faint);} .napoveda-layout{display:flex; gap:28px; align-items:flex-start;} .napoveda-toc{width:220px; flex-shrink:0; position:sticky; top:26px; display:flex; flex-direction:column; gap:1px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:8px; box-shadow:var(--shadow); max-height:calc(100vh - 52px); overflow-y:auto;} .napoveda-toc a{display:block; padding:8px 10px; border-radius:8px; color:var(--ink-soft); text-decoration:none; font-size:13px; font-weight:600; cursor:pointer;} .napoveda-toc a:hover{background:var(--plum-tint); color:var(--ink);} .napoveda-toc a.sub{padding-left:22px; font-weight:500; font-size:12.5px; color:var(--ink-faint);} .napoveda-content{flex:1; min-width:0; display:flex; flex-direction:column; gap:12px;} details.napoveda-kapitola{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);} details.napoveda-kapitola summary h3{display:inline; font-size:16px;} details.napoveda-kapitola > summary{cursor:pointer; list-style:none;} details.napoveda-kapitola > summary::-webkit-details-marker{display:none;} details.napoveda-sekce{margin:10px 0 0 4px; padding:10px 14px; background:var(--bg); border-radius:var(--radius-sm); border:1px solid var(--line);} details.napoveda-sekce summary{cursor:pointer; list-style:none;} details.napoveda-sekce summary::-webkit-details-marker{display:none;} details.napoveda-sekce summary h4{display:inline; font-size:13.5px; color:var(--ink);} details.napoveda-sekce p, details.napoveda-kapitola > p{font-size:13px; color:var(--ink-soft); line-height:1.6; margin:8px 0 2px;} .napoveda-hit{animation:napovedaZvyrazneni 1.6s ease;} @keyframes napovedaZvyrazneni{ 0%{background:var(--plum-tint);} 100%{background:transparent;} } .hamburger-btn{display:none; position:fixed; top:14px; left:14px; z-index:65; width:42px; height:42px; border-radius:11px; border:none; background:var(--plum-deep); color:#fff; font-size:19px; align-items:center; justify-content:center; box-shadow:var(--shadow-lift); cursor:pointer;} .sidebar-backdrop{display:none; position:fixed; inset:0; background:rgba(20,16,22,.45); z-index:59;} @media (max-width: 860px){ .hamburger-btn{display:flex;} .sidebar{ position:fixed; left:0; top:0; z-index:64; transform:translateX(-100%); box-shadow:12px 0 32px rgba(20,16,22,.3); } .sidebar.open{ transform:translateX(0); } .sidebar-backdrop.open{ display:block; } .main{ padding:70px 14px 50px; } /* formulář nové objednávky / čekací listiny (sdílí stejné třídy) — místo dvou úzkých sloupců appka naskládá pole a "Preference termínu" pod sebe */ .new-appt-grid{ flex-direction:column; } .new-appt-prefs{ width:auto; } /* detail objednávky z denního pohledu — na desktopu úzký sloupec vedle diáře, na mobilu appka ho radši ukáže jako téměř celoobrazovkový překryv, ať se do něj vejde čitelně */ .detail-inline{ position:fixed; top:0; right:0; height:100%; width:0; z-index:39; box-shadow:-12px 0 32px rgba(43,39,48,.2); } .detail-inline.open{ width:92vw; max-width:420px; } .detail-inline-inner{ width:100%; } /* denní pohled: poznámky ke dni appka na mobilu radši ukáže POD mřížkou než vedle ní — .day-notes-panel má min-width:210px, což by na úzké obrazovce mřížce s objednávkami nechalo jen zlomek místa (mřížka sama se dál vodorovně posouvá stejně jako dřív, jen teď má na to celou šířku obrazovky, ne jen zbytek vedle poznámek) */ .day-layout{ flex-direction:column; } .day-notes-panel{ max-width:none; border-left:none; border-top:1px solid var(--line); } /* husté vícesloupcové řádky v Nastavení (ordinační doba, kategorie výkonů, kapacitní pásma…) appka nepřestavovala na jednosloupcové — bylo by to zásah do desítek řádků appky navíc. Místo toho appka jejich kartu/tabulku nechá appka vodorovně posouvat (stejný bezpečný princip jako u mřížky dne/týdne výše), ať se popisky nezalamují do nečitelného zmatku a appka nic nezakryje ani neztratí. */ .settings-card{ overflow-x:auto; } .settings-row,.proc-row,.rozvrh-blok-row,.proc-varianta-row{ min-width:520px; } .filter-row,.search-filter-row{ gap:10px; } /* čekací listina a report — tabulka appky dostane pevnou minimální šířku, ať se sloupce nezmáčknou do nečitelna; .table-scroll (viz výš) kolem ní zajistí vodorovné posouvání */ .report-table{ min-width:640px; } /* nápověda — na úzkém displeji appka dá seznam kapitol nad obsah (ne vedle) a přestane ho lepit nahoře (position:sticky), ať appka nezabírá zbytečně místo nad obsahem appky. */ .napoveda-layout{ flex-direction:column; } .napoveda-toc{ width:100%; position:static; max-height:none; } } /* ===== 9.9.2026 (čtvrté kolo) — Zobrazení zpět/dále, náhled dne z nabídky termínů, ===== */ /* ===== zvýraznění poslední uložené objednávky ===== */ .view-hist-group{display:flex; gap:6px;} .view-hist-group .btn-outline{padding:9px 12px; font-size:12.5px;} .btn-outline:disabled, .btn:disabled{opacity:.4; cursor:default; pointer-events:none;} /* Ikonka oka u nabízeného termínu ve vyhledávání volných termínů — otevře náhled dne (viz otevritNahledDne v app.js). Appka ji dala jako samostatné tlačítko uvnitř .slot-item, ať klik na ni appka nepošle rovnou skrz na výběr termínu (event.stopPropagation). */ .slot-eye-btn{ border:1px solid var(--line); background:#fff; border-radius:7px; width:26px; height:26px; font-size:13px; display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; margin-left:6px; } .slot-eye-btn:hover{background:var(--plum-tint); border-color:var(--plum);} /* Náhled dne — přeplavující box uprostřed obrazovky, appka ho staví NAD formulář nové objednávky (vyšší z-index než .overlay/.panel), zavírá se křížkem, uvnitř znovu používá stejný hover/klik mechanismus jako hlavní mřížka (computeSnappedTime, handleGridHover) — jen klik místo otevření nové objednávky appka vyplní čas do té, co je zrovna rozjetá (viz handleNahledDneClick). */ .nahled-dne-overlay{ position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center; background:rgba(43,39,48,.35); padding:20px; } .nahled-dne-overlay.open{display:flex;} .nahled-dne-box{ /* Appka sem doplnila position:relative (18.9.2026, kolo 36) — appka si všimla, že bez téhle vlastnosti appka kotví .panel-close uvnitř k CELÉ obrazovce (nejbližší nastavený kontext pro absolutně umístěné potomky je bez ní appce .nahled-dne-overlay, protože ten je position:fixed), ne k tomuhle menšímu boxu — appka tak křížek dřív posouvala do rohu obrazovky, ne do rohu vlastního náhledu. */ position:relative; background:#fff; border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.28); width:340px; max-height:86vh; display:flex; flex-direction:column; overflow:hidden; } /* Náhled CELÉHO TÝDNE (kolo 35, 17.9.2026) — appka box jen rozšířila (.wide) a uvnitř znovu použila stejné třídy jako hlavní týdenní pohled (.cal-head/.cal-body/.col-label/.day-col…, viz renderNahledTydne v app.js), jen appka navíc přidala vlastní zvýraznění nalezeného termínu (.nahled-tyden-hl níž). */ .nahled-dne-box.wide{ width:700px; max-width:94vw; } .nahled-dne-head{ display:flex; align-items:center; justify-content:center; gap:10px; padding:14px 44px 14px 16px; border-bottom:1px solid var(--line); font-weight:700; font-size:14.5px; flex-shrink:0; } /* Šipky předchozí/další týden v hlavičce náhledu (18.9.2026, kolo 36 zadání) — appka znovu použila zavedenou třídu .nav-arrow (stejný vzhled jako u šipek "Předchozí/Další pacient" v detailu objednávky). Appka ovládání navíc zdvojila klávesami ←/→ (viz globální ArrowLeft/ArrowRight handler v app.js). */ .nahled-tyden-arrow{flex-shrink:0;} .nahled-dne-head span{text-align:center;} .nahled-dne-scroll{overflow-y:auto; padding:10px 12px 16px;} .nahled-tyden-grid .day-col{cursor:crosshair;} /* appka tímhle zvýrazní přímo nalezený termín, se kterým appka náhled otevřela — výrazný pulzující rámeček nad vším ostatním (appts, oběd…), i kdyby appka náhodou padla přes existující objednávku nebo rezervaci. Bez pointer-events, ať klik pořád projde na .day-col pod ním — appka i tady dovolí potvrdit termín kliknutím přímo na zvýrazněné místo. */ .nahled-tyden-hl{ position:absolute; left:1px; right:1px; z-index:8; pointer-events:none; box-sizing:border-box; background:rgba(232,164,0,.24); border:3px solid #e8a400; border-radius:7px; display:flex; align-items:center; justify-content:center; overflow:hidden; animation:nahledTydenHlPulse 1.2s ease-in-out infinite; } .nahled-tyden-hl span{ font-size:10.5px; font-weight:800; color:#6b4e00; background:rgba(255,255,255,.92); padding:1px 5px; border-radius:5px; white-space:nowrap; } @keyframes nahledTydenHlPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(232,164,0,.55); } 50%{ box-shadow:0 0 0 6px rgba(232,164,0,0); } } /* Mimořádné zvýraznění POSLEDNÍ uložené objednávky — jen do prvního dalšího přechodu na jiné zobrazení (viz posledniVytvorenaId/__justSavedHighlightArmed v app.js). Zeleně, ať appka vizuálně odlišila od oranžové sekvence "Více návštěv" (.vice-navstev-hl) — jiný důvod zvýraznění, jiná barva. */ .appt.posledni-vytvorena-hl{ outline:4px solid #1f9d5c; outline-offset:1px; animation:posledniVytvorenaPulse 1.3s ease-in-out infinite; z-index:6; } .appt.posledni-vytvorena-hl::after{ content:"✓"; position:absolute; top:1px; right:1px; font-size:13px; line-height:1; color:#1f9d5c; font-weight:900; background:#fff; border-radius:50%; width:15px; height:15px; display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 1px 1px rgba(0,0,0,.3)); } @keyframes posledniVytvorenaPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(31,157,92,.55); } 50%{ box-shadow:0 0 0 5px rgba(31,157,92,0); } } /* ========================================================= KONTEXTOVÁ NÁPOVĚDA (kolo 49) — režim otazníku (klávesa "h", viz app.js) a okno s tématy ========================================================= */ body.napoveda-rezim, body.napoveda-rezim *{ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cpath d='M3 2 L3 28 L9.5 22 L14 32 L18.5 30 L14 20.5 L23 20.5 Z' fill='%23111' stroke='%23fff' stroke-width='2' stroke-linejoin='round'/%3E%3Ccircle cx='41' cy='41' r='21' fill='%236b4c7a' stroke='%23fff' stroke-width='3'/%3E%3Ctext x='41' y='52' text-anchor='middle' font-family='Arial,Helvetica,sans-serif' font-size='31' font-weight='700' fill='%23fff'%3E%3F%3C/text%3E%3C/svg%3E") 3 2, help !important; } .napoveda-kontext-pokyn{position:fixed; top:14px; left:50%; transform:translateX(-50%) translateY(-12px); z-index:120; background:var(--plum-deep); color:#fff; padding:10px 18px; border-radius:999px; font-size:14px; font-weight:700; box-shadow:var(--shadow-lift); display:flex; align-items:center; gap:10px; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; white-space:nowrap;} .napoveda-kontext-pokyn.show{opacity:1; transform:translateX(-50%) translateY(0);} .napoveda-kontext-pokyn .nkp-otaznik{display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#fff; color:var(--plum-deep); font-size:14px;} .napoveda-kontext-pokyn .nkp-zrusit{font-weight:500; font-size:12px; opacity:.75; margin-left:4px;} .napoveda-kontext-ramecek{position:fixed; z-index:115; pointer-events:none; display:none; border:2px dashed var(--plum); border-radius:8px; background:rgba(107,76,122,.07); box-sizing:border-box;} .napoveda-kontext-ramecek span{position:absolute; left:-2px; top:-24px; background:var(--plum); color:#fff; font-size:11.5px; font-weight:700; padding:2px 8px; border-radius:6px; white-space:nowrap; max-width:calc(100% - 12px); overflow:hidden; text-overflow:ellipsis;} .napoveda-kontext-ramecek.stitek-uvnitr span{left:6px; top:6px;} .napoveda-kontext-overlay{position:fixed; inset:0; z-index:110; background:rgba(43,39,48,.35); display:none; align-items:flex-start; justify-content:center; padding:6vh 16px 16px; overflow-y:auto;} .napoveda-kontext-overlay.open{display:flex;} .napoveda-kontext-okno{position:relative; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lift); width:600px; max-width:100%; padding:24px 26px 18px;} .napoveda-kontext-okno h2{font-size:20px; margin:2px 40px 4px 0;} .napoveda-kontext-okno .nk-stitek{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--plum);} .napoveda-kontext-okno .nk-sub{font-size:13px; color:var(--ink-soft); margin-bottom:14px;} .napoveda-kontext-okno .nk-souvisejici{font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin:16px 0 6px;} .nk-tema{border:1px solid var(--line); border-radius:10px; margin-bottom:8px; background:#fff;} .nk-tema[open]{border-color:var(--plum); background:var(--plum-tint);} .nk-tema summary{cursor:pointer; padding:10px 14px; display:flex; flex-direction:column; gap:1px; list-style:none;} .nk-tema summary::-webkit-details-marker{display:none;} .nk-tema-nadpis{font-weight:700; font-size:14px;} .nk-tema-kapitola{font-size:11.5px; color:var(--ink-faint);} .nk-tema-obsah{padding:0 14px 12px; font-size:13.5px; line-height:1.55;} .nk-tema-obsah p{margin:0 0 8px;} .nk-tema-obsah .nk-podsekce{margin:0 0 3px;} .nk-tema-obsah a{color:var(--plum-deep); cursor:pointer; text-decoration:underline;} .nk-otevrit{margin-top:4px; font-size:12.5px; padding:6px 12px;} .nk-pata{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-faint); flex-wrap:wrap;} .nk-pata .btn-outline{font-size:12.5px; padding:6px 12px;} /* ===== Objednávání z webu (kolo 51) ===== */ .web-banner{background:#eaf1f8; border:1.5px solid #8fb0cf; border-radius:12px; margin:0 0 12px;} .web-banner-head{display:flex; align-items:center; gap:10px; padding:12px 16px; cursor:pointer;} .web-banner-icon{font-size:16px; flex-shrink:0;} .web-banner-summary{font-weight:700; font-size:13.5px; color:#2f5d86; flex:1; min-width:0;} .web-banner-toggle{font-size:12px; font-weight:700; color:#2f5d86; flex-shrink:0;} .web-banner-body{padding:0 16px 14px; display:flex; flex-direction:column; gap:10px;} .web-banner-item{background:#fff; border:1px solid #b9cfe3; border-radius:10px; padding:10px 14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;} .web-banner-item-main{flex:1; min-width:180px; cursor:pointer;} .web-banner-item-name{font-weight:700; font-size:13px; color:var(--ink);} .web-banner-item-meta{font-weight:400; font-size:11.5px; color:var(--ink-soft); margin-top:2px;} .akutni-banner{background:#a83232; color:#fff; border-radius:12px; margin:0 0 12px; box-shadow:0 0 0 3px rgba(168,50,50,.25); animation:akutniPulz 2s ease-in-out infinite;} @keyframes akutniPulz{0%,100%{box-shadow:0 0 0 3px rgba(168,50,50,.25);}50%{box-shadow:0 0 0 7px rgba(168,50,50,.12);}} @media (prefers-reduced-motion: reduce){.akutni-banner{animation:none;}} .akutni-banner-head{display:flex; align-items:center; gap:10px; padding:12px 16px 8px; font-weight:800; font-size:14.5px; letter-spacing:.02em;} .akutni-banner-icon{font-size:20px;} .akutni-banner-body{padding:0 12px 12px; display:flex; flex-direction:column; gap:8px;} .akutni-item{background:#fff; color:var(--ink); border-radius:10px; padding:10px 14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;} .akutni-item-main{flex:1; min-width:200px;} .akutni-item-name{font-weight:700; font-size:13.5px;} .akutni-item-name a{color:#a83232;} .akutni-item-popis{font-size:13px; margin:3px 0; white-space:pre-wrap;} .akutni-item-meta{font-size:11.5px; color:var(--ink-soft);} .akutni-overlay{position:fixed; inset:0; background:rgba(40,10,10,.55); z-index:9999; display:flex; align-items:center; justify-content:center; padding:16px;} .akutni-overlay-box{background:#fff; border-radius:16px; border:3px solid #a83232; max-width:640px; width:100%; max-height:85vh; overflow:auto; padding:20px 22px;} .akutni-overlay-title{font-weight:800; font-size:18px; color:#a83232; margin-bottom:12px;} .akutni-overlay-list{display:flex; flex-direction:column; gap:8px; margin-bottom:6px;} .akutni-overlay-list .akutni-item{border:1px solid #e3c3c3;} .web-mark{font-size:10px; margin-right:3px;} .web-detail-box{font-size:12.5px; background:#eaf1f8; border:1px solid #b9cfe3; border-radius:8px; padding:8px 10px; margin-bottom:10px; line-height:1.5;} /* ===== Zámky nastavení dentální hygieny (kolo 63) ===== */ .hyg-zamek-radek{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:6px;} .hyg-zamek-radek > label{margin-bottom:0 !important;} .hyg-zamek{display:inline-flex; align-items:center; gap:6px; font-weight:600;} .hyg-zamek-lekar{display:inline-flex !important; align-items:center; gap:4px; font-size:11.5px !important; font-weight:600 !important; color:var(--ink-soft) !important; margin:0 !important; cursor:pointer; text-transform:none;} .hyg-zamek-lekar input{margin:0;} .hyg-zamek-info{display:none; font-size:11.5px; font-weight:700; color:var(--amber, #b7791f); white-space:nowrap;} html[data-role="hygiena"] .hyg-zamek-info.zamceno{display:inline;} .hyg-zamceno-pole{opacity:.6; pointer-events:none;}