/*
 * OFFICE — komponenty pro pozdravy + dlaždice (components.css)
 * Staví na tokens.css (musí být načteno první). Reuse-first: třídy
 * jsou nové (office-*), nekolidují s existujícími .tile/.hi v
 * /var/www/it-enterprise.cz/app/index.html — lze zapojit vedle sebe
 * a stávající styly postupně nahradit (viz INTEGRATION.md).
 */

.office-hero{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg);
  padding:2rem 1.6rem 1.8rem;
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.86)),
    var(--arc);
  background-blend-mode:normal;
}
/* FIX 2026-07-08 (office phase1 integration): puvodni pravidlo michalo selector
   a @media do jednoho carkou-oddeleneho seznamu ("`sel, @media(...){}`"), coz je
   neplatne CSS - cely selektor list se zahodi a tmavy prekryv .office-hero se
   nikdy neaplikoval (overeno headless screenshotem, viz office-phase1 STATE).
   Rozdeleno na dve platna pravidla se stejnym efektem. */
:root[data-theme="dark"] .office-hero{
  background: linear-gradient(180deg, rgba(36,25,38,.82), rgba(36,25,38,.82)), var(--arc);
}
@media (prefers-color-scheme:dark){
  .office-hero{
    background: linear-gradient(180deg, rgba(36,25,38,.82), rgba(36,25,38,.82)), var(--arc);
  }
}
.office-hero::before{
  /* tenký "obzor" — echo loga, signature prvek se line přenáší do hero */
  content:""; position:absolute; left:-10%; right:-10%; bottom:-2px; height:3px;
  background:var(--arc); opacity:.9; filter:blur(.2px);
  animation: office-rise .9s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes office-rise{ from{ transform:translateY(14px); opacity:0 } to{ transform:translateY(0); opacity:.9 } }
@media (prefers-reduced-motion: reduce){ .office-hero::before{ animation:none } }

.office-greet-time{
  margin:0 0 .15rem; font-family:var(--font-display); font-weight:650; letter-spacing:-.01em;
  font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem); color:var(--ink);
  animation: office-fade-up .55s ease both;
}
.office-greet-welcome{
  margin:0; color:var(--ink-soft); font-size:1rem; font-weight:500;
  animation: office-fade-up .55s .08s ease both;
}
@keyframes office-fade-up{ from{ opacity:0; transform:translateY(6px) } to{ opacity:1; transform:translateY(0) } }
@media (prefers-reduced-motion: reduce){ .office-greet-time,.office-greet-welcome{ animation:none } }

.office-bday{
  position:relative; margin-top:.9rem; padding:.85rem 1.1rem; border-radius:var(--r-md);
  background:var(--panel); border:1px solid var(--line); color:var(--ink);
  font-weight:600; box-shadow:var(--shadow); overflow:visible;
}
.office-confetti-piece{
  position:absolute; top:-6px; width:7px; height:11px; border-radius:2px;
  animation-name: office-confetti-fall; animation-timing-function: cubic-bezier(.3,.6,.4,1); animation-fill-mode: forwards;
  pointer-events:none;
}
@keyframes office-confetti-fall{
  0%{ transform:translateY(0) rotate(0deg); opacity:1 }
  100%{ transform:translateY(90px) rotate(280deg); opacity:0 }
}

/* Dlaždice — reskin stávajícího .tile vzoru, teplejší, se signature podtržením */
.office-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:.85rem; }
@media (max-width:640px){ .office-tiles{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:380px){ .office-tiles{ grid-template-columns:1fr } }
.office-tile{
  /* 2026-08-05, chief: „zmen vsechny dlazdice na format ze ikonka a za ni nazev
     do jedne radky a popis do druhe". Mrizka misto sloupce — HTML se nemeni,
     plati to na vsechny dlazdice naraz. */
  position:relative; display:grid;
  grid-template-columns:auto 1fr; grid-template-rows:auto auto;
  column-gap:.55rem; row-gap:.2rem; align-items:center;
  padding:.9rem 1rem .9rem; min-height:82px; text-decoration:none; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow); transition:transform .16s ease, border-color .16s ease;
}
.office-tile::after{
  content:""; position:absolute; left:1rem; right:1rem; bottom:0; height:2px; border-radius:2px;
  background:var(--arc); transform:scaleX(0); transform-origin:left; transition:transform .22s ease;
}
.office-tile:hover{ transform:translateY(-2px); border-color:transparent; }
.office-tile:hover::after{ transform:scaleX(1); }
.office-tile:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }
.office-tile .ti{ grid-column:1; grid-row:1; font-size:1.45rem; line-height:1 }
.office-tile .tl{ grid-column:2; grid-row:1; font-family:var(--font-display); font-weight:650;
  font-size:1rem; padding-inline-end:3.4rem; /* aby dlouhy nazev nezajel pod odznak LIVE/SOON */ }
.office-tile .ts{ grid-column:1 / -1; grid-row:2; font-size:.78rem; color:var(--ink-soft); line-height:1.3 }
.office-badge{
  position:absolute; top:.65rem; inset-inline-end:.65rem; font-size:.62rem; font-weight:700;
  padding:.15rem .45rem; border-radius:99px; letter-spacing:.03em;
}
.office-badge.live{ background:var(--sage-bg); color:var(--sage) }
.office-badge.soon{ background:color-mix(in srgb, var(--honey) 18%, transparent); color:var(--honey) }

/* Asistent panel (2026-07-08, office chat+asistent přidání) — inline formulář,
   otevírá se pod dlaždicí "Asistent" (tap-to-expand, ne navigace pryč).
   Reuse tokens, žádné nové barvy. */
.office-panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow); padding:1rem 1rem 1.1rem; margin:0 0 1rem;
}
.office-panel h2{
  font-family:var(--font-display); font-size:1rem; font-weight:650; margin:0 0 .3rem; color:var(--ink);
  display:flex; align-items:center; gap:.4rem;
}
.office-panel .op-sub{ font-size:.8rem; color:var(--ink-soft); margin:0 0 .6rem }
.office-panel textarea{
  width:100%; min-height:74px; resize:vertical; font:inherit; font-size:.88rem;
  padding:.6rem .7rem; border-radius:var(--r-sm); border:1px solid var(--line);
  background:var(--panel-2); color:var(--ink); box-sizing:border-box;
}
.office-panel textarea:focus-visible{ outline:2px solid var(--focus); outline-offset:1px; }
.op-row{ display:flex; gap:.5rem; margin-top:.55rem; flex-wrap:wrap; }
.op-row button{
  font:inherit; font-size:.82rem; font-weight:650; border-radius:99px; border:1px solid transparent;
  padding:.5rem 1rem; cursor:pointer; transition:transform .12s ease, opacity .12s ease;
}
.op-row button:active{ transform:scale(.97); }
.op-row button:disabled{ opacity:.55; cursor:default; }
.op-row button.op-primary{ background:var(--honey); color:#fff; }
.op-row button.op-ghost{ background:var(--panel-2); color:var(--ink); border-color:var(--line); }
.op-attach{ font-size:.74rem; color:var(--ink-soft); margin-top:.4rem; min-height:1em; }
.op-out{ margin-top:.6rem; font-size:.82rem; padding:.55rem .7rem; border-radius:var(--r-sm); display:none; }
.op-out.show{ display:block; }
.op-out.ok{ background:var(--sage-bg); color:var(--sage); }
.op-out.err{ background:color-mix(in srgb, var(--rose) 16%, transparent); color:var(--rose); }
.op-out.busy{ background:var(--panel-2); color:var(--ink-soft); }
.op-gate{ font-size:.82rem; color:var(--ink-soft); }
.op-gate a{ color:var(--honey); font-weight:650; text-decoration:none; }