/* ==========================================================================
   StravaLMS – vizuální styl podle webu lmsnavetvi.cz
   Paleta i typografie jsou převzaté z veřejného webu školky, aby na sebe
   obě aplikace navazovaly.
   ========================================================================== */

:root {
    /* --- paleta školky --- */
    --lms-cream: #FBF8F4; /* pozadí stránky */
    --lms-cream-deep: #F5EFE7; /* pruhy, hlavičky tabulek */
    --lms-surface: #FFFFFF;
    --lms-border: #E4DCD3;
    --lms-border-strong: #DDD0C6;
    --lms-ink: #2B2119; /* základní text */
    --lms-muted: #6B5C50; /* sekundární text */
    --lms-heading: #4C311F; /* nadpisy – tmavě hnědá */
    --lms-green: #2D6A3D;
    --lms-green-dark: #245830;
    --lms-green-soft: #E3EFE6;
    --lms-green-tint: #F4F8F4;
    --lms-amber: #D9A441;
    --lms-amber-soft: #FBF2DE;
    --lms-danger: #A63A2E;
    --lms-danger-soft: #F8EAE7;
    --lms-radius: 15px;
    --lms-radius-sm: 10px;
    --lms-shadow: 0 1px 2px rgba(76, 49, 31, .05), 0 8px 24px -16px rgba(76, 49, 31, .25);
    --lms-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    /* --- napojení na Bootstrap --- */
    --bs-body-bg: var(--lms-cream);
    --bs-body-color: var(--lms-ink);
    --bs-body-font-family: var(--lms-font);
    --bs-border-color: var(--lms-border);
    --bs-border-radius: var(--lms-radius-sm);
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: var(--lms-radius);
    --bs-primary: #2D6A3D;
    --bs-primary-rgb: 45, 106, 61;
    --bs-link-color: #2D6A3D;
    --bs-link-color-rgb: 45, 106, 61;
    --bs-link-hover-color: #245830;
    --bs-emphasis-color: var(--lms-heading);
}

html, body {
    font-family: var(--lms-font);
    background-color: var(--lms-cream);
    color: var(--lms-ink);
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--lms-heading);
    font-weight: 700;
    letter-spacing: -.01em;
}

h1 {
    font-size: 1.9rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: var(--lms-green);
    text-underline-offset: .2em;
}

    a:hover, .btn-link:hover {
        color: var(--lms-green-dark);
    }

.text-muted {
    color: var(--lms-muted) !important;
}

/* --- hlavička stránky ------------------------------------------------- */
.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem 1.25rem;
    padding-bottom: .9rem;
    margin-bottom: 1.4rem;
    border-bottom: 1px solid var(--lms-border);
}

    .page-head .page-head-main {
        flex: 1 1 22rem;
        min-width: 0;
    }

    .page-head h1 {
        margin: 0;
        display: flex;
        align-items: center;
        gap: .6rem;
    }

    .page-head h1 i {
        color: var(--lms-green);
        font-size: 1.5rem;
    }

    .page-head .page-sub {
        margin: .35rem 0 0;
        color: var(--lms-muted);
        font-size: .95rem;
        max-width: 65ch;
    }

    .page-head .page-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        align-items: center;
    }

/* --- karty ------------------------------------------------------------ */
.card {
    background: var(--lms-surface);
    border: 1px solid var(--lms-border);
    border-radius: var(--lms-radius);
    box-shadow: var(--lms-shadow);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--lms-border);
    padding: .85rem 1.15rem;
    font-weight: 700;
    color: var(--lms-heading);
    border-radius: var(--lms-radius) var(--lms-radius) 0 0 !important;
}

    .card-header strong {
        font-weight: 700;
    }

.card-body {
    padding: 1.15rem;
}

.card + .card {
    margin-top: 1rem;
}

/* --- tlačítka --------------------------------------------------------- */
.btn {
    --bs-btn-border-radius: 999px;
    border-radius: 999px;
    font-weight: 600;
    padding: .45rem 1.1rem;
}

.btn-sm {
    padding: .3rem .85rem;
    font-size: .875rem;
}

.btn-primary {
    --bs-btn-bg: var(--lms-green);
    --bs-btn-border-color: var(--lms-green);
    --bs-btn-hover-bg: var(--lms-green-dark);
    --bs-btn-hover-border-color: var(--lms-green-dark);
    --bs-btn-active-bg: var(--lms-green-dark);
    --bs-btn-active-border-color: var(--lms-green-dark);
    --bs-btn-disabled-bg: #9BB6A3;
    --bs-btn-disabled-border-color: #9BB6A3;
}

.btn-outline-primary {
    --bs-btn-color: var(--lms-green);
    --bs-btn-border-color: var(--lms-green);
    --bs-btn-hover-bg: var(--lms-green);
    --bs-btn-hover-border-color: var(--lms-green);
    --bs-btn-active-bg: var(--lms-green-dark);
}

.btn-secondary, .btn-outline-secondary {
    --bs-btn-color: var(--lms-muted);
    --bs-btn-border-color: var(--lms-border-strong);
    --bs-btn-bg: transparent;
    --bs-btn-hover-bg: var(--lms-cream-deep);
    --bs-btn-hover-color: var(--lms-heading);
    --bs-btn-hover-border-color: var(--lms-border-strong);
    --bs-btn-active-bg: var(--lms-cream-deep);
    --bs-btn-active-color: var(--lms-heading);
    --bs-btn-active-border-color: var(--lms-border-strong);
}

.btn-warning {
    --bs-btn-bg: var(--lms-amber);
    --bs-btn-border-color: var(--lms-amber);
    --bs-btn-color: #3A2A10;
    --bs-btn-hover-bg: #C8942F;
    --bs-btn-hover-border-color: #C8942F;
    --bs-btn-hover-color: #3A2A10;
}

.btn-success {
    --bs-btn-bg: var(--lms-green);
    --bs-btn-border-color: var(--lms-green);
    --bs-btn-hover-bg: var(--lms-green-dark);
    --bs-btn-hover-border-color: var(--lms-green-dark);
}

.btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 .2rem rgba(45, 106, 61, .18);
    border-color: var(--lms-green);
    outline: none;
}

/* --- formuláře -------------------------------------------------------- */
.form-label {
    font-weight: 600;
    font-size: .875rem;
    color: var(--lms-muted);
    margin-bottom: .3rem;
}

.form-control, .form-select {
    border-color: var(--lms-border-strong);
    border-radius: var(--lms-radius-sm);
    padding: .45rem .75rem;
}

    .form-control::placeholder {
        color: #A2938A;
    }

.form-check-input:checked {
    background-color: var(--lms-green);
    border-color: var(--lms-green);
}

.form-text, .form-check-label {
    color: var(--lms-muted);
}

/* --- tabulky ---------------------------------------------------------- */
.table {
    --bs-table-border-color: var(--lms-border);
    --bs-table-striped-bg: var(--lms-cream);
    --bs-table-hover-bg: var(--lms-green-tint);
    color: var(--lms-ink);
    margin-bottom: 0;
}

    .table > thead th {
        background: var(--lms-cream-deep);
        color: var(--lms-heading);
        font-weight: 700;
        font-size: .875rem;
        border-bottom-color: var(--lms-border-strong);
        white-space: nowrap;
    }

    .table > tbody td {
        vertical-align: middle;
    }

.table-light > :not(caption) > * > * {
    background-color: var(--lms-cream-deep);
}

.table-responsive {
    border-radius: var(--lms-radius-sm);
}

/* --- štítky a hlášky -------------------------------------------------- */
.badge {
    border-radius: 999px;
    font-weight: 600;
    padding: .35em .75em;
}

.bg-success {
    background-color: var(--lms-green) !important;
}

.bg-secondary {
    background-color: var(--lms-muted) !important;
}

.bg-warning {
    background-color: var(--lms-amber) !important;
    color: #3A2A10 !important;
}

.bg-danger {
    background-color: var(--lms-danger) !important;
}

.alert {
    border-radius: var(--lms-radius);
    border: 1px solid transparent;
    padding: .9rem 1.15rem;
}

.alert-success {
    background: var(--lms-green-soft);
    border-color: #BDD6C5;
    color: var(--lms-green-dark);
}

.alert-info {
    background: var(--lms-green-tint);
    border-color: var(--lms-border);
    color: var(--lms-heading);
}

.alert-warning {
    background: var(--lms-amber-soft);
    border-color: #EBD5A4;
    color: #6B4E13;
}

.alert-danger {
    background: var(--lms-danger-soft);
    border-color: #E8C6C0;
    color: var(--lms-danger);
}

/* --- dlaždice na úvodu ------------------------------------------------ */
.tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
}

.tile {
    display: block;
    background: var(--lms-surface);
    border: 1px solid var(--lms-border);
    border-radius: var(--lms-radius);
    padding: 1.1rem 1.15rem;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--lms-shadow);
    transition: transform .12s ease, border-color .12s ease;
}

    .tile:hover {
        transform: translateY(-2px);
        border-color: var(--lms-green);
        color: inherit;
    }

    .tile i {
        font-size: 1.4rem;
        color: var(--lms-green);
    }

    .tile .tile-title {
        display: block;
        font-weight: 700;
        color: var(--lms-heading);
        margin-top: .5rem;
    }

    .tile .tile-desc {
        display: block;
        color: var(--lms-muted);
        font-size: .9rem;
        margin-top: .15rem;
    }

.stat {
    background: var(--lms-surface);
    border: 1px solid var(--lms-border);
    border-radius: var(--lms-radius);
    padding: .9rem 1.1rem;
}

    .stat .stat-value {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--lms-heading);
        line-height: 1.2;
    }

    .stat .stat-label {
        color: var(--lms-muted);
        font-size: .85rem;
    }

/* --- drobnosti -------------------------------------------------------- */
.content {
    padding-top: 1.4rem;
    padding-bottom: 3rem;
}

.section-hint {
    color: var(--lms-muted);
    font-size: .875rem;
}

.divider {
    border-top: 1px solid var(--lms-border);
    margin: 1.25rem 0;
}

.list-group-item {
    border-color: var(--lms-border);
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--lms-green);
}

.invalid {
    outline: 1px solid var(--lms-danger);
}

.validation-message {
    color: var(--lms-danger);
    font-size: .875rem;
}

.blazor-error-boundary {
    background: var(--lms-danger);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
    border-radius: var(--lms-radius);
}

    .blazor-error-boundary::after {
        content: "Došlo k neočekávané chybě.";
    }

.darker-border-checkbox.form-check-input {
    border-color: var(--lms-border-strong);
}

@media (max-width: 640.98px) {
    .page-head {
        margin-bottom: 1rem;
    }

    h1 {
        font-size: 1.5rem;
    }
}

/* --- výběr rodiče: stavové řádky pod polem ---------------------------- */
.pick-state {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    margin-top: .5rem;
    padding: .55rem .75rem;
    border-radius: var(--lms-radius-sm);
    font-size: .9rem;
    line-height: 1.45;
    border: 1px solid transparent;
}

    .pick-state i {
        flex-shrink: 0;
        margin-top: .1rem;
    }

.pick-state-ok {
    background: var(--lms-green-soft);
    border-color: #BDD6C5;
    color: var(--lms-green-dark);
}

.pick-state-new {
    background: var(--lms-amber-soft);
    border-color: #EBD5A4;
    color: #6B4E13;
}

.pick-state-warn {
    background: var(--lms-cream-deep);
    border-color: var(--lms-border-strong);
    color: var(--lms-muted);
}

.pick-state-danger {
    background: var(--lms-danger-soft);
    border-color: #E8C6C0;
    color: var(--lms-danger);
    align-items: center;
    flex-wrap: wrap;
}

.parent-picker + .parent-picker {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--lms-border);
}

/* --- docházkové dny --------------------------------------------------- */
.weekday-picker {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}

    .weekday-picker .btn {
        min-width: 3rem;
        border-radius: 0;
    }

    .weekday-picker .btn-group > .btn:first-child {
        border-radius: 999px 0 0 999px;
    }

    .weekday-picker .btn-group > .btn:last-child {
        border-radius: 0 999px 999px 0;
    }

/* --- rekapitulace před uložením --------------------------------------- */
.confirm-panel {
    background: var(--lms-cream-deep);
    border: 1px solid var(--lms-border-strong);
    border-radius: var(--lms-radius);
    padding: 1rem 1.15rem;
}

    .confirm-panel ul {
        margin: .5rem 0 0;
        padding-left: 1.1rem;
    }

    .confirm-panel li + li {
        margin-top: .35rem;
    }

/* --- nebezpečná zóna -------------------------------------------------- */
.danger-zone {
    border: 1px dashed #E8C6C0;
    background: var(--lms-danger-soft);
    border-radius: var(--lms-radius-sm);
    padding: .9rem 1.1rem;
}

    .danger-zone h4 {
        font-size: .95rem;
        color: var(--lms-danger);
        margin-bottom: .4rem;
    }

/* --- lokální hlášky u akcí -------------------------------------------- */
.inline-msg {
    margin-top: .75rem;
    padding: .5rem .75rem;
    border-radius: var(--lms-radius-sm);
    font-size: .9rem;
}

.inline-msg-ok {
    background: var(--lms-green-soft);
    color: var(--lms-green-dark);
}

.inline-msg-err {
    background: var(--lms-danger-soft);
    color: var(--lms-danger);
}

/* --- filtr stavu v seznamu -------------------------------------------- */
.status-filter .btn {
    border-radius: 999px;
}

/* --- posouvatelný seznam pro hromadné akce ---------------------------- */
.bulk-list {
    max-height: 16rem;
    overflow: auto;
    border: 1px solid var(--lms-border);
    border-radius: var(--lms-radius-sm);
    padding: .6rem .75rem;
    background: var(--lms-cream);
}