/* SerwisApp — style bazowe. Właściwości logiczne (inline/block) dla gotowości RTL. */

:root {
    --color-bg: #f6f7f9;
    --color-surface: #ffffff;
    --color-text: #1b1f24;
    --color-muted: #5b6573;
    --color-border: #dfe3e8;
    --color-primary: #1f6feb;
    --color-primary-hover: #1858c4;
    --color-primary-contrast: #ffffff;
    --color-accent-soft: #e8f0fe;
    --color-danger: #c62828;
    --color-success: #1b7f3b;
    --color-focus: #ffbf47;

    --radius: 10px;
    --radius-small: 6px;
    --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 1px 3px rgb(16 24 40 / 10%);
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --container: 1120px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #0f1216;
        --color-surface: #171b21;
        --color-text: #e7eaee;
        --color-muted: #9aa4b1;
        --color-border: #2a313a;
        --color-primary: #4c8dff;
        --color-primary-hover: #6aa0ff;
        --color-accent-soft: #1a2638;
        --shadow: 0 1px 2px rgb(0 0 0 / 40%);
    }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--font);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-text);
    background: var(--color-bg);
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
}

main { flex: 1; }

h1, h2, h3 { line-height: 1.2; margin-block: 0 var(--space-3); }
h1 { font-size: clamp(1.75rem, 4vw, 2.6rem); letter-spacing: -0.02em; }
h2 { font-size: 1.15rem; }
p { margin-block: 0 var(--space-4); }
a { color: var(--color-primary); }

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

.container {
    inline-size: 100%;
    max-inline-size: var(--container);
    margin-inline: auto;
    padding-inline: var(--space-4);
}

.visually-hidden {
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
    position: absolute;
    inset-inline-start: var(--space-4);
    inset-block-start: -3rem;
    background: var(--color-surface);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-small);
    z-index: 10;
}
.skip-link:focus { inset-block-start: var(--space-2); }

.muted { color: var(--color-muted); }
.lead { font-size: 1.125rem; color: var(--color-muted); max-inline-size: 46rem; }

/* Przyciski */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: 2.5rem;
    padding-block: var(--space-2);
    padding-inline: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.btn:hover { border-color: var(--color-muted); }
.btn--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-contrast); }
.btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn--ghost { background: transparent; border-color: transparent; }
.btn--ghost:hover { background: var(--color-accent-soft); border-color: transparent; }
.btn--small { min-block-size: 2rem; padding-inline: var(--space-3); font-size: .875rem; }
.btn--large { min-block-size: 3rem; padding-inline: var(--space-6); font-size: 1.05rem; }

select, input, textarea {
    font: inherit;
    color: inherit;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    min-block-size: 2.5rem;
    padding-inline: var(--space-3);
}

/* Nagłówek i stopka */
.site-header { background: var(--color-surface); border-block-end: 1px solid var(--color-border); }
.site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4); min-block-size: 4rem; flex-wrap: wrap;
}
.brand {
    display: inline-flex; align-items: center; gap: var(--space-2);
    font-weight: 700; font-size: 1.15rem; color: var(--color-text); text-decoration: none;
}
.site-nav { display: flex; align-items: center; gap: var(--space-3); }
.lang-switch { display: flex; align-items: center; gap: var(--space-2); }
.lang-switch select { min-block-size: 2rem; }
.js [data-autosubmit-hide] { display: none; }
[hidden] { display: none !important; }

.site-footer {
    border-block-start: 1px solid var(--color-border);
    padding-block: var(--space-6);
    color: var(--color-muted);
    font-size: .875rem;
    margin-block-start: var(--space-12);
}

/* Strona startowa */
.hero { padding-block: var(--space-12) var(--space-8); }
.hero__inner { display: flex; flex-direction: column; align-items: flex-start; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block: var(--space-4); }

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-4);
}
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--space-6);
}
.feature p { color: var(--color-muted); margin: 0; }
.feature__icon {
    display: block;
    inline-size: 2.5rem; block-size: 2.5rem;
    border-radius: var(--radius-small);
    background: var(--color-accent-soft);
    margin-block-end: var(--space-4);
    position: relative;
}
.feature__icon::after {
    content: "";
    position: absolute;
    inset: 0.7rem;
    border: 2px solid var(--color-primary);
    border-radius: 3px;
}
.feature__icon--status::after { border-radius: 50%; }
.feature__icon--team::after { inset: 0.75rem 0.55rem; border-radius: 999px 999px 4px 4px; }

/* Strona błędu */
.error-page { padding-block: var(--space-12); }
.error-page__code { font-size: 4rem; font-weight: 800; color: var(--color-primary); margin: 0; line-height: 1; }
.debug {
    margin-block-start: var(--space-6);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    overflow: auto;
    font-size: .8rem;
    white-space: pre-wrap;
}

/* Formularze */
.form { display: flex; flex-direction: column; gap: var(--space-4); margin-block: var(--space-4); }
.field { display: flex; flex-direction: column; gap: var(--space-1); }
.field label { font-weight: 600; font-size: .9rem; }
.field input { inline-size: 100%; }
.field input[aria-invalid="true"] { border-color: var(--color-danger); }
.field__error { color: var(--color-danger); font-size: .875rem; margin: 0; }
.field__hint { color: var(--color-muted); font-size: .8rem; margin: 0; }
.input--code { font-size: 1.5rem; letter-spacing: .4em; text-align: center; font-variant-numeric: tabular-nums; }
.btn--block { inline-size: 100%; }

.auth { display: flex; justify-content: center; padding-block: var(--space-12); }
.auth__card { inline-size: 100%; max-inline-size: 420px; }
.auth__links { margin: var(--space-2) 0 0; font-size: .9rem; }

.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-small);
    border: 1px solid var(--color-border);
    background: var(--color-accent-soft);
    margin-block-end: var(--space-4);
}
.alert--success { border-color: color-mix(in srgb, var(--color-success) 40%, transparent); }
.alert--error { border-color: var(--color-danger); color: var(--color-danger); }

.banner { padding: var(--space-2) var(--space-4); text-align: center; font-weight: 600; }
.banner--warning { background: #fff4ce; color: #5c4400; }

/* Aplikacja */
.app-main { padding-block: var(--space-8); }
.app-nav { display: flex; gap: var(--space-1); flex: 1; margin-inline-start: var(--space-4); }
.app-nav a {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-small);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
}
.app-nav a:hover { background: var(--color-accent-soft); }
.app-nav a[aria-current="page"] { background: var(--color-accent-soft); color: var(--color-primary); }
.user-chip { font-size: .875rem; color: var(--color-muted); max-inline-size: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-header--admin { border-block-end: 3px solid var(--color-primary); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-4); margin-block-start: var(--space-6); }
.stat { display: flex; flex-direction: column; gap: var(--space-1); }
.stat__value { font-size: 1.75rem; font-weight: 800; }
.stat__label { color: var(--color-muted); font-size: .9rem; }

.table-wrap { padding: 0; overflow-x: auto; }
.table { inline-size: 100%; border-collapse: collapse; font-size: .925rem; }
.table th, .table td { text-align: start; padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--color-border); vertical-align: top; }
.table th { font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-muted); }
.table tbody tr:last-child td { border-block-end: 0; }

.badge { display: inline-block; padding: 2px var(--space-2); border-radius: 999px; font-size: .8rem; font-weight: 600; background: var(--color-accent-soft); }
.badge--active { color: var(--color-success); }
.badge--suspended, .badge--deleted { color: var(--color-danger); }

.details { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-6); margin: 0; }
.details dt { color: var(--color-muted); }
.details dd { margin: 0; }

/* Formularze — rozszerzenia */
.form-card { max-inline-size: 720px; margin-block-end: var(--space-6); }
.form-card--wide { max-inline-size: none; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.form-row--invite { grid-template-columns: 2fr 1fr; }
.form-actions { display: flex; gap: var(--space-3); align-items: center; margin-block-start: var(--space-2); }
.form-skip { margin-block-start: var(--space-3); }
.field select { inline-size: 100%; }
fieldset.field { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
fieldset.field legend, .permission-group legend { font-weight: 600; font-size: .9rem; padding: 0; margin-block-end: var(--space-2); }
.field--inline { flex-direction: row; align-items: center; gap: var(--space-3); }
.input--mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.input--color { inline-size: 4rem; padding: 2px; block-size: 2.5rem; }
.checkbox { display: flex; gap: var(--space-2); align-items: flex-start; font-weight: 400; cursor: pointer; }
.checkbox input { min-block-size: auto; margin-block-start: .3em; }
.checkbox-list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-3); }
.checkbox--card { border: 1px solid var(--color-border); border-radius: var(--radius-small); padding: var(--space-3); }
.checkbox--card:has(input:checked) { border-color: var(--color-primary); background: var(--color-accent-soft); }
.hp-field { position: absolute !important; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.auth__card--wide { max-inline-size: 560px; }
.logo-preview { display: flex; align-items: center; gap: var(--space-4); margin-block-end: var(--space-2); }
.logo-preview img { max-block-size: 64px; max-inline-size: 200px; border: 1px solid var(--color-border); border-radius: var(--radius-small); padding: var(--space-1); background: #fff; }

/* Pola wielojęzyczne: zakładki dodaje JS (.is-tabbed) */
.i18n-field__pane { display: flex; flex-direction: column; gap: var(--space-1); margin-block-end: var(--space-2); }
.i18n-field__lang { font-size: .8rem; color: var(--color-muted); font-weight: 600; }
.i18n-field.is-tabbed .i18n-field__pane { display: none; }
.i18n-field.is-tabbed .i18n-field__pane.is-active { display: flex; }
.i18n-field.is-tabbed .i18n-field__lang { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.i18n-tabs { display: flex; gap: var(--space-1); margin-block-end: var(--space-2); }
.i18n-tabs button {
    font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer;
    border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-muted);
    border-radius: 999px; padding: 2px var(--space-3);
}
.i18n-tabs button[aria-selected="true"] { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-contrast); }
.i18n-tabs button.is-filled:not([aria-selected="true"])::after { content: " ✓"; }

/* Kreator i podnawigacja */
.wizard-head { margin-block-end: var(--space-6); }
.steps { list-style: none; padding: 0; margin: var(--space-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2); counter-reset: step; }
.steps li { counter-increment: step; display: flex; align-items: center; gap: var(--space-2); font-size: .875rem; color: var(--color-muted); }
.steps li::before {
    content: counter(step); display: inline-grid; place-items: center; inline-size: 1.6rem; block-size: 1.6rem;
    border-radius: 50%; border: 1px solid var(--color-border); font-weight: 700; font-size: .8rem;
}
.steps li.is-current { color: var(--color-text); font-weight: 700; }
.steps li.is-current::before { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-contrast); }
.steps li.is-done::before { content: "✓"; background: var(--color-accent-soft); color: var(--color-primary); }
.steps li + li { padding-inline-start: var(--space-2); border-inline-start: 1px solid var(--color-border); }

.subnav { display: flex; flex-wrap: wrap; gap: var(--space-1); border-block-end: 1px solid var(--color-border); margin-block-end: var(--space-6); }
.subnav a { padding: var(--space-2) var(--space-3); text-decoration: none; color: var(--color-muted); font-weight: 600; border-block-end: 2px solid transparent; margin-block-end: -1px; }
.subnav a[aria-current="page"] { color: var(--color-primary); border-block-end-color: var(--color-primary); }
.page-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-block-end: var(--space-4); }
.page-actions h2 { margin: 0; }
.section-title { margin-block: var(--space-8) var(--space-3); }
.table__actions { display: flex; gap: var(--space-2); justify-content: flex-end; }
.callout {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
    background: var(--color-accent-soft); border: 1px solid var(--color-primary); border-radius: var(--radius);
    padding: var(--space-4) var(--space-6); margin-block-end: var(--space-6);
}
.callout p { margin: 0; font-weight: 600; }
.permission-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.permission-group { border: 1px solid var(--color-border); border-radius: var(--radius-small); padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
a.user-chip { text-decoration: none; }
a.user-chip:hover { color: var(--color-primary); }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; background: var(--color-accent-soft); padding: 1px 4px; border-radius: 4px; }

/* Klienci, urządzenia, kategorie */
.search-bar { display: flex; gap: var(--space-2); margin-block-end: var(--space-4); max-inline-size: 640px; }
.search-bar input { flex: 1; min-inline-size: 0; }
.empty-state { padding-block: var(--space-8); text-align: center; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-4); }
.grid-2 h3 { font-size: 1rem; margin-block-start: var(--space-4); }
.btn--danger { border-color: var(--color-danger); color: var(--color-danger); background: transparent; }
.btn--danger:hover { background: var(--color-danger); color: #fff; }
.alert--warning { border-color: #d4a017; background: #fff8e1; color: #5c4400; }
.alert--warning p { margin-block: var(--space-1) var(--space-2); }
.duplicate-list { margin: 0; padding-inline-start: var(--space-4); }
.pre-line { white-space: pre-line; }
.breadcrumbs { font-size: .875rem; }
.segmented { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.form--inline { flex-direction: row; align-items: flex-end; gap: var(--space-3); }
.form--inline .field { flex: 1; }
.tree-indent { display: inline-block; }
.tree-indent--1 { inline-size: 1.5rem; }
.tree-indent--2 { inline-size: 3rem; }
.tree-indent--3 { inline-size: 4.5rem; }
.tree-indent--4 { inline-size: 6rem; }
.tree-indent--5 { inline-size: 7.5rem; }
.tree-indent:not(.tree-indent--0)::before { content: "└ "; color: var(--color-muted); }
tr.is-muted td { color: var(--color-muted); }
.tag-list { list-style: none; padding: 0; margin: 0 0 var(--space-4); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tag { border: 1px solid var(--color-border); border-radius: 999px; padding: 2px var(--space-3); font-size: .85rem; background: var(--color-bg); }
.checklist-items { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.checklist-items li { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding-block: var(--space-2); border-block-end: 1px solid var(--color-border); }
.field-editor { background: var(--color-bg); border-radius: var(--radius-small); padding: var(--space-4); }
.inline-edit { display: flex; gap: var(--space-2); align-items: center; }
.inline-edit input { min-block-size: 2rem; }
textarea { font: inherit; color: inherit; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-small); padding: var(--space-2) var(--space-3); inline-size: 100%; resize: vertical; }
.field--check { flex-direction: row; }

@media (max-width: 720px) {
    .app-nav { order: 3; flex-basis: 100%; margin-inline-start: 0; overflow-x: auto; }
    .form-row--invite { grid-template-columns: 1fr; }
    .form--inline { flex-direction: column; align-items: stretch; }
}

@media print {
    .site-header, .site-footer, .skip-link { display: none; }
    body { background: #fff; color: #000; }
}