/* responsive.css - wydzielone style aplikacji. */

@media (min-width: 640px) {
    .year-summary-panel {
        grid-template-columns: minmax(0, 1fr) minmax(10rem, 14rem);
    }

    .table-footer-controls,
    .filter-bar,
    .global-search-panel {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
    }

    .table-control {
        min-width: 12rem;
        flex: 1;
    }

    .notice,
    .page-header,
    .dashboard-heading,
    .section-heading {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .pagination-controls {
        flex-direction: row;
    }
}

@media (min-width: 900px) {
    .ingredient-line {
        grid-template-columns: minmax(0, 1fr) minmax(8rem, 12rem);
    }
}

@media (min-width: 1024px) {
    .calculator-layout,
    .detail-layout,
    .sale-document-layout {
        grid-template-columns: minmax(0, 1fr) 22rem;
        align-items: start;
    }

    .dashboard-grid {
        grid-template-columns: minmax(0, 2fr) minmax(20rem, .95fr);
        align-items: start;
    }

    .record-layout,
    .recipe-detail-grid,
    .inventory-dashboard {
        grid-template-columns: minmax(0, 1fr) minmax(19rem, 22rem);
        align-items: start;
    }

    .settings-layout {
        grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr);
        align-items: start;
    }

    .record-hero {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@media (max-width: 1180px) {
    .username {
        display: none;
    }

    .topbar .account-menu-trigger {
        grid-template-columns: auto;
        padding: .3rem;
    }

    .topbar .account-copy {
        display: none;
    }

    .sidebar-account .account-copy {
        display: grid;
    }
}

@media (max-width: 900px) {
    .user-menu {
        gap: .5rem;
    }

    .username {
        display: none;
    }

    .mobile-bottom-nav {
        position: fixed;
        right: .75rem;
        bottom: .75rem;
        left: .75rem;
        z-index: 40;
        display: flex;
        gap: .25rem;
        overflow-x: auto;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: color-mix(in srgb, var(--surface) 96%, transparent);
        padding: .28rem;
        box-shadow: var(--shadow);
    }

    .mobile-nav-link {
        display: inline-flex;
        flex-direction: column;
        min-height: 2.4rem;
        min-width: 3.95rem;
        flex: 1 0 auto;
        align-items: center;
        justify-content: center;
        padding: .42rem .22rem;
        font-size: .72rem;
    }

    body {
        padding-bottom: 5.25rem;
    }
}

@media (min-width: 901px) {
    .desktop-sidebar {
        display: flex;
    }

    .topbar {
        left: var(--sidebar-width);
        padding-inline: 1.5rem;
    }

    .mobile-brand {
        display: none;
    }

    .topbar-context {
        display: block;
    }

    .topbar-action {
        display: inline-flex;
    }

    .topbar-search {
        display: block;
    }
}

@media (max-width: 720px) {
    html {
        --control-height: 2.85rem;
        --button-height: 2.85rem;
        --table-cell-padding-y: .62rem;
        --table-cell-padding-x: .68rem;
        --page-block-padding: .8rem 1rem;
    }

    .app-page,
    .container,
    .message-stack {
        width: min(100% - 1rem, 80rem);
    }

    .topbar {
        gap: .45rem;
        padding: .7rem .75rem;
    }

    .brand-title {
        font-size: .92rem;
    }

    .brand-subtitle {
        max-width: 14rem;
    }

    .nav-menu-panel {
        width: min(100vw - 1rem, 28rem);
        grid-template-columns: 1fr;
        padding: .75rem;
    }

    .compact-panel,
    .responsive-form,
    .quick-actions-grid {
        padding: .75rem;
    }

    .responsive-form .auto-resize-field {
        width: 100%;
        min-width: 0;
    }

    .mobile-quick-dashboard {
        display: grid;
        gap: var(--section-gap);
        margin-bottom: var(--section-gap);
    }

    .wide-dashboard {
        display: none;
    }

    .mobile-quick-notice {
        align-items: stretch;
    }

    .mobile-quick-notice .button {
        width: 100%;
    }

    .mobile-quick-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: .62rem;
    }

    .quick-action-large {
        min-height: 4.6rem;
    }

    .header-actions,
    .page-actions,
    .form-actions {
        width: 100%;
        justify-content: stretch;
    }

    .header-actions .button,
    .page-actions .button,
    .form-actions .button,
    .form-actions a,
    .form-actions button {
        flex: 1 1 11rem;
    }

    .mobile-card-table {
        min-width: 0;
        border-collapse: separate;
    }

    .mobile-card-table thead {
        display: none;
    }

    .mobile-card-table,
    .mobile-card-table tbody,
    .mobile-card-table tr,
    .mobile-card-table td {
        display: block;
        width: 100%;
    }

    .mobile-card-table tbody {
        display: grid;
        gap: .55rem;
        padding: .62rem;
    }

    .mobile-card-table tr {
        overflow: hidden;
        border: 1px solid var(--border);
        border-radius: var(--radius);
        background: var(--surface);
        box-shadow: none;
    }

    .mobile-card-table td {
        display: grid;
        grid-template-columns: minmax(7rem, 36%) minmax(0, 1fr);
        gap: .55rem;
        border-bottom: 1px solid var(--border);
        padding: .62rem;
        text-align: left;
    }

    .mobile-card-table td::before {
        content: attr(data-label);
        color: var(--muted);
        font-size: .72rem;
        font-weight: 950;
        letter-spacing: .06em;
        text-transform: uppercase;
    }

    .mobile-card-table td.empty-table,
    .mobile-card-table td[colspan] {
        display: block;
        text-align: center;
    }

    .mobile-card-table td.empty-table::before,
    .mobile-card-table td[colspan]::before {
        content: none;
    }

    .mobile-card-table .text-right {
        text-align: left;
    }

    .mobile-card-table .row-actions {
        justify-content: flex-start;
    }

    .mobile-card-table .row-actions .table-link,
    .mobile-card-table .table-link {
        min-height: 2.85rem;
        flex: 1 1 9rem;
    }

    .today-task-submit {
        grid-template-columns: 1fr;
    }

    .today-task-submit button {
        width: 100%;
    }

    .today-task-group-grid {
        grid-template-columns: 1fr;
        padding: .62rem;
    }

    .today-task-group-card {
        gap: .55rem;
        padding: .68rem;
    }

    .today-task-group-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .today-task-group-actions .button,
    .today-task-group-actions .table-link {
        flex: 0 0 auto;
        width: 100%;
        min-height: var(--button-height);
    }

    .today-task-dialog {
        width: min(100% - .75rem, 42rem);
        max-height: calc(100dvh - .75rem);
    }

    .today-task-dialog-header,
    .today-task-dialog-list,
    .today-task-dialog-actions {
        padding: .75rem;
    }

    .today-task-dialog-actions {
        flex-direction: column-reverse;
    }

    .today-task-dialog-actions .button {
        width: 100%;
    }

    .inventory-card,
    .price-input-row,
    .ingredient-row-fields,
    .ingredient-line {
        grid-template-columns: 1fr;
    }

    .inventory-stock {
        text-align: left;
    }

    .recipe-cost-strip {
        grid-template-columns: 1fr;
    }

    .task-item {
        align-items: stretch;
        flex-direction: column;
    }

    .task-item .button {
        width: 100%;
    }

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

    .filter-actions .button {
        width: 100%;
    }

    .task-summary-grid,
    .module-visibility-groups,
    .dashboard-alert,
    .settings-layout,
    .record-layout,
    .recipe-detail-grid,
    .inventory-dashboard {
        grid-template-columns: 1fr;
    }

    .auth-page {
        margin-top: 4vh;
    }
}

@media (max-width: 480px) {
    .button {
        width: 100%;
    }

    .page-header h1 {
        font-size: 1.45rem;
    }

    .stat-tile strong,
    .inventory-stock strong {
        font-size: 1.35rem;
    }

    .mobile-quick-actions {
        grid-template-columns: 1fr;
    }
}