/* Ballare – heti órarend-táblázat stílusai.
   Az admin előnézete és a nyilvános /orarend.html is ezt használja (a megjelenítő: js/orarend-grid.js).
   Saját színeket használ, így az admin és a nyilvános oldal változóitól független. */

.tt-empty { margin: 0; padding: 18px; color: #827777; }

/* A táblázat keretes, oldalra gördíthető doboza; a szélső árnyék jelzi, hogy van még tovább */
.tt-box { position: relative; }
.tt-box::after {
  content: ""; position: absolute; top: 1px; right: 1px; bottom: 1px; width: 36px; border-radius: 0 9px 9px 0;
  background: linear-gradient(to right, rgba(89, 73, 73, 0), rgba(89, 73, 73, .28));
  pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 5;
}
.tt-box.can-right::after { opacity: 1; }
.tt-hint { margin: 0 0 8px; font-size: 14px; line-height: 1.3; color: #827777; text-align: center; transition: opacity .35s; }
.tt-hint.is-faded { opacity: 0; }

.tt-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #d9cdcd; border-radius: 10px; background: #fff; }
.tt { display: grid; }
.tt-corner { background: #594949; }
.tt-head { padding: 9px 4px; background: #594949; color: #fff; text-align: center; font-weight: 700; font-size: 15px; line-height: 1.3; border-left: 1px solid rgba(255, 255, 255, .18); }
.tt-blocklabel { background: #faf7f7; border-top: 1px solid #e3dcdc; }
.tt-blockcell { display: flex; flex-direction: column; gap: 4px; padding: 6px; border-top: 1px solid #e3dcdc; border-left: 1px solid #e3dcdc; background: #faf7f7; min-width: 0; }
.tt-blk { padding: 5px 7px; border-radius: 6px; background: #ece3ec; border-left: 3px solid #b48bb5; font-size: 13px; line-height: 1.3; overflow-wrap: anywhere; color: #4a3550; }
.tt-blk--kis { background: #f7e7dc; border-left-color: #c4703f; }
.tt-blk--nagy { background: #ead9ee; border-left-color: #843f8f; }
.tt-blk__room { display: block; font-size: 11px; color: #827777; }
.tt-axis { position: relative; border-top: 1px solid #e3dcdc; background: #fff; }
.tt-hour { position: absolute; right: 6px; padding-top: 3px; font-size: 12px; line-height: 1; color: #827777; }
.tt-col { position: relative; min-width: 0; border-top: 1px solid #e3dcdc; border-left: 1px solid #e3dcdc; }
.tt-line { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid #ece6e6; }
.tt-gap { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, #f6f2f2 0, #f6f2f2 6px, #fff 6px, #fff 12px); border-top: 1px solid #e3dcdc; border-bottom: 1px solid #e3dcdc; }
.tt-hour--gap { display: flex; align-items: center; justify-content: flex-end; padding-top: 0; font-size: 14px; }
.tt-ev { position: absolute; box-sizing: border-box; padding: 1px; }
.tt-ev__in { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; overflow: hidden; padding: 4px 6px; border-radius: 6px; border-left: 4px solid; font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; text-align: left; }
.tt-ev__in > * { flex: 0 0 auto; }
/* az óra jellege (kurzus / nyitott): a doboz jobb alsó sarkában; a szöveg mérete a dobozhoz igazodik, így a terem és a jelleg együtt is elfér */
.tt-ev__kind { margin-top: auto; align-self: flex-end; padding-top: 2px; font-size: .78em; font-weight: 600; line-height: 1.1; opacity: .85; }
.tt-blk { display: flex; flex-direction: column; }
.tt-blk__kind { align-self: flex-end; font-size: 11px; font-weight: 600; color: #827777; }
.tt-ev__meta { display: block; font-size: .85em; font-weight: 700; opacity: .9; }
.tt-ev__name { display: block; font-weight: 600; }
.tt--noroom .tt-ev__meta { font-size: .95em; }
.tt-ev--nagy .tt-ev__in { background: #ead9ee; border-color: #843f8f; color: #4a1f52; }
.tt-ev--kis .tt-ev__in { background: #f7e0d4; border-color: #c4703f; color: #6a3416; }
.tt-ev--none .tt-ev__in { background: #e7e2e2; border-color: #7d7070; color: #3c3232; }

/* Oldalra gördítéskor az időtengely a bal szélen marad, hogy mindig látszódjon, melyik sor melyik időpont */
.tt-corner, .tt-axis, .tt-blocklabel { position: sticky; left: 0; z-index: 3; }
.tt-axis { background: #fff; }
.tt-box.is-scrolled .tt-corner, .tt-box.is-scrolled .tt-axis, .tt-box.is-scrolled .tt-blocklabel { box-shadow: 3px 0 5px -2px rgba(0, 0, 0, .22); }

.tt-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 1.3; color: #827777; }
.tt-legend li { display: inline-flex; align-items: center; gap: 7px; }
.tt-legend .tt-legend__kind { display: block; flex-basis: 100%; }
.tt-swatch { width: 14px; height: 14px; border-radius: 4px; border-left: 4px solid; }
.tt-swatch--nagy { background: #ead9ee; border-color: #843f8f; }
.tt-swatch--kis { background: #f7e0d4; border-color: #c4703f; }
.tt-swatch--none { background: #e7e2e2; border-color: #7d7070; }

/* --- a nyilvános Órarend oldal ------------------------------------------ */
.wrap.wrap--wide { width: min(960px, 100%); padding: 0 10px; }
.tt-mount { margin: 28px auto 0; }
.tt-mount:empty { margin: 0; }
/* ha a táblázat elkészült, a szöveges lista csak a képernyőolvasóknak és a keresőknek marad (vizuálisan rejtett) */
.tt-ready #orarend-lista { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
@media (max-width: 640px) {
  .wrap.wrap--wide { padding: 0; }
  .wrap--wide .page-title { padding-left: 12px; padding-right: 12px; }
  .wrap--wide .tt-mount { margin-top: 20px; }
  .wrap--wide .tt-wrap { border-radius: 0; border-left: 0; border-right: 0; }
  .wrap--wide .tt-box::after { border-radius: 0; }
  .wrap--wide .tt-hint, .wrap--wide .tt-legend { padding: 0 12px; }
}