/* Profile pages in the event/checkout design language (tokens from css/shop-ui.css). Every profile view already opens with
   <section class="mainContent clearfix userProfile">, so that existing class is the whole hook — no per-page markup. Linked once
   from _Layout; scoped throughout, so it is inert on every other page. */

/* ---- Paper ---------------------------------------------------------------------------------------------------------- */
/* The theme frames .innerWrapper in a 3px #f0f0f0 box; the event page's sheet replaces it. */
.userProfile .innerWrapper {
    padding: 1.5rem;
    background: var(--ev-paper);
    border: 1px solid rgba(var(--ev-ink-rgb), 0.08);
    border-top: 4px solid var(--ev-accent);
    box-shadow: 0 4px 12px rgba(var(--ev-shadow-rgb), 0.08), 0 24px 56px rgba(var(--ev-shadow-rgb), 0.18);
    margin-bottom: 2rem;
}
@media (min-width: 992px) { .userProfile .innerWrapper { padding: 2rem; } }
/* Sheets built as a plain .card straight in the page's row (Profile.cshtml's form card) get the same paper as .innerWrapper:
   club-colour hairline on top, the deep shadow, square top corners. Inline "border: none; box-shadow: none" cards (Loyalty) stay bare. */
.userProfile .container > .row > .card {
    background: var(--ev-paper);
    border: 1px solid rgba(var(--ev-ink-rgb), 0.08);
    border-top: 4px solid var(--ev-accent);
    border-radius: 0 0 var(--ev-radius) var(--ev-radius);
    box-shadow: 0 4px 12px rgba(var(--ev-shadow-rgb), 0.08), 0 24px 56px rgba(var(--ev-shadow-rgb), 0.18);
    margin-bottom: 2rem;
}
/* Radio groups (Køn: Mand / Kvinde / Andet) side by side: shop-ui.css makes each label a flex row so its dot lines up, which also
   stacked them one per line. The group wraps on narrow screens. Opret bruger (.signUp) has the same group. */
.userProfile .form-check:has(> .radio-custom ~ .radio-custom), .signUp .form-check:has(> .radio-custom ~ .radio-custom) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.75rem; }
.userProfile .form-check:has(> .radio-custom ~ .radio-custom) > .radio-custom-label, .signUp .form-check:has(> .radio-custom ~ .radio-custom) > .radio-custom-label { display: inline-flex; align-items: center; margin: 0 !important; }
.userProfile .innerWrapper h2 { margin: 0 0 1.25rem; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }

/* ---- Section nav ----------------------------------------------------------------------------------------------------- */
/* _ProfileMenuPartial can render eleven items; as a Bootstrap .btn-group they run off the side of a phone. Chips that wrap
   instead, in the event header's grey, with the current page as the one filled club-colour chip. */
.userProfile .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.userProfile .btn-group > a {
    flex: 0 0 auto;   /* Bootstrap's .btn-group > .btn is 1 1 auto: a chip alone on a wrapped row stretched into a full-width band */
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: auto;
    margin: 0 !important;   /* Bootstrap pulls group members together with -1px */
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 999px !important;
    background: var(--ev-surface-muted);
    color: var(--ev-text);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}
.userProfile .btn-group > a .fa { margin: 0; color: var(--ev-accent); }
/* :focus and :active belong here, not only :hover/.active — site.min.css has `a.btn:focus { background-color: club !important }`,
   so a tapped chip turns blue on its own. Without these the label stayed dark and the icon stayed blue on blue, i.e. invisible. */
.userProfile .btn-group > a:hover, .userProfile .btn-group > a:focus, .userProfile .btn-group > a:active, .userProfile .btn-group > a.active { background: var(--ev-accent); color: var(--ev-on-accent); }
.userProfile .btn-group > a:hover .fa, .userProfile .btn-group > a:focus .fa, .userProfile .btn-group > a:active .fa, .userProfile .btn-group > a.active .fa { color: var(--ev-on-accent); }

/* ---- Cards and tables ------------------------------------------------------------------------------------------------ */
.userProfile .innerWrapper .card, .userProfile .innerWrapper .panel {
    border: var(--ev-card-border);
    border-radius: var(--ev-radius);
    box-shadow: var(--ev-card-shadow);
}
.userProfile .innerWrapper .card > .card-header, .userProfile .innerWrapper .panel > .panel-heading {
    padding: 0.85rem 1.25rem;
    border: 0;
    border-radius: calc(var(--ev-radius) - 1px) calc(var(--ev-radius) - 1px) 0 0;
    font-weight: 700;
}
/* The tiles the profile is mostly made of (.card-ticket — contacts, cards, tickets, discounts, products, renewals, gift cards).
   The theme tints them grey with a heavy double drop shadow; the card tokens instead. Scoped to .userProfile, so the same class
   on the partner and ticket pages is untouched. */
.userProfile .card-ticket, .userProfile .card-ticket.hovercard {
    background: var(--ev-surface);
    border: var(--ev-card-border);
    border-radius: var(--ev-radius);
    box-shadow: var(--ev-card-shadow);
}
/* Icon, then label and value on one line — the theme centres hovercard text, which left these rows floating. */
.userProfile .card-ticket .desc { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.3rem 0; text-align: left; }
.userProfile .card-ticket.hovercard .info .desc { flex-wrap: nowrap; align-items: flex-start; }
.userProfile .card-ticket .desc .fa { flex: none; width: 1rem; text-align: center; color: var(--ev-accent); }
.userProfile .card-ticket .desc > span { font-size: 0.9rem; color: var(--ev-text-muted); }
.userProfile .card-ticket.hovercard .info .desc > span { flex: 1 1 0; min-width: 0; margin-left: 0; text-wrap: wrap; overflow-wrap: anywhere; }
.userProfile .card-ticket .desc > span strong { color: var(--ev-text); }

/* Billetabonnementer cards: only the corners follow the card tokens. The theme's .card has overflow: hidden, which cut off the
   .ui-select list past the card's bottom edge — so the card lets it out and the image rounds its own corners. */
.userProfile .salesCard { border-radius: var(--ev-radius); overflow: visible; }
.userProfile .salesCard > .card-img-top { border-radius: var(--ev-radius) var(--ev-radius) 0 0; }

/* Point products' header bar: only the corners follow the card tokens. */
.userProfile .product-header { border-radius: var(--ev-radius); }
/* The theme sizes .btn by padding alone, which set "Brug valgte" below centre; same 44px height, text centred by flex. */
.userProfile .product-header .btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding-top: 0; padding-bottom: 0; }

/* Point products' − / + stepper: round outline buttons that fill on hover, like the table actions, instead of the theme's
   solid club-colour squares; the count loses its underline. */
.userProfile .qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--ev-accent);
    border-radius: 50%;
    background: var(--ev-surface);
    color: var(--ev-accent);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}
/* The − and + glyphs sit on the font's baseline, visibly low in a circle — drawn as two centred bars instead. */
.userProfile .qty-btn { position: relative; font-size: 0; }
.userProfile .qty-btn::before, .userProfile .qty-plus::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%); }
.userProfile .qty-plus::after { width: 2px; height: 12px; }
.userProfile .qty-btn:hover, .userProfile .qty-btn:focus-visible { background: var(--ev-accent); color: var(--ev-on-accent); }
.userProfile .qty-btn:focus { outline: 0; }
.userProfile .qty-btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--organiser-color) 15%, transparent); }
.userProfile .product-qty.underline-input { width: 2.5rem !important; height: 34px; border: 0; font-size: 1rem; font-weight: 700; color: var(--ev-text); }   /* !important: inline width: 40px */

/* The orderBox only existed to carry a horizontal scroller; the tables stack on phones now (.ui-stack-table). !important because
   Profile.cshtml writes overflow-x: hidden inline, and a box that clips on one axis computes the other to auto — which cut the
   card's shadow off flush with its border. */
.userProfile .ticket-subscription-products { display: grid; gap: 0.4rem; margin: 1rem 0; }
.userProfile .ticket-subscription-products li { padding: 0.65rem 0.85rem; border: var(--ev-card-border); border-radius: var(--ev-radius); background: var(--ev-surface); color: var(--ev-text); font-weight: 600; }
.userProfile .orderBox { overflow: visible !important; }
.userProfile .table { margin-bottom: 0; }
/* Table typography, desktop only: below 768px these rows are .ui-stack-table cards, and a cell border here outranks the
   card's own (two classes beats one) — which drew a rule under every stacked line. */
@media (min-width: 768px) {
    .userProfile .table thead th {
        vertical-align: middle;
        padding: 0.6rem 0.75rem;
        border-top: 0;
        border-bottom: 1px solid rgba(var(--ev-ink-rgb), 0.08);
        font-size: 0.78rem;
        font-weight: 700;
        color: var(--ev-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }
    .userProfile .table td { padding: 0.65rem 0.75rem; border-top: 1px solid rgba(var(--ev-ink-rgb), 0.05); vertical-align: middle; }
}
/* A timestamp is context, not the value being scanned for: the date reads first, the clock sits behind it. nowrap on the cell
   because DataTables sizes that column to its narrowest word — without it "14-09-2026" broke after the month and every row
   grew to three lines. */
/* The whole cell centres, not just the time: the column is wider than the date, so centring the time alone pushed it to the
   right of a left-aligned date instead of under it. */
.userProfile .table td:has(> .cell-time) { white-space: nowrap; text-align: center; }
.userProfile .table .cell-time { display: block; font-size: 0.78rem; color: var(--ev-text-muted); }
.userProfile .orderBox > h4 { margin-bottom: 0.75rem; font-size: 1.15rem; font-weight: 700; }
/* Zebra and hover are Bootstrap's neutral greys for every striped table in the shop — see the note in css/shop-ui.css. */
@media (min-width: 768px) {
    /* Each list view is a card, like everything else that sits on the paper. The wrapper is DataTables' own, so the heading
       above it stays outside the card. Not overflow: hidden — it cut off the Handlinger dropdowns (Subscriptions); the
       transparent thead and the info/paging footer keep the zebra rows off the rounded corners anyway. Desktop only — below 768px
       .ui-stack-table has already turned every row into its own card, and framing those in a second card reads as an empty
       card sitting between them. */
    .userProfile .dataTables_wrapper {
        padding-bottom: 0;
        border: var(--ev-card-border);
        border-radius: var(--ev-radius);
        background: var(--ev-surface);
        box-shadow: var(--ev-card-shadow);
        overflow: visible;
    }
    /* Air between the card's edge and the first and last columns; the cells' own 0.75rem reads as touching the border. */
    .userProfile .dataTables_wrapper .table th:first-child, .userProfile .dataTables_wrapper .table td:first-child { padding-left: 1rem; }
    .userProfile .dataTables_wrapper .table th:last-child, .userProfile .dataTables_wrapper .table td:last-child { padding-right: 1rem; }
    /* A filled table (ACH style.css paints it !important) squares off the card's top corners; collapsed tables ignore
       border-radius, so separate with no spacing. The first row drops its rule, the header's line already sits there. */
    .userProfile .dataTables_wrapper .table { border-collapse: separate; border-spacing: 0; border-radius: calc(var(--ev-radius) - 1px) calc(var(--ev-radius) - 1px) 0 0; }
    .userProfile .dataTables_wrapper .table tbody tr:first-child td { border-top: 0; }
}
/* The full card-usage list has nine columns: keep its label/value cards through tablet widths. */
@media (max-width: 1199.98px) {
    .userProfile #usage-table_wrapper { border: 0; background: transparent; box-shadow: none; }
    .userProfile #usage-table, .userProfile #usage-table > tbody { display: block; width: 100% !important; }
    .userProfile #usage-table > thead { display: none; }
    .userProfile #usage-table > tbody > tr { display: block; padding: 0.6rem 0.8rem; border: var(--ev-card-border); border-radius: var(--ev-radius); background: var(--ev-surface) !important; }
    .userProfile #usage-table > tbody > tr + tr { margin-top: 0.5rem; }
    .userProfile #usage-table > tbody > tr > td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: auto !important; padding: 0.35rem 0; border: 0; font-size: 0.82rem; text-align: right; white-space: normal; overflow-wrap: anywhere; }
    .userProfile #usage-table > tbody > tr > td::before { content: attr(data-label); flex: none; max-width: 45%; font-size: 0.72rem; font-weight: 700; color: var(--ev-text-muted); text-transform: uppercase; letter-spacing: 0.02em; text-align: left; }
    .userProfile #usage-table > tbody > tr > td:empty { display: none; }
    .userProfile #usage-table > tbody > tr > td:first-child { display: block; padding-bottom: 0.45rem; margin-bottom: 0.4rem; border-bottom: 1px solid rgba(var(--ev-ink-rgb), 0.06); font-size: 0.95rem; font-weight: 700; text-align: left; }
    .userProfile #usage-table > tbody > tr > td:first-child::before { content: none; }
    .userProfile #usage-table > tbody > tr > td[colspan] { text-align: center; }
    .userProfile #usage-table > tbody > tr > td[colspan]::before { content: none; }
    .userProfile #usage-table .btn { flex: none; white-space: nowrap; overflow-wrap: normal; }
}
/* Table actions are secondary. Sixteen filled club-colour pills on one screen leave nothing for the page's real primary
   action, so they are outlines that fill on hover. !important throughout: the theme paints .btn white-on-club and pins
   a.btn:focus with an !important of its own. */
.userProfile .table .btn {
    height: auto;
    padding: 0.3rem 0.85rem;
    border: 1px solid var(--ev-accent) !important;
    border-radius: 999px;
    background: transparent !important;
    color: var(--ev-accent) !important;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
}
.userProfile .table .btn:hover, .userProfile .table .btn:focus, .userProfile .table .btn:active {
    background: var(--ev-accent) !important;
    color: var(--ev-on-accent) !important;
}

/* Phones: the profile form's actions move above the fields. At the end of a long form they are a full screen of scrolling
   away, and a fixed bar is wrong here — the page carries on into the order tables, so it would keep offering Opdater for a
   form that is no longer on screen. float-right does nothing once the row is a flex item, hence the explicit end alignment. */
@media (max-width: 767.98px) {
    .userProfile #updateProfileForm { display: flex; flex-direction: column; }
    .userProfile #updateProfileForm > .form-group.float-right { order: -1; justify-content: flex-end; margin-bottom: 1.25rem; }
}

/* ---- Buttons and fields ---------------------------------------------------------------------------------------------- */
/* Same treatment as css/checkout-page.css — the two page scopes cannot share a selector without one file depending on the other. */
.userProfile .btn-primary, .userProfile .btn-secondary-outlined { border-radius: 999px; font-weight: 600; }
.userProfile .form-group label { margin-bottom: 0.35rem; font-size: 0.8rem; font-weight: 700; color: var(--ev-text-muted); }
.userProfile .form-control {
    height: auto;
    padding: 0.65rem 0.9rem;
    border: 1px solid rgba(var(--ev-ink-rgb), 0.14);
    border-radius: 10px;
    box-shadow: none;
}
.userProfile .form-control:focus {
    border-color: var(--ev-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--organiser-color) 15%, transparent);
}

/* ---- DataTables chrome ----------------------------------------------------------------------------------------------- */
/* Search box, length menu and pager are rendered by DataTables, so they only ever pick up theme defaults. */
.userProfile .dataTables_wrapper .dataTables_filter input, .userProfile .dataTables_wrapper .dataTables_length select { padding: 0.45rem 0.75rem; border: 1px solid rgba(var(--ev-ink-rgb), 0.14); border-radius: 999px; }
.userProfile .dataTables_wrapper .dataTables_filter input:focus, .userProfile .dataTables_wrapper .dataTables_length select:focus { border-color: var(--ev-accent); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--organiser-color) 15%, transparent); }
.userProfile .dataTables_wrapper .dataTables_info, .userProfile .dataTables_wrapper .dataTables_length, .userProfile .dataTables_wrapper .dataTables_filter { font-size: 0.85rem; color: var(--ev-text-muted); }
.userProfile .dataTables_wrapper .pagination { flex-wrap: wrap; gap: 4px; justify-content: center; }
.userProfile .dataTables_wrapper .pagination .page-item { margin: 0; }
/* Equal space around the centered pager; do not add a second bottom gutter on the wrapper. */
.userProfile .dataTables_wrapper > .row:last-child:has(.dataTables_paginate) { padding-top: 0.5rem; padding-bottom: 0.5rem; align-items: center; }
.userProfile .dataTables_wrapper .dataTables_info, .userProfile .dataTables_wrapper .dataTables_paginate { padding-top: 0; padding-bottom: 0; }
.userProfile .dataTables_wrapper .dataTables_paginate .pagination { margin-top: 0; margin-bottom: 0; }
/* DataTables splits the footer into col-md-5 (the "viser 1 til 8" line) and col-md-7 (the pager), so centring the pager in its
   own column still leaves it sitting right of the table's middle. The count comes out of the flow and the pager takes the full
   width, so it centres on the table. Desktop only — below 992px the two stack and centring each one is already right. */
@media (min-width: 992px) {
    .userProfile .dataTables_wrapper .row:last-child { position: relative; }
    .userProfile .dataTables_wrapper .row:last-child > div:first-child { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); }
    .userProfile .dataTables_wrapper .row:last-child > div:last-child { flex: 0 0 100%; max-width: 100%; }
    .userProfile .dataTables_wrapper .dataTables_paginate { float: none; }
}
/* Every control the same pill, so Forrige / a page number / Næste read as one row rather than three shapes. */
.userProfile .dataTables_wrapper .pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    margin: 0;
    padding: 0 0.75rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ev-text);
    font-size: 0.85rem;
    font-weight: 600;
}
/* Same tint as a hovered table row and a hovered day in the datepicker, so every hover in the shop is the club colour. */
.userProfile .dataTables_wrapper .pagination .page-link:hover { background: color-mix(in srgb, var(--organiser-color) 12%, transparent); color: var(--ev-accent); }
/* Bootstrap's ring is its own blue and stays on after a click, which read as a stray outlined button. Club colour, keyboard only. */
.userProfile .dataTables_wrapper .pagination .page-link:focus { box-shadow: none; }
.userProfile .dataTables_wrapper .pagination .page-link:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--organiser-color) 15%, transparent); }
.userProfile .dataTables_wrapper .pagination .active .page-link { background: var(--ev-accent); color: var(--ev-on-accent); }
.userProfile .dataTables_wrapper .pagination .disabled .page-link { opacity: 0.45; }

@media (max-width: 767.98px) {
    .userProfile .innerWrapper { padding: 1rem; }
    .userProfile .btn-group > a { flex: 1 1 auto; justify-content: center; }
    /* Stacked cards are taller than the rows they replace, so nothing may cap the list's height. */
    .userProfile .orderBox, .userProfile .phone-scroll { max-height: none !important; overflow: visible !important; }
    /* Stacked on a phone, the DataTables chrome has no columns to hang off — centre it under the cards instead of leaving
       "Viser 1 til 8 ud af 12 rækker" and the pager floated to one side. */
    .userProfile .dataTables_wrapper .dataTables_filter,
    .userProfile .dataTables_wrapper .dataTables_length,
    .userProfile .dataTables_wrapper .dataTables_info,
    .userProfile .dataTables_wrapper .dataTables_paginate { float: none; width: 100%; padding-top: 0; text-align: center; }
    .userProfile .dataTables_wrapper .pagination { justify-content: center; }
}