/*
  LIPM CRM – jednani.css, verze v01 (27. 10. 2026) – vzhled obrazovky Obchod → Jednání (jednani.js v01)
  Okno se zápisem používá vzhled diktování z hlas.css (hl-…); tady jen doplňky.
*/

/* ---------- seznam ---------- */
.j-hlava-tl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.j-skupina-plan { color: var(--lipm-tmava, #007A75); }
.j-radek { display: flex; gap: 14px; align-items: flex-start; padding: 12px 4px; border-top: 1px solid var(--okraj, #E3E8EC); cursor: pointer; }
.j-radek:hover { background: rgba(0, 161, 154, .04); }
.j-kdy { width: 74px; flex: none; font-size: 12px; color: var(--text3, #7A8691); padding-top: 3px; line-height: 1.35; }
.j-kdy span { display: block; }
.j-hlavni { min-width: 0; flex: 1; }
.j-predmet { font-weight: 600; font-size: 14.5px; color: var(--text, #1F2A33); text-decoration: none; overflow-wrap: anywhere; }
.j-predmet:hover { text-decoration: underline; }
.j-znacka { margin-left: 8px; font-size: 12px; color: var(--text3, #7A8691); white-space: nowrap; }
.j-text { font-size: 13px; color: #3D4752; margin-top: 3px; overflow-wrap: anywhere; }
.j-akce { flex: none; align-self: center; }
.j-tl { white-space: nowrap; }
.j-plan .j-kdy { color: var(--lipm-tmava, #007A75); font-weight: 600; }
.j-pozde .j-kdy { color: #C2410C; }
.j-pozde-text { margin-top: 4px; font-size: 12.5px; color: #C2410C; font-weight: 500; }
.j-zruseno .j-predmet, .j-zruseno .j-text { color: var(--text3, #7A8691); text-decoration: line-through; }
.j-pracuji { color: #B45309; }

/* ---------- karta ---------- */
.j-detail-hlava { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.j-tlacitka { display: flex; gap: 8px; flex-wrap: wrap; }
.j-dok-radek { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 4px 0 6px; }
.j-dok-radek a.tlacitko { text-decoration: none; display: inline-flex; align-items: center; }
.j-dok-info { font-size: 12.5px; padding-top: 2px; }
.j-dok-stav { padding: 8px 10px; margin-bottom: 8px; border-radius: 8px; background: #FFF7ED; font-size: 13px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.j-dok-chyba { background: #FEF2F2; color: #B91C1C; }
.j-blok { font-size: 13.5px; line-height: 1.5; color: #2B3640; overflow-wrap: anywhere; }
.j-zapis h3 { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--lipm-tmava, #007A75); margin: 14px 0 6px; }
.j-zapis h3:first-child { margin-top: 2px; }
.j-zapis ul { margin: 0 0 6px; padding-left: 20px; }
.j-zapis li { margin: 2px 0; }
.j-zapis p { margin: 4px 0; }
.j-tabulka { width: 100%; border-collapse: collapse; font-size: 13px; margin: 4px 0 8px; }
.j-tabulka th { background: #00A19A; color: #FFFFFF; text-align: left; font-weight: 600; padding: 5px 8px; }
.j-tabulka td { border: 1px solid var(--okraj, #E3E8EC); padding: 5px 8px; vertical-align: top; }
.j-interni { background: #FFFBEB; border-left: 3px solid #F59E0B; padding: 8px 10px; border-radius: 4px; }
.j-diktat summary { cursor: pointer; color: var(--lipm-tmava, #007A75); font-weight: 500; }
.j-diktat div { margin-top: 8px; font-size: 13px; color: #3D4752; }

/* ---------- okno zápisu: fotky ---------- */
.j-diktat-pole { min-height: 150px; }
.j-fotky-radek { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.j-nahledy { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.j-nahled { position: relative; width: 84px; height: 84px; border-radius: 8px; overflow: hidden; border: 1px solid var(--okraj, #E3E8EC); }
.j-nahled img { width: 100%; height: 100%; object-fit: cover; display: block; }
.j-nahled-pryc { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0, 0, 0, .6); color: #FFFFFF; font-size: 16px; line-height: 22px; cursor: pointer; padding: 0; }

/* ---------- mobil ---------- */
@media (max-width: 640px) {
  .j-radek { gap: 10px; flex-wrap: wrap; }
  .j-kdy { width: 58px; }
  .j-akce { width: 100%; padding-left: 68px; }
  .j-hlava-tl .u-novy { flex: 1; }
  .j-tlacitka, .j-dok-radek { width: 100%; }
  .j-tlacitka .tlacitko, .j-dok-radek .tlacitko { flex: 1 1 auto; justify-content: center; text-align: center; }
  .j-nahled { width: 72px; height: 72px; }
}