/* ==========================================================================
   Humanit theme - firemni vzhled instance humanit.emailovky.cz (13. 10. 2026)
   Jen pro tuto instanci (nacita ho index.php instance, neni v release.zip).
   Cil: klidny "enterprise" vzhled pro stredni firmy - plne plochy misto skla,
   firemni teal Humanitu, pismo Inter, na desktopu levy sidebar misto spodni listy.
   ========================================================================== */
:root {
  --bg: #0b0e13;
  --bg-raise: #12161d;
  --surface: #141922;
  --surface-2: #1a202b;
  --line: #242c38;
  --line-strong: #2f3947;
  --ink: #e8ecf1;
  --ink-rgb: 232,236,241;
  --muted: #8b95a5;
  --accent: #4dbab6;
  --accent-rgb: 77,186,182;
  --accent-deep: #2f8f8b;
  --accent-soft: #8fd6d3;
  --accent-soft-rgb: 143,214,211;
  --accent-2: #e9a54b;
  --accent2-rgb: 233,165,75;
  --on-accent: #062221;
  --danger: #f2617a;
  --ok: #4ade80;
  --radius: 12px;
  --side-w: 248px;
}

html, body, button, input, textarea, select {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  font-feature-settings: "cv11", "ss01";
}
body { font-size: 14.5px; letter-spacing: -0.005em; background: var(--bg); }

/* Pozadi: zadne barevne zare, jen jemny gradient */
.bg-orbs { background: linear-gradient(180deg, #0d1117 0%, var(--bg) 60%) !important; }
.orb { display: none !important; }

/* Sklo -> plne plochy */
.glass {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.18) !important;
  border-radius: var(--radius);
}

/* ===== Topbar ===== */
.topbar {
  margin: 0 !important; border-radius: 0 !important;
  border-width: 0 0 1px 0 !important; box-shadow: none !important;
  background: rgba(11,14,19,.92) !important;
  padding: 12px 20px !important; padding-top: calc(12px + env(safe-area-inset-top)) !important;
  min-height: 64px;
}
.iconbtn {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--surface) !important; border: 1px solid var(--line) !important;
  transition: background .15s, border-color .15s;
}
.iconbtn:hover { background: var(--surface-2) !important; border-color: var(--line-strong) !important; }
.co-userchip { background: var(--surface) !important; border-color: var(--line) !important; padding: 4px 12px 4px 4px !important; }
.co-userchip span { background: var(--accent) !important; color: var(--on-accent) !important; }

/* ===== Seznam mailu ===== */
.status-line { color: var(--muted); font-size: 12.5px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; padding: 18px 4px 10px; }
.list { gap: 8px; }
.email-item {
  border-radius: var(--radius) !important;
  padding: 14px 18px !important;
  background-color: var(--surface) !important;
  border-top: 1px solid var(--line) !important; border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line) !important;
  border-left-width: 3px !important; border-left-style: solid !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: border-color .15s, background-color .15s, box-shadow .15s, transform .08s;
}
.email-item:hover { background-color: var(--surface-2) !important; border-top-color: var(--line-strong) !important; border-right-color: var(--line-strong) !important; border-bottom-color: var(--line-strong) !important; box-shadow: 0 6px 18px rgba(0,0,0,.28); }
.email-item.unread { background-color: #13201f !important; }
.email-item .ei-from { font-size: 14px; font-weight: 600; }
.email-item .ei-subject { font-weight: 500; color: rgba(var(--ink-rgb),.88); }
.email-item .ei-summary { color: var(--muted) !important; font-size: 13.5px; line-height: 1.5; }
.email-item .ei-date { color: var(--muted); font-variant-numeric: tabular-nums; }
.email-item .mini-btn {
  height: 30px; min-width: 34px; padding: 0 10px; border-radius: 8px;
  background: transparent !important; border: 1px solid var(--line-strong) !important;
  font-size: 12.5px; font-weight: 600; color: rgba(var(--ink-rgb),.85);
}
.email-item .mini-btn:hover { background: rgba(var(--accent-rgb),.12) !important; border-color: rgba(var(--accent-rgb),.5) !important; }

/* ===== Tlacitka a formulare ===== */
.btn, .co-btn { border-radius: 10px !important; font-weight: 600 !important; letter-spacing: 0; }
.btn-primary, .co-btn:not(.ghost):not(.co-ghost) {
  background: var(--accent) !important; color: var(--on-accent) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.15) inset, 0 4px 14px rgba(var(--accent-rgb),.25) !important;
}
.btn-primary:hover, .co-btn:not(.ghost):not(.co-ghost):hover { background: #5fcbc7 !important; }
.btn-ghost { background: transparent !important; border: 1px solid var(--line-strong) !important; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select, .co-field input {
  background: #0f131a !important; border: 1px solid var(--line-strong) !important; border-radius: 10px !important;
  color: var(--ink) !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important; border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.18) !important;
}

/* ===== Modaly ===== */
.modal-backdrop { background: rgba(5,7,10,.62) !important; backdrop-filter: blur(2px) !important; }
.modal-panel { background: var(--bg-raise) !important; border: 1px solid var(--line) !important; }
.modal-head { border-bottom: 1px solid var(--line) !important; background: var(--bg-raise); }
.modal-head h2, .modal-head h3 { font-weight: 650; letter-spacing: -0.01em; }

/* Plovouci tlacitko (diktovani / novy AI ukol) */
.fab {
  background: var(--accent) !important; color: var(--on-accent) !important;
  border: 0 !important; box-shadow: 0 8px 24px rgba(var(--accent-rgb),.35) !important;
  font-size: 0 !important;
}
#fab-cc-new::before {
  content: ""; width: 24px; height: 24px; display: block; background: var(--on-accent);
  -webkit-mask: var(--ico-mic) center/contain no-repeat; mask: var(--ico-mic) center/contain no-repeat;
}

/* ===== Ikony navigace (SVG misto emoji) ===== */
:root {
  --ico-inbox: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h-6l-2 3h-4l-2-3H2'/%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z'/%3E%3C/svg%3E");
  --ico-ai: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.9 5.1L19 10l-5.1 1.9L12 17l-1.9-5.1L5 10l5.1-1.9z'/%3E%3Cpath d='M19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8z'/%3E%3C/svg%3E");
  --ico-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
  --ico-tender: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2'/%3E%3Cpath d='M3 13h18'/%3E%3C/svg%3E");
  --ico-more: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
  --ico-mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M19 10v1a7 7 0 0 1-14 0v-1M12 18v4M8 22h8'/%3E%3C/svg%3E");
}
.tabbar .tab .tab-ico { font-size: 0 !important; width: 22px; height: 22px; display: block; background: currentColor;
  -webkit-mask: var(--ico) center/contain no-repeat; mask: var(--ico) center/contain no-repeat; }
#tab-inbox { --ico: var(--ico-inbox); }
#tab-cc { --ico: var(--ico-ai); }
#tab-slack { --ico: var(--ico-chat); }
#tab-tender { --ico: var(--ico-tender); }
#tab-more { --ico: var(--ico-more); }
.tabbar { background: rgba(11,14,19,.96) !important; border-top: 1px solid var(--line) !important; box-shadow: none !important; }
.tabbar .tab { color: var(--muted); }
.tabbar .tab.active { color: var(--accent-soft); background: rgba(var(--accent-rgb),.12); }
.tabbar .tab-badge { background: var(--danger); box-shadow: none; }

/* ===== Desktop: levy sidebar, siroky obsah ===== */
@media (min-width: 1024px) {
  #view-app { padding-left: var(--side-w); }
  .tabbar {
    position: fixed !important; left: 0; top: 0; bottom: 0; width: var(--side-w);
    display: flex !important; flex-direction: column; justify-content: flex-start; gap: 4px;
    padding: 92px 14px 20px !important;
    border-top: 0 !important; border-right: 1px solid var(--line) !important;
    background: #0d1016 !important; z-index: 95; border-radius: 0 !important; margin: 0 !important; box-shadow: none !important;
  }
  .tabbar::before {
    content: ""; position: absolute; left: 22px; top: 26px; width: 150px; height: 21px;
    background: url("humanit-logo.png") left center/contain no-repeat;
    
  }
  .tabbar::after {
    content: "AI asistent pro tým"; position: absolute; left: 23px; top: 54px;
    font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  }
  .tabbar .tab {
    flex: 0 0 auto !important; flex-direction: row !important; justify-content: flex-start !important;
    gap: 12px !important; min-height: 42px !important; padding: 0 14px !important; border-radius: 10px !important;
    width: 100%;
  }
  .tabbar .tab:hover { background: rgba(255,255,255,.04); color: var(--ink); }
  .tabbar .tab .tab-ico { width: 19px; height: 19px; }
  .tabbar .tab .tab-lbl { font-size: 14px !important; font-weight: 550 !important; letter-spacing: 0; }
  .tabbar .tab.active .tab-lbl { color: var(--ink); }
  .tabbar .tab.active { box-shadow: inset 3px 0 0 var(--accent); }
  .tabbar .tab-badge { position: static !important; transform: none !important; margin-left: auto; }
  #tab-more { margin-top: auto; }
  body.modal-open .tabbar { display: flex !important; }

  .content { max-width: 980px; padding: 0 32px 40px !important; }
  .fab { bottom: 32px !important; right: 32px !important; }
  body:not(.modal-open) .hb-box { bottom: 24px !important; left: calc(var(--side-w) + 24px) !important; }

  /* modaly vpravo od sidebaru, centrovane okno misto spodniho sheetu */
  .modal { left: var(--side-w) !important; align-items: center !important; }
  .modal-panel { max-width: 960px; height: calc(100dvh - 64px); border-radius: 16px !important; }
  .modal.modal-cc-thread { padding: 0 !important; }
  .modal-cc-thread .modal-panel { height: 100dvh; max-width: none; border-radius: 0 !important; border-width: 0 0 0 1px !important; }
}

/* ===== Prihlaseni: firemni vzhled misto ostrova ===== */
.co-overlay.co-island .isl-scene, .co-overlay.co-island .isl-fx, .co-overlay.co-island .isl-beam,
.co-overlay.co-island .isl-lamp, .co-overlay.co-island .isl-vignette, .co-overlay.co-island .isl-caption { display: none !important; }
.co-overlay.co-island, .co-overlay {
  background:
    radial-gradient(900px 500px at 85% 0%, rgba(var(--accent-rgb),.14), transparent 60%),
    radial-gradient(700px 500px at 0% 100%, rgba(var(--accent-rgb),.07), transparent 60%),
    var(--bg) !important;
}
.co-island .co-card.narrow {
  background: var(--surface) !important; border: 1px solid var(--line) !important;
  box-shadow: 0 30px 80px rgba(0,0,0,.45) !important; backdrop-filter: none !important;
  border-radius: 18px !important; padding: 36px 34px !important;
}
.co-island .co-card.narrow .co-brand { font-size: 0 !important; height: 26px; margin-bottom: 26px;
  background: url("humanit-logo.png") left center/contain no-repeat; }
.co-island .co-card.narrow .co-brand * { display: none !important; }
.co-island .co-card.narrow h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }

/* Firemni karty (Sprava firmy, Muj ucet) */
.co-card { background: var(--bg-raise) !important; border-color: var(--line) !important; border-radius: 16px !important; }
.co-box, .co-kpi, .co-kbrow, .co-me-card { background: var(--surface) !important; border-color: var(--line) !important; border-radius: var(--radius) !important; }
.co-nav { background: var(--surface) !important; border-color: var(--line) !important; border-radius: 10px !important; }
.co-kpi b, .co-kpi strong { font-variant-numeric: tabular-nums; }

/* Prihlaseni: animovane pozadi (sit bodu + plujici svetla) a predstaveni vpravo */
.co-overlay.co-island { overflow: hidden; }
.hm-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hm-bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hm-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; will-change: transform; }
.hm-blob.b1 { width: 620px; height: 620px; left: -160px; top: -200px; background: radial-gradient(circle, rgba(77,186,182,.55), transparent 65%); animation: hmDrift1 26s ease-in-out infinite alternate; }
.hm-blob.b2 { width: 760px; height: 760px; right: -260px; bottom: -300px; background: radial-gradient(circle, rgba(56,140,190,.45), transparent 65%); animation: hmDrift2 32s ease-in-out infinite alternate; }
.hm-blob.b3 { width: 460px; height: 460px; left: 55%; top: 18%; background: radial-gradient(circle, rgba(77,186,182,.30), transparent 65%); animation: hmDrift3 22s ease-in-out infinite alternate; }
@keyframes hmDrift1 { to { transform: translate(260px, 180px) scale(1.15); } }
@keyframes hmDrift2 { to { transform: translate(-220px, -160px) scale(.9); } }
@keyframes hmDrift3 { to { transform: translate(-180px, 140px) scale(1.2); } }
.hm-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask-image: radial-gradient(ellipse at 60% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 60% 45%, #000 20%, transparent 75%); }
.co-island .co-card.narrow { position: relative; z-index: 2; background: rgba(17,22,30,.82) !important; backdrop-filter: blur(14px) !important; -webkit-backdrop-filter: blur(14px) !important;
  border-color: rgba(77,186,182,.22) !important; box-shadow: 0 30px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.03) inset !important; }
.hm-hero { display: none; }
@media (min-width: 1100px) {
  .co-island .co-card.narrow { margin-left: 9vw !important; }
  .hm-hero { display: block; position: fixed; z-index: 1; right: 7vw; top: 50%; transform: translateY(-50%); width: min(500px, 36vw); color: var(--text); }
  .hm-hero .k { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #4dbab6;
    padding: 6px 12px; border: 1px solid rgba(77,186,182,.35); border-radius: 999px; background: rgba(77,186,182,.08); }
  .hm-hero h2 { font-size: 40px; line-height: 1.12; letter-spacing: -0.03em; font-weight: 700; margin: 18px 0 14px; }
  .hm-hero h2 em { font-style: normal; background: linear-gradient(90deg, #4dbab6, #8fe3dd); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .hm-hero p { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0 0 26px; }
  .hm-hero ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
  .hm-hero li { display: flex; gap: 12px; align-items: center; font-size: 15px; color: var(--text); padding: 12px 14px; border-radius: 12px;
    background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.06); backdrop-filter: blur(6px); }
  .hm-hero li i { flex: 0 0 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: rgba(77,186,182,.15); color: #4dbab6; font-style: normal; }
  .hm-hero li svg { width: 17px; height: 17px; }
}
@media (max-width: 640px) { .co-overlay.co-island { align-items: center !important; } .co-island .co-card.narrow { margin-top: 0 !important; } }
@media (prefers-reduced-motion: reduce) { .hm-blob { animation: none; } }
.searchbar input, .modal input[type="search"], .modal input[type="text"] { min-height: 40px; padding: 8px 12px !important; }