/* ========================================================================== 
   e.emach.pl — UI foundation
   v9.8.248

   Wspólna geometria, typografia i prymitywy UI. Ten plik NIE zawiera
   kolorów brandingu — te należą do theme.css.

   Reguła rozwoju:
   - nowe odstępy -> --space-*
   - nowe promienie -> --radius-*
   - nowe rozmiary tekstu -> --font-size-* / role --type-*
   - nowe standardowe kontrolki -> prymitywy .ui-*
   - nowe layouty aplikacji -> --layout-*

   Produkcja: style.css używa tych tokenów zamiast powielać wartości bazowe.

   Kanoniczne breakpointy projektu:
   600px  — telefon
   820px  — tablet / sidebar jako drawer
   1100px — szeroki desktop
   Nie dodawaj nowych przypadkowych breakpointów bez uzasadnienia.
   ========================================================================== */

:root {
    /* ---------- spacing ---------- */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;

    /* ---------- rhythm ----------
       Semantic spacing roles for core UI. Keep local micro-geometry separate;
       page/card/layout spacing should use these roles instead of ad-hoc values. */
    --rhythm-page-stack: var(--space-5);
    --rhythm-section-stack: var(--space-4);
    --rhythm-grid-gap: var(--space-4);
    --rhythm-card-padding: var(--space-4);
    --rhythm-card-gap: var(--space-3);
    --rhythm-inline-gap: var(--space-2);
    --rhythm-text-gap: var(--space-1);

    /* ---------- shape ---------- */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* kompatybilność z istniejącym CSS */
    --app-radius: var(--radius-md);
    --app-radius-lg: var(--radius-xl);
    --ui-radius: var(--app-radius);
    --ui-radius-lg: var(--app-radius-lg);

    /* ---------- typography ---------- */
    --font-family-ui: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

    --font-size-2xs: .5625rem;
    --font-size-xs: .625rem;
    --font-size-sm: .75rem;
    --font-size-md: .875rem;
    --font-size-lg: 1rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.75rem;

    --font-weight-normal: 400;
    --font-weight-medium: 600;
    --font-weight-semibold: 700;
    --font-weight-bold: 800;
    --font-weight-heavy: 900;

    --type-page-title-size: clamp(1.6875rem, 2.2vw, 2.1875rem);
    --type-page-title-weight: var(--font-weight-heavy);
    --type-section-title-size: 1.125rem;
    --type-section-title-weight: var(--font-weight-bold);
    --type-card-title-size: .875rem;
    --type-card-title-weight: var(--font-weight-bold);
    --type-body-size: var(--font-size-md);
    --type-caption-size: var(--font-size-xs);
    --type-technical-size: var(--font-size-xs);

    /* ---------- controls ---------- */
    --control-height-sm: 2rem;
    --control-height-md: 2.5rem;
    --control-height-lg: 3rem;
    --control-padding-x-sm: var(--space-3);
    --control-padding-x-md: var(--space-4);
    --control-padding-x-lg: var(--space-5);

    /* ---------- interaction capabilities ---------- */
    --interaction-hit-target-min: var(--control-height-md);

    /* ---------- canonical app layout ---------- */
    --layout-sidebar-width: 236px;
    --layout-sidebar-drawer-width: min(280px, 84vw);
    --layout-content-left: var(--layout-sidebar-width);
    --layout-topbar-height: 72px;
    --layout-content-pad-top: var(--space-7);
    --layout-content-pad-x: var(--space-7);
    --layout-content-pad-bottom: var(--space-8);
    --layout-content-max: 1240px;

    /* kompatybilność historyczna; nowe reguły używają --layout-* */
    --dash-sidebar: var(--layout-content-left);
    --dash-header: var(--layout-topbar-height);
}

/* v9.8.248: only mobile uses the drawer. Desktop uses an expanded sidebar
   or a compact icon rail, controlled by app-shell.css. */
@media (max-width: 760px) {
    :root {
        --layout-content-left: 0px;
    }
}

@media (max-width: 820px) {
    :root {
        --layout-content-pad-top: var(--space-6);
        --layout-content-pad-x: var(--space-5);
        --layout-content-pad-bottom: var(--space-7);
    }
}

@media (max-width: 600px) {
    :root {
        --layout-topbar-height: 62px;
        --layout-content-pad-top: var(--space-3);
        --layout-content-pad-x: var(--space-2);
        --layout-content-pad-bottom: var(--space-6);
        --rhythm-page-stack: var(--space-4);
        --rhythm-section-stack: var(--space-3);
        --rhythm-grid-gap: var(--space-3);
        --rhythm-card-padding: var(--space-3);
        --rhythm-card-gap: var(--space-3);
    }
}

@media (pointer: coarse) {
    :root {
        --interaction-hit-target-min: 44px;
    }
}

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html,
body,
button,
input,
select,
textarea {
    font-family: var(--font-family-ui);
}

.ui-page-title {
    margin: 0;
    font-size: var(--type-page-title-size);
    font-weight: var(--type-page-title-weight);
    line-height: 1.12;
}

.ui-section-title {
    margin: 0;
    font-size: var(--type-section-title-size);
    font-weight: var(--type-section-title-weight);
    line-height: 1.2;
}

.ui-card-title {
    margin: 0;
    font-size: var(--type-card-title-size);
    font-weight: var(--type-card-title-weight);
    line-height: 1.25;
}

.ui-caption {
    font-size: var(--type-caption-size);
    line-height: 1.35;
}

.ui-technical {
    font-family: var(--font-family-mono);
    font-size: var(--type-technical-size);
    line-height: 1.35;
}

/* ---------- wspólne prymitywy komponentów ---------- */
.ui-button,
.ui-icon-button {
    box-sizing: border-box;
    min-height: max(var(--control-height-md), var(--interaction-hit-target-min));
    border: 1px solid var(--app-control-border);
    border-radius: var(--radius-md);
    background: var(--app-surface);
    color: var(--app-text);
    font: inherit;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    touch-action: manipulation;
}

.ui-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0 var(--control-padding-x-md);
}

.ui-icon-button {
    display: inline-grid;
    width: max(var(--control-height-md), var(--interaction-hit-target-min));
    place-items: center;
    padding: 0;
}

@media (hover: hover) and (pointer: fine) {
    .ui-button:hover,
    .ui-icon-button:hover {
        border-color: var(--brand-primary);
        color: var(--brand-primary);
    }
}

.ui-button:disabled,
.ui-icon-button:disabled {
    cursor: default;
    opacity: .55;
}

.ui-button.is-primary {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: var(--app-text-inverse);
}

@media (hover: hover) and (pointer: fine) {
    .ui-button.is-primary:hover {
        border-color: var(--brand-primary-hover);
        background: var(--brand-primary-hover);
        color: var(--app-text-inverse);
    }
}

.ui-badge {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    gap: var(--space-1);
    padding: 0 var(--space-2);
    border: 1px solid var(--app-border);
    border-radius: var(--radius-pill);
    background: var(--app-surface-soft);
    color: var(--app-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.ui-panel {
    box-sizing: border-box;
    border: 1px solid var(--app-border);
    border-radius: var(--radius-lg);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
}

.ui-empty-state {
    display: grid;
    place-items: center;
    gap: var(--space-2);
    min-height: 96px;
    padding: var(--space-6);
    text-align: center;
}

.ui-empty-state > strong {
    color: var(--app-text-strong);
    font-size: var(--font-size-md);
}

.ui-empty-state > span {
    color: var(--app-text-muted);
    font-size: var(--font-size-sm);
}

.ui-button.is-danger {
    border-color: var(--state-danger);
    color: var(--state-danger);
}

.ui-button.is-loading {
    cursor: wait;
    opacity: .72;
}

.ui-badge.is-success {
    border-color: var(--state-success);
    color: var(--state-success);
}

.ui-badge.is-warning {
    border-color: var(--state-warning);
    color: var(--state-warning);
}

.ui-badge.is-error {
    border-color: var(--state-danger);
    color: var(--state-danger);
}

.ui-badge.is-offline {
    border-color: var(--state-offline);
    color: var(--state-offline);
}