/* ===========================================================
   EMA3 – layout podle vzoru (tyrkys header, tmavé pozadí, bílé karty)
   Verze: 2025-09-11
   =========================================================== */

/* --------- Paleta --------- */
:root{
  --bg-app:#0E2227;           /* celkové pozadí */
  --panel:#0F2A32;            /* tmavý panel pod kartami (PageContents) */
  --paper:#ffffff;            /* bílé karty */
  --ink:#0f1c22;
  --ink-weak:#6d7c85;

  --teal-300:#2fe6d8;
  --teal-500:#17d1c0;
  --teal-700:#0ba494;

  --chip-blue-bg:#eaf2ff;   --chip-blue-fg:#1e54c7;   /* koncept */
  --chip-green-bg:#e5fbf5;  --chip-green-fg:#0c7b63;  /* aktivní */
  --chip-red-bg:#ffecef;    --chip-red-fg:#a12a39;    /* revize */

  --r-lg:16px; --r-xl:20px; --r-pill:999px;
  --shadow-card:0 14px 34px rgba(0,0,0,.14);
  --border-soft:1px solid rgba(0,0,0,.06);
}

html, body{
  background: var(--bg-app);
  color:#eaf2f4;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
}

/* ===========================================================
   HLAVIČKA / PATIČKA
   =========================================================== */
/* Hlavní pruhy: bez modré, jednotný tyrkysový přechod */
.sharedHeader,
.sharedFooter,
.sharedHeaderPassword {
  background: linear-gradient(135deg, #0ba494 0%, #2fe6d8 100%) !important;
  color: #fff !important;
  border: none !important;
}

/* Glass uvnitř headeru */
.sharedHeader .container-fluid,
.sharedHeaderPassword .container-fluid {
  background: rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 16px;
  padding: 12px 18px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
}

/* Texty a ikonky v pruzích */
.sharedHeader b,
.sharedFooter b,
.HeaderCurrentUserInfo,
.HeaderMemoryState,
.HeaderCurrentUserService a,
.FooterAppVersion,
.FooterCurrentDateTime {
  color: #fff !important;
}

/* Breadcrumb */
.TrPageStackPath { margin-top: 14px; }
.PageStackPath .breadcrumb {
  margin: 0 !important;
  padding: 8px 14px !important;
  background: rgba(255,255,255,0.12) !important;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 999px;
}
.PageStackPath .breadcrumb-item a { 
  color: #e6fffc !important; 
  text-decoration: none; 
}
.PageStackPath .breadcrumb-item+.breadcrumb-item::before {
  color: #bdf7f1 !important;
}

/* ===========================================================
   OBSAH – tmavý panel (jako ve vzoru)
   =========================================================== */
.PageContents.container{
  background: var(--panel);
  color: #eaf2f4;
  border-radius: 22px;
  padding: 22px 22px 28px;
  box-shadow: 0 18px 42px rgba(0,0,0,.35);
}

/* Titulek sekce */
.pageTitle{ margin-top:2px; margin-bottom:8px; }
.pageTitle > span{
  display:inline-block; padding:10px 14px;
  background: rgba(255,255,255,.10);
  color:#eaf2f4;
  border:1px solid rgba(255,255,255,.20);
  border-radius: 14px; font-weight:800;
}
.pageTitle .comment{ color:#c8d8dc; font-weight:700; }

/* Hraniční čára uvnitř panelu */
.BusinessCasePagePart{
  border:none; height:1px;
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.15),rgba(255,255,255,0));
  margin:22px 0;
}

/* Select „vytvořit tabulku podle vzoru“ – tmavý */
.BusinessCaseCreateTableForm .BusinessCaseCreateTablePulldownMenu{
  background:#0f2630; color:#eaf2f4;
  border:1px solid rgba(255,255,255,.18); border-radius: var(--r-pill);
  padding:10px 14px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* ===========================================================
   KARTY
   =========================================================== */
.BusinessCaseTableList .row{ row-gap:16px; }
.BusinessCaseTableList .col-6,
.BusinessCaseTableList .col-lg-4,
.BusinessCaseTableList .col-xl-3{ padding:12px; }

/* Bílé karty se stínem */
.BusinessCaseTableListPrototype_UNSET,
.BusinessCaseTableListPrototype_modra,
.BusinessCaseTableListPrototype_zelena,
.BusinessCaseTableListPrototype_cervena,
.BusinessCaseTableListPrototype_fialova,
.BusinessCaseTableListSelectedTable{
  position:relative;
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: var(--border-soft) !important;
  border-radius: 18px !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.10) !important;
  padding: 18px 18px 58px 90px !important; /* místo pro ikonku */
  min-height: 150px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.BusinessCaseTableListPrototype_UNSET:hover,
.BusinessCaseTableListPrototype_modra:hover,
.BusinessCaseTableListPrototype_zelena:hover,
.BusinessCaseTableListPrototype_cervena:hover,
.BusinessCaseTableListPrototype_fialova:hover,
.BusinessCaseTableListSelectedTable:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.16) !important;
}

/* Nadpis (odkaz) – ponecháme tmavý, ať je čitelný na bílé kartě */
.BusinessCaseTableListPrototype_UNSET a,
.BusinessCaseTableListPrototype_modra a,
.BusinessCaseTableListPrototype_zelena a,
.BusinessCaseTableListPrototype_cervena a,
.BusinessCaseTableListPrototype_fialova a{
  display:block; text-decoration:none;
  color: var(--ink) !important; font-weight:800; line-height:1.25;
}

/* Ikonková „placka“ vlevo nahoře */
.BusinessCaseTableListPrototype_UNSET::before,
.BusinessCaseTableListPrototype_modra::before,
.BusinessCaseTableListPrototype_zelena::before,
.BusinessCaseTableListPrototype_cervena::before,
.BusinessCaseTableListPrototype_fialova::before,
.BusinessCaseTableListSelectedTable::before{
  content:""; position:absolute; left:18px; top:18px;
  width:48px; height:48px; border-radius:14px;
  background:#F5FAFC; border:1px solid rgba(0,0,0,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  z-index:0;
}

/* Zajištění – vypnout masky/siluety */
.BusinessCaseTableListPrototype_UNSET::after,
.BusinessCaseTableListPrototype_modra::after,
.BusinessCaseTableListPrototype_zelena::after,
.BusinessCaseTableListPrototype_cervena::after,
.BusinessCaseTableListPrototype_fialova::after,
.BusinessCaseTableListSelectedTable::after{
  content:""; position:absolute; left:18px; top:18px; width:48px; height:48px;
  border-radius:14px; background:transparent; -webkit-mask:none!important; mask:none!important;
}

/* Reálné SVG ikony (blízké vzoru) */
@supports (background: url("data:image/svg+xml;utf8,<svg/>")){
  /* Dovednosti a kompetence – mortarboard */
  .BusinessCaseTableListPrototype_UNSET::after{
    background:
      url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<circle cx='12' cy='12' r='10' fill='%23eef4f8'/>\
<path fill='none' stroke='%235a7580' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3 9l9-5 9 5-9 5-9-5z'/>\
<path fill='none' stroke='%235a7580' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M6 11v3c3 2 9 2 12 0v-3'/>\
</svg>") center/44px 44px no-repeat;
  }
  /* Klíčová kompetence – terč */
  .BusinessCaseTableListPrototype_modra::after{
    background:
      url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<circle cx='12' cy='12' r='10' fill='%23eef4f8'/>\
<circle cx='12' cy='12' r='7' fill='none' stroke='%235a7580' stroke-width='1.8'/>\
<circle cx='12' cy='12' r='3' fill='%235a7580'/>\
</svg>") center/44px 44px no-repeat;
  }
  /* Obecná část – vrstvy */
  .BusinessCaseTableListPrototype_zelena::after{
    background:
      url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<circle cx='12' cy='12' r='10' fill='%23eef4f8'/>\
<path d='M12 5l8 4-8 4-8-4 8-4z' fill='none' stroke='%235a7580' stroke-width='1.8'/>\
<path d='M4 13l8 4 8-4' fill='none' stroke='%235a7580' stroke-width='1.8'/>\
</svg>") center/44px 44px no-repeat;
  }
  /* Průřezové téma – puzzle */
  .BusinessCaseTableListPrototype_cervena::after{
    background:
      url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<circle cx='12' cy='12' r='10' fill='%23eef4f8'/>\
<path fill='none' stroke='%235a7580' stroke-width='1.8' stroke-linejoin='round' d='M8 5h4a2 2 0 010 4h-1v2h2a2 2 0 014 0v2h2v6H9v-2a2 2 0 10-1-3H6V7h2z'/>\
</svg>") center/44px 44px no-repeat;
  }
  /* Základní gramotnost – žárovka */
  .BusinessCaseTableListPrototype_fialova::after{
    background:
      url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<circle cx='12' cy='12' r='10' fill='%23eef4f8'/>\
<path fill='none' stroke='%235a7580' stroke-width='1.8' d='M9 17h6M10 20h4'/>\
<path fill='none' stroke='%235a7580' stroke-width='1.8' stroke-linecap='round' d='M12 5a6 6 0 00-4 10l.5.5V17h7v-1.5l.5-.5A6 6 0 0012 5z'/>\
</svg>") center/44px 44px no-repeat;
  }
  /* Vybraná „textová“ – kniha */
  .BusinessCaseTableListSelectedTable::after{
    background:
      url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<circle cx='12' cy='12' r='10' fill='%23eef4f8'/>\
<path fill='none' stroke='%235a7580' stroke-width='1.8' d='M5 7h7v10H5a3 3 0 010-10zm7 0h7v10h-7'/>\
</svg>") center/44px 44px no-repeat;
  }
}

/* Stavové pilulky (vlevo dole) */
.BusinessCaseTableListPrototype_modra  > a::after,
.BusinessCaseTableListPrototype_zelena > a::after,
.BusinessCaseTableListPrototype_cervena> a::after,
.BusinessCaseTableListPrototype_fialova> a::after{
  position:absolute; left:18px; bottom:16px;
  padding:4px 10px; border-radius:10px; font-size:.8rem; font-weight:700;
  border:1px solid rgba(0,0,0,.06); content:"";
}
.BusinessCaseTableListPrototype_modra  > a::after { content:"koncept"; background:var(--chip-blue-bg);  color:var(--chip-blue-fg); }
.BusinessCaseTableListPrototype_zelena > a::after { content:"aktivní"; background:var(--chip-green-bg); color:var(--chip-green-fg); }
.BusinessCaseTableListPrototype_cervena> a::after { content:"revize";  background:var(--chip-red-bg);   color:var(--chip-red-fg); }
.BusinessCaseTableListPrototype_fialova> a::after { content:"aktivní"; background:#f2ecff;              color:#5a3bc9; }

/* ===========================================================
   MENU nástrojů – vpravo nahoře uvnitř vybrané karty
   =========================================================== */
.BusinessCaseTableListSelectedTableName{ position:relative; }
.BusinessCaseTableListSelectedTableName .BusinessCaseTableServices{
  position:absolute; right:24px; bottom:20px; z-index:3;
  background: var(--teal-500); color:#06312b;
  border: 1px solid rgba(0,0,0,.06); border-radius: 16px;
  padding: 6px 10px; box-shadow: 0 8px 18px rgba(0,0,0,.22);
}
.BusinessCaseTableListSelectedTableName .BusinessCaseTableServices a{
  color:#06312b!important; text-decoration:none; display:inline-flex;
  align-items:center; gap:8px; margin:0 4px;
}
.BusinessCaseTableListSelectedTableName .BusinessCaseTableServices a:hover{ filter:brightness(1.08); }
.BusinessCaseTableListSelectedTableName .BusinessCaseTableServices svg{ width:16px; height:16px; vertical-align: initial;}

/* ===========================================================
   PATIČKA – tmavé sklo
   =========================================================== */
.TrFooter .row{
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 14px;
  padding: 8px 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color:#eaf2f4;
}
.FooterAppVersion b{ color:#eaf2f4; }
.FooterCurrentDateTime{ color:#c8d7db; }

/* ===========================================================
   ODKAZY – čitelné „prokliky“ v tyrkysu
   =========================================================== */
.PageContents a{
  color: var(--teal-500);
  text-decoration: none;
}
.PageContents a:hover{
  color: var(--teal-700);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
/* Nadpis odkazu na kartě necháváme tmavý (ne tyrkys),
   aby kontrastoval na bílé kartě */
.BusinessCaseTableList [class^="BusinessCaseTableListPrototype_"] > a{
  color: var(--ink) !important;
  text-decoration: none !important;
}

/* ===========================================================
   TABULKY – na celou šířku (ale ne vnořené)
   =========================================================== */
.PageContents.container table:not(table table){
  width: 100% !important;
  table-layout: auto;
}
.PageContents.container .table-responsive{
  width: 100%;
}
.PageContents.container table:not(table table) th,
.PageContents.container table:not(table table) td{
  border-color: rgba(255,255,255,.12);
}

/* Ochranné přepisy */
.BusinessCaseTableList a > *::before,
.BusinessCaseTableList a > *::after{ content: none !important; }

/* Responsivní doladění */
@media (max-width: 575.98px){
  .sharedHeader .container-fluid{ padding:14px; }
  .sharedHeader .container-fluid > .row{ padding:8px 10px; }
  .PageContents.container{ padding:18px; }
  .BusinessCaseTableListPrototype_UNSET,
  .BusinessCaseTableListPrototype_modra,
  .BusinessCaseTableListPrototype_zelena,
  .BusinessCaseTableListPrototype_cervena,
  .BusinessCaseTableListPrototype_fialova,
  .BusinessCaseTableListSelectedTable{
    padding:16px 14px 52px 78px !important;
  }
}
/* === Globální okraj stránky (page gutter) ================== */
/* Jeden zdroj pravdy pro okraj */
:root { --page-gutter: 20px; }

/* Vypneme riziko horizontálního scrollu */
html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

/* Okraj kolem celého obsahu + respektování safe-area (iPhone notchy) */
body{
  /* top right bottom left */
  padding:
    calc(var(--page-gutter) + env(safe-area-inset-top, 0px))
    calc(var(--page-gutter) + env(safe-area-inset-right, 0px))
    calc(var(--page-gutter) + env(safe-area-inset-bottom, 0px))
    calc(var(--page-gutter) + env(safe-area-inset-left, 0px));
  margin: 0;
  overflow-x: hidden; /* jistota, že nic „neuteče“ do šířky */
}

/* Volitelně: zaoblíme velké pruhy, když už nejsou nalepené na okraj */
.sharedHeader,
.sharedFooter,
.sharedHeaderPassword {
  border-radius: 16px;
}

/* Breadcrumb a hlavní panel mají už své vnitřní odsazení – nic dalšího netřeba */

/* Na malých zařízeních klidně zmenšíme gutter na 12px */
@media (max-width: 600px){
  :root { --page-gutter: 12px; }
}
.modal-backdrop{
  z-index: 2 !important;
}
.formTable td, .formTable tbody{
  background-color: var(--panel);
}
.RepGenTemplateListTable,.RepGenPrototypeListTable{
  color: #000;
}
.HeaderMemoryState{
  display: none;
}