/*
 * Powłoka stron po zalogowaniu: pasek górny, menu boczne (desktop) albo dolne
 * (telefon), treść i okno wylogowania 5a. Makiety: nawigacja v3.6 (QM_084 A),
 * logowanie v1 (QM_059 A). Komponenty i kolory z /design-system/ — tu wyłącznie
 * układ przez tokeny. Jedyny próg układu: 720 px (--bp-layout).
 */

body { margin: 0; min-height: 100vh; background: var(--color-bg-canvas); color: var(--color-text-primary); line-height: var(--line-height-normal); }
p { margin: var(--space-0) var(--space-0) var(--space-3); }
main:focus, .h1:focus { outline: none; }
/* nagłówek dostaje fokus programowo po zmianie widoku (czytnik ekranu); nie jest elementem do obsługi */
.h1[tabindex="-1"]:focus-visible { outline: none; }

/* ================================================ powłoka */
/* adres e-mail w pasku: skracany wielokropkiem, pełny w title — nie wypycha układu */
.user-email { min-width: 0; max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }

/* menu boczne chowane i o zmiennej szerokości (makieta v5.1, makieta.css:8–24; szerokość ustawia shell.js) */
.app-shell { grid-template-columns: var(--shell-sidebar-w, var(--layout-sidebar-width)) minmax(0, 1fr); transition: grid-template-columns 0.15s ease; }
.app-shell.is-resizing { transition: none; user-select: none; }
.app-shell.is-sidebar-hidden, .app-shell.is-no-sidebar { grid-template-columns: 0 minmax(0, 1fr); }
.app-shell.is-sidebar-hidden > .sidenav, .app-shell.is-no-sidebar > .sidenav { visibility: hidden; padding: 0; border: 0; overflow: hidden; width: 0; }
.app-shell > .sidenav { width: auto; min-width: 0; overflow-y: auto; max-height: calc(100vh - var(--layout-topbar-height)); position: sticky; top: var(--layout-topbar-height); box-sizing: border-box; }
.sidebar-toggle { margin-left: calc(-1 * var(--space-2)); }
/* uchwyt szerokości: pas 8 px na prawej krawędzi menu bocznego, przez całą wysokość pod paskiem */
.sidebar-resize {
    position: fixed; z-index: var(--z-sticky); top: var(--layout-topbar-height); bottom: 0;
    left: calc(var(--shell-sidebar-w, var(--layout-sidebar-width)) - 4px); width: 8px; cursor: col-resize; touch-action: none;
}
.sidebar-resize::after { content: ""; position: absolute; left: 3px; top: 0; bottom: 0; width: 2px; background: transparent; }
.sidebar-resize:hover::after, .sidebar-resize.is-active::after, .sidebar-resize:focus-visible::after { background: var(--color-accent); }
.sidebar-resize:focus-visible { outline: none; }
.app-shell.is-sidebar-hidden > .sidebar-resize { display: none; }

/* menu konta w prawym górnym rogu (makieta.css:35–49, :502, :514–519) */
.account { position: relative; flex: 0 1 auto; min-width: 0; }
.account__button { gap: var(--space-2); min-width: 0; max-width: min(22rem, 100%); }
.account__email { flex: 0 1 auto; white-space: nowrap; }
.account__role[hidden] { display: none; }
.account-menu {
    position: absolute; right: 0; top: calc(100% + var(--space-1)); z-index: var(--z-dropdown);
    min-width: 15rem; margin: 0; padding: var(--space-2); list-style: none;
    background: var(--color-bg-raised); border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.account-menu .nav-item { white-space: nowrap; }
.account-menu .nav-item:focus-visible { outline: var(--border-width-strong) solid var(--color-focus-ring); outline-offset: -2px; background: var(--color-bg-hover); color: var(--color-text-primary); }
.account-menu .nav-item[aria-current="page"] { box-shadow: inset var(--border-width-strong) 0 0 var(--color-accent); background: var(--color-accent-subtle); color: var(--color-text-primary); }
@media (min-width: 721px) {
    /* odznaka roli ucina się „…” jak adres; najpierw kurczy się adres (do 4rem), potem odznaka */
    .account__role { min-width: 0; }
    .account__role-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .account__email { min-width: 4rem; flex-shrink: 1000; }
}
/* „Wyloguj” w menu to przycisk (otwiera 5a), nie odnośnik — wygląda jak pozostałe pozycje */
button.nav-item { width: 100%; border: 0; background: none; font-family: inherit; font-size: inherit; line-height: inherit; text-align: left; cursor: pointer; }
.bottomnav button.nav-item { text-align: center; }
/* „Więcej” (≤ 720 px): reszta menu zamiast treści strony, dopóki jest otwarta */
.app-main[data-more] > :not([data-shell-more]) { display: none !important; }
.more-list { display: flex; flex-direction: column; gap: var(--space-1); max-width: var(--layout-narrow-max); }
.app-main { max-width: var(--layout-content-max); width: 100%; padding-block: var(--space-6); box-sizing: border-box; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.page-head .h1 { margin: var(--space-0); }
.page-head .btn { margin-left: auto; }
.page-sub { margin-bottom: var(--space-4); }
.alert { margin-bottom: var(--space-4); }
/* długi adres e-mail albo nazwa urządzenia łamie się w treści, zamiast przewijać stronę w bok (360 px) */
.app-main .alert, .app-main .card, .page-head .h1 { overflow-wrap: anywhere; }
.alert__title:only-child { margin: var(--space-0); }
.card { margin-bottom: var(--space-4); }
.card__body > .h3 { margin: var(--space-0) var(--space-0) var(--space-3); }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: var(--density-gap); margin-bottom: var(--space-4); }

.form { display: flex; flex-direction: column; gap: var(--density-gap); margin-bottom: var(--space-4); }
.form-narrow { max-width: var(--layout-narrow-max); }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.form-actions.start { justify-content: flex-start; margin-top: var(--space-4); }

/* ================================================ Moje urządzenia (4a–4c; devices.css nie istnieje — zakres zad. 011) */
.device-list { list-style: none; margin: var(--space-0) var(--space-0) var(--space-4); padding: var(--space-0); display: flex; flex-direction: column; gap: var(--space-3); }
.device {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "main act" "meta act"; align-items: center;
    gap: var(--space-1) var(--space-4);
    padding: var(--density-card-padding);
    margin-bottom: var(--space-0);
}
.device-current { border-color: var(--color-accent); }
.device-main { grid-area: main; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.device-name { font-weight: var(--font-weight-semibold); }
.device-meta { grid-area: meta; margin: var(--space-0); font-size: var(--font-size-sm); }
.device > .btn { grid-area: act; }

/* ================================================ wąski ekran (≤ 720 px = --bp-layout) */
@media (max-width: 720px) {
    .app-main { padding-block: var(--space-4); }
    .device { grid-template-columns: 1fr; grid-template-areas: "main" "meta" "act"; }
    .device > .btn { justify-self: start; }
    .topbar__brand .brand-text { display: none; }
    .user-email { max-width: 8.5rem; }
    /* telefon (makieta.css:269–282): w pasku sama ikona konta; menu boczne to szuflada nad treścią, bez uchwytu */
    .account__email, .account__role { display: none; }
    .app-shell, .app-shell.is-sidebar-hidden, .app-shell.is-no-sidebar { grid-template-columns: minmax(0, 1fr); }
    .app-shell > .sidenav { display: none; }
    .app-shell.is-drawer-open > .sidenav {
        display: flex; visibility: visible; position: fixed; z-index: var(--z-overlay);
        top: var(--layout-topbar-height); left: 0; bottom: var(--layout-bottomnav-height);
        width: min(85vw, 20rem); padding: var(--space-3); max-height: none; overflow-y: auto;
        border-right: var(--border-width) solid var(--color-border-default); box-shadow: var(--shadow-lg);
    }
    .sidebar-resize { display: none; }
    .page-head .btn { margin-left: var(--space-0); }
    .form-actions .btn { flex: 1 1 auto; }
}

/* Strona Dashboardu (zad. 087; makieta.css:93, :289 — mk-main.is-view): margines obszaru treści 12 px, telefon 8 px. Pozostałe strony — 16 px
   (layout-gutter) jak makieta; pełny ekran Dashboardu ma własny (pages.css). */
body[data-view-page="dashboard"]:not([data-dash-full]) .app-shell > .app-main { padding: var(--space-3); }
@media (max-width: 720px) {
    body[data-view-page="dashboard"]:not([data-dash-full]) .app-shell > .app-main { padding: var(--space-2); }
}