/*variables.css*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --bg-color: hsl(0 0% 95%);
    --bg-color1: hsl(0 0% 85%);
    --bg-color-input: hsl(0 0% 85%);
    --bg-color2: hsl(0 0% 50%);
    --bg-color3: hsl(0 0% 2%);
    --text-color: hsl(0 0% 5%);
    --text-color-dark: hsl(0 0% 5%);
    --text-color-invert: hsl(0, 0%, 80%);
    --text-color-muted: hsl(0, 0%, 30%);
    --text-color-primary: hsl(0 71% 35%);
    --text-color-primary-btn: hsl(0 71% 35%);
    --text-color-primary-hover: hsl(0 58% 49%);
    --text-color-secondary: hsl(115, 53%, 20%);
    --text-color-secondary-btn: hsl(115, 53%, 20%);
    --text-color-secondary-hover: hsl(115, 66%, 26%);
    --border-color: hsl(0, 0%, 65%);
    --box-shadow: hsl(0, 0%, 38%);
    --warning-color: hsl(60, 89%, 22%);
    --warning-color2: hsl(60, 89%, 40%);
    --warning-color-hover: hsl(64, 70%, 35%);
    --bg-lin-gradient: linear-gradient(0deg, #00FFFF00 0%, #e4e4e4ff 36%);
    --bg-lin-gradient2: linear-gradient(0deg, #e4e4e4ff 0%, #e4e4e4ff 36%);
    --bg-glass: hsla(0, 0%, 0%, 0.7);
    --success: hsl(142 55% 35%);
    --success-weak: hsl(142 55% 45%);
    --danger: hsl(0 75% 50%);
    --danger-weak: hsl(0 75% 65%);
}

[data-theme="dark"] {
    --bg-color: hsl(0 0% 8%);
    --bg-color1: hsl(0 0% 22%);
    --bg-color2: hsl(0 0% 20%);
    --bg-color3: hsl(0 0% 4%);
    --text-color: hsl(0 0% 92%);
    --text-color-dark: hsl(0 0% 5%);
    --text-color-invert: hsl(0 0% 80%);
    --text-color-muted: hsl(0 0% 65%);
    --text-color-primary: hsl(5 76% 57%);
    --text-color-secondary: hsl(94 43% 54%);
    --border-color: hsl(0 0% 28%);
    --box-shadow: hsl(0 0% 0% / 0.6);
    --warning-color: hsl(50 70% 23%);
    --warning-color2: hsl(60, 89%, 40%);
    --warning-color-hover: hsl(64, 70%, 15%);
    --bg-lin-gradient: linear-gradient(0deg, #0000 0%, #1e1e1eff 36%);
    --bg-lin-gradient2: linear-gradient(0deg, #1e1e1eff 0%, #1e1e1eff 36%);
    --bg-glass: hsla(0, 0%, 0%, 0.7);
    --success: hsl(142 55% 56%);
    --success-weak: hsl(142 40% 40%);
    --danger: hsl(0 85% 60%);
    --danger-weak: hsl(0 70% 50%);
}
html {
    height: 100%;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100vh; /* fallback pre staršie prehliadače */
    min-height: 100svh; /* STABILNÁ mobilná výška – žiadny mini-scroll pri refreshoch */

    display: flex;
    flex-direction: column;
}

    body.theme-ready {
        transition: background-color 0.3s, color 0.3s;
    }
/*--Všeobecne*/
a {
    text-decoration: none;
}

ul {
    list-style: none;
}

h1 {
    font-size: clamp(2rem, 7vw, 2.5rem);
    margin-bottom: 1rem;
}

h2 {
    font-size: clamp(1.3rem, 6vw, 2rem);
    margin-bottom: 1rem;
}
/* Chrome deprecation fix – garantuj rovnakú veľkosť nadpisov aj v sectioning elementoch */
:is(section, article, nav, aside) h1 {
    font-size: clamp(2rem, 7vw, 2.5rem);
}

:is(section, article, nav, aside) h2 {
    font-size: clamp(1.3rem, 6vw, 2rem);
}

.my-container {
    flex: 0 1 80vw;
}

.my-container-fluid {
    flex: 1 0 auto;
}

div.content {
    max-width: 100%;
    margin: 2rem 2rem 0rem 11rem;
    padding: 0;
}

.page-title-h1 {
    color: var(--text-color-primary);
    font-size: clamp(2rem, 7vw, 2.5rem);
}

.page-title-h2 {
    color: var(--text-color-secondary);
    font-size: clamp(1.3rem, 6vw, 2rem);
}

/*---buttons---*/
.btn-custom {
    display: inline-block;
    border-radius: 0rem 0rem 0rem 1rem;
    padding: 0.8rem 1.5rem;
    text-decoration: none;
    font-size: clamp(.8rem, 2vw, 1rem);
    margin: 1rem;
    border: none;
    cursor: pointer;
    min-width: 8rem;
}

.btn-custom-primary {
    background-color: var(--text-color-primary-btn);
    color: var(--text-color-invert);
}

    .btn-custom-primary:hover {
        background-color: var(--text-color-primary-hover);
        color: var(--text-color-invert);
    }

.btn-custom-secondary {
    background-color: var(--text-color-secondary-btn);
    color: var(--text-color-invert);
}

    .btn-custom-secondary:hover {
        background-color: var(--text-color-secondary-hover);
        color: var(--text-color-invert);
    }

.btn-custom-warning {
    background-color: var(--warning-color);
    color: var(--text-color-invert);
}

    .btn-custom-warning:hover {
        background-color: var(--warning-color-hover);
        color: var(--text-color-invert);
    }

.btn-table-custom {
    display: inline-block;
    border-radius: 0rem 0rem 0rem 1rem;
    padding: 0.4rem 1rem;
    text-decoration: none;
    font-size: clamp(.7rem, 2.5vw, 1rem);
    margin: 0.2rem;
    border: none;
    cursor: pointer;
    width: clamp(4rem, 14.5vw, 6rem);
}
/************************************************/

.form-label {
    color: var(--text-color);
}

.label-star {
    color: hsl(0, 85%, 50%);
    font-size: clamp(.8rem, 2vw, 1rem);
}

.alert.alert-custom {
    position: fixed;
    padding: 1rem;
    font-size: clamp(0.9rem, 3vw, 1.3rem);
    bottom: 5rem;
    left: 3%;
    z-index: 9999;
    background-color: var(--bg-color2);
    color: var(--text-color);
    box-shadow: 3px 6px 10px var(--box-shadow);
    width: max-content;
}

.valid-text-danger {
    display: inline-block;
    color: var(--text-color-primary);
    margin-top: 0.1rem;
}