@import "colors.css";

:root 
{
  /*clamp vysvětlení:
  clamp(minimum, preferovaná_hodnota, maximum)
  Spodní limit (minimum): hodnota nikdy neklesne pod tuto velikost
  Preferovaná hodnota: dynamický výpočet (např. 0.75rem + 0.2vw), tato část se stará o samotnou plynulou změnu.
  Horní limit (maximum): hodnota nikdy nepřekročí tuto velikost
  
  Praxe: 0.2vw (Viewport Width) představuje 0.2 % z aktuální šířky okna prohlížeče, když uživatel roztahuje okno 
  prohlížeče (hodnota vw roste), výsledná velikost písma se lineárně zvětšuje. Když okno zmenšuje, písmo se zmenšuje.
  */

  /* Dynamické písmo: Pomocí clamp() se písmo plynule přizpůsobuje šířce obrazovky (vw). Odstraňuje nutnost psát hromady nepřehledných @media pravidel. */
  --default-font-size: clamp(0.9rem, 0.75rem + 0.4vw, 0.96rem); /*--default-font-size: clamp(0.85rem, 0.75rem + 0.4vw, 0.96rem);*/
  --h1-font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.7rem);
  --h2-font-size: clamp(1.2rem, 1.0rem + 0.9vw, 1.4rem);
  --h3-font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.2rem);
  
  --default-background-color: #ffffff;
}

/* ==========================================================================
   Běžné atributy
   ========================================================================== */
[back-color],.back-color { background-color: attr(back-color type(<color>), var(--default-background-color));}
[fore-color],.fore-color { color: attr(fore-color type(<color>), inherit);}
[reset-colors],.reset-colors { color: inherit; background-color: inherit;}

[no-margin],.no-margin {margin: 0;}
[no-border],.no-border {border: none;}
[no-padding],.no-padding {padding: 0;}

/* Dynamické šířky komponent mapované přímo z HTML atributů */
[width] {width: attr(width type(<length> | <length-percentage>), auto);}
[min-width] {min-width:attr(min-width type(<length> | <length-percentage>), auto);}
[max-width] {max-width:attr(max-width type(<length> | <length-percentage>), auto);}

/* Dynamické výšky komponent mapované přímo z HTML atributů */
[height] {height:attr(height type(<length> | <length-percentage>), auto);}
[min-height] {min-height: attr(min-height type(<length> | <length-percentage>), auto);}
[max-height] {max-height: attr(max-height type(<length> | <length-percentage>), auto);}


/* Třídy pro vynucené pozicování elementů */
[float-left], .float-left
{
  float:left!important;width:auto;
  &::after{content:"";clear:right;} 
}
[float-right], .float-right{float: right;}

/* Pokusy o simulaci anchorů, ale zatím to není třeba, komponenty se snaží chovat přirozeně sami dle velikosti */
/* Atribut, který prvek roztáhne na plnou šířku bez ohledu na okolí */
[anchor-horizontal],.anchor-horizontal
{
  width: 100% !important;
  /* Pokud je prvek uvnitř mřížky (Grid), zabere všechny dostupné sloupce */
  grid-column: 1 / -1 !important; 
  /* Pokud je prvek uvnitř vašeho nového wrap-layout-panelu, vynutí si nový řádek */
  flex: 1 1 100% !important; 
}

/* Formátovací přepínače */
[bold],.bold {font-weight:700;}
[italic],.italic {font-style:italic;}
[underline], .underline {text-decoration:underline;}
[red],.red {color:rgb(251,40,40);}
[blue],.blue {color:#2644e9;}
[blue2],.blue2 {color:#0078d4;}
[green],.green {color:#05b805;}

/* stupně barev pro lepší UI efekty, napříklda rozlišení důležitých textů*/
[color1],.color1 {color: var(--body-text-color);} /* default pro stránku */
[color2],.color2 {color: var(--body-text-color-2);}
[color3],.color3 {color: var(--body-text-color-3);}
[color4],.color4 {color: var(--body-text-color-4);}

/* ==========================================================================
   GLOBÁLNÍ RESET & TYPOGRAFIE */
* 
{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Segoe UI',-apple-system,BlinkMacSystemFont, sans-serif;
  font-size: var(--default-font-size);
}

h1 {font-size:var(--h1-font-size);font-weight: 600;}
h2 {font-size:var(--h2-font-size);font-weight: 600;}
h3 {font-size:var(--h3-font-size);font-weight: 500;}

a
{
  text-decoration:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
}


/*==========================================================================
   FIELDSET (WinForms: GroupBox)
   --------------------------------==========================================
   Tento prvek slouží jako logický a vizuální kontejner pro seskupení prvků.
   Všechny jeho podřízené vlastnosti a sub-elementy jsou zapouzdřené uvnitř.
   ========================================================================== */
fieldset, .container
{
  container-type: inline-size; /* Sledování šířky komponenty pro vnořené layouty */
  min-width: 0;                /* Bezpečnostní pojistka proti přetékání Flexboxu */
  width: 100%;
  padding: 0.5rem 1rem;
  border: 0.07rem solid var(--fieldset-border-color, #d1d1d1);
  border-radius: var(--fieldset-border-radius, 0.5rem);
  background-color: var(--fieldset-bg-color, #ffffff);
  color: var(--body-text-color);

  /* První nadpis vnořený přímo do linky rámečku (Legend / Text) */
  & h1:first-of-type 
  {
    font-size: calc(var(--default-font-size) * 1.1);
    font-weight: 600;
    text-align: center;
    margin-bottom: -0.5rem;
    color: var(--fieldset-title-color);
    transform: translateY(-0.4rem);
  }

  /* Margin na VŠECHNY přímé děti... */
  & > * { margin-top: 0.5rem; } 

  /* KROMĚ úplně prvního prvku, pokud je jím H1 */
  & > h1:first-of-type { margin-top: 0; }

  /* Pokud tam H1 JE, tak prvnímu prvku HNED ZA NÍM ten margin vrátíme! */
  & > h1:first-of-type ~ * { margin-top: 0.5rem; }

  &.red{border-color:rgb(244, 90, 90)!important;background:linear-gradient(180deg,rgb(255, 255, 255),rgb(255, 225, 225))!important;color:#6b0303!important;}
  &.green{border-color:rgb(6,150,6)!important;background:linear-gradient(180deg,rgb(235, 254, 235),rgb(181, 240, 181))!important;color:#116600!important;}
  &.blue{border-color:rgb(73,159,240)!important;background:linear-gradient(180deg,rgb(244, 249, 253),rgb(177, 211, 242))!important;color:#010366!important;}
}



/* ==========================================================================
   INPUT, SELECT, TEXTAREA (WinForms: TextBox, NumericUpDown, ComboBox)
   --------------------------------==========================================
   Základní datové prvky. Výchozí vzhled je vymazán a nahrazen plochým Fluent 
   designem s plynulou animací přechodu při aktivaci.
   ========================================================================== */
input, 
select, 
textarea 
{
  width:100%;
  padding:0.4rem 0.6rem;
  background-color:var(--input-bg-color);
  color:var(--input-text-color, #1a1a1a);
  border:0.07rem solid var(--input-border-color, #cccccc);
  border-radius:0.25rem;
  outline:none;
  margin-bottom:0!important;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;

  &:focus
  {
    border-color:var(--input-focus-border-color,#0066cc);
    box-shadow: 0 0 0 0.15rem rgba(0, 102, 204, 0.2);
  }
}


/* ==========================================================================
   SELECT (WinForms: ComboBox v režimu DropDownList)
   ========================================================================== */
select 
{
  background-color: var(--input-bg-color, #ffffff) !important;
  padding-right: 2.0rem !important;
  cursor: pointer;

  /*jednotlivé položky seznamu (ComboBox.Items)*/
  & option
  {
    background-color:var(--input-bg-color, #ffffff);
    color:var(--input-text-color, #1a1a1a);
    padding:0.5rem;
  }
}

/* ==========================================================================
   INPUT[TYPE="CHECKBOX"] (WinForms: CheckBox)
   --------------------------------================--------------------------
   Kompletní hierarchie moderního Fluent přepínače z Windows 11. Všechny 
   barevné mutace a vnitřní kulička jsou logicky vnořené uvnitř.
   ========================================================================== */
input[type="checkbox"] 
{
  appearance: none;
  -webkit-appearance: none;
  width: 2.5rem !important;
  height: 1.4rem;
  border-radius: 1rem;
  position: relative;
  cursor: pointer;
  outline: none;
  border: none;
  transition: background-color 0.2s ease;
  justify-self: start;
  background-color: #949494; /* Výchozí barva pouzdra vypnutého vypínače */

  /* Jezdící kulička uvnitř pouzdra přepínače */
  &::after 
  {
    content: "";
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 1rem;
    height: 1rem;
    background-color: #ffffff;
    border-radius: 50%;
    transition: transform 0.2s ease;
    box-shadow: 0 0.1rem 0.3rem rgba(0, 0, 0, 0.2);
  }

  /* Stav ZAPNUTO (Checked / ON) */
  &:checked
  {
    background-color: var(--checkbox-checked-bg-color, #0066cc);
    /* Přesun kuličky na pravou stranu pouzdra */
    &::after {transform: translateX(1.1rem);}
  }

  /* Červený podklad, pokud je přepínač vypnutý */
  &[red-uncheck], &.reduncheck { &:not(:checked) { background-color: #ff4d40; } }

  &[red], &.red { &:checked { background-color: #ff4d40; } }

  /* Zelený podklad při zapnutí přepínače */
  &[green], &.green { &:checked { background-color: #34b13e; } }

  /* modrý podklad při zapnutí přepínače */
  &[blue], &.blue {&:checked { background-color: #0066cc; } }
}


/* ==========================================================================
   DIV[POPOVER] (WinForms: ContextMenuStrip / Kontextové menu)
   --------------------------------------------------------------------------
   Moderní, odlehčené rozbalovací menu.
   DIV[POPOVER] (Univerzální automatické zarovnání bez ohledu na pozici)
   -------------------------------------------------------------------------- */
div[popover], .context-menu
{
  background-color: var(--popover-bg-color, #ffffff);
  border: 0.05rem solid var(--popover-border-color, #ced0d4);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  padding: 0.0rem 1rem;
  width: 20rem;
  border-radius: 0.3rem;
  margin: 0.5rem;

  /* Automatické ukotvení hlavního (kořenového) menu pod kotevní tlačítko */
  &:popover-open 
  {
    top: anchor(bottom);
    left: anchor(left);
    margin-top: 0.25rem;
    position-try-fallbacks: --nouze-vlevo !important;
  }

  /* Podmenu:
     Pokud leží další div[popover] strukturálně uvnitř mateřského popoveru,
     jedná se o hierarchické podmenu. Vnoříme ho přímo sem bez jakýchkoliv ID. */
  & div[popover] 
  {
    position: absolute;

    /* Vnořené podmenu se v momentě otevření vykreslí vpravo vedle tlačítka.
       V RAM získá přes JavaScript novou aktivní kotvu (document.activeElement),
       takže matematická funkce anchor() okamžitě spočítá správné souřadnice. */
    &:popover-open 
    {
       /* VÝCHOZÍ STAV (Případ uprostřed - Obrázek 1):
         Díky fixed režimu prohlížeč změří vnější pravou hranu spouštěcího tlačítka 
         a podmenu vykreslí dokonale VPRAVO VEDLE hlavního menu bez překrytí textu. */
      top: anchor(top);
      left: anchor(right);
      margin-top: 0;
      margin-left: 0.25rem;

      /* NOUZOVÝ PLÁN PRO OKRAJE OBRAZOVKY (Případ vpravo - Obrázek 2):
         Odkážeme se na naši níže definovanou kotevní zónu '--nouze-vlevo'. */
      position-try-fallbacks: --nouze-vlevo !important;
    }
  }

  /* Titulky sekcí uvnitř menu (Hlavičky skupin) */
  & h1
  {
    font-size: 0.8rem;
    padding: 0.5rem 0rem;
    color: var(--popover-text-muted, #65676b);
    font-weight: 600;
    text-transform: uppercase;
  }

  /* Položky menu (Jednotlivé klikací řádky / ToolStripMenuItem) */
  & button 
  {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 0.4rem 0.2rem;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--body-text-color);
    box-shadow: none !important; /* Vynucené smazání stínu z globálního tlačítka */

    /* Hover stav položky menu (WinForms: ToolStripMenuItem.Selected) */
    &:hover 
    {
      background-color: var(--popover-hover-bg, #f2f3f5);
    }
  }

  /* Dělící linka mezi položkami menu (ToolStripSeparator) */
  & hr 
  {
    border: 0;
    border-top: 0.05rem solid var(--popover-border-color, #e4e6eb);
    margin: 0.2rem 0;
  }
}

/* ==========================================================================
   DEFINICE NOUZOVÉHO KOTVENÍ SUBMENU PRO OKRAJ OBRAZOVKY
   --------------------------------================================----------
   Tento @position-try blok je klíčovým standardem pro moderní čisté webové UI.
   Aktivuje se výhradně tehdy, pokud prvek přetéká přes okraj výřezu (viewportu).
   ========================================================================== */
@position-try --nouze-vlevo 
{
  /* Vyčistíme fixní registry pro bezpečné překlopení */
  left: auto; 
  top: anchor(top);

  /* Pravou hranu podmenu přitiskneme k levé hraně spouštěcího tlačítka.
     Jelikož jsou obě menu stejně široká, podmenu se čistě vykreslí 
     VLEVO VEDLE hlavního menu, aniž by ho překrylo. */
  right: anchor(left);
  margin-right: 0.25rem;
}


/* ==========================================================================
   BUTTON (WinForms: Button)
   --------------------------------------------------------------------------
   Standardní interaktivní prvek tlačítka. Výchozí vzhled je plně resetován.
   Všechny barevné stavy, stisknutí (MouseDown) a zakázání (Enabled = false) 
   jsou logicky zapouzdřené uvnitř této jedné definice.
   ========================================================================== */
button:not(nav button, nav *, div[popover] button) 
{
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.35rem 0.85rem;
  font-size: var(--default-font-size);
  font-weight: 400;
  font-family: inherit;
  background: var(--button-bg-gradient);
  color: var(--button-text-color);
  border: 0.07rem solid var(--button-border-color);
  border-radius: 0.35rem;
  cursor: pointer;
  outline: none;
  box-shadow: 0 0.08rem 0.15rem rgba(0, 0, 0, 0.15);
  transition: border-color 0.1s ease, box-shadow 0.1s ease;

  /* čisté tlačítko bez stylů - vhodné pro klikací ikony, kde nechceme žádný styl */
  &.clean
  {
    background: transparent;
    border: none;
    box-shadow: none!important;
    border: none!important;
    outline: none!important;
    text-shadow: none!important;
  }

  /* Hover stav tlačítka při najetí myši */
  &:hover:not(.disabled):not(:disabled) { filter: brightness(105%); } /* Softwarové jemné rozsvícení podkladu */

  /* Stav ACTIVE (Promáčknutí tlačítka)*/
  &:active:not(:disabled):not(.clean)
  {
    background: var(--button-active-bg-gradient) !important;
    border-color: var(--button-active-border-color) !important;
    box-shadow: inset 0 0.15rem 0.3rem rgba(0, 0, 0, 0.25) !important; /* Vnitřní stín simuluje stisk do hloubky */
    transform: translateY(0.04rem);                                   /* Mikroposun dolů doplňuje fyzický vjem stisku */
  }

  /*Stav zakázaného tlačítka*/
  &:disabled,&.disabled,&[disabled]
  {
    background:var(--button-disabled-bg,#eaeaea);
    border-color:var(--button-disabled-border,#d1d1d1);
    color:var(--button-disabled-text,#a1a1a1);
    cursor:not-allowed;
    box-shadow:none;/* Zakázané tlačítko ztrácí prostorový stín a zploští se */
    transform:none; /* Zamezí mikroposunu dolů při pokusu o kliknutí */
  }


  /*MODRÁ VARIANTA*/
  &[blue], &.blue 
  {
    background: linear-gradient(to bottom, #f3f8ff 0%, #cbdff7 100%)!important;
    border-color:#0059b3!important;
    &:hover:not(:disabled) {background:linear-gradient(to bottom, #ffffff 0%, #dae9fc 100%)!important;}
    &:active:not(:disabled) {background:linear-gradient(to bottom, #b4d1f5 0%, #90bbf0 100%)!important; border-color: #002d5c !important;}
  }

  /*ZELENÁ VARIANTA*/
  &[green],&.green 
  {
    background:linear-gradient(to bottom, #f2faf3 0%, #caeccd 100%)!important;
    border-color:#2e9e37!important;
    color:rgb(27,78,27)!important;
    &:hover:not(:disabled) {background:linear-gradient(to bottom,#ffffff 0%,#daf4dc 100%)!important;}
    &:active:not(:disabled) {background:linear-gradient(to bottom,#b7deb9 0%,#95ce98 100%)!important;border-color:#115c17!important;}
  }

  /*ČERVENÁ VARIANTA*/
  &[red],&.red
  {
    background:linear-gradient(to bottom, #fcdada 0%, #f09e9e 100%)!important;
    border-color:#812020!important;
    color:rgb(161, 48, 33)!important;
    &:hover:not(:disabled) {background:linear-gradient(to bottom, #fcdada 0%, #f09e9e 100%) !important; }
    &:active:not(:disabled) {background:linear-gradient(to bottom, #fcdada 0%, #f09e9e 100%) !important; border-color: rgb(161, 48, 33) !important;}
  }

  
}

/* ==========================================================================
   DIALOG, DIALOG[OPEN] (WinForms: Form / Modální okno)
   --------------------------------------------------------------------------
   Nativní HTML5 prvek pro modální okna. Jakmile se otevře přes showModal(),
   prohlížeč jej automaticky umístí do speciální vrstvy (Top Layer), kterou 
   nelze přebít žádným z-indexem.
   ========================================================================== */
/* Zamezí scrolování hlavní plochy v pozadí, když je okno aktivní */
body:has(dialog[open]:modal) {overflow-y: hidden !important;}
*:has(dialog[open]:modal){overflow-y: hidden !important;}

dialog,dialog[open]
{
  border:var(--dialog-border);
  background-color:var(--dialog-bg-color);
  color:var(--dialog-text-color);
  border-radius:0.5rem;
  padding:0;
  outline:none;
  box-sizing:border-box;
  
  /*Výška i šířka poslouchají vaše HTML atributy width/height */
  width:attr(width type(<length>),fit-content);
  height:attr(height type(<length>),fit-content);
  max-width:100vw;
  max-height:100vh;
  
  /* Centrování okna přesně doprostřed obrazovky */
  margin:auto;
  top:1rem;
  left:0; 
  right:0;
  position:fixed;
  z-index:100;
  
  /* Robustní stín typický pro hluboká Fluent modální okna */
  box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.18), 0 0.1rem 0.4rem rgba(0, 0, 0, 0.08);
  display:flex;
  flex-direction:column;
  overflow-y:auto;
  resize:none;

  /*ztmavené pozadí pod modálním oknem*/
  &:modal::backdrop
  {
    background-color: var(--dialog-backdrop); 
    backdrop-filter: blur(0.1rem); /* Mírné rozmazání aplikací v pozadí */
  }

  /* ZÁHLAVÍ OKNA */
  & header, 
  & [data-name="panelFormHeader"] 
  {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    height: 2.25rem;
    background: var(--dialog-header-bg-color); 
    border-bottom: 0.07rem solid var(--dialog-header-bg-color);
    padding: 0 0.5rem 0 0.75rem; 
    user-select: none; 
    width: 100%; 
    color: var(--dialog-header-fore-color);

    position: sticky;
    top: 0;  
    z-index: 1; /*prevence při scrollu, aby header nebyl něčím překryt - controlami zevnitř dialogu*/

    /* Titulek okna v záhlaví (WinForms: Form.Text) */
    & h1:first-of-type, 
    & [data-name="lblFormTitle"] 
    { 
      font-size: 0.9rem; 
      font-weight: 500; 
      color: var(--dialog-header-fore-color); 
      margin: 0; 
      display: flex; 
      align-items: center; 
    }

    /* Tlačítka v pravém rohu záhlaví (Minimize, Maximize, Close) */
    & div:first-of-type, 
    & [data-name="panelFormHeaderButtons"] 
    {
      display: flex; 
      align-items: center; 
      height: 100%; 
      margin-left: auto;

      /* Obecný styl pro tlačítka v záhlaví okna */
      & button 
      {
        display: flex; 
        align-items: center; 
        justify-content: center; 
        border: none !important; 
        background: transparent;
        height: 100%; 
        width: 2.75rem; 
        cursor: pointer; 
        color: var(--dialog-header-fore-color) !important; 
        font-size: 0.8rem;
        transition: background-color 0.1s ease, color 0.1s ease; 
        box-shadow: none !important; 
        border-radius: 0 !important;

        &:hover:not(:disabled) 
        { 
          background-color: rgba(0, 0, 0, 0.06) !important; 
        }

        /* Tlačítko zavřít (Close - reaguje na Windows červenou) */
        &.close-btn, 
        &:last-of-type, 
        &[data-name="btnFormClose"] 
        {
          &:hover:not(:disabled) 
          { 
            background-color: #e81123 !important; 
            color: #ffffff !important;
          }
          
          &:active:not(:disabled) 
          { 
            background-color: #f1707a !important; 
          }
        }
      }
    }
  }

  /*  VNITŘNÍ TĚLO DIALOGU (Klientská zóna okna) */
  & .dialog-body, 
  & > main 
  { 
    flex: 1;
    padding: 1.0rem; 
    background-color: var(--dialog-bg-color);

    display: flex;
    flex-direction: column;
    gap: 1rem; /* mezera mezi komponentami v dialogu */
  }

  /* Mobilní responzivní režim pro malé displeje */
  @media screen and (max-width: 400px) 
  {
    box-shadow: none; 
    margin: auto; 
    width: 100vw; 
    height: 100vh; 
    left: 0; 
    top: 0; 
    padding: 0; 
    border-radius: 0px; 
    outline: none; 
    border: none; 
    max-width: 100vw; 
    max-height: 100vh;
    
    & header > div:first-of-type > button.btnMinimize, 
    & header > div:first-of-type > button.btnMaximize 
    { 
      display: none !important; /* Skryje nepotřebné ikony v mobilu */
    }
    
    & main 
    { 
      padding: 0.5rem; 
    }
    
    &[data-name="btnFormMinimize"], 
    &[data-name="btnFormMaximize"]
    {
      display: none !important;
    }
  }
}

/* ==========================================================================
   ARCHITEKTURA PLOCHY
   --------------------------------------------------------------------------
   Základní aplikační kostra rozhraní. Definuje vnější mřížku oken,
   horní systémové lišty a flexibilní řazení komponent.
   ========================================================================== */
html, 
body 
{
  width: 100vw; 
  height: 100vh; 
  margin: 0; 
  padding: 0; 
  overflow: hidden;
}

body 
{
  display: flex; 
  flex-direction: column;
  background-color: var(--body-bg-color, #f3f3f3); 
  color: var(--body-text-color, #1a1a1a);
}

body > header 
{
  order: 1; 
  display: flex; 
  flex-direction: column;
  background-color: var(--header-bg-color, #202020); 
  color: var(--header-text-color, #ffffff); 
  width: 100%;
}

hgroup 
{
  order: 2; 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  min-height: 2.75rem; 
  padding: 0.5rem 0.5rem;
  background-color: var(--hgroup-bg-color, transparent);
  
  & h1 
  {
    color: var(--hgroup-text-color, inherit); 
    font-size: 1.3rem;
    font-weight: 700;
  }
}

nav 
{
  order: 3; 
  display: flex; 
  flex-wrap: wrap; 
  align-items: center; 
  gap: 0.25rem; 
  min-height: 2.25rem; 
  padding: 0.25rem 0.75rem;
  background-color: var(--nav-bg-color); 
  color: var(--nav-text-color); 
  border-bottom: var(--nav-border-bottom); 
  box-shadow: 0 0.15rem 0.5rem rgba(0, 0, 0, 0.1);
  
  & a, 
  & button, 
  & button[popovertarget] 
  { 
    padding: 0.3rem 0.75rem; 
    border-radius: 0.25rem; 
    transition: background-color 0.1s ease; 
    color: inherit; 
    background-color: inherit; 
    border: none; 
    user-select: none;
    
    &:hover {  background-color: var(--nav-hover-color); } 
  }
}

/*
 * MAIN - hlavní plocha
 */
body > main 
{
  order: 4; 
  background-color: var(--main-bg-color, #ffffff);
  width: 100%; 
  height: 100%; 
  overflow-y: auto;
  /*  
  display: flex;
  flex-direction: row; 
  flex-wrap: wrap; 
  flex: 1;  
  padding: clamp(0.75rem, 0.5rem + 1vw, 2rem); 
  gap: 1.5rem; 
  */
}

/* Vaše původní nedotčené flexibilní chování oken (fieldsetů) na ploše */
body > main fieldset 
{
  flex: 1 1 20rem; 
  align-self: flex-start;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.04), 0 0.05rem 0.2rem rgba(0, 0, 0, 0.03);
}

aside 
{
  display: flex; 
  flex-direction: column; 
  background-color: var(--aside-bg-color); 
  border: 0.07rem solid rgba(0, 0, 0, 0.08);
  border-radius: 0.4rem; 
  padding: 0.75rem; 
  height: 100%; 
  box-shadow: 0 0.15rem 0.4rem rgba(0, 0, 0, 0.03); 
  overflow-y: auto;
  width: attr(data-width type(<length>), 16rem); 
  max-width: 25vw;
  
  & h3 
  { 
    padding-bottom: 0.4rem; 
    margin-bottom: 0.5rem; 
    border-bottom: 0.07rem solid #e5e5e5; 
    color: var(--body-text-color) !important; 
  }
  
  & ul.project-tree 
  { 
    list-style: none; 
    padding-left: 0; 
    
    & li 
    { 
      padding: 0.25rem 0.4rem; 
      display: flex; 
      align-items: center; 
      gap: 0.4rem; 
      cursor: pointer; 
      border-radius: 0.2rem; 
      color: var(--body-text-color); 
      white-space: nowrap; 
      
      &:hover 
      { 
        background-color: var(--list-item-hover-bg, rgba(0, 0, 0, 0.04)); 
      } 
    } 
  }
}

aside[popover] 
{
  border: none; 
  background: var(--aside-bg-color); 
  padding: 0.75rem; 
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
  position: fixed; 
  top: 3rem; 
  left: 0.5rem; 
  bottom: 2.5rem; 
  height: calc(100vh - 7.5rem); 
  width: attr(data-width type(<length>), 16rem); 
  max-width: 85vw; 
  border-radius: 0.5rem;
  transition: transform 0.2s ease, display 0.2s ease allow-discrete, overlay 0.2s ease allow-discrete; 
  transform: translateX(-110%);
  
  & h3 
  { 
    padding-bottom: 0.4rem; 
    margin-bottom: 0.5rem; 
    border-bottom: 0.07rem solid #e5e5e5; 
  }
  
  & ul.project-tree 
  { 
    list-style: none; 
    padding-left: 0; 
    
    & li 
    { 
      padding: 0.3rem 0.5rem; 
      display: flex; 
      align-items: center; 
      gap: 0.4rem; 
      cursor: pointer; 
      border-radius: 0.25rem; 
      color: var(--body-text-color); 
      white-space: nowrap; 
      
      &:hover 
      { 
        background-color: var(--list-item-hover-bg, rgba(0, 0, 0, 0.05)); 
      } 
    } 
  }
}

aside[popover]:popover-open { transform: translateX(0); }
aside[popover]::backdrop { background-color: rgba(0, 0, 0, 0.1); }

footer 
{
  order: 5; 
  width: 100%; 
  height: 2.2rem; 
  display: flex; 
  align-items: center; 
  padding: 0.2 0.2rem;
  background-color: var(--footer-bg-color); 
  color: var(--footer-text-color); 
  border-top: var(--footer-top-border);
  gap: 0.25rem;
  overflow: hidden; 
  
  & .window-minized 
  { 
    background-color: var(--footer-window-minized-bg-color); 
    color: var(--footer-window-minized-text-color); 
    border: var(--footer-window-minized-border); 
    padding: 0.2rem 0.6rem; 
    border-radius: 0.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;             /* Jednotná mezera mezi ikonami a textem */

    flex: 1 1  max-content;          /* Prvek roste podle obsahu, ale smí ustoupit */
    max-width: 14rem;        /* Maximální šířka jedné záložky na taskbaru */
    min-width: 2.5rem;       
    overflow: hidden;        
    
    & i 
    { 
      flex-shrink: 0;        /* Ikony se nesmí nikdy smrštit */
    } 

    /* Pravidla pro bezpečné ořezávání textu uvnitř spanu */
    & .window-title-text 
    {
      flex: 1;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }

}

/* ==========================================================================
   VEKTOROVÉ IKONY (FontAwesome)
   ========================================================================== */
@keyframes icon-pulse
{
  0% { opacity: 0.3; }
  25% { opacity: 0.6; }
  50% { opacity: 1.0; }  
  75% { opacity: 0.6; }
  100% { opacity: 0.3; }
}


/* ČERVENÉ VAROVNÉ PODSVÍCENÍ */
.panel-kontrolka.varovani 
{
  animation: podsviceni-cervena 1.5s steps(1) infinite;
}

@keyframes podsviceni-cervena 
{
  0%, 100% {
    /* VYPNUTO */
    /*background-image: radial-gradient(circle at center, #b42f2f 0%, #830101 80%);*/
    color: inherit;
    /*box-shadow: inset 0 3px 5px rgba(0,0,0,0.6);*/
    background-color: #fff;
    /*box-shadow: inset 0 0.0625rem 0.1875rem rgba(255,255,255,0.6), 
                0 0 0.625rem rgba(100, 100, 100, 0.6), 
                0 0 1.25rem rgba(100, 100, 100, 0.3);*/
    
  }
  50% {
    /* ZAPNUTO */
    background-image: radial-gradient(circle at center, #fff5f5 0%, #ffbdbd 70%);
    color: inherited;
    /*
    box-shadow: inset 0 0.0625rem 0.1875rem rgba(255,255,255,0.6), 
                0 0 0.625rem rgba(255, 0, 0, 0.6), 
                0 0 1.25rem rgba(255, 0, 0, 0.3);*/
  }
}


i 
{  
  &.shadow 
  { 
    filter: drop-shadow(0 0.08rem 0.1rem rgba(0, 0, 0, 0.15)); 
  }

  &.fa-solid 
  {
    --icon-color-start: inherit;
    --icon-color-end: inherit;
   
   &:has(.red):has(.orange):has(.green):has(.blue)
   {
     /* Společné vlastnosti pro všechny barevné ikony (napíšeme jen jednou) */
    background: radial-gradient(circle at center, var(--icon-color-start), var(--icon-color-end));
    background-clip: text; 
    -webkit-background-clip: text; 
    color: transparent; 
    -webkit-text-fill-color: transparent; 
   }

    /* Definice barev pomocí CSS proměnných */
    &.red { 
      --icon-color-start: #ff0000;
      --icon-color-end: #b60303;
      --icon-blink-start: #ffacac;
      --icon-blink-end: #ff1e1e;
    }

    &.orange { 
      --icon-color-start: orange;
      --icon-color-end: rgb(184, 114, 1);
      --icon-blink-start: rgb(255, 202, 104);
      --icon-blink-end: rgb(231, 145, 7);
    }
    
    &.blue { 
      --icon-color-start: #73a4ff;
      --icon-color-end: #023596;
      --icon-blink-start: #b4ceff;
      --icon-blink-end: #1056d7;
    }
    
    &.green { 
      --icon-color-start: #17c511;
      --icon-color-end: #0d9408;
      --icon-blink-start: #7eec59;
      --icon-blink-end: #46c91a;
    }

    /* Jediná vnořená třída pro blikání spouštějící univerzální animaci */
    &.blink {
      animation: icon-universal-blink-animation 1s infinite;
    }
  }
}

/* ==========================================
   UNIVERZÁLNÍ BLIKAJÍCÍ ANIMACE pro všechny barvy
   ========================================== */
@keyframes icon-universal-blink-animation 
{
  0%, 100% {
    color: inherit;
    background-image: radial-gradient(circle at center, var(--icon-color-start) 0%, var(--icon-color-end) 70%);    
  }
  50% {
    color: inherit;
    background-image: radial-gradient(circle at center, var(--icon-blink-start) 0%, var(--icon-blink-end) 70%);
  }
}


i.fa-regular2 
{ 
  &.red { color: #ff0000; } 
  &.blue { color: #0078d4; } 
  &.green { color: #2c8a04; } 
}


/* ==========================================================================
   TAB-CONTROL (WinForms: TabControl)
   --------------------------------================================----------
   Kompletní hierarchie přepínacího panelu záložek. Všechny stavy, lišta 
   i samotná tlačítka jsou uzavřeny v jednom přehledném objektovém bloku.
   ========================================================================== */
tab-control 
{
  display: flex; 
  flex-direction: column; 
  width: 100%; 
  box-sizing: border-box;
  font-family: var(--tab-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: var(--tab-font-size, 0.85rem);
  overflow: hidden; /* Pojistka: Nic nesmí přetéct ven z TabControlu */

  /*Horní lišta s oušky záložek (TabStrip / Navbar) */
  & .tab-navbar 
  { 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    flex-shrink: 0;
    overflow-x: auto; /* Zapíná plynulý horizontální scroll, pokud se záložky nevejdou vedle sebe */
    scrollbar-width: none; 
    background-color: var(--tab-control-navbar-bg, transparent) !important; 
    margin-bottom: -1px; 
    z-index: 2; 
    border-bottom: 1px solid var(--tab-control-border-color, #aaa); 
    width: 100%; 
    row-gap: 0.4rem; 
    
    /* Skryje ošklivé šedé posuvníky systémů pro čistý Windows 11 vzhled */
    &::-webkit-scrollbar {display: none;}    
  }

  /* Tlačítko záložky (Ouško / TabPageButton) */
  & .tab-navbar button.tab-btn 
  { 
    all: unset !important; /* Vymaže výchozí vzhled a stíny globálních tlačítek [1] */
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--tab-navbar-padding, 8px 16px) !important;
    height: var(--tab-navbar-height, auto) !important;
    cursor: pointer !important;
    
    background-color: var(--tab-control-inactive-bg, #f3f3f3) !important; 
    color: var(--tab-control-inactive-text, #5f5f5f) !important;
    border: 1px solid var(--tab-control-border-color, #aaa) !important;
    border-bottom: none !important; 
    border-top-left-radius: 6px !important;
    border-top-right-radius: 6px !important;
    margin: 0 2px 0 0 !important; 
    white-space: nowrap !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 500 !important;
    transition: background-color 0.1s ease, color 0.1s ease !important;

    /* Hover stav ouška při najetí myši */
    &:hover 
    { 
      background-color: var(--tab-control-hover-bg, rgba(0, 0, 0, 0.04)) !important; 
    } 

    /* STAV SELECTED / ACTIVE (Aktivní vybraná stránka) */
    &.active 
    { 
      background-color: var(--tab-control-active-bg, #ffffff) !important; 
      color: var(--tab-control-active-text, #0067b8) !important; 
      border-color: var(--tab-control-border-color, #aaa) !important;
      border-bottom: 1px solid var(--tab-control-active-bg, #ffffff) !important; /* Překryje a zneviditelní linku pod sebou */
      margin-bottom: -1px !important;
      font-weight: 600 !important;
      text-decoration: none !important; 
    } 
  }

  /* Společný kontejner pro vnitřní stránky (TabBody / ClientArea) */
  & .tab-body-container 
  {
    flex-grow: 1;
    overflow-y: auto;
    border: 0.07rem solid var(--tab-control-border-color, #aaa); 
    background-color: var(--tab-control-body-bg, #ffffff); 
    color: var(--tab-control-body-text, #1a1a1a); 
    z-index: 1; 
    width: 100%; 
    box-sizing: border-box; 
    border-radius: 0 0 8px 8px; 
  }
}

/* Styl pro samotnou vloženou stránku obsahu (WinForms: TabPage) */
tab-control-page 
{ 
  padding: 0.5rem 1rem;
  display: block; 
  width: 100%; 
  box-sizing: border-box; 
  color: inherit;

  /* řazení komponent pod sebe (pokud není aktivován container) */
  & > *:not(.page-container-layout) { margin-top: 0.5rem; }
  
  /* DETACHED FLEXBOX KONTEJNER: Vnitřní fluidní vrstva pro řazení vedle sebe */
  & .page-container-layout 
  {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* Povolí automatické odřazování při nedostatku místa */
    gap: 1rem;       /* Moderní a čisté rozestupy mezi komponentami ze všech stran */
    width: 100%;
    box-sizing: border-box;

    /* Vnořené průmyslové komponenty (GroupBoxy, panely, šablony) uvnitř layoutu */
    & > fieldset,
    & > details,
    & > article 
    {
      display: block;
      flex: 1 1 24rem; /* Flex-grow: 1, Flex-shrink: 1, Flex-basis: 24rem */
      box-sizing: border-box;
    }
  }

}


/* ==========================================================================
   DETAILS:NOT([NAME]) (Windows 11: Expander)
   --------------------------------------------------------------------------
   Kompletní styl rozbalovací sémantické karty. Klikací summary, texty h1, 
   odstavce p i otáčející se šipka jsou uzavřeny v jednom přehledném těle.
   ========================================================================== */
details:not([name]) 
{
  /* display: block !important zajišťuje plnou šířku a imunitu vůči flexboxu nadřazené plochy */
  display: block; 
  width: 100%; 
  background-color: var(--expander-bg, #ffffff); 
  border: 0.06rem solid var(--expander-border, rgba(0, 0, 0, 0.08)); 
  border-radius: 0.5rem; 
  margin-bottom: 0.5rem; 
  box-sizing: border-box; 
  overflow: hidden; 
  transition: border-color 0.15s ease;

  /* Hover stav celé karty Expanderu */
  &:hover 
  { 
    border-color: var(--expander-border-hover, rgba(0, 0, 0, 0.14)); 
  }

  /* Hlavní klikací řádek Expanderu (Záhlaví karty / Header) */
  & summary 
  { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 1rem 1rem; 
    cursor: pointer; 
    user-select: none; 
    list-style: none; 
    position: relative; 
    transition: background-color 0.1s ease; 
    flex-wrap: wrap; /* Umožní nadpisu a popisku odřazovat se pod sebe */

    /* Skryje výchozí systémový trojúhelníček v Safari / WebKitu */
    &::-webkit-details-marker { display: none; } 

    &:hover { background-color: var(--expander-hover-bg, rgba(0, 0, 0, 0.02)); }

    /* Nadpis uvnitř expanderu (Main Title) */
    & h1 
    { 
      all: unset; 
      display: block; 
      width: calc(100% - 3rem); 
      font-size: 1rem; 
      font-weight: 600; 
      color: var(--expander-text-main, #1a1a1a); 
      margin: 0 0 0.25rem 0; 
      padding: 0;
    }

    /* Doprovodný popisek pod nadpisem (SubTitle / Description) */
    & p
    {
      all: unset; 
      display: block; 
      width: calc(100% - 3rem); 
      font-size: 0.9rem; 
      color: var(--expander-text-sub, #5f5f5f); 
      margin: 0; 
      padding: 0;       
    }

    /* Tenká šipka generovaná čistým CSS v pravém rohu */
    &::after 
    { 
      content: ""; 
      display: block; 
      width: 0.5rem; 
      height: 0.5rem; 
      border-right: 0.08rem solid var(--expander-icon-color, #5f5f5f); 
      border-bottom: 0.08rem solid var(--expander-icon-color, #5f5f5f); 
      transform: rotate(45deg); /* Výchozí stav: šipka směřuje dolů */
      transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); 
      flex-shrink: 0; 
      position: absolute; 
      right: 1.5rem; 
      top: calc(50% - 0.25rem); 
    } 
  }

  /* Vnitřní rozbalené tělo karty (Vnitřní panel s UserControly) */
  & summary + div 
  {     
    padding: 0.5rem 1rem; 
    background-color: var(--expander-bg-expanded, #f9fafb); 
    color: var(--expander-text-main, #1a1a1a);     
    box-sizing: border-box;
    /*margin pouze na přímé děti tohoto divu, vnořené controly uvnitř jiných divů nebo panelů už zůstanou nedotčené.*/
    & > * { margin-top: 0.5rem; } 
  }

  /* STAV OTEVŘENO (Atribut [open] aktivovaný prohlížečem) */
  &[open] 
  { 
    border-color: var(--expander-focus-border-color, #0066cc);
    box-shadow: 0 0 0 0.08rem var(--expander-focus-border-color);
    /* Plynulé otočení šipky směrem nahoru */
    & summary::after { transform: rotate(-135deg); }
    /* Dělící linka mezi hlavičkou a rozbaleným vnitřkem */
    & summary { border-bottom: 0.06rem solid var(--expander-border, rgba(0, 0, 0, 0.08));}
    /* Spuštění plynulé Fluent animace prolnutí obsahu směrem dolů */
    & summary + div { animation: fluentExpanderFadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);}
  }
}

/* Animační osa pro plynulé rozbalení karty */
@keyframes fluentExpanderFadeIn 
{ 
  from 
  { 
    opacity: 0; 
    transform: translateY(-0.25rem); 
  } 
  to 
  { 
    opacity: 1; 
    transform: translateY(0); 
  } 
}


/* ==========================================================================
   FLOW-LAYOUT-PANEL (WinForms: FlowLayoutPanel / Grid Mřížka Formuláře)
   --------------------------------------------------------------------------
   Tento klíčový selektor vytváří responsivní dvousloupcovou mřížku pro 
   dvojice Label -> Input. Využívá fluidní clamp matematiku pro automatické 
   a plynulé dýchání mezer mezi řádky podle velikosti okna.
   ========================================================================== */
[flow-layout-panel], .flow-layout-panel
{
  display: grid; 
  grid-template-columns: 1fr; 
  width: 100%;
  /*margin: 1rem 0;*/
  gap: 0.5rem 1.0rem;

  /* Popisky políček */
  & label 
  { 
    white-space: normal; 
    word-wrap: break-word; 
    color: var(--label-text-color, #333333); 
    line-height: 1.2;
    
    /* Fluidní odstup textu labelu od samotného políčka */
    margin-bottom: clamp(0.15rem, 0.1rem + 0.2vw, 0.3rem);
  }

  /* Container Query pro inteligentní dvousloupcové řazení oken. Jakmile má GroupBox šířku alespoň 22rem, label a input skočí vedle sebe. */
  @container (min-width: 22rem) 
  {
    /* Levý sloupec (label): Zabere POUZE tolik místa, kolik reálně potřebuje jeho text.
       Pravý sloupec (input): Sežere veškerý zbývající prostor a roste s oknem (Anchor Left+Right). */
    grid-template-columns: max-content 1fr; 
    align-items: center; 

    & label 
    {
      margin-bottom: 0; /* Reset spodního marginu, protože jsou vedle sebe */
      max-width: 35cqw; /* Pokud by byl text labelu extrémně dlouhý, nenecháme ho zabrat celé okno, maximálně na 35% šířky a pak se zalomit. Pro běžné labely ale bude těsné obtékání.*/
    }
  }
}

/* ==========================================================================
   GRID-LAYOUT-PANEL (WinForms: TableLayoutPanel / Dvousloupcový Grid)
   --------------------------------------------------------------------------
   Vytváří mřížku pro větší kontejnery (fieldset, details). Pokud je prostor,
   drží je ve dvou sloupcích vedle sebe. Na menších oknech je skládá pod sebe.
   ========================================================================== */
[grid-layout-panel], .grid-layout-panel 
{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr)); /* 👈 Automatické sloupce s minimální šířkou kontejneru 24rem */
  gap: 1rem; /* Jednotná mezera mezi velkými kontejnery horizontálně i vertikálně */
  width: 100%;
}


/* ==========================================================================
   WRAP-LAYOUT-PANEL (WinForms: FlowLayoutPanel / Přetékající vedle sebe)
   --------------------------------------------------------------------------
   Řadí kontejnery vedle sebe. Pokud se další kontejner nevejde na řádek,
   odřadí se na nový řádek dospodu.
   ========================================================================== */
[wrap-layout-panel], .wrap-layout-panel
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; /* odřazování */
  gap: 1rem;
  width: 100%;

  /* Vnořené fieldsety (groupboxy) budou mít flexibilní základ, ale nesmrští se pod 24rem */
  & > fieldset,
  & > details,
  & > article { flex: 1 1 24rem; }
}

/* ==========================================================================
   BUTTON-STRIP-PANEL (WinForms: Spodní lišta tlačítek / Dialog Buttons)
   --------------------------------------------------------------------------
   Kontejner pro horizontální řazení akčních tlačítek na spodku formulářů.
   Výchozí chování (bez podtřídy) zarovnává tlačítka DOPRAVA (WinForms výchozí).
   ========================================================================== */
[button-strip-panel], .button-strip-panel 
{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;             /* Obrana proti přetečení na malých displejích */
  align-items: center;
  justify-content: flex-end;   /* VÝCHOZÍ: Zarovnání tlačítek DOPRAVA (např. OK / Storno) */
  gap: 0.5rem 0.75rem;         /* Jednotná mezera mezi tlačítky horizontálně i vertikálně */
  width: 100%;
  padding-top: 0.75rem;        /* Odsazení od obsahu formuláře nad ním */
  /*border-top: 0.05rem solid var(--popover-border-color, #e4e6eb); /* Jemná oddělovací linka */

  /* PODTŘÍDA: Zarovnání na STŘED */
  &[align-center], &.align-center {justify-content: center;}

  /* PODTŘÍDA: Zarovnání DOLEVA */
  &[align-left], &.align-left {justify-content: flex-start;}

  /* Speciální WinForms vychytávka: Pokud chcete jedno tlačítko vlevo (např. Nápověda) 
     a zbytek klasicky vpravo (OK / Storno), stačí tomu levému tlačítku dát v HTML style="margin-right: auto" */
}


/* =======================================================
   Stylování USERCONTROL (zatím ve fázi prototypu)
   ======================================================= */
article
{  
  overflow: hidden;
  container-type: inline-size; /* Sledování šířky komponenty pro vnořené layouty */
  min-width: 0;                /* Bezpečnostní pojistka proti přetékání Flexboxu */
  /* Fluent vzhled Windows 11 karet navázaný na colors.css */
  border: 0.07rem solid var(--article-border-color, #d1d1d1);
  border-radius: var(--article-border-radius, 0.5rem);
  background-color: var(--article-bg-color, #ffffff);
  color: var(--body-text-color);


  /* Margin na VŠECHNY přímé děti... */
  & > * { margin-top: 0.5rem;} 

  /* KROMĚ úplně prvního prvku, pokud je jím H1 */
  & > h1:first-of-type, & > h2:first-of-type, & > h3:first-of-type, & > h4:first-of-type { margin-top: 0; }

  /* Pokud tam H1 JE, tak prvnímu prvku HNED ZA NÍM ten margin vrátíme! */
  & > h1:first-of-type ~ * { margin-top: 0.5rem; }

  
}