body { background: #e8e8e8; font-family: sans-serif; padding: 20px; padding-top: 0;}

[v-cloak] {
    display: none !important;
}

.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #2c3e50; /* Elegantní tmavě modrá nebo černá */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Musí být nad všemi okny */
    text-align: center;
    font-family: sans-serif;
}

.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


.editor-container { background: white; padding: 40px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.controls { margin-bottom: 20px; padding: 10px; background: #eee; border-radius: 4px; }
svg {
    background: white;
    display: block;
    margin: 0 auto;
    overflow: visible;
    border: none; /* Odstraníme vnitřní rámeček, ten teď drží obalový div */
}

line.string {
    /* Absolutní černá */
    stroke: #000000;

    /* Šířka může být klidně i 1px, ale s crispEdges bude vypadat jako vlasová čára */
    stroke-width: 1;

    /* KLÍČOVÉ: Vypne vyhlazování, linka bude dokonale ostrá na 1 pixel */
    shape-rendering: crispEdges;
}

line.barline {
    stroke: #000000;
    stroke-width: 2;
    shape-rendering: crispEdges;
}

/* Bílé kolečko pod číslem - zvětšíme kontrast */
circle.fret-bg {
    fill: #ffffff;
}

/* Číslo pražce - černá s vysokým kontrastem */
text.fret-number {
    fill: #000000;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 11px;
    /* I u textu můžeme ovlivnit vyhlazování */
    text-rendering: optimizeLegibility;
}

.toolbar {
    position: sticky;
    top: 0;           /* Přilepit přesně k hornímu okraji */
    z-index: 5;    /* Aby byl vždy nad tabulaturou a SVG prvky */

    /* Původní vlastnosti z vašeho index.php */
    background: #c5cddf;
    padding: 10px;
    display: flex;
    gap: 5px;
    align-items: center;
    border-bottom: 1px solid #ccc;
    width:800px;
    margin:auto;
    /* Volitelné: Jemný stín při odrolování pro lepší 3D efekt */
    box-shadow: 2px 2px 5px #666;
}

.toolbar div {
    display: flex;
    gap: 2px;"
}
.toolbar span.menu {
    text-decoration: underline;
    margin-right:5px;
    cursor:pointer;
}

/* tlačítka*/
.toolbar button {
    height: 25px;       /* Pevná výška pro všechna tlačítka */
    min-width: 25px;    /* Minimální šířka, aby nebyla čísla moc nalepená */
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 2px;
    padding: 0 10px;
    box-sizing: border-box; /* Zajistí, že padding nezvětší celkovou výšku */
    box-shadow: 2px 2px 2px 0 gray;
    background-color: #FFF;
    border: 1px solid #999;
}
.active {
    background-color: #555 !important;
    color: #FFF;

}

.toolbar-separator{
    color: #999;
    margin: 0 2px;
    font-weight: bold;
}

.tool-button {
    background-color: #ffffff;
    border: 1px solid #ccc;
    padding: 5px 12px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background 0.2s;
}

.toolbar button.toolbarButton {
    height: 25px;
    padding: 0 10px;
    background: #3498db;
    color: white;
    border: 1px solid #388E3C;
    cursor: pointer;
    font-weight: bold;
    margin-left: 5px;
}

.tool-button:hover {
    background-color: #f0f0f0;
}

.shortcut {
    font-size: 11px;
    color: #888;
    background: #eee;
    padding: 2px 4px;
    border-radius: 3px;
    margin-left: 4px;
}


.action-button {
    background: #f8f9fa;
    border: 1px solid #ced4da;
    color: #212529;
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.action-button:hover {
    background: #e2e6ea;
    border-color: #adb5bd;
}

.action-button:active {
    background: #dae0e5;
    box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
}

/* Malý popisek klávesy v tlačítku */
.action-button small {
    color: #6c757d;
    margin-left: 4px;
}

/* Standardní taktová čára */
.barline {
    stroke: black;
    stroke-width: 1;
}

/* Zvýraznění vybrané čáry pro smazání */
.barline.selected {
    stroke: #ff4444 !important; /* Výrazná červená */
    stroke-width: 2.5;         /* Trochu ji zesílíme */
}

.toolbar button.btn-red {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
    margin-left: 5px; /* Mezera od zeleného tlačítka */
}

.btn-red:hover {
    background-color: #c82333;
}

.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    /* Odstranili jsme margin i padding dle vašeho přání */
}

.settings-header h2 {
    margin: 0;
    line-height: 1; /* Vynutí, aby výška řádku byla stejná jako velikost písma */
}

.lang-select {
    font-size: 14px;
    line-height: 1; /* Srovná výšku s nadpisem */
    margin: 0;
    vertical-align: middle;
}

/* Okno nastavení (F2) */
#settings-modal {
    background-color: #fcfcfc;
    border-top: 5px solid #28a745; /* Horní zelená linka pro oživení */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border-radius: 8px;
    padding: 20px;
}

/* Hlavička s nadpisem */
.settings-header h2 {
    color: #2c3e50; /* Tmavě modro-šedá pro lepší kontrast */
    font-weight: bold;
}

/* Tlačítko Uložit (zelené) */
.btn-save {
    background-color: #3498db; /* Stejná zelená jako u Nového řádku #008800*/
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    transition: background 0.2s;
    box-shadow: 2px 2px 2px 0 #444;
}

.file-menu .btn-save {width: 100%; margin-bottom: 8px;}

.btn-save:hover {
    background-color: #1478bb; /* Trochu tmavší při najetí myší */
}

.settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Ztmaví pozadí za oknem */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10; /* Musí být nad toolbarem */
}

/* Kontejner pro tlačítka v patičce */
.settings-footer {
    margin-top: 25px;
    display: flex;
    justify-content: flex-end; /* Tlačítka vpravo */
    gap: 15px; /* Rozestup mezi tlačítky */
}

/* Šedé tlačítko Zavřít */
.btn-close {
    background-color: #888;
    color: #333;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 2px 2px 2px 0 gray;
}
.btn-close:hover {
    background-color: #AAA;
}

.setting-row {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column; /* Popisek nad polem */
}

.setting-row label {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 4px;
    font-weight: bold;
}

.setting-row input, .setting-row select {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
}

.input-3d {
    background-color: #ffffff;    /* Bílá výplň */
    border-top: 2px solid #888;   /* Tmavší horní hrana */
    border-left: 2px solid #888;  /* Tmavší levá hrana */
    border-bottom: 2px solid #eee;/* Světlá spodní hrana */
    border-right: 2px solid #eee; /* Světlá pravá hrana */
    padding: 5px 8px;
    outline: none;                /* Odstraní modrý rámeček prohlížeče při kliknutí */

    /* Vnitřní stín pro skutečný 3D "vnořený" efekt */
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2);
    font-family: sans-serif;
    box-sizing: border-box;

    width: 100%;
    /*padding: 8px;*/
    /*border: 1px solid #ccc; */
    border-radius: 4px;
    box-sizing: border-box;
}

.file-menu H5 {margin: 5px 0;}

.measure-info {
    padding: 2px 8px;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 14px;
    border-radius: 4px;
    background: #f0f0f0;
    color: #444;
}

.text-error {
    background: #ffebee;
    color: #d32f2f;
    border: 1px solid #ffcdd2;
}

span.icon-refresh {outline: none; box-shadow: none; background: transparent; color: #FFF; border: none; }
span.icon-refresh:focus {box-shadow: none;}
.special-btn {
    /* Pokud chceš, aby emoji mělo svou přirozenou barvu a ne barvu textu */
    color: initial;
    border: none; /* Odstraní standardní šedý border tlačítka */
    background: transparent; /* Pokud chceš jen ikonu bez pozadí */
    cursor: pointer;
}

/* 1. Oprava pozice: Aby se seznam vznášel nad tabulaturou */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Musí být nad SVG i toolbarem */
}

/* 2. Vzhled okna: Využijeme tvůj styl pro settings-modal */
.modal-content {
    background-color: #c5cddf;
    //border-top: 5px solid #008800; /* Zelená jako u uložení */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 25px;
    width: 450px;
    max-height: 80vh;
    overflow-y: auto;
}

/* --- CLOUD LIST MODAL --- */

/* Kontejner seznamu - zmenšené okraje, silnější ohraničení */
.cloud-list-container {
    box-sizing: border-box;
    margin-top: 10px;
    border: 1px solid #bbb;
    border-radius: 4px;
    max-height: 350px;
    overflow-y: auto;
    overflow-x: hidden; /* ZÁKAZ vodorovného posuvníku */
    background: white;
}

.cloud-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cloud-list li {
    display: flex;
    align-items: center;
    padding: 1px 12px; /* Extrémně nízké řádky */
    cursor: pointer;
    border-bottom: 1px solid #ccc;
    transition: background 0.1s;
    font-size: 14px;
    box-sizing: border-box;
    width: 100%;
}

/* SILNÉ PODBARVENÍ (Zebra) */
.cloud-list li:nth-child(even) {
    background-color: #ebebeb;
}

/* HOVER */
.cloud-list li:hover {
    background-color: #a6b1ff;
}

/* ROZDĚLENÍ DO SLOUPCŮ (Součet musí být 100 %) */
.tab-title {
    flex: 0 0 45%;         /* Sníženo z 50 % na 45 % */
    font-weight: bold;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tab-author {
    flex: 0 0 25%;         /* Sníženo z 30 % na 25 % */
    color: #555;
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tab-meta {
    flex: 0 0 30%;         /* Zbytek (30 %) pro datum a popelnici */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.tab-date {
    font-size: 0.85em;
    color: #666;
}

/* Tlačítko popelnice */
.delete-btn {
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 5px;
    border-radius: 3px;
    transition: all 0.2s;
    opacity: 0.3;
    box-shadow: none !important; /* Vynucené zrušení globálního stínu */
    margin: 0;
    line-height: 1;
}

.cloud-list li:hover .delete-btn {
    opacity: 1;
}

.delete-btn:hover {
    background: #ffcccc !important;
    transform: scale(1.2);
    color: #d32f2f;
}

/* Okno samotné */
.modal-content.cloud-modal {
    width: 650px; /* Přidána pevná šířka, aby sloupce měly prostor */
    max-width: 95vw;
    padding: 15px;
    background-color: rgb(180,180,180);
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.sort-controls button {
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* výběr jazyka */
.toolbar-lang-select {
    position: absolute;
    /* Umístění v rámci sticky toolbaru */
    top: 30%;
    right: 10px;
    /*transform: translateY(-50%);*/
}

.toolbar div.toolbar-lang-select select {
    padding: 2px 0px;
    font-size: 13px;
    box-shadow: 2px 2px 2px gray;
    cursor: pointer;
    border: 1px solid #999;
    background: #fff;
}

#main-logo {
    position: absolute;
    left: 15px;      /* Odsazení od levého okraje kontejneru */
    height: 40px;
    z-index: -3;
    cursor: pointer;
    pointer-events: auto;"
}



/* About */
.about-window {
    background: #c5cddf;
    max-width: 620px;
    width: 500px;
    border: 1px solid #000;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    font-family: 'Arial', sans-serif;
}

/* Horní sekce: Logo a Autor vedle sebe */
.about-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /*border-bottom: 2px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 15px;*/
}

.about-logo { height: 40px; }

.author-tag { line-height: 1.2; }
.author-tag span { font-size: 13px; color: #222; }
.author-tag strong { display: block; font-size: 1.1em; color: #222; }

.version-info { text-align: center; margin-bottom: 25px; }
.version-info .badge { font-size: 10px; background: #333; color: #fff; padding: 2px 8px; border-radius: 3px; }
.version-info p { margin-top: 10px; color: #333;  }

/* Grid a sekce */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.about-section h4 { margin: 0 0 12px 0; font-size: 13px; text-transform: uppercase; border-bottom: 1px solid #aaa; }
.about-section ul { padding: 0; list-style: none; font-size: 13px; }
.about-section li { margin-bottom: 6px; padding-left: 15px; position: relative; }
.about-section li::before { content: "›"; position: absolute; left: 0; font-weight: bold; color: #d32f2f; }

.about-section.highlight { background: #f9f9f9;  border: 1px solid #eee; }

/* Patka s tlačítky */
.about-footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 2px solid #eee;
    padding-top: 20px;
}

.btn-action {
    text-decoration: none;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: bold;
    border: 1px solid #333;
    background: #fff;
    color: #333;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 2px 2px 2px gray;
}

.btn-action:hover { background: #eee; }

/* Barevné rozlišení pro registraci/přihlášení */
.btn-action.primary { background: #333; color: #fff; margin-left: 10px; }
.btn-action.primary:hover { background: #d32f2f; border-color: #d32f2f; }
.btn-action.secondary { margin-left: 5px; }

.auth-buttons { display: flex; }

.popup-window {
    background: white;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    min-width: 400px;
}

/* Pozadí přes celou obrazovku */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(3px); /* Jemné rozostření tabulatury v pozadí */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Samotné okno */
.registration-box {
    background: #C5CDDF;
    padding: 30px;
    border-radius: 12px;
    width: 250px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 1px 0 white;
    position: relative;
    font-family: 'Segoe UI', Arial, sans-serif;
    min-width: 250px;
}

.lang-select {
    border: 1px solid gray;
    background: #f0f0f0;
    font-size: 0.8em;
    padding: 2px 5px;
    border-radius: 4px;
    cursor: pointer;
}

/* Nadpisy a texty */
.registration-box h2 { margin-top: 0; color: #333; text-align: center; }
.login-link { text-align: center; font-size: 0.9em; color: #666; }
.login-link a { color: #007bff; text-decoration: none; font-weight: bold; }

/* Sociální přihlášení */
.social-login { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.btn-google, .btn-apple {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: white;
    cursor: pointer;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.btn-google:hover { background: #eee; }

.separator {
    text-align: center;
    border-bottom: 1px solid #ccc;
    line-height: 0.1em;
    margin: 20px 0;
}
.separator span { background: #f4f4f4; padding: 0 10px; color: #999; }

/* Formuářové skupiny */
.form-group { margin-bottom: 15px; position: relative; }
.form-group label { display: block; font-size: 0.85em; font-weight: bold; margin-bottom: 5px; color: #555; }

/* Tvůj 3D input styl */
.input-3d {
    width: 100%;
    padding: 5px;
    border: 1px solid #bbb;
    border-radius: 4px;
    box-sizing: border-box;
    background: #fff;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}
.input-error { border: 2px solid #ff4d4d; background: #fff2f2; }
.error-text { color: #ff4d4d; font-size: 0.75em; margin-top: 3px; display: block; }

/* Ikona oka pro heslo */
.password-wrapper { position: relative; }
.eye-icon {
    position: absolute;
    right: 10px;
    top: 32px;
    cursor: pointer;
    font-size: 1.2em;
    user-select: none;
}

/* Výběr plánu - Karty */
.plans-container { display: flex; gap: 15px; margin: 15px 0; }
.plan-card {
    flex: 1;
    padding: 15px;
    border: 2px solid #ddd;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    background: white;
    transition: all 0.2s;
}
.plan-card.selected {
    border-color: #28a745;
    background: #eaffed;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.plan-card h4 { margin: 0; color: #333; }

/* Checkboxy pro GDPR */
.legal-checks { font-size: 0.85em; color: #555; margin: 15px 0; }
.legal-checks label { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 8px; cursor: pointer; }

/* Tlačítka akcí */
.button-row { display: flex; justify-content: space-between; margin-top: 20px; }
.btn-next, .btn-save {
    /*width: 100%;*/
    padding: 12px;
    background: #3498db;
    color: white;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 3px 3px 3px gray;
}
.btn-next:active, .btn-save:active { transform: translateY(2px); box-shadow: 3px 3px 3px gray; }
.btn-next:disabled { background: #ccc; box-shadow: 0 4px 0 #999; cursor: not-allowed; }

.btn-back { background: none; border: 1px solid #ccc; padding: 10px 20px; border-radius: 6px; cursor: pointer; }
.close-btn {top: 10px; right: 15px; font-size: 28px; border: 1px solid gray; background: silver; cursor: pointer; color: #333; float:right; box-shadow: 2px 2px 2px gray;}
.notation-close-btn {position: absolute; z-index: 100;}

.activeToggle {
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    font-weight: bold;
    color: #0056b3;
}

.activeSort {
    background-color: #0056b3 !important;
    color: white !important;
    border-color: #004494 !important;
}

.registration-link-box {
    margin-top: 10px;
    /*padding-top: 20px;*/
    border-top: 1px solid #ddd;
    text-align: center;
}
.registration-link-box p {
    font-size: 0.85em;
    color: #666;
    margin-bottom: 15px;
    line-height: 1.4;
}

.settings-group H4,.settings-group table tr td{
    font-size:12px;
    font-weight:bold;
    margin:0;
}


/* Nasvícení řádku při přejetí - nastaveno na jemnou šedou, aby vyniklo na bílé */
.cloud-item-row:hover { background: silver; }

/* Styl pro klikatelné zóny v nadpisu */
.sort-zone {
    cursor: pointer;
    padding: 4px 2px;
    display: flex;
    /*justify-content: center;*/
    align-items: center;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.sort-zone:hover { background: rgba(0,0,0,0.1); }
.active-sort { color: #000; background: rgba(0,0,0,0.08); }
.arrow { font-size: 0.7rem; margin-left: 3px; font-weight: bold; }

.print-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.8); z-index: 9999; overflow-y: auto;
    padding: 20px;
}
.print-page {
    background: white; width: 210mm; min-height: 297mm;
    margin: 0 auto; padding: 0 10mm; box-shadow: 0 0 20px black;
}
.print-controls {
    text-align: center; margin-bottom: 10px;
}
#vexflow-container {
    background: white !important;
    padding: 20px;
    min-height: 500px;
    overflow-y: auto;
    display: block !important;
}

#vexflow-container svg {
    background: white !important;
    display: block !important;
}


@media print {
    /* Skryjeme toolbary, vyskakovací okna a tlačítka */
    .toolbar,
    [v-if="showSettings"],
    [v-if="showFileMenu"],
    .btn-save,
    .btn-close,
    button {
        display: none !important;
    }

    /* Zrušíme pozadí a stíny pro čistý bílý papír */
    body {
        background: white !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Roztáhneme tabulaturu na celou šířku stránky */
    div[style*="background: white; width: 800px;"] {
        width: 100% !important;
        margin: 0 !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    svg {
        width: 100% !important;
        height: auto !important;
    }

    /* Nastavení A4 a okrajů */
    @page {
        size: A4;
        margin: 1.5cm;
    }

    .editor-divider {
        display: none !important;
    }

    #main-logo {
        height: 20px;
        cursor: default;
        pointer-events: none;
        display: block;
        transition: transform 0.2s ease-in-out, filter 0.2s ease-in-out;
        will-change: transform; /* Optimalizace pro plynulost */
    }
    #main-logo:hover {
        transform: scale(1.05); /* Zvětšení o 5 % */
        filter: saturate(1.5); /* Zvýrazní barvy loga */
    }

    .no-print { display: none; }
    .print-overlay { position: static; background: white; padding: 0; }
    .print-page { box-shadow: none; margin: 0; width: 100%; }

    .notation-close-btn {
        position: absolute;
        top: 10px;
        right: 15px;
        z-index: 100;
    }
}