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

* {
    box-sizing: border-box;
}

html {
    min-width: 320px;
}

body {
    min-height: 100vh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-size: var(--body-font-size);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html.theme-dark body {
    background: var(--bg);
}

@media (prefers-color-scheme: dark) {
    html.theme-system body {
        background: var(--bg);
    }
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
select,
input[type="checkbox"],
input[type="radio"] {
    cursor: pointer;
}

:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.skip-link {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 100;
    transform: translateY(-150%);
    border-radius: var(--radius);
    background: var(--primary);
    color: #fff;
    padding: .7rem 1rem;
    font-weight: 900;
    box-shadow: var(--shadow);
    transition: transform .18s ease;
}

.skip-link:focus-visible {
    transform: translateY(0);
}

.hidden {
    display: none !important;
}

.main-content:focus {
    outline: none;
}

.site-shell {
    min-height: 100vh;
}

.has-app-nav .main-content {
    min-height: 100vh;
    padding-top: var(--topbar-height);
}

@media (min-width: 901px) {
    .has-app-nav .main-content {
        margin-left: var(--sidebar-width);
    }
}


.message-stack {
    position: relative;
    z-index: 35;
    display: grid;
    width: min(100% - 2rem, 80rem);
    margin: .75rem auto 0;
    gap: .5rem;
}

.has-app-nav .message-stack {
    width: min(100% - 2rem, var(--content-max));
}

@media (min-width: 901px) {
    .has-app-nav .message-stack {
        margin-left: calc(var(--sidebar-width) + max(1rem, (100vw - var(--sidebar-width) - var(--content-max)) / 2));
        margin-right: max(1rem, (100vw - var(--sidebar-width) - var(--content-max)) / 2);
        width: auto;
    }
}

.app-page,
.container {
    width: min(100% - 2rem, var(--content-max));
    margin-inline: auto;
    padding-block: var(--page-block-padding);
}

.app-page-narrow {
    max-width: 58rem;
}

.page-header {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    padding: .15rem 0;
}

.page-header h1 {
    margin: 0;
    font-size: var(--page-title-size);
    font-weight: 950;
    line-height: 1.08;
}

.eyebrow {
    margin: 0 0 .25rem;
    color: var(--primary);
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.page-subtitle {
    margin: var(--space-xs) 0 0;
    color: var(--muted);
    font-weight: 650;
    line-height: 1.45;
}

.header-actions,
.page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: .55rem;
}

.panel,
.quick-actions-panel {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: none;
}

.compact-panel,
.panel-body {
    padding: var(--panel-padding);
}

.table-panel,
.quick-actions-panel,
.stats-grid,
.dashboard-stat-grid,
.dashboard-action-grid,
.notice,
.subnav,
.detail-layout,
.calculator-layout,
.sale-document-layout,
.recipe-grid,
.inventory-grid {
    margin-bottom: var(--section-gap);
}

.section-heading {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: .62rem var(--panel-padding);
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.section-heading h2,
.section-heading h3 {
    margin: 0;
    color: var(--primary);
    font-size: var(--section-heading-size);
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.section-heading p {
    margin: .15rem 0 0;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.45;
}

.detail-meta {
    margin: .85rem 0 0;
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
}

.section-title {
    margin: 0 0 .55rem;
    color: var(--primary);
    font-size: var(--section-heading-size);
    font-weight: 950;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.event-detail {
    display: grid;
    gap: .2rem;
    color: #31465a;
    font-weight: 650;
}

.event-detail strong {
    color: var(--text);
}

.chart-box {
    height: 22rem;
    padding: var(--panel-padding);
}

.chart-box canvas {
    width: 100%;
    height: 100%;
}

.chart-empty {
    display: grid;
    min-height: 100%;
    margin: 0;
    place-items: center;
    color: var(--muted);
    font-weight: 700;
    text-align: center;
}

.chart-empty[hidden] {
    display: none;
}