/* style.css – Neuromorphic design */

/* Upozornění: Neuromorfní prvky mají často nízký kontrast, zvažte doplnění vhodných alternativ pro přístupnost. */



:root {

    --background: #ecf0f3;

    --shadow-light: #ffffff;

    --shadow-dark: #a3b1c6;

    --text-color: #5e5e5e;

    --font-family-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    /* Definuj barvy pro jednotlivé stavy odkazu */

    --link-color: #3b8bf4;

    /* standardní (unvisited) */

    --link-visited-color: #9751d8;

    /* po návštěvě */

    --link-hover-color: #3b8bf4;

    /* při najetí myší */

    --link-active-color: #3b8bf4;

    /* při kliknutí */

    --danger: rgb(161, 6, 6);

    --success: #059669;

    --accent: #0066cc;



}



:root.dark-mode {

    --background: #2e2e2e;

    --shadow-light: #3a3a3a;

    --shadow-dark: #1a1a1a;

    --text-color: #e0e0e0;

    /* Definuj barvy pro jednotlivé stavy odkazu */

    --link-color: #3b8bf4;

    /* standardní (unvisited) */

    --link-visited-color: #9751d8;

    /* po návštěvě */

    --link-hover-color: #3b8bf4;

    /* při najetí myší */

    --link-active-color: #3b8bf4;

    /* při kliknutí */

    --danger: rgb(161, 6, 6);

    --success: #21af15;

    --accent: #3c9cfd;



}



/* Globální box-sizing pro pohodlné rozložení */

html {

    box-sizing: border-box;

}



*,

*::before,

*::after {

    box-sizing: inherit;

}



/* Celková tapeta */

body {

    background: var(--background);

    color: var(--text-color);

    font-family: var(--font-family-base);

    margin: 0;

    padding: 5rem;

    padding-top: 5rem;

    line-height: 1.3;

}



/* 1) Kulaté tlačítko s ikonou */

.btn-round-icon {

    width: 50px;

    height: 50px;

    border-radius: 50%;

    background: var(--background);

    box-shadow:

        6px 6px 10px var(--shadow-dark),

        -6px -6px 10px var(--shadow-light);

    border: none;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    color: var(--text-color);

}



.btn-round-icon:active {

    transition: box-shadow 0.3s ease;

    box-shadow:

        inset 6px 6px 10px var(--shadow-dark),

        inset -6px -6px 10px var(--shadow-light);

}



/* 2) Oválné tlačítko s nápisem a ikonou */

.btn-oval-icon-text {

    padding: 0.75rem 1.5rem;

    border-radius: 50px;

    background: var(--background);

    box-shadow:

        6px 6px 10px var(--shadow-dark),

        -6px -6px 10px var(--shadow-light);

    border: none;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    cursor: pointer;

    font-size: 1rem;

    color: var(--text-color);

}



.btn-oval-icon-text i {

    margin-right: 0.5rem;

}



.btn-oval-icon-text:active {

    transition: box-shadow 0.3s ease;

    box-shadow:

        inset 6px 6px 10px var(--shadow-dark),

        inset -6px -6px 10px var(--shadow-light);

}



/* 3) Pole pro zobrazení textového dokumentu */



#doc-box strong {

    color: var(--accent);

}



.doc-field {

    width: 100%;

    max-width: 800px;

    height: 300px;

    padding: 1rem;

    border-radius: 8px;

    background: var(--background);

    box-shadow:

        inset 6px 6px 10px var(--shadow-dark),

        inset -6px -6px 10px var(--shadow-light);

    overflow-y: auto;

    font-family: 'Courier New', Courier, monospace;

    color: var(--text-color);

    line-height: 1;

    white-space: pre-wrap;

    scrollbar-width: thin;

    scrollbar-color: var(--shadow-dark) var(--background);

}



.doc-field::-webkit-scrollbar {

    width: 8px;

}



.doc-field::-webkit-scrollbar-track {

    background: var(--background);

    border-radius: 4px;

}



.doc-field::-webkit-scrollbar-thumb {

    background-color: var(--shadow-dark);

    border-radius: 4px;

    border: 2px solid var(--background);

}



.doc-field::-webkit-scrollbar-thumb:hover {

    box-shadow:

        inset 2px 2px 5px rgba(0, 0, 0, 0.2),

        inset -2px -2px 5px rgba(255, 255, 255, 0.7);

}



/* 4) Infotext */

.infotext {

    margin: 1rem 0;

    padding: 1rem;

    border-radius: 6px;

    background: var(--background);

    box-shadow:

        3px 3px 6px var(--shadow-dark),

        -3px -3px 6px var(--shadow-light);

    font-size: 0.9rem;

    line-height: 1.2;

    color: var(--text-color);

}



/* Jednoduchý neumorfní textový stín pro h1 a h2 */

h1,

h2 {

    color: var(--text-color);

    font-family: var(--font-family-base);

    display: inline-block;

}



h1 {

    font-size: 3rem;

    text-shadow:

        2px 2px 4px rgba(0, 0, 0, 0.2),

        -2px -2px 4px rgba(255, 255, 255, 0.7);

}



h2 {

    font-size: 2rem;

    text-shadow:

        2px 2px 4px rgba(0, 0, 0, 0.15),

        -2px -2px 4px rgba(255, 255, 255, 0.6);

}



/* Úprava line-height pro odstavce a seznamy */

p,

li {

    line-height: 1.3;

}



/* Neuromorfní hlavička */

.site-header.neumo {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 1rem 2rem;

    background: var(--background);

    border-radius: 12px;

    box-shadow:

        6px 6px 10px var(--shadow-dark),

        -6px -6px 10px var(--shadow-light);

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 1000;

}



/* Logo a název webu */

.site-header .logo a {

    display: inline-flex;

    align-items: center;

    text-decoration: none;

    color: var(--text-color);

}



.site-header .logo img {

    width: 40px;

    height: 40px;

}



.site-header .site-title {

    margin-left: 0.5rem;

    font-size: 1.25rem;

    font-weight: bold;

    text-shadow:

        2px 2px 4px rgba(0, 0, 0, 0.15),

        -2px -2px 4px rgba(255, 255, 255, 0.7);

}



/* Navigace */

.site-header .main-nav ul {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    gap: 1.5rem;

}



.site-header .main-nav a {

    text-decoration: none;

    font-size: 1rem;

    color: var(--text-color);

    padding: 0.5rem 1rem;

    border-radius: 8px;

    box-shadow:

        4px 4px 6px var(--shadow-dark),

        -4px -4px 6px var(--shadow-light);

}



/* Hamburger tlačítko (mobilní menu) */

.site-header .btn-round-icon {

    width: 40px;

    height: 40px;

}



/* Flex gap pro sloupce */

.two-col {

    display: flex;

    gap: 3rem;

}



.two-col .col {

    flex: 1;

}



/* Responsivní sloupce pod sebou */

@media (max-width: 1024px) {

    .two-col {

        flex-direction: column;

    }

}



/* ========== RESET HOVER-ANIMACE ========== */

/* Všechny hover stavy vrátíme na výchozí vystouplý stav */

.btn-round-icon:hover,

/*.btn-oval-icon-text:hover,*/

.site-header .main-nav a:hover {

    box-shadow:

        6px 6px 10px var(--shadow-dark),

        -6px -6px 10px var(--shadow-light);

}



/* Odstraníme transition pro běžné stavy */

.btn-round-icon,

/*.btn-oval-icon-text,*/

.site-header .main-nav a {

    transition: none;

}



/* Animace jen na aktivní stav */

.btn-round-icon:active,

.btn-oval-icon-text:active,

.site-header .main-nav a:active {

    transition: box-shadow 0.3s ease;

}



/* --- Archive --- */

#archive-list {

    padding-left: 0;

    margin: 0;

    font-size: .9rem;



    /* tato část zůstává stejná: */

    column-gap: 1.5rem;

    /* column-fill: auto;  remove nebo přepište */

    /* místo toho: */

    -webkit-column-fill: balance;

    -moz-column-fill: balance;

    column-fill: balance;

}



/* ... Vaše pravidla pro li atd. ... */

#archive-list li {

    break-inside: avoid;

    margin-bottom: .5rem;

    padding-left: 1rem;

    list-style-position: inside;

}



/* Media queries pro column-count: */

@media (max-width: 599px) {

    #archive-list {

        column-count: 1;

    }

}



@media (min-width: 600px) and (max-width: 1023px) {

    #archive-list {

        column-count: 2;

    }

}



@media (min-width: 1024px) {

    #archive-list {

        column-count: 3;

    }

}



/* aby se dlouhé názvy zalamovaly: */

#archive-list li a {

    word-break: break-all;

}



#archive-list-2 {

    padding-left: 0;

    margin: 0;

    font-size: .9rem;



    /* tato část zůstává stejná: */

    column-gap: 1.5rem;

    /* column-fill: auto;  remove nebo přepište */

    /* místo toho: */

    -webkit-column-fill: balance;

    -moz-column-fill: balance;

    column-fill: balance;

}



/* ... Vaše pravidla pro li atd. ... */

#archive-list-2 li {

    break-inside: avoid;

    margin-bottom: .5rem;

    padding-left: 1rem;

    list-style-position: inside;

}



/* Media queries pro column-count: */

@media (max-width: 599px) {

    #archive-list-2 {

        column-count: 1;

    }

}



@media (min-width: 600px) and (max-width: 1023px) {

    #archive-list-2 {

        column-count: 2;

    }

}



@media (min-width: 1024px) {

    #archive-list-2 {

        column-count: 3;

    }

}



/* aby se dlouhé názvy zalamovaly: */

#archive-list-2 li a {

    word-break: break-all;

}



#archive-list-3 {

    padding-left: 0;

    margin: 0;

    font-size: .9rem;



    /* tato část zůstává stejná: */

    column-gap: 1.5rem;

    /* column-fill: auto;  remove nebo přepište */

    /* místo toho: */

    -webkit-column-fill: balance;

    -moz-column-fill: balance;

    column-fill: balance;

}



/* ... Vaše pravidla pro li atd. ... */

#archive-list-3 li {

    break-inside: avoid;

    margin-bottom: .5rem;

    padding-left: 1rem;

    list-style-position: inside;

}



/* Media queries pro column-count: */

@media (max-width: 599px) {

    #archive-list-3 {

        column-count: 1;

    }

}



@media (min-width: 600px) and (max-width: 1023px) {

    #archive-list-3 {

        column-count: 2;

    }

}



@media (min-width: 1024px) {

    #archive-list-3 {

        column-count: 3;

    }

}



/* aby se dlouhé názvy zalamovaly: */

#archive-list-3 li a {

    word-break: break-all;

}







/* Obecné nastavení, aby odkazy neměly podtržení, pokud nechceš */

a {

    text-decoration: none;

    color: var(--link-color);

}



/* Stav „nekliknutý“ */

a:link {

    color: var(--link-color);

}



/* Stav „navštívený“ */

a:visited {

    color: var(--link-visited-color);

}



/* Stav „hover“ */

a:hover {

    color: var(--link-hover-color);

    /* případně text-decoration: underline; */

}



/* Stav „active“ (klikání) */

a:active {

    color: var(--link-active-color);

    /* případně další efekt, např. transform: translateY(1px); */

}





/* --- Status --- */

#status {

    font-weight: 500;

}



.status-dot {

    display: inline-block;

    width: .8em;

    height: .8em;

    margin-right: 4px;

    border-radius: 50%;

    background: var(--success);

    vertical-align: middle;

}



.status-offline {

    background: var(--danger);

}



.status-error {

    background: #d97706;

}



/* skryjeme mobilní menu i hamburger ve velkém zobrazení */

#menu-toggle {

    display: none;

}



/* pro obrazovky <=800px: vodorovné menu pryč, zobrazíme hamburger */

@media (max-width: 1100px) {

    .site-header .main-nav {

        display: none;

    }



    #menu-toggle {

        display: inline-flex;

        margin-left: 1rem;

    }



    #mobile-nav {

        display: block;

    }

}



/* mobilní navigace: skrytá, zobrazená po .open */

.mobile-nav {

    position: fixed;

    top: calc(1rem + 60px + 1rem);

    /* výška headeru včetně paddingu */

    left: 50%;

    transform: translateX(-50%) scaleY(0);

    transform-origin: top center;

    width: calc(100% - 2rem);

    background: var(--background);

    border-radius: 0 0 12px 12px;

    box-shadow:

        6px 6px 10px var(--shadow-dark),

        -6px -6px 10px var(--shadow-light);

    transition: transform 0.3s ease;

    z-index: 1001;

    overflow: hidden;

}



.mobile-nav.open {

    transform: translateX(-50%) scaleY(1);

}



.mobile-nav ul {

    list-style: none;

    margin: 0;

    padding: 1rem;

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.mobile-nav a {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.75rem;

    border-radius: 8px;

    background: var(--background);

    box-shadow:

        4px 4px 6px var(--shadow-dark),

        -4px -4px 6px var(--shadow-light);

    text-decoration: none;

    color: var(--text-color);

}



.mobile-nav a:active {

    box-shadow:

        inset 4px 4px 6px var(--shadow-dark),

        -4px -4px 6px var(--shadow-light);

}



img.resp {

    max-width: 100%;

    height: auto;

    border: 1px solid var(--border);

    border-radius: 6px;

    margin: 0 0 32px;

    display: block;

}



/* ===== LIGHTBOX ===== */

.lightbox-overlay {

    position: fixed;

    inset: 0;

    background: rgba(0, 0, 0, .9);

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 1000;

}



.lightbox-overlay img {

    max-width: 99vw;

    max-height: 99vh;

    box-shadow: 0 0 30px #0008;

    border-radius: 6px;

}



/* Neuromorfní horizontální oddělovač */

.neumo-divider {

    /* odsazení zleva i zprava */

    width: calc(100% - 2rem);

    /* nebo nastavte max-width podle designu */

    height: 1px;

    /* tloušťka čáry */

    margin: 2rem auto;

    /* vertikální mezera 2rem, vodorovně centrováno */

    background: var(--background);

    box-shadow:

        /* lehce vystouplý vzhled */

        2px 2px 4px var(--shadow-dark),

        -2px -2px 4px var(--shadow-light);

}



/* Aplikovat stejnou šířku na tlačítka v klasickém i mobilním menu */

.site-header .main-nav a.btn-oval-icon-text,

#mobile-nav a.btn-oval-icon-text {

  width: 130px;            /* nebo min-width:120px podle potřeby */

  justify-content: center; /* centrovat ikonu + text */

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



/* modal konverzace */



  #modal-dialog .doc-field {

    position: relative;

    cursor: pointer;

    min-height: 150px;

    border: 1px solid #eee;

    background: #fafcff;

    transition: box-shadow .3s;

  }

  #modal-dialog .doc-field:hover {

    box-shadow: 0 2px 18px 0 rgba(30,60,130,0.12);

  }

  #modal-dialog .doc-field .loupe-icon {

    display: none;

    position: absolute;

    top: 6px;

    right: 12px;

    font-size: 1.4em;

    color: #1877f2;

    background: #fff;

    border-radius: 50%;

    padding: 5px;

    z-index: 2;

    cursor: pointer;

    transition: background 0.18s;

  }

  #modal-dialog .doc-field:hover .loupe-icon {

    display: inline-block;

  }



  #modal-bg {

    display: none;

    position: fixed;

    top:0; left:0; width:100vw; height:100vh;

    background: rgba(30,40,60,0.74);

    z-index: 9999;

  }

  #modal-dialog {

    background: #fff;

    max-width: 950px;

    width: 94vw;

    max-height: 85vh;

    margin: 4vh auto;

    border-radius: 14px;

    box-shadow: 0 2px 32px 0 rgba(15,28,78,0.18);

    padding: 2em 2em 1.3em;

    overflow-y: auto;

    position: relative;

  }

  #modal-content {

    font-size: 1.16em;

    line-height: 1.62;

    white-space: pre-wrap;

    color: #26253a;

  }

  #modal-close {

    position: absolute;

    top: 1em; right: 1.5em;

    font-size: 2em;

    cursor: pointer;

    color: #868ea5;

    transition: color .18s;

    z-index: 2;

  }

  #modal-close:hover {

    color: #e24e44;

  }