:root {
    --ink: #202e05;
    --ink-deep: #102d06;
    --accent: #b5e717;
    --accent-soft: #bfe734;
    --canvas: #fafff3;
    --surface: #fbfee7;
    --border: #e4eadb;
    --olive: #405413;
    --muted: #899174;
    --error: #a4302a;
    --error-surface: #fbeceb;

    /* surfaces */
    --panel: #ffffff;
    --inset: var(--surface);

    /* text levels on light background */
    --ink-60: rgba(32, 46, 5, .60);
    --ink-50: rgba(32, 46, 5, .50);
    --line: rgba(32, 46, 5, .10);
    --line-strong: rgba(32, 46, 5, .18);

    /* text levels on dark (--ink-deep) background */
    --on-dark: var(--surface);
    --on-dark-72: rgba(251, 254, 231, .72);
    --on-dark-hover: rgba(251, 254, 231, .10);

    /* status */
    --ok-surface: rgba(64, 84, 19, .10);
    --ok-ink: var(--olive);

    /* shape */
    --r-card: 16px;
    --r-control: 9px;
    --r-pill: 999px;

    /* type (design.md 1.4, 2026-08-04) */
    --font-ui: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
    --font-mono: "DM Mono", ui-monospace, monospace;

    /* grid */
    --content: 1360px;
    --gutter: 24px;
    --header-height: 68px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font-ui);
    line-height: 1.5;
    /* Column + full viewport height so the footer's `margin-top: auto` can push it to the bottom
       on a SHORT page (login, the privacy placeholder) instead of leaving it floating mid-screen
       with canvas below it (2026-08-04). */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* The 2026-08-04 brand pack replaced the serif headings: one family now, told apart by weight.
   700 rather than 600 -- a grotesque at the same weight as the body text would stop reading as a
   heading at all, which is exactly what the old serif contrast was doing for us. */
/* The 2026-08-04 brand pack replaced the serif headings: one family now, told apart by weight and
   tracking (design.md 1.4). 700 rather than 600 -- a grotesque at the body weight would stop
   reading as a heading at all, which is the work the old serif contrast used to do. The negative
   tracking is not cosmetic here for the same reason: it is part of what makes a heading a heading
   once the typeface no longer changes. H1 gets more of it than H2/H3, per the scale. */
h1, h2, h3 {
    font-family: var(--font-ui);
    color: var(--ink-deep);
    font-weight: 700;
    letter-spacing: -.015em;
}

p {
    max-width: 60ch;
    text-wrap: pretty;
}

a {
    color: var(--olive);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: rgba(64, 84, 19, .35);
}

a:hover {
    color: var(--ink-deep);
    text-decoration-color: var(--accent);
}

/* ---------- header ---------- */

body.nav-open {
    overflow: hidden;
}

header {
    background: var(--ink-deep);
    min-height: var(--header-height);
    display: flex;
    align-items: center;
}

header .header-inner {
    width: 100%;
    max-width: var(--content);
    margin: 0 auto;
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    gap: 20px;
}

.brand {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--on-dark);
    text-decoration: none;
    font-family: var(--font-ui);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.brand:hover {
    color: var(--on-dark);
    text-decoration: none;
}

/* The cobra mark itself, in place of the plain lime square that stood here until 2026-08-04.
   26px is the size the brand pack's own header mock-up specifies; the file is the single source of
   truth, so the palette below is NOT restated here -- the SVG carries its own colours. */
.brand-mark {
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    display: block;
}

/* "Connect" is the lime half of the wordmark. The brand rule is that the hood and the body keep
   their colours, and this is the typographic echo of that. */
.brand-accent {
    color: var(--accent);
}

/* The footer band, deliberately the SAME colour as the header (Meanius, 2026-08-04) so the page
   sits between two ends of one frame rather than trailing off. `margin-top: auto` plus the flex
   column on body keeps it at the bottom of SHORT pages too, instead of floating mid-screen. */
footer {
    background: var(--ink-deep);
    color: var(--on-dark-72);
    margin-top: auto;
}

footer .footer-inner {
    width: 100%;
    max-width: var(--content);
    margin: 0 auto;
    padding: 20px var(--gutter);
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* No plate: the file is the knocked-out version (transparent, white + light green), so it sits
   directly on the dark band. The plate the white-background JPEG needed looked like a sticker. */
.footer-logo {
    flex: 0 0 auto;
    display: block;
    line-height: 0;
}

.footer-logo img {
    display: block;
    width: auto;
    height: 34px;
}

.footer-copy {
    flex: 1 1 auto;
    margin: 0;
    font-size: 14px;
}

.footer-links {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--on-dark-72);
    font-size: 14px;
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--on-dark);
    text-decoration: underline;
}

@media (max-width: 640px) {
    footer .footer-inner {
        gap: 14px;
    }

    .footer-copy {
        flex: 1 1 100%;
        order: 3;
    }
}

.nav-panel {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

header nav {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 1rem 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

header nav::-webkit-scrollbar {
    display: none;
}

.nav-toggle {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(251, 254, 231, .28);
    border-radius: var(--r-control);
    background: none;
    cursor: pointer;
}

.nav-toggle-lines,
.nav-toggle-lines::before,
.nav-toggle-lines::after {
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: var(--on-dark);
}

.nav-toggle-lines {
    position: relative;
    display: block;
}

.nav-toggle-lines::before,
.nav-toggle-lines::after {
    position: absolute;
    left: 0;
    content: "";
}

.nav-toggle-lines::before {
    top: -6px;
}

.nav-toggle-lines::after {
    top: 6px;
}

header nav a {
    color: var(--on-dark-72);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    padding: 8px 9px;
    border-radius: 8px;
    white-space: nowrap;
}

header nav a:hover {
    background: var(--on-dark-hover);
    color: var(--on-dark);
}

header nav a[aria-current="page"] {
    background: var(--accent);
    color: var(--ink-deep);
    font-weight: 500;
}

.header-user {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* The person's own name, and since 2026-08-04 the way INTO their account page -- the Fiók nav item
   was dropped in favour of it (Meanius). It has to read as a control, not as a caption, so it
   borrows the nav link's padding, hover and current-page treatment rather than inventing its own. */
.header-user .monogram {
    color: var(--on-dark-72);
    font-size: 14px;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 9px;
    border-radius: 8px;
}

.header-user a.monogram:hover {
    background: var(--on-dark-hover);
    color: var(--on-dark);
}

.header-user a.monogram[aria-current="page"] {
    background: var(--accent);
    color: var(--ink-deep);
}

header nav form {
    margin: 0;
}

header .header-user form {
    margin: 0;
}

.btn-header {
    background: none;
    border: 1px solid rgba(251, 254, 231, .28);
    color: var(--on-dark);
    border-radius: var(--r-control);
    padding: 8px 14px;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.btn-header:hover {
    background: var(--on-dark-hover);
}

/* ---------- layout ---------- */

/* `width: 100%` IS LOad-BEARING, and it became so the moment the body turned into a flex column
   (2026-08-04). In block layout a `max-width` + `margin: 0 auto` block fills its container and then
   centres the leftover. In a FLEX column the auto cross-axis margins WIN OVER `align-items:
   stretch`, so the item is no longer stretched -- it falls back to fit-content, meaning main became
   exactly as wide as each page's widest element. The content column therefore changed width from
   page to page and appeared to jump sideways on every navigation (Meanius).
   With the explicit width it fills up to --content and lines up with .header-inner and
   .footer-inner, which carry the same width/max-width pair -- so the text starts on the same
   vertical line as the two logos, on every page. */
main {
    width: 100%;
    max-width: var(--content);
    margin: 0 auto;
    padding: 56px var(--gutter) 96px;
}

body main > * + * {
    margin-top: 24px;
}

.page-head {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.page-head + p,
.page-head + .card,
.page-head + .stack,
.page-head + .table-scroll,
.page-head + table {
    margin-top: 24px;
}

.eyebrow {
    margin: 0 0 6px;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--ink-50);
    font-weight: 500;
}

.page-head h1 {
    margin: 0;
    font-size: 44px;
    line-height: 1.05;
    letter-spacing: -.03em;
}

.page-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
    gap: 28px;
    align-items: start;
    margin-top: 36px;
}

.page-main {
    display: flex;
    flex-direction: column;
    gap: 28px;
    min-width: 0;
}

.page-aside {
    display: flex;
    flex-direction: column;
    gap: 28px;
    position: sticky;
    top: 28px;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 36px;
}

/* ---------- card ---------- */

.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: 28px 30px;
}

.card h2 {
    margin: 0;
    font-size: 20px;
}

/* Heading that labels the block under it (e.g. one company's machine table) when that block is not
   itself a card. The generic `main > * + *` spacing already puts air above it, so only the gap to
   its OWN table is set here -- otherwise a heading would drift away from what it names. */
.section-title {
    font-size: 18px;
    margin-bottom: 12px;
}

/* ...but INSIDE a card that generic rule does not reach (it only spaces direct children of main),
   so a second section under the first one would sit flush against the table above it. The gap
   belongs above the heading, not below the table, so a card ending in a table keeps its own
   padding (2026-08-04, the licence card stacks seats + machines + who-has-access). */
.card > * + .section-title {
    margin-top: 28px;
}

.card > h2:first-child,
.card > .card-head:first-child {
    margin-top: 0;
}

.card-head {
    margin-bottom: 18px;
}

.card-head h2 {
    margin-bottom: 4px;
}

.card-desc {
    margin: 0;
    font-size: 14.5px;
    color: var(--ink-60);
}

.card-dark {
    background: var(--ink-deep);
    color: var(--on-dark);
    border: none;
}

.card-dark h2, .card-dark h3 {
    color: var(--on-dark);
}

.card-dark .card-desc {
    color: var(--on-dark-72);
}

.card-dark a {
    color: var(--accent);
}

.card-quiet {
    background: transparent;
    border: 1px solid var(--line-strong);
}

/* ---------- buttons ---------- */

button, input[type="submit"], .btn {
    font: inherit;
    font-weight: 500;
    font-size: 14.5px;
    border-radius: var(--r-control);
    padding: 9px 18px;
    cursor: pointer;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

/* .btn belongs here too, not only in the shape rule above: an <a class="btn"> was picking up the
   padding and the radius but none of the colour, so it rendered as bare link text sitting in a
   button-sized gap (2026-08-04, the "Tovább a fiókhoz" link on the recovery-code page). The
   variants below (.btn-secondary, .btn-danger, .card-dark .btn) still override this, they are
   declared later. */
button, input[type="submit"], .btn {
    background: var(--ink-deep);
    color: var(--on-dark);
}

button:hover, input[type="submit"]:hover, .btn:hover {
    background: var(--olive);
    color: var(--on-dark);
}

button:focus-visible, input[type="submit"]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.btn-secondary {
    background: transparent;
    color: var(--ink-deep);
    border: 1px solid var(--line-strong);
}

.btn-secondary:hover {
    background: rgba(32, 46, 5, .06);
}

.card-dark .btn, .card-dark button {
    background: transparent;
    border: 1px solid rgba(251, 254, 231, .28);
    color: var(--on-dark);
}

.card-dark .btn:hover, .card-dark button:hover {
    background: var(--on-dark-hover);
}

/* Same shape as .btn-secondary, red instead of neutral (2026-08-04, Meanius). These two sit in
   identical side-by-side cards as each card's one action, so they have to read as the same KIND of
   control; the earlier underlined-link styling made the more dangerous one look like the lesser
   thing. The warning now lives in the colour, not in a weaker shape. */
.btn-danger {
    background: transparent;
    color: var(--error);
    border: 1px solid var(--error);
}

.btn-danger:hover {
    background: var(--error-surface);
    color: var(--error);
}

.danger-note {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--ink-50);
}

.actions {
    display: flex;
    gap: 10px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.stack-sm {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------- forms ---------- */

form {
    margin: 0;
}

.card form {
    max-width: 28rem;
}

form .fields {
    display: grid;
    gap: 18px;
}

label {
    display: block;
    margin-bottom: 6px;
    font-weight: 400;
    font-size: 14px;
    color: var(--ink-60);
}

input, select, textarea {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--border);
    border-radius: .4rem;
    background: var(--panel);
    color: var(--ink);
    font: inherit;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(181, 231, 23, 0.35);
}

input[type="checkbox"] {
    width: auto;
}

.field-hint {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--ink-50);
}

/* ---------- data list ---------- */

dl.data-list {
    margin: 0;
}

dl.data-list > div {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 16px;
    align-items: baseline;
    padding: 16px 0;
    border-top: 1px solid var(--line);
}

dl.data-list > div:first-child {
    border-top: none;
    padding-top: 0;
}

dl.data-list dt {
    margin: 0;
    font-size: 14px;
    color: var(--ink-60);
}

dl.data-list dd {
    margin: 0;
    font-size: 15.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

dl.data-list dd a {
    font-size: 14px;
    font-weight: 400;
}

@media (max-width: 640px) {
    dl.data-list > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}

/* ---------- qr code ---------- */

.qr-code {
    width: 200px;
    max-width: 100%;
    padding: 12px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-control);
    margin: 4px 0 20px;
}

.qr-code svg {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- pill / badge ---------- */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 500;
    background: rgba(32, 46, 5, .06);
    color: var(--ink-60);
    white-space: nowrap;
}

.pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: .7;
}

.pill-ok {
    background: var(--ok-surface);
    color: var(--ok-ink);
}

.pill-error {
    background: var(--error-surface);
    color: var(--error);
}

.code-list {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.code-list li {
    padding: 8px 12px;
    border-radius: var(--r-control);
    background: var(--inset);
    border: 1px solid var(--line);
}

/* ---------- code / identifier strip ---------- */

.code-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--inset);
    border: 1px solid var(--line);
}

.code-row code {
    flex: 1 1 auto;
}

.copy-result {
    font-size: 13px;
    color: var(--ok-ink);
}

code, .mono {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .06em;
    word-break: break-all;
}

/* ---------- warning banner ---------- */

.warning {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--error-surface);
    border: 1px solid rgba(164, 48, 42, .25);
    color: var(--error);
    font-size: 13.5px;
    align-items: flex-start;
}

.warning::before {
    content: "\26A0";
    flex: 0 0 auto;
}

.notice {
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--ok-surface);
    color: var(--ok-ink);
    font-size: 13.5px;
}

/* ---------- table ---------- */

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    overflow: hidden;
}

th, td {
    text-align: left;
    padding: .7rem .85rem;
}

th {
    background: var(--inset);
    color: var(--ink-60);
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
}

/* Tabular figures wherever numbers are meant to be COMPARED down a column -- seats, dates,
   counters. Proportional digits make a column of numbers ragged and slower to scan (design.md 1.4). */
table,
.pill {
    font-variant-numeric: tabular-nums;
}

td {
    font-size: 14.5px;
    padding: .8rem .85rem;
    border-top: 1px solid var(--line);
}

tbody tr:hover {
    background: var(--canvas);
}

table .col-actions {
    text-align: right;
}

table td.col-actions form {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}

table td.col-actions form:first-child {
    margin-left: 0;
}

/* Compact outlined buttons, not underlined pseudo-links (2026-08-04, Meanius). The row actions used
   to be styled as links so that a long table would not turn into a wall of buttons -- but they ARE
   buttons, and on a one-row table the link styling made a real action look like an afterthought.
   Small and outlined keeps both: it reads as a control, and a full table of them still stays calm. */
table td.col-actions button, table td.col-actions .btn {
    background: transparent;
    color: var(--ink-deep);
    border: 1px solid var(--line-strong);
    padding: 4px 12px;
    font-size: 13.5px;
    font-weight: 500;
}

table td.col-actions button:hover, table td.col-actions .btn:hover {
    background: rgba(32, 46, 5, .06);
    color: var(--ink-deep);
}

/* The destructive row actions (revoke a token, remove an address, reject an access) carry the same
   red as the account deletion, so the warning is consistent wherever it appears. Needs to be more
   specific than the neutral rule above, which would otherwise win on the element selectors alone. */
table td.col-actions .btn-danger {
    color: var(--error);
    border-color: var(--error);
}

table td.col-actions .btn-danger:hover {
    background: var(--error-surface);
    color: var(--error);
}

.table-scroll {
    overflow-x: auto;
}

.table-empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

.range-filter {
    display: flex;
    align-items: center;
    gap: 10px;
}

.range-filter label {
    margin: 0;
    white-space: nowrap;
}

.range-filter select {
    width: auto;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 4px;
    font-size: 14px;
    color: var(--ink-60);
}

.pagination a {
    font-weight: 500;
}

.table-empty p {
    margin: 0;
    font-size: 14.5px;
    color: var(--ink-60);
}

/* ---------- validation ---------- */

.field-validation-error, .validation-summary-errors {
    color: var(--error);
    font-size: 12.5px;
}

.validation-summary-errors ul {
    background: var(--error-surface);
    border: 1px solid var(--error);
    border-radius: .35rem;
    padding: .75rem 1.25rem;
    margin: 0 0 1rem;
    list-style: none;
    color: var(--error);
    font-size: 13.5px;
}

/* ---------- responsive ---------- */

@media (max-width: 1220px) {
    .nav-toggle {
        display: inline-flex;
    }

    .nav-panel {
        position: fixed;
        z-index: 200;
        top: var(--header-height);
        right: 0;
        bottom: 0;
        left: 0;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 8px var(--gutter) 28px;
        overflow-y: auto;
        background: var(--ink-deep);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
    }

    body.nav-open .nav-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    header nav {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 12px 0;
        overflow-x: visible;
    }

    header nav a {
        padding: 14px 4px;
        border-bottom: 1px solid var(--on-dark-hover);
        border-radius: 0;
        font-size: 15px;
    }

    header nav a[aria-current="page"] {
        padding-left: 12px;
        padding-right: 12px;
        border-radius: 8px;
        border-bottom-color: transparent;
    }

    .header-user {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid var(--on-dark-hover);
    }

    .header-user .monogram {
        max-width: none;
    }

    .header-user form {
        display: flex;
        width: 100%;
    }

    .header-user .btn-header {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 980px) {
    .page-grid {
        grid-template-columns: 1fr;
    }

    .page-aside {
        position: static;
    }
}

@media (max-width: 640px) {
    :root {
        --gutter: 20px;
    }

    .page-head h1 {
        font-size: 32px;
    }

    .table-scroll {
        overflow-x: auto;
    }
}