/*
 * ticat-accommodation — UI styles.
 *
 * Design tokens and component looks ported 1:1 from the ticat admin UI kit
 * (http://admin.ticat.loc/ui-kit): the orange primary action, dark ink, the
 * Montserrat type scale, pill buttons, the "fancy list" padded table (grey
 * pill header + floating white rounded row cards), the white info card and
 * form controls. Only the visual language is ported — it is rebuilt here in
 * plain CSS served by AssetMapper (no SCSS/Node build step, no Bootstrap).
 */

/* --- Montserrat (self-hosted, identical files to ticat) ----------------- */
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/Montserrat-Regular-ZEnCrdv.woff2") format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/Montserrat-Medium-zh1S4cC.woff2") format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/Montserrat-SemiBold-SDxlJba.woff2") format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/Montserrat-Bold-vCkEcCE.woff2") format('woff2');
}

:root {
    /* Brand — the ticat primary action is ORANGE with dark ink on top. */
    --color-primary: #ff9840;
    --color-primary-hover: #f2860f;
    --color-primary-ink: #3c3c3b;

    /* Semantic */
    --color-success: #64bd45;
    --color-danger: #d95543;
    --color-blue: #60c5e5;
    --color-purple: #cb49d5;
    --color-soldout: #8cd961;

    /* Highlight tints (ticat "Kiemelés színek") */
    --hl-orange: #ffebd2;
    --hl-blue: #cfeef7;
    --hl-green: #e7f7da;
    --hl-purple: #f5def7;
    --hl-red: #f7dede;

    /* Ink / neutrals */
    --color-ink: #3c3c3b;
    --color-ink-strong: #1a181b;
    --color-heading: #444444;
    --color-muted: #9199a6;

    /* Surfaces */
    --color-body: #e5e5e5;
    --color-surface: #ffffff;
    --color-surface-alt: #f1f1f1;
    --color-border: #e5e9ec;
    --color-border-strong: #d6d6d6;

    /* Chrome (header + sidebar) — the real ticat admin: light grey top header
       with a dark hairline, white sidebar rail, orange hover/active accent. */
    --color-header: #f1f1f1;
    --color-header-border: #3c3c3b;
    --color-sidebar: #ffffff;
    --color-sidebar-text: #444444;
    --color-sidebar-title: #9199a6;
    --color-sidebar-accent: var(--color-primary);
    --color-sidebar-foot: #3c3c3b;

    /* Tables (ticat fancy list) */
    --color-table-head: #e4e4e4;

    /* Typography */
    --font-sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

    /* Geometry */
    --radius-input: 3px;
    --radius-btn: 3px;
    --radius-pill: 999px;
    --radius-card: 15px;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-row: 0 1px 2px rgba(0, 0, 0, 0.06);
    --header-height: 120px;
    --sidebar-width: 300px;
    --sidebar-width-closed: 90px;
}

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

html,
body {
    height: 100%;
    margin: 0;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-body);
    color: var(--color-ink);
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    line-height: 1.5;
}

a {
    color: var(--color-primary-hover);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

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

.mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

/* --- Admin shell -------------------------------------------------------- */
.admin {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--color-body);
}

/* Top header — spans the full width; logo above the sidebar rail. */
.admin__topbar {
    display: flex;
    align-items: stretch;
    height: var(--header-height);
    flex-shrink: 0;
    background-color: var(--color-header);
    border-bottom: 1px solid var(--color-header-border);
    position: sticky;
    top: 0;
    z-index: 20;
}

.admin__brand {
    display: flex;
    align-items: center;
    width: var(--sidebar-width);
    flex-shrink: 0;
    padding: 0 1.75rem;
    transition: width 0.2s ease;
}

.admin.is-collapsed .admin__brand {
    width: var(--sidebar-width-closed);
    padding: 0 1rem;
    justify-content: center;
}

.admin__brand img {
    height: 38px;
}

.admin__topbar-bar {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 2.5rem;
    min-width: 0;
}

.admin__hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--color-ink);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: var(--radius-btn);
    transition: color 0.12s ease;
}

.admin__hamburger:hover {
    color: var(--color-primary);
}

.admin__user {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-primary-ink);
    font-weight: 700;
}

.admin__user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-ink);
}

.admin__logout {
    margin: 0;
}

/* Admin sign-in (spec 0017): a single centered card on the plain body, before
   the admin shell exists. Reuses the shared .portal__* form controls. */
.admin-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background-color: var(--color-body);
}

.admin-login__card {
    width: 100%;
    max-width: 26rem;
    padding: 2rem;
}

.admin-login__logo {
    height: 30px;
    margin-bottom: 1.25rem;
}

.admin-login__heading {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0 0 0.5rem;
}

/* Body row — sticky white sidebar on the left, grey content field right. */
.admin__body {
    flex: 1;
    display: flex;
    min-height: 0;
}

.admin__sidebar {
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    flex-shrink: 0;
    background-color: var(--color-sidebar);
    color: var(--color-sidebar-text);
    align-self: flex-start;
    position: sticky;
    top: var(--header-height);
    height: calc(100vh - var(--header-height));
    overflow-y: auto;
    padding: 1.75rem 0 0;
    transition: width 0.2s ease;
}

.admin.is-collapsed .admin__sidebar {
    width: var(--sidebar-width-closed);
}

.admin.is-collapsed .menu-item__label,
.admin.is-collapsed .sidebar__title,
.admin.is-collapsed .sidebar__foot {
    display: none;
}

.admin.is-collapsed .menu-item a {
    justify-content: center;
    padding: 0;
}

.admin.is-collapsed .menu-item__icon {
    margin-right: 0;
}

.sidebar__nav {
    flex: 1;
    overflow-y: auto;
}

.sidebar__title {
    margin: 0 0 1rem;
    padding: 0 1.75rem;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-sidebar-title);
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-item {
    margin-bottom: 0.4rem;
}

.menu-item a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 1.75rem;
    color: var(--color-sidebar-text);
    font-size: 16px;
    font-weight: 400;
    transition: color 0.1s linear, background-color 0.1s linear;
}

.menu-item a:hover {
    text-decoration: none;
}

.menu-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    margin-right: 16px;
    color: inherit;
}

.menu-item a:hover,
.menu-item.current a {
    color: var(--color-sidebar-accent);
}

.menu-item.current a {
    font-weight: 700;
    box-shadow: inset 4px 0 0 var(--color-sidebar-accent);
    background-color: var(--hl-orange);
}

.sidebar__foot {
    margin-top: auto;
    padding: 0.9rem 1.75rem;
    font-size: 12px;
    color: #fff;
    background-color: var(--color-sidebar-foot);
}

.admin__main {
    flex: 1;
    min-width: 0;
    padding: 2rem 2.5rem 3rem;
}

.admin__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 1.5rem;
    color: var(--color-heading);
}

.admin__intro,
.page-intro {
    margin: -0.75rem 0 1.5rem;
    color: var(--color-muted);
    font-size: 14px;
    max-width: 70ch;
}

/* --- Buttons (ticat: primary orange pill, hollow secondary) ------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 10px 24px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    cursor: pointer;
    background-color: var(--color-primary);
    color: var(--color-primary-ink);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.05s ease;
}

.btn:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-primary-ink);
    text-decoration: none;
}

.btn:active {
    transform: translateY(1px);
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 152, 64, 0.4);
}

/* Alias kept for templates that spell out the primary intent. */
.btn--primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-primary-ink);
}

.btn--sm {
    padding: 6px 15px;
    font-size: 11px;
}

/* Hollow / secondary — the ticat .btn-hollow: dark outline, fills on hover. */
.btn--ghost {
    background-color: transparent;
    color: var(--color-ink);
    border: 1px solid var(--color-ink);
}

.btn--ghost:hover {
    background-color: var(--color-ink);
    border-color: var(--color-ink);
    color: #fff;
}

.btn--dark {
    background-color: #000;
    border-color: #000;
    color: #fff;
}

.btn--dark:hover {
    background-color: #262626;
    border-color: #262626;
    color: #fff;
}

.btn--danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
    color: #fff;
}

.btn--danger:hover {
    background-color: #c1392b;
    border-color: #c1392b;
    color: #fff;
}

/* Small icon-only button (guest row edit/delete). */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    padding: 0.35rem;
    border-radius: var(--radius-btn);
    transition: color 0.12s ease, background-color 0.12s ease;
}

.icon-btn:hover {
    color: var(--color-primary);
    background-color: var(--hl-orange);
}

/* Round per-row action button opening a detail view. */
.action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--color-border-strong);
    background-color: var(--color-surface-alt);
    color: var(--color-ink);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.action-btn:hover {
    border-color: var(--color-primary);
    background-color: #fff;
    color: var(--color-primary);
    text-decoration: none;
}

/* --- Badges (ticat status pills) ---------------------------------------- */
/* Solid ticat semantic colours with white ink, one meaning each:
   red = action needed (empty, IFA owed), blue = partial (partly filled or
   partly paid), grey = a plain fact (occupancy, full, exempt, liable),
   green = done (every guest entered AND the IFA settled). */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.6rem;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

.badge[hidden] {
    display: none;
}

.badge--ok {
    background-color: var(--color-success);
    color: #fff;
}

.badge--info {
    background-color: var(--color-blue);
    color: #fff;
}

.badge--error,
.badge--danger {
    background-color: var(--color-danger);
    color: #fff;
}

.badge--muted {
    background-color: var(--color-muted);
    color: #fff;
}

/* Audit actor kinds — softer tinted pills so a busy log stays readable. */
.badge--actor,
.badge--system,
.badge--ticat_system {
    background-color: var(--color-table-head);
    color: #6b7280;
}

.badge--organizer_admin {
    background-color: var(--hl-blue);
    color: #1c6f8c;
}

.badge--portal_guest {
    background-color: var(--hl-green);
    color: #3e7d1f;
}

/* --- Cards, info box, section title, data list -------------------------- */
.card {
    background-color: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.5rem;
}

.section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0 0 1rem;
}

.section-title--spaced {
    margin-top: 1.75rem;
}

.data-list {
    display: grid;
    grid-template-columns: 9rem 1fr;
    gap: 0.5rem 1rem;
    font-size: 14px;
    margin: 0;
}

.data-list dt {
    color: var(--color-muted);
}

.data-list dd {
    margin: 0;
    font-weight: 600;
    color: var(--color-ink);
    /* Ticket codes carry no spaces, so without this the value sets the column's
       minimum width and drags the card past the edge of a phone screen. */
    overflow-wrap: anywhere;
}

/* Info card — ticat help panel: white rounded card, leading info glyph. */
.info-box {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    background-color: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.5rem;
}

.info-box__icon {
    display: inline-flex;
    flex-shrink: 0;
    color: var(--color-primary);
    margin-top: 1px;
}

.info-box__body {
    font-size: 13px;
    color: var(--color-ink);
    line-height: 1.55;
}

/* --- Flash / alerts ----------------------------------------------------- */
.flash {
    padding: 0.85rem 1.1rem;
    border-radius: var(--radius-card);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 1.25rem;
    border: 1px solid transparent;
}

.flash--success,
.flash--ok {
    background-color: var(--hl-green);
    border-color: var(--color-success);
    color: #3e7d1f;
}

.flash--danger,
.flash--error {
    background-color: var(--hl-red);
    border-color: var(--color-danger);
    color: #b23a2c;
}

.flash--warning,
.flash--warn {
    background-color: var(--hl-orange);
    border-color: var(--color-primary);
    color: #a35a12;
}

.flash--notice,
.flash--info {
    background-color: var(--hl-blue);
    border-color: var(--color-blue);
    color: #1c6f8c;
}

/* --- Toolbar / filter bar / result count / empty state ------------------ */
.toolbar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 1rem;
    background-color: var(--color-table-head);
    border-radius: var(--radius-card);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
}

.filter-bar__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
}

.filter-bar__field--grow {
    flex: 1;
    min-width: 220px;
}

.filter-bar__field input,
.filter-bar__field select {
    height: 40px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: var(--radius-input);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-ink);
    background-color: var(--color-surface);
}

.filter-bar__field input:focus,
.filter-bar__field select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 152, 64, 0.22);
}

/* Native selects ignore vertical padding and render shorter than text inputs
   on desktop, so drop the native look and draw the chevron ourselves. */
.filter-bar__field select,
.guest-form select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23444' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    cursor: pointer;
}

.filter-bar__actions {
    display: flex;
    gap: 0.5rem;
}

.result-count {
    margin: 0 0 0.85rem;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-muted);
}

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3.5rem 1.5rem;
    background-color: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    color: var(--color-muted);
    text-align: center;
}

.empty-state svg {
    color: var(--color-border-strong);
}

.empty-state p {
    margin: 0;
}

/* --- Data table — the ticat "fancy list" (padded layout):
   a grey pill header strip, then each row a floating white rounded card on the
   grey field, separated by vertical gaps. ------------------------------- */
.table-wrap {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
    font-size: 13px;
}

.table th,
.table td {
    padding: 1rem 0.9rem;
    text-align: left;
    vertical-align: middle;
}

.table thead th {
    background-color: var(--color-table-head);
    color: #6b7280;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.table thead th:first-child {
    border-radius: var(--radius-pill) 0 0 var(--radius-pill);
    padding-left: 1.5rem;
}

.table thead th:last-child {
    border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
    padding-right: 1.5rem;
}

.table tbody td {
    background-color: var(--color-surface);
    box-shadow: var(--shadow-row);
    transition: background-color 0.12s ease;
}

.table tbody td:first-child {
    border-radius: var(--radius-card) 0 0 var(--radius-card);
    padding-left: 1.5rem;
}

.table tbody td:last-child {
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    padding-right: 1.5rem;
}

.table__row:hover td {
    background-color: #fff9f2;
}

/* Free-text columns may wrap; codes, numbers, badges, actions stay on a line. */
.table__muted,
.table__id,
.table__num,
.table__actions,
.table .badge {
    white-space: nowrap;
}

.table__grow {
    width: 45%;
    white-space: normal;
}

.table__actions {
    text-align: right;
    white-space: nowrap;
}

.table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.table__id {
    font-weight: 700;
    color: var(--color-ink-strong);
    font-variant-numeric: tabular-nums;
}

.table__link {
    font-weight: 700;
    color: var(--color-primary-hover);
}

.table__strong {
    color: var(--color-ink);
    font-weight: 600;
}

.table__muted {
    color: var(--color-muted);
    font-size: 12px;
}

/* --- Order detail (§4.4) ------------------------------------------------ */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem 2rem;
}

.detail-grid dt {
    color: var(--color-muted);
    font-size: 12px;
    margin-bottom: 0.2rem;
}

.detail-grid dd {
    margin: 0;
    font-weight: 600;
    color: var(--color-ink);
}

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.detail-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin: 1rem 0 0;
    border-radius: var(--radius-card);
    background-color: var(--hl-orange);
    color: #a35a12;
    font-size: 13px;
    font-weight: 600;
}

.detail-ticket {
    background-color: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.detail-ticket__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.75rem;
}

.detail-ticket__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-heading);
}

.detail-ticket__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    font-size: 12px;
    color: var(--color-muted);
    margin: 0.25rem 0 0;
}

.detail-ticket__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.admin-guest-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* --- Audit log (§8) ----------------------------------------------------- */
.change-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    background-color: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    font-size: 11px;
}

.chip__label {
    font-weight: 700;
    color: var(--color-heading);
}

.chip__value {
    color: var(--color-ink);
}

.chip__note {
    color: var(--color-muted);
    font-style: italic;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.pagination__status {
    font-size: 12px;
    color: var(--color-muted);
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.timeline__item {
    display: grid;
    grid-template-columns: 9.5rem 1fr;
    gap: 0.75rem;
    align-items: start;
    padding-left: 0.75rem;
    border-left: 2px solid var(--color-border-strong);
}

.timeline__time {
    font-size: 12px;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

.timeline__body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* --- Form controls (shared: ticat inputs, orange accents) --------------- */
.guest-form input,
.guest-form select,
.portal__input {
    /* Without these an input keeps its intrinsic ~20-character width, which is
       wider than a grid track on a phone — the field then hangs out of the card. */
    width: 100%;
    min-width: 0;
    /* One fixed height so text, date and select controls line up in a row. */
    height: 40px;
    padding: 0 11px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-input);
    font-family: inherit;
    font-size: 14px;
    color: var(--color-ink);
    background-color: var(--color-surface);
}

/* A native date control (iOS Safari above all) keeps its own minimum width and
   ignores width/min-width, so on a phone it still hangs out of its grid track.
   Dropping the native look lets it shrink like the text inputs; tapping it
   still opens the system date picker. */
.guest-form input[type='date'] {
    appearance: none;
    -webkit-appearance: none;
    display: block;
}

.guest-form input[type='date']::-webkit-date-and-time-value {
    text-align: left;
}

/* Room for the chevron drawn by the shared select rule above. */
.guest-form select {
    padding-right: 34px;
}

.guest-form input:focus,
.guest-form select:focus,
.portal__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(255, 152, 64, 0.22);
}

/* Calendar of the date fields (Air Datepicker, see date_picker_controller.js),
   drawn in the ticat palette: orange for the chosen day, ink text. */
.air-datepicker {
    --adp-font-family: var(--font-sans);
    --adp-font-size: 14px;
    --adp-color: var(--color-ink);
    --adp-color-secondary: var(--color-muted);
    --adp-accent-color: var(--color-primary);
    --adp-color-current-date: var(--color-primary-hover);
    --adp-border-color: var(--color-border-strong);
    --adp-border-color-inner: var(--color-border);
    --adp-border-radius: var(--radius-card);
    --adp-cell-border-radius: var(--radius-input);
    --adp-cell-background-color-selected: var(--color-primary);
    --adp-cell-background-color-selected-hover: var(--color-primary-hover);
    --adp-cell-background-color-hover: var(--hl-orange);
    --adp-background-color-hover: var(--hl-orange);
    --adp-btn-color: var(--color-primary-hover);
    --adp-btn-color-hover: var(--color-ink);
    --adp-btn-background-color-hover: var(--hl-orange);
    --adp-nav-arrow-color: var(--color-ink);
    --adp-day-name-color: var(--color-primary-hover);
}

/* The chosen day keeps the ticat dark ink on orange, like the primary button. */
.air-datepicker-cell.-selected-,
.air-datepicker-cell.-selected-.-current- {
    color: var(--color-primary-ink);
}

/* iOS Safari zooms into any focused control whose text is under 16px, and the
   page stays zoomed after the field is left. On touch screens the controls get
   16px text instead; the viewport keeps pinch-zoom, which people may need. */
@media (pointer: coarse) {
    .guest-form input,
    .guest-form select,
    .portal__input,
    .filter-bar__field input,
    .filter-bar__field select {
        font-size: 16px;
    }
}

input[type='checkbox'],
input[type='radio'] {
    accent-color: var(--color-primary);
}

/* --- Guest portal (token-authenticated, mobile-first) ------------------- */
.portal {
    max-width: 760px;
    margin: 0 auto;
    padding: 1rem 1rem 3rem;
}

.portal__header {
    padding: 1.25rem 0 1.5rem;
}

/* Logo row: the logo anchors the left, the session + language controls the right. */
.portal__header-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.portal__logo {
    height: 32px;
    margin-right: auto;
}

.portal__heading {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0;
}

.portal__lang {
    display: flex;
    align-items: center;
}

.portal__lang-toggle {
    font-size: 16px;
    text-transform: uppercase;
    color: var(--color-ink);
    text-decoration: none;
    border: none;
    padding: 0;
    background: none;
    transition: color 0.2s ease-in-out;
}

.portal__lang-toggle:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.portal__main {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.portal__intro {
    font-size: 14px;
    color: var(--color-muted);
    margin: 0 0 1rem;
    line-height: 1.55;
}

.portal__hint {
    font-size: 13px;
    color: var(--color-muted);
    margin: 0.5rem 0 0;
}

.portal__link {
    display: inline-block;
    margin-top: 0.75rem;
    font-weight: 700;
    color: var(--color-primary-hover);
}

/* The opener sits above the order summary list, so it needs clear space under it. */
.portal__order .portal__intro {
    margin-bottom: 1.5rem;
}

/* Info badge with a CSS-only tooltip (no JS): shown on hover and keyboard focus. */
.info-tip {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
}

.info-tip__trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-blue);
    cursor: help;
    transition: color 0.15s ease;
}

.section-title .info-tip__trigger {
    color: var(--color-heading);
}

.info-tip__trigger:hover,
.info-tip__trigger:focus-visible {
    color: #1c6f8c;
}

.info-tip__trigger svg {
    width: 20px;
    height: 20px;
}

.info-tip__bubble {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    width: max-content;
    max-width: min(20rem, 78vw);
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-card);
    background-color: var(--color-ink-strong);
    color: #fff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.info-tip:hover .info-tip__bubble,
.info-tip:focus-within .info-tip__bubble {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.info-tip__title {
    display: block;
    font-size: 13px;
    margin-bottom: 0.4rem;
}

.info-tip__list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
}

.info-tip__list li + li {
    margin-top: 0.35rem;
}

/* Sign-in card + generic portal form */
.portal__signin,
.portal__order {
    padding: 1.75rem;
}

.portal__form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.portal__label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-ink);
}

.portal__back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    align-self: flex-start;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

.portal__back:hover {
    color: var(--color-primary);
    text-decoration: none;
}

.portal__back-icon {
    display: inline-flex;
    width: 16px;
    height: 16px;
}

.portal__back-icon svg {
    width: 100%;
    height: 100%;
}

.portal__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding: 12px 24px;
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-pill);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    background-color: var(--color-primary);
    color: var(--color-primary-ink);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.portal__button:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    text-decoration: none;
}

.portal__button--ghost {
    margin-top: 0;
    padding: 8px 18px;
    background-color: transparent;
    color: var(--color-ink);
    border-color: var(--color-ink);
    text-transform: none;
}

.portal__button--ghost:hover {
    background-color: var(--color-ink);
    border-color: var(--color-ink);
    color: #fff;
}

.portal__alert {
    background-color: var(--hl-red);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-card);
    padding: 0.85rem 1.1rem;
    font-size: 13px;
    color: #b23a2c;
    margin: 1rem 0;
}

.portal__alert ul {
    margin: 0;
    padding-left: 1.1rem;
}

/* Order list (portal home after sign-in) */
.portal__orders {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.portal__logout {
    margin: 0;
    flex-shrink: 0;
}

.portal__empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--color-muted);
    background-color: var(--color-surface);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}

.portal__order-card {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.portal__order-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.portal__order-code {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0;
    margin-right: auto;
}

.portal__ticket-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 13px;
    color: var(--color-ink);
}

.portal__ticket-lines li {
    padding: 0.65rem 0.85rem;
    background-color: var(--color-surface-alt);
    border-radius: var(--radius-input);
}

.portal__ticket-lines .data-list {
    font-size: 13px;
    gap: 0.35rem 1rem;
}

/* Second-level heading inside an order card ("Jegyinformáció"). */
.portal__order-subtitle {
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-heading);
    margin: 0.25rem 0 0;
}

.portal__order-card .portal__button {
    align-self: flex-start;
}

/* Portal badges (fill status + IFA status) — same colour meanings as .badge */
.portal__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.65rem;
    border-radius: var(--radius-pill);
    font-size: 11px;
    font-weight: 700;
    background-color: var(--color-muted);
    color: #fff;
}

.portal__badge--ifa-paid {
    background-color: var(--color-success);
}

.portal__badge--partial,
.portal__badge--ifa-partially_paid {
    background-color: var(--color-blue);
}

.portal__badge--empty,
.portal__badge--ifa-awaiting_payment {
    background-color: var(--color-danger);
}

/* Tickets on the order detail */
.portal__tickets {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 0.5rem;
}

.ticket {
    padding: 1.5rem;
}

.ticket__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.ticket__header .section-title {
    margin-bottom: 0.35rem;
}

.ticket__code {
    font-size: 12px;
    color: var(--color-muted);
    margin: 0.2rem 0 0;
}

.ticket__stay,
.ticket__nights {
    font-size: 13px;
    color: var(--color-muted);
    margin: 0.25rem 0 0;
}

.ticket__ifa {
    font-size: 13px;
    color: var(--color-ink);
    margin: 0.5rem 0 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.ticket__ifa--pending {
    color: #1c6f8c;
    font-weight: 600;
}

.ticket__ifa--pending svg {
    flex-shrink: 0;
}

.ticket__guests {
    margin-top: 1.25rem;
}

.ticket__empty {
    font-size: 14px;
    color: var(--color-muted);
    margin: 0;
}

.ticket__form-slot {
    display: block;
    margin-top: 1.25rem;
}

/* Guest rows */
.guest-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.guest-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.95rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
}

.guest-row__main {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.guest-row__name {
    font-weight: 700;
    color: var(--color-ink);
}

.guest-row__meta {
    font-size: 12px;
    color: var(--color-muted);
}

.guest-row__side {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.guest-row__actions {
    display: flex;
    gap: 0.25rem;
}

.guest-row__actions form {
    margin: 0;
}

/* Guest form (statutory particulars) */
.guest-form {
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    margin-top: 1rem;
}

.guest-form__legend {
    font-weight: 700;
    color: var(--color-heading);
    margin: 0;
    font-size: 1rem;
}

.guest-form__hint {
    font-size: 12px;
    color: var(--color-muted);
    margin: 0.25rem 0 0;
}

.guest-form__section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.guest-form__section[hidden] {
    display: none;
}

.guest-form__tax {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 12px;
    color: var(--color-muted);
    margin: 0;
}

.guest-form__errors {
    background-color: var(--hl-red);
    border: 1px solid var(--color-danger);
    border-radius: var(--radius-card);
    padding: 0.75rem 0.95rem;
    font-size: 13px;
    color: #b23a2c;
}

.guest-form__errors p {
    margin: 0;
    font-weight: 700;
}

.guest-form__errors ul {
    margin: 0.35rem 0 0;
    padding-left: 1.1rem;
}

.guest-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.guest-form__grid label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-muted);
}

.guest-form__grid label small {
    font-weight: 400;
}

.guest-form__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* --- IFA summary (§4.3 tourist tax) ------------------------------------- */
.ifa-summary {
    padding: 1.5rem;
    margin-top: 1rem;
}

/* Seven columns do not fit a phone, and dropping any of them would hide part of
   the tax calculation — so the table scrolls sideways within its own card. */
.ifa-table-scroll {
    overflow-x: auto;
    margin: 0.5rem 0 1rem;
}

.ifa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.ifa-table th {
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-muted);
    padding: 0.5rem 0.65rem;
    border-bottom: 2px solid var(--color-border);
}

.ifa-table td {
    padding: 0.6rem 0.65rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
}

.ifa-table tbody tr:last-child td {
    border-bottom: 0;
}

.ifa-summary__total,
.ifa-summary__outstanding {
    font-size: 14px;
    color: var(--color-ink);
    margin: 0.35rem 0;
}

.ifa-summary__total strong,
.ifa-summary__outstanding strong {
    font-size: 1.1rem;
    color: var(--color-heading);
}

.ifa-summary__status {
    margin: 0.5rem 0;
}

.ifa-summary__pay {
    margin: 1rem 0 0;
    display: flex;
    justify-content: flex-end;
}

.ifa-summary__hint {
    font-size: 13px;
    color: var(--color-success);
    font-weight: 600;
    margin: 0.75rem 0 0;
}

.ifa-summary__pending {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 14px;
    color: #1c6f8c;
    font-weight: 600;
    line-height: 1.5;
    background-color: var(--hl-blue);
    border-radius: var(--radius-input);
    padding: 0.75rem 0.9rem;
    margin: 0.75rem 0 0;
}

.ifa-summary__pending svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
}

@media (max-width: 540px) {
    /* minmax(0, …) rather than a bare 1fr: a plain 1fr track refuses to shrink
       below its content's minimum, which is what let the fields overflow. */
    .guest-form__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    /* A 9rem label column plus a value leaves too little room on a phone, so the
       term and its value stack. */
    .data-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.15rem;
    }

    .data-list dd {
        margin-bottom: 0.35rem;
    }

    .admin__main {
        padding: 1.5rem 1rem 2.5rem;
    }
}