/* RDP Portal — Office design (kopie tokens.css + components.css, self-contained pro staging) */
/*
 * OFFICE — design tokens (identita 2026-07-08)
 * ------------------------------------------------------------
 * Paleta "Aubergine & Honey" — teplá, přívětivá, ale profesionální.
 * Vědomě NEPOUŽÍVÁ klišé "teplý krém #F4F1EA + serif + terakota" —
 * paleta jde do blush-levandulové (ne žluto-krémové) a jako protiváhu
 * má chladnější šalvějovou, aby nebyla "cukrová". Signature prvek
 * (Horizon Arc, viz greetings.js) nese hlavní odlišnost, ne dekor.
 *
 * Použití: <link rel="stylesheet" href="/app/design/tokens.css"> v
 * office shellu, PŘED stávajícím <style> blokem (proměnné se dají
 * postupně převzít, nic se nerozbije — jde jen o CSS custom properties).
 */

:root{
  /* -- Light (výchozí) ------------------------------------- */
  --ink:        #33202E;  /* hluboká aubergine — primární text, ne černá */
  --ink-soft:   #6B5563;  /* zjemněný text, popisky */
  --paper:      #FCEFF1;  /* blush papír — světlé pozadí (levandulová/růžová, NE žlutý krém) */
  --panel:      #FFFFFF;  /* karty, dlaždice */
  --panel-2:    #FBF7F5;  /* jemně odlišené sekundární plochy */
  --line:       #F0D8DC;  /* vlasové linky, blush tón */
  --honey:      #D98A2B;  /* medová — primární akcent, CTA. Kontrast na papíru NEOVĚŘEN
                              nástrojem — pro drobný text (badge/label) preferuj --honey na
                              --honey-soft podklad, ne přímo na --paper; pro velký text OK. */
  --honey-soft: #F3C878;  /* světlejší medová — hover/glow */
  --rose:       #C85575;  /* prachová růže — sekundární akcent, narozeniny. Kontrast na
                              papíru ověřit nástrojem (axe/Lighthouse) před ostrým nasazením. */
  --sage:       #2F7566;  /* šalvějová — klidná protiváha, "live"/úspěch stavy. Kontrast na
                              papíru ověřit nástrojem před ostrým nasazením. */
  --sage-bg:    #E3F2EE;
  --focus:      #A23D6B;  /* viditelný focus ring */
  --shadow:     0 1px 2px rgba(51,32,46,.06), 0 8px 24px rgba(51,32,46,.08);
  --r-sm: 10px; --r-md: 16px; --r-lg: 22px;
}

@media (prefers-color-scheme: dark){
  :root{
    --ink:        #F5E7EB;
    --ink-soft:   #C6A9B4;
    --paper:      #241926;  /* soumrak — hluboká aubergine, ne GitHub slate/černá */
    --panel:      #2E2030;
    --panel-2:    #362538;
    --line:       #472F42;
    --honey:      #EFB35E;
    --honey-soft: #F6CB86;
    --rose:       #E6889D;
    --sage:       #5FB39F;
    --sage-bg:    #24352F;
    --focus:      #EFB35E;
    --shadow:     0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
  }
}
/* Explicitní přepínač (viewer toggle) MUSÍ mít přednost před system prefers-color-scheme oběma směry */
:root[data-theme="dark"]{
  --ink:#F5E7EB; --ink-soft:#C6A9B4; --paper:#241926; --panel:#2E2030; --panel-2:#362538;
  --line:#472F42; --honey:#EFB35E; --honey-soft:#F6CB86; --rose:#E6889D; --sage:#5FB39F;
  --sage-bg:#24352F; --focus:#EFB35E; --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
  --ink:#33202E; --ink-soft:#6B5563; --paper:#FCEFF1; --panel:#FFFFFF; --panel-2:#FBF7F5;
  --line:#F0D8DC; --honey:#D98A2B; --honey-soft:#F3C878; --rose:#C85575; --sage:#2F7566;
  --sage-bg:#E3F2EE; --focus:#A23D6B; --shadow:0 1px 2px rgba(51,32,46,.06), 0 8px 24px rgba(51,32,46,.08);
}

/* -- Horizon Arc — gradient dle denní doby (signature prvek) --
 * greetings.js nastaví na <html> data-daypart="morning|day|evening|night",
 * což přepne --arc na odpovídající "oblohu". Používá se jako pozadí
 * hero sekce a jako podtržení loga/wordmarku. */
:root{ --arc: var(--arc-day); }
:root[data-daypart="morning"]{ --arc: linear-gradient(100deg,#F6CB86 0%,#E6889D 55%,#C85575 100%); }
:root[data-daypart="day"]    { --arc: linear-gradient(100deg,#D98A2B 0%,#EFB35E 45%,#2F7566 100%); }
:root[data-daypart="evening"]{ --arc: linear-gradient(100deg,#8A4B6B 0%,#C85575 55%,#E6889D 100%); }
:root[data-daypart="night"]  { --arc: linear-gradient(100deg,#241926 0%,#5B3A5F 45%,#8A4B6B 100%); }

/* -- Typografie ------------------------------------------- */
/* Display: Bricolage Grotesque (vlastní, viz font.css) — teplý, současný
 * grotesk s charakterem, VĚDOMĚ ne serif (aby se odlišil od AI-klišé
 * "krém + vysoký kontrast serif"). Použit úsporně: wordmark + pozdrav.
 * Pro cyrilici/hebrejštinu se vlastní řez nenačítá (chybí pokrytí) —
 * použije se systémový stack níže, což je záměr, ne chyba. */
:root{
  --font-display: "Bricolage Grotesque", -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-ui:      -apple-system, "Segoe UI", "Helvetica Neue", Roboto, Arial, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
:root[lang="he"], :root[lang="uk"], :root[lang="ru"]{
  --font-display: var(--font-ui); /* systémový font nese azbuku/hebrejštinu spolehlivěji */
}

/*
 * 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{
  position:relative; display:flex; flex-direction:column; gap:.3rem;
  padding:1.1rem 1rem 1rem; min-height:108px; 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{ font-size:1.6rem; line-height:1 }
.office-tile .tl{ font-family:var(--font-display); font-weight:650; font-size:1rem }
.office-tile .ts{ 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; }