/* ==========================================================================
   ANIMACE
   ========================================================================== */

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =======================================================================
   Kartonový mobilní layout (varianta B)
   ======================================================================= */

.mobile-card-list {
    display: none;
}

.mobile-card {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 2px 8px var(--color-shadow-card);
    overflow: hidden;
}

/* V kartách nepoužívat omezení z tabulkového popisu */
.mobile-card .description-cell,
.mobile-card .desc-content,
.mobile-card .material-preview {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
    max-width: none;
}

.mobile-card__header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px 8px;
    border-bottom: 1px solid var(--color-border-light);
    background: var(--color-bg-surface-muted);
}

.mobile-card__check {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding-top: 2px;
}

.mobile-card__check input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.mobile-card__title {
    flex: 1;
    min-width: 0;
}

.mobile-card__title strong {
    display: block;
    color: var(--color-text-strong);
    font-size: 15px;
    line-height: 1.3;
}

.mobile-card__subtitle {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--color-text-subtle);
    line-height: 1.35;
    word-break: break-word;
}

.mobile-card__fields {
    margin: 0;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    align-items: start;
    align-content: start;
}

.mobile-card__field {
    margin: 0;
    min-width: 0;
}

.mobile-card__field--full {
    grid-column: 1 / -1;
}

.mobile-card__field dt {
    margin: 0 0 2px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.35px;
    color: var(--color-text-muted);
}

.mobile-card__field dd {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-primary);
    line-height: 1.4;
    word-break: break-word;
    white-space: pre-line;
}

.mobile-card__field--note dd {
    font-size: 12px;
    color: var(--color-text-subtle);
    padding-top: 8px;
    border-top: 1px dashed var(--color-border);
}

.mobile-card__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    padding: 10px 14px 14px;
    border-top: 1px solid var(--color-border-light);
    background: var(--color-bg-surface-muted);
}

/* Stejná šířka slotů pro formuláře i odkazy */
.mobile-card__actions > .post-action-form,
.mobile-card__actions > .mobile-card__form,
.mobile-card__actions > a.btn-table-action,
.mobile-card__actions > button.btn-table-action {
    flex: 1 1 120px;
    max-width: 160px;
    min-width: 0;
}

.mobile-card__actions > span {
    flex: 1 1 100%;
    max-width: none;
    text-align: center;
    align-self: center;
}

.mobile-card__actions > .post-action-form,
.mobile-card__actions > .mobile-card__form {
    display: flex;
    margin: 0;
}

.mobile-card__actions > *:only-child {
    flex: 0 1 160px;
    max-width: 200px;
}

.mobile-card__actions .btn-table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    flex: 1 1 auto;
    min-height: 40px;
    min-width: 0;
    max-width: none;
    padding: 8px 12px;
    text-align: center;
    line-height: 1.2;
    box-sizing: border-box;
}

.mobile-card__actions--grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
}

.mobile-card-list__toolbar {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.mobile-card-list__toolbar label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin: 0;
}

/* =======================================================================
   6. RESPONSIVE DESIGN (Media Queries)
   ======================================================================= */

/* Karty místo tabulky do 1279px (telefony, tablety, zúžené okno prohlížeče) */
@media (max-width: 1279px) {
    body:not(:has(.login-page-wrapper)) {
        padding-top: var(--app-header-height, 150px);
    }

    .login-container {
        padding: 20px 20px 30px 20px; /* Menší vnitřní okraje na mobilu */
    }
    
    h3.app-subtitle {
        font-size: 22px !important; /* Zmenšení textu, aby se vešel na displej */
    }
    
    th, td {
        padding: 8px 10px; /* Kompaktnější tabulky */
        font-size: 14px;
    }
    
    /* Mobilní úprava pro hlavičku */
    .header-container {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }

    .header-datetime {
        padding: 0;
        order: 2;
    }

    .header-user {
        order: 3;
        flex-direction: column;
        gap: 5px;
    }

    /* Mobilní úpravy pro modul materiálu a úkolů */
    .action-bar {
        flex-direction: column;
        align-items: flex-start;
    }

    .btn-toggle {
        width: 100%;
        text-align: center;
    }

    .compact-grid,
    .compact-grid--3col,
    .compact-grid--2col,
    .compact-grid--2sub,
    .filter-grid,
    .material-form-grid {
        grid-template-columns: 1fr;
    }

    .form-card {
        padding: 15px;
        margin-bottom: 20px;
    }

    .profile-summary.form-card {
        margin-bottom: 20px;
    }

    .settings-row-2 { grid-template-columns: 1fr; }

    .container {
        padding: 12px;
    }

    .main-header {
        padding: 8px 12px;
    }

    .header-brand {
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .header-brand span,
    .header-back-link {
        font-size: 15px;
    }

    .welcome-section h1,
    .top-bar-left h1,
    .action-bar h1 {
        font-size: 22px;
    }

    /* iOS: font-size pod 16px zoomuje při focusu */
    input,
    select,
    textarea,
    .filter-control,
    .compact-group input,
    .compact-group select,
    .compact-group textarea,
    .header-worker-filter {
        font-size: 16px;
    }

    .top-action-bar {
        padding: 12px;
    }

    .top-bar-left {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        width: 100%;
    }

    .header-worker-filter {
        min-width: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .top-action-bar > .btn-toggle {
        width: 100%;
    }

    .search-action-row-flex {
        display: contents;
    }

    .search-action-row-flex .search-input-wrapper {
        width: 100%;
    }

    .search-action-row-flex .search-input-wrapper input,
    .search-action-row-flex .filter-control {
        min-height: 44px;
        height: auto;
        padding: 10px 12px;
        padding-right: 52px;
        line-height: 1.4;
    }

    .search-action-row-flex .btn-export,
    .search-action-row-flex .btn-export-filters {
        width: 100%;
        min-height: 44px;
        height: auto;
        padding: 10px 15px;
        line-height: 1.4;
        text-align: center;
        box-sizing: border-box;
    }

    /* Mobil: tlačítko Vymazat filtry vždy pod všemi filtry */
    .filter-panel,
    .filter-section-card,
    .filter-section-card > form,
    .audit-log-filters__form {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .filter-panel .filter-search-row,
    .audit-log-filters__top,
    .filter-panel .filter-grid,
    .filter-grid--materials,
    .filter-section-card > .filter-grid,
    .filter-section-card form .filter-grid {
        display: contents;
    }

    .filter-panel .date-range-inputs.is-open,
    .filter-section-card .date-range-inputs.is-open {
        display: contents;
    }

    .filter-panel .btn-clear-filters,
    .filter-section-card .btn-clear-filters,
    .audit-log-filters__clear-btn {
        order: 100;
        width: 100%;
        min-height: 44px;
        height: auto;
        padding: 10px 15px;
        line-height: 1.4;
        text-align: center;
        box-sizing: border-box;
        margin-top: 4px;
    }

    .filter-group:has(> .btn-clear-filters) > label {
        display: none;
    }

    .filter-search-row .filter-control--search {
        min-height: 44px;
        height: auto;
        padding: 10px 12px;
        line-height: 1.4;
    }

    .audit-log-filters__top {
        display: contents;
    }

    .date-range-inputs--span4,
    .compact-grid--span2 {
        grid-column: 1 / -1;
    }

    .form-buttons,
    .form-buttons--mt {
        flex-direction: column;
    }

    .form-buttons .btn-submit,
    .form-buttons .btn-toggle,
    .form-buttons--mt .btn-submit,
    .form-buttons--mt .btn-toggle,
    .form-buttons--mt a.btn-toggle {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    .bulk-actions-bar.is-visible {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .bulk-actions-bar__buttons {
        flex-direction: column;
        width: 100%;
    }

    .bulk-actions-bar__buttons .btn-bulk-invoice,
    .bulk-actions-bar__buttons .style-btn-green,
    .bulk-actions-bar__buttons .style-btn-blue {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }

    .actions-cell--inline {
        flex-wrap: wrap;
        justify-content: center;
    }

    .btn-table-action {
        min-height: 36px;
        padding: 6px 10px;
    }

    .filter-panel {
        padding: 12px;
    }

    .filter-presets-bar {
        align-items: flex-start;
    }

    .filter-presets-bar__buttons {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .filter-preset-btn {
        flex: 0 0 auto;
    }

    /* Servisní list / výkaz – náhled dokumentu */
    .servisni-list-toolbar {
        padding: 10px 12px;
    }

    .servisni-list-toolbar__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .servisni-list-toolbar__actions--center {
        align-items: stretch;
    }

    .servisni-list-btn,
    .servisni-list-toolbar__form {
        width: 100%;
    }

    .servisni-list-btn {
        display: flex;
        text-align: center;
        box-sizing: border-box;
        min-height: 38px;
    }

    .servisni-list-link {
        margin-left: 0;
        text-align: center;
        padding: 8px 0;
    }

    .servisni-list-document {
        margin: 12px;
        padding: 16px;
    }

    .servisni-list-header {
        flex-direction: column;
        gap: 12px;
    }

    .servisni-list-header__info {
        text-align: left;
    }

    .servisni-list-client__grid,
    .servisni-list-summary__grid {
        grid-template-columns: 1fr;
    }

    .servisni-list-events {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .hover-popover,
    .client-detail-popover {
        min-width: 0;
        max-width: calc(100vw - 24px);
    }

    .chat-input-row {
        flex-direction: column;
    }

    .chat-input-row .btn-send-chat {
        width: 100%;
        padding: 12px;
    }

    .desktop-table-view {
        display: none !important;
    }

    .mobile-card-list {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 20px;
    }

    .mobile-card-list__toolbar {
        display: flex;
    }

    .stats-two-col {
        grid-template-columns: 1fr;
    }
    .stats-table--clients {
        font-size: 12px;
    }

    /* Přehledy – tabulky jako karty */
    .container--statistics .table-responsive {
        overflow: visible;
    }
    .container--statistics .stats-table {
        display: block;
    }
    .container--statistics .stats-table thead {
        display: none;
    }
    .container--statistics .stats-table tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .container--statistics .stats-table tbody tr {
        display: block;
        background: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-radius: 8px;
        padding: 12px 14px;
        box-shadow: 0 1px 3px var(--color-shadow-sm);
    }
    .container--statistics .stats-table tbody tr:hover {
        background: var(--color-bg-surface);
    }
    .container--statistics .stats-table td {
        display: grid;
        grid-template-columns: minmax(90px, 42%) 1fr;
        gap: 8px;
        align-items: baseline;
        padding: 6px 0;
        border: none;
        text-align: right;
    }
    .container--statistics .stats-table td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--color-text-muted);
        text-align: left;
    }
    .container--statistics .stats-table td:first-child {
        display: block;
        font-weight: 700;
        font-size: 15px;
        text-align: left;
        border-bottom: 1px solid var(--color-border);
        padding-bottom: 8px;
        margin-bottom: 4px;
    }
    .container--statistics .stats-table td:first-child::before {
        content: none;
    }
    .container--statistics .stats-table--absence-entitlements td:first-child {
        font-size: 14px;
    }

    /* Uživatelé – roční nároky */
    .user-entitlements-table {
        display: block;
    }
    .user-entitlements-table thead {
        display: none;
    }
    .user-entitlements-table tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .user-entitlements-table tr {
        display: block;
        background: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-radius: 8px;
        padding: 12px 14px;
        box-shadow: 0 1px 3px var(--color-shadow-sm);
    }
    .user-entitlements-table td {
        display: block;
        border: none;
        padding: 8px 0;
    }
    .user-entitlements-table td:first-child {
        font-size: 15px;
        border-bottom: 1px solid var(--color-border);
        padding-bottom: 10px;
        margin-bottom: 4px;
    }
    .user-entitlements-table td:not(:first-child) .entitlement-cell::before {
        content: attr(data-year);
        display: block;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--color-text-muted);
        margin-bottom: 6px;
    }
    .user-entitlements-table .entitlement-has-label {
        margin-bottom: 8px;
    }

    /* Tabulka stavu nároků (nepřítomnosti, profil) */
    .nepritomnost-balance-box {
        max-width: none;
    }
    .nepritomnost-balance-box .table-responsive {
        overflow: visible;
    }
    .nepritomnost-balance-table {
        display: block;
    }
    .nepritomnost-balance-table thead {
        display: none;
    }
    .nepritomnost-balance-table tbody {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .nepritomnost-balance-table tbody tr {
        display: block;
        background: var(--color-bg-surface);
        border: 1px solid var(--color-border);
        border-radius: 8px;
        padding: 12px 14px;
        box-shadow: 0 1px 3px var(--color-shadow-sm);
    }
    .nepritomnost-balance-table td {
        display: grid;
        grid-template-columns: minmax(90px, 42%) 1fr;
        gap: 8px;
        align-items: baseline;
        padding: 6px 0;
        border: none;
        text-align: right !important;
    }
    .nepritomnost-balance-table td::before {
        content: attr(data-label);
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        color: var(--color-text-muted);
        text-align: left;
    }
    .nepritomnost-balance-table td:first-child {
        display: block;
        font-size: 15px;
        text-align: left !important;
        border-bottom: 1px solid var(--color-border);
        padding-bottom: 8px;
        margin-bottom: 4px;
    }
    .nepritomnost-balance-table td:first-child::before {
        content: none;
    }
    .nepritomnost-balance-table td[colspan] {
        display: block;
        text-align: center !important;
    }
    .nepritomnost-balance-table td[colspan]::before {
        content: none;
    }

    /* Nastavení a profil */
    .settings-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .settings-card {
        padding: 16px;
    }
    .profile-details {
        grid-template-columns: 1fr;
    }
    .profile-summary.form-card {
        padding: 16px;
    }
    .tasks-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1280px) {
    #eventsTable .desc-content {
        min-width: 0;
    }
}

/* Velmi úzké telefony */
@media (max-width: 480px) {
    .dash-card {
        padding: 20px 16px;
    }

    .dash-card h3 {
        font-size: 17px;
    }

    th, td {
        padding: 6px 8px;
        font-size: 13px;
    }

    .servisni-list-header h1 {
        font-size: 22px;
    }

    .servisni-list-logo {
        width: 80px;
    }
}