/* Partner pages in the shop's design language (tokens from css/shop-ui.css). Every rule is scoped to a class hook on the
   partner views (.partner-login, .partner-portal, .partner-standalone), so the sheet is inert on the shop pages that link it. */

/* Text on a club-colour fill, by the shop's one contrast rule (Event.cshtml, the jakkeplads cross): brightness
   0.299R + 0.587G + 0.114B above 150 -> black, else white. Browsers without relative colours keep the white fallback. */
.partner-portal, .partner-login { --ev-on-accent: #fff; }
@supports (color: rgb(from red r g b)) {
    .partner-portal, .partner-login { --ev-on-accent: rgb(from var(--ev-accent) clamp(0, (150 - (r * 0.299 + g * 0.587 + b * 0.114)) * 1000, 255) clamp(0, (150 - (r * 0.299 + g * 0.587 + b * 0.114)) * 1000, 255) clamp(0, (150 - (r * 0.299 + g * 0.587 + b * 0.114)) * 1000, 255)); }
}

/* ---- Login ---- */
/* The Log ind page's card (shop-ui.css .logIn .card). !important: the card also carries Bootstrap's .rounded (0.25rem
   !important). max-width caps the inline width: 400px, which ran past a 375px phone. */
.partner-login .card { max-width: 100%; border: var(--ev-card-border); border-top: 4px solid var(--ev-accent); border-radius: 0 0 var(--ev-radius) var(--ev-radius) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 24px 56px rgba(0, 0, 0, 0.18); }
/* The login modal's field instead of the theme's underline (!important: the theme forces border, radius, background, shadow).
   Autofill stays white, not Chrome's blue. */
.partner-login .form-control { height: auto; padding: 0.65rem 0.9rem; border: 1px solid rgba(0, 0, 0, 0.14) !important; border-radius: 10px !important; background: #fff !important; box-shadow: none; }
.partner-login .form-control:focus { border-color: color-mix(in srgb, var(--organiser-color) 15%, #fff) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--organiser-color) 15%, transparent) !important; }
.partner-login .form-control:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #fff inset !important; box-shadow: 0 0 0 1000px #fff inset !important; -webkit-text-fill-color: #1f2937; }
.partner-login .form-control:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px color-mix(in srgb, var(--organiser-color) 15%, transparent) !important; box-shadow: 0 0 0 1000px #fff inset, 0 0 0 3px color-mix(in srgb, var(--organiser-color) 15%, transparent) !important; }
/* ResetPassword's labels as the profile form's; Login's floating .form-control-placeholder labels keep the theme's. */
.partner-login .form-group .form-label { margin-bottom: 0.35rem; font-size: 0.8rem; font-weight: 700; color: #4b5563; }
/* The club logo heads the card (max 120px tall, like the portal's logo tile); eventii signs it at the bottom, small and
   grey behind a hairline, as part of the box. The card needs its own padding now that the logo is no card-img-top. */
.partner-login .card { padding: 2rem 1.75rem 1.25rem; }
/* Phones too: the markup only centres from md up (justify-content-md-center), so on a phone the card sat left and the
   welcome transition appeared to slide in from the side. */
.partner-login > .d-flex { justify-content: center !important; }
.partner-login .partner-login-logo { display: block; max-width: 100%; max-height: 120px; margin: 0 auto 1.75rem; object-fit: contain; }
.partner-login .partner-reset-title { margin: 0 0 1rem; color: #111827; font-size: 1.25rem; font-weight: 700; line-height: 1.3; text-align: center; }
/* The theme's .hr-text between Log ind and Glemt adgangskode is a grey gradient line; here it is only the gap. */
.partner-login .hr-text { height: 0; margin: 0.75rem 0 !important; border: 0; background: none; opacity: 1; }
.partner-login .hr-text::before, .partner-login .hr-text::after { content: none; }
.partner-login .partner-login-powered { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(0, 0, 0, 0.08); text-align: center; }
.partner-login .partner-login-powered img { width: 150px; opacity: 0.85; }
/* Pill buttons like the Log ind page. !important: Login's two buttons carry .rounded as well. */
.partner-login .btn-block { border-radius: 999px !important; font-weight: 600; letter-spacing: normal; }

/* Login succeeded: everything but the club logo leaves at once, so the card is already the welcome page's first frame while
   the portal loads (the portal's welcome overlay then continues in the same spot). */
.partner-login .partner-login-welcome { display: none; }
.partner-login .card.is-welcoming > :not(.partner-login-logo):not(.partner-login-welcome) { display: none !important; }
.partner-login .card.is-welcoming { transition: none !important; transform: none !important; }
/* Keep the card opaque through navigation/loading; the ready page then reveals its already laid-out fields. */
.partner-login-arriving .partner-login .card { position: relative; transform: none !important; }
.partner-login-arriving .partner-login .card::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; background: #fff; }
.partner-login-revealing .partner-login .card::after { animation: partner-login-reveal 0.4s ease-out forwards; }
@keyframes partner-login-reveal { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .partner-login-revealing .partner-login .card::after { animation: none; } }
/* First the shrink (Login.cshtml animates the height): the fields fade while the bottom edge slides up over them */
.partner-login .card.is-shrinking { transform: none !important; }
.partner-login .card.is-shrinking > :not(.partner-login-logo) { opacity: 0; transition: opacity 0.25s ease; }   /* the theme animates .card changes: it must not slide */
.partner-login .card.is-welcoming .partner-login-welcome { display: block; text-align: center; }
.partner-login .card.is-welcoming .partner-welcome-title.partner-login-welcome { animation-delay: 0s; }   /* slow on purpose: the portal loads behind it and continues it (Index.cshtml) */
/* The company line's place: empty at first; if the portal is slow to arrive (slow PC or wifi) a soft skeleton bar fades in there after
   1.2 s (after the greeting's fade), so the card never just sits frozen. A fast load arrives before it shows. The portal's company name then fades in on that spot. */
.partner-login .card.is-welcoming .partner-welcome-company.partner-login-welcome { position: relative; color: transparent; animation: none; }
.partner-login .card.is-welcoming .partner-welcome-company.partner-login-welcome::after { content: ""; position: absolute; top: 0.2em; left: 50%; width: 55%; height: 0.95em; border-radius: 999px; background: linear-gradient(90deg, #eef0f3 25%, #e1e4e9 50%, #eef0f3 75%);  opacity: 0; transform: translateX(-50%); animation: partner-skeleton-pulse 1.4s 1.2s ease-in-out infinite; will-change: opacity; }
@keyframes partner-skeleton-in { to { opacity: 1; } }
@keyframes partner-skeleton-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .partner-login .card.is-welcoming .partner-welcome-company.partner-login-welcome::after { animation: partner-skeleton-in 0.4s 1.2s ease forwards; } }
/* The partner pages' background (_LoginLayout, _PartnerLayout): the club's partner parallax image fixed to the screen, no parallax.js.
   A fixed <img> (decoded before the first paint) rather than background-attachment: fixed, which iOS ignores. Screen-sized on every
   page, so the login card, the welcome overlay (transparent over it) and the portal all show the exact same picture. */
/* Sized by the window, not the space left of the scrollbar: the login page has no scrollbar, the portal gets one when its first section
   comes in, and a width that followed it re-cropped the picture. 100lvh: the phone's URL bar showing or hiding does not resize it either.
   will-change: its own layer from the first frame. Otherwise the browser moves it onto one when the page first becomes scrollable
   (the portal's first section) and repaints the photo there: a white frame or two just as the company name shows. */
.partner-fixed-bg-image { position: fixed; top: 0; left: 0; z-index: -1; width: 100vw; height: 100vh; height: 100lvh; object-fit: cover; pointer-events: none; will-change: transform; }
/* Keep the sheet centered when changing sections adds or removes the page scrollbar. */
html:has(.partner-layout .partner-portal) { scrollbar-gutter: stable; }
.partner-portal > .container.is-changing-height { overflow: clip; overflow-anchor: none; }
/* ---- Portal: paper and sidebar ---- */
/* The profile pages' sheet (profile-page.css .userProfile .innerWrapper) on the portal's container, rounded, its club colour in the hero: the sidebar card and the
   content both sit on it, as the profile nav sits on .innerWrapper. */
.partner-portal > .container { margin-bottom: 0; padding: 1.5rem; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--ev-radius); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 24px 56px rgba(0, 0, 0, 0.18); }
/* Signing out (partner.js): the sheet's contents fade and the footer (sponsor band + footer, _FooterPartial) retracts down off the
   screen (--footer-retract is how much of it is on screen). Then an empty white copy of the sheet shrinks into the login card's place
   and becomes the login card (same view-transition-name). The .partner-portal transition fades the sheet in after the welcome. */
.partner-layout .partner-portal { transition: opacity 0.4s ease; }
.partner-layout { --footer-move: 0.6s cubic-bezier(0.65, 0, 0.35, 1); }   /* footer in and out: the ghost card's symmetric curve, a bit longer */
.partner-layout .lightSection, .partner-layout .footer-section { transition: transform var(--footer-move), opacity 0.4s ease; }
.partner-layout.is-signing-out .partner-portal { pointer-events: none; }
/* The hero header's contents (a photo too) fade but its colour stays: the ghost card's band carries it on */
.partner-layout.is-signing-out .partner-portal > .container > :not(.partner-portal-header),
.partner-layout.is-signing-out .partner-portal .partner-portal-header > * { opacity: 0; transition: opacity 0.2s ease; }   /* as the welcome card's contents on the way in */
/* The ghost card (partner.js morphGhostCard): an empty white card moving between the welcome/login card (square top corners, 4 px
   red top edge) and the sheet (rounded, the hero header as its band); the band's colour turns between accent and hero on the way */
.partner-ghost-card { position: fixed; z-index: 100001; box-sizing: border-box; overflow: hidden; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-top: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 24px 56px rgba(0, 0, 0, 0.18); pointer-events: none; }
.partner-ghost-card-band { position: absolute; top: 0; left: 0; right: 0; background-color: var(--ev-accent); }
.partner-ghost-card-band::after { content: ""; position: absolute; inset: 0; background: var(--ev-accent); opacity: 0; }
.partner-ghost-card-band.is-accent::after { opacity: 1; }
/* One symmetric curve for the card geometry: played in either direction (grow after login, shrink on logout) it looks the same; an
   asymmetric one (quick start, long settle) swaps its slow part to the other end and the two read as different speeds */
.partner-ghost-card { --ghost-move: 0.5s cubic-bezier(0.65, 0, 0.35, 1); }
.partner-ghost-card { will-change: transform; }
.partner-ghost-card.is-moving { transition: transform var(--ghost-move), border-radius var(--ghost-move); }
.partner-ghost-card.is-moving .partner-ghost-card-band { transition: height var(--ghost-move); }
/* Reveal the hero colour early, while the card is still growing; finish before the contents fade in. */
.partner-ghost-card.is-moving .partner-ghost-card-band::after { transition: opacity 0.35s ease-out; }
/* After the welcome card grew into the sheet (Index.cshtml): the ghost fades away over the already painted sheet */
.partner-ghost-card.is-fading { opacity: 0; transition: opacity 0.35s ease; }
.partner-layout.is-signing-out .lightSection, .partner-layout.is-signing-out .footer-section { transform: translateY(var(--footer-retract, 0px)); pointer-events: none; }
/* After the welcome (Index.cshtml), the reverse: the footer is put retracted at once (no transition, already opaque: it is off screen),
   then slides up on the same curve as signing out (--footer-move) */
.partner-layout.is-footer-arriving .lightSection, .partner-layout.is-footer-arriving .footer-section { transform: translateY(var(--footer-retract, 0px)); opacity: 1; transition: none; }
.partner-layout.is-footer-rising .lightSection, .partner-layout.is-footer-rising .footer-section { transition: transform var(--footer-move); }
@media (min-width: 992px) { .partner-portal > .container { padding: 2rem; } }
/* Dense lists use extra room; the width cap follows the viewport even while max-width animates. */
.partner-portal > .container { box-sizing: border-box; width: 100%; }
@media (min-width: 992px) {
    .partner-portal > .container { width: calc(100% - 2rem); transition: max-width 0.25s ease-out; }
    .partner-portal > .container:has(#cardsPlaceholder, #orders-table, #activities-table, #card-usage-table) { max-width: 1320px; }
    .partner-portal > .container:has(#orders-table, .partner-sponsorship) { max-width: 1560px; }
}
/* Set the destination immediately while the welcome/logout animation owns the sheet geometry. */
body:has(.partner-welcome:not([hidden])) .partner-portal > .container,
.partner-layout.is-signing-out .partner-portal > .container { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .partner-portal > .container { transition: none; }
}
@media (max-width: 767.98px) { .partner-portal > .container { padding: 1rem; } }
/* The sidebar as one card (shop-ui.css .ui-card): the company name is its header, the nav its body. The name's size stays
   with bigtext, which writes it inline from the box width. */
.partner-portal .customer-profile { padding: 0.85rem 1.25rem; background: #fff; border: var(--ev-card-border); border-radius: var(--ev-radius) var(--ev-radius) 0 0; box-shadow: var(--ev-card-shadow); font-weight: 700; color: #1f2937; }
.partner-portal nav.list-group.customer-nav { position: relative; padding: 0.4rem; background: #fff; border: var(--ev-card-border); border-top: 0; border-radius: 0 0 var(--ev-radius) var(--ev-radius); box-shadow: var(--ev-card-shadow); }
/* Rows as the shop's account-menu rows (shop-ui.css, desktop profile dropdown): flat, rounded, a club tint on hover. */
.partner-portal .customer-nav .list-group-item { margin: 0; padding: 0.55rem 0.8rem; border: 0; border-radius: 8px; color: #1f2937; font-size: 0.9rem; line-height: 1.35; transition: background-color 0.15s ease, color 0.15s ease; }
.partner-portal .customer-nav .list-group-item:hover, .partner-portal .customer-nav .list-group-item:focus { background: color-mix(in srgb, var(--organiser-color) 8%, transparent); color: #1f2937; }
/* After :hover, so the current section stays filled under the pointer. partner.js moves .active; the class is unchanged. */
.partner-portal .customer-nav .list-group-item.active { background: var(--ev-accent); color: var(--ev-on-accent); }
/* The rows' .icon spans are empty (no glyph) but partner.css still gives them 0.5rem: it pushed every label in, and a label that
   wraps ("Mine reservationskort") came back out on its second line. */
.partner-portal .customer-nav .list-group-item .icon:empty, .partner-portal .customer-nav .list-group-item .fa { display: none; }   /* .fa: Log ud's fa-sign-out draws no glyph either, but kept the indent */
/* Phones: the name is the collapse toggle (partner.css), so it is a card of its own and the opened nav a second one under it. */
@media (max-width: 767.98px) {
    /* The tab above the sheet is the phone's menu button now, so the old name button inside the sheet goes. */
    .partner-portal #CompanyNameBtn { display: none !important; }
    .partner-portal nav.list-group.customer-nav { margin-top: 0; border-top: var(--ev-card-border); border-radius: var(--ev-radius); }
}

/* No top bar: the paper starts near the top of the page. !important: partner.css pins .padding-small to 70px with !important. */
.partner-portal.padding-small { padding-top: 1.5rem !important; padding-bottom: 1rem !important; }
/* Hero banner at the top of the sheet (left padding = the sheet's, so the logo lines up with the menu). The left side is always the club colour (logo tile, "PARTNERPORTAL", greeting); the right
   side is the club's own choice from WPF: its hero colour as a pure gradient from the club colour, or its image on the right 60%
   fading in from the club colour. Nothing set = the pure club colour (--partner-hero defaults to it). No patterns. */
.partner-portal .partner-portal-header { --partner-hero: var(--organiser-color); --partner-hero-on: #fff; position: relative; isolation: isolate; display: flex; align-items: center; gap: 1.5rem; min-height: 170px; margin: -1.5rem -1.5rem 1.5rem; padding: 1.75rem 2rem 1.75rem 1.5rem; border-radius: var(--ev-radius) var(--ev-radius) 0 0; background: linear-gradient(100deg, var(--organiser-color) 35%, var(--partner-hero) 100%); }
/* The user and the flag sit on the right side, so their contrast follows the hero colour (the left keeps --ev-on-accent). */
@supports (color: rgb(from red r g b)) {
    .partner-portal .partner-portal-header { --partner-hero-on: rgb(from var(--partner-hero) clamp(0, (150 - (r * 0.299 + g * 0.587 + b * 0.114)) * 1000, 255) clamp(0, (150 - (r * 0.299 + g * 0.587 + b * 0.114)) * 1000, 255) clamp(0, (150 - (r * 0.299 + g * 0.587 + b * 0.114)) * 1000, 255)); }
}
.partner-portal .partner-portal-header > :not(.partner-portal-header-image) { position: relative; z-index: 2; }
.partner-portal .partner-portal-header-image { display: none; position: absolute; z-index: 0; top: 0; right: 0; width: 60%; height: 100%; object-fit: cover; object-position: right center; pointer-events: none; border-top-right-radius: var(--ev-radius); }
.partner-portal .partner-portal-header.has-image .partner-portal-header-image { display: block; }
/* The photo itself fades in (a mask, not an overlay): transparent at its left edge, fully visible after 65%, on the pure
   club colour, so there is no seam where the photo starts. */
.partner-portal .partner-portal-header.has-image { background: var(--organiser-color); }
.partner-portal .partner-portal-header.has-image .partner-portal-header-image { -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 30%, #000 65%); mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 30%, #000 65%); }
/* On a photo the user and flag sit on a dark frosted pill, so they read on any photo, busy or light. */
.partner-portal .partner-portal-header.has-image { --partner-hero-on: #fff; }
/* The pill sits at the photo's right edge: less right padding, and the flag takes only its own width. */
.partner-portal .partner-portal-header.has-image { padding-right: 1rem; }
.partner-portal .partner-portal-header.has-image .partner-portal-header-end { gap: 0.5rem; }
.partner-portal .partner-portal-lang .lang-wrapper { width: auto; margin: 0 !important; }
.partner-portal .partner-portal-header.has-image .partner-portal-user { gap: 0.5rem; padding: 0.2rem 0.2rem 0.2rem 0.75rem; border-radius: 999px; background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.partner-portal .partner-portal-header.has-image .partner-portal-user-name { font-size: 0.85rem; }
.partner-portal .partner-portal-header.has-image .partner-portal-avatar { width: 30px; height: 30px; border-width: 1px; background: rgba(255, 255, 255, 0.2); font-size: 0.72rem; }
/* Phones: no parallax to show, so the sheet starts at the top of the page — no white strip above the hero, square top edge. */
@media (max-width: 767.98px) {
    .partner-portal.padding-small { padding-top: 0 !important; padding-bottom: 0.5rem !important; }
    .partner-portal > .container { border-width: 0 0 1px; border-radius: 0; box-shadow: none; }   /* full width on a phone: no shadow band under the sheet */
    .partner-portal .partner-portal-header { border-radius: 0; }
    .partner-portal .partner-portal-header-image { border-radius: 0; }
    /* Continue the paper to the sponsor band, including unused space on short portal pages. */
    .partner-layout:has(> .lightSection) .partner-portal.padding-small { padding-bottom: 0 !important; background: #fff; }
    .partner-layout:has(> .lightSection) .partner-portal > .container { border-bottom: 0; }
}
/* Phones: the photo takes the right 75%, centred, and fades in softly under the text, so more of it shows. */
@media (max-width: 767.98px) {
    .partner-portal .partner-portal-header-image { width: 75%; object-position: center; }   /* more of the photo, not its right-hand slice */
    .partner-portal .partner-portal-header.has-image .partner-portal-user { padding: 0.2rem; }   /* the name is hidden on phones; the pill rings the initials */
    .partner-portal .partner-portal-header.has-image .partner-portal-header-image { -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 35%, #000 70%); mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 35%, #000 70%); }
}
.partner-portal .partner-portal-logo-tile { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 120px; height: 120px; padding: 14px; border-radius: var(--ev-radius); background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); }
.partner-portal .partner-portal-logo { max-width: 100%; max-height: 100%; object-fit: contain; }
.partner-portal .partner-portal-heading-text { min-width: 0; color: var(--ev-on-accent); }
.partner-portal .partner-portal-label { display: block; margin-bottom: 0.2rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1.2; text-transform: uppercase; opacity: 0.85; }
.partner-portal .partner-portal-title { margin: 0; color: inherit; font-size: 1.75rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
/* Long names step down instead of wrapping onto three or four lines; words break only at Danish syllables. */
.partner-portal .partner-portal-title.is-long { font-size: 1.55rem; }
.partner-portal .partner-portal-title.is-xlong { font-size: 1.45rem; }
/* Desktop: the greeting wraps onto two lines within 34rem, so a long name stays on the club colour, clear of the photo. */
@media (min-width: 768px) { .partner-portal .partner-portal-heading-text { max-width: 34rem; } }
.partner-portal .partner-portal-title-toggle { display: inline; max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.partner-portal .partner-portal-header-end { display: flex; align-items: center; gap: 1rem; margin-left: auto; color: var(--partner-hero-on); }
.partner-portal .partner-portal-user { display: flex; align-items: center; gap: 0.6rem; }
/* The user (pill on a photo) is the rightmost item, flush with the hero's right edge; the flag sits to its left. */
.partner-portal .partner-portal-header-end > .partner-portal-user { order: 2; }
.partner-portal .partner-portal-user-name { font-size: 0.9rem; white-space: nowrap; }
.partner-portal .partner-portal-avatar { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border: 2px solid color-mix(in srgb, var(--partner-hero-on) 60%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--partner-hero-on) 15%, transparent); color: var(--partner-hero-on); font-size: 0.85rem; font-weight: 700; line-height: 1; text-box: trim-both cap alphabetic; }   /* no letter-spacing (it trails the last letter, pushing the initials left); trimmed to the capitals so they sit in the exact middle */
/* The flag on the club colour: chevron in the contrast colour; the menu opens as the usual white card. */
/* partner.css still places .lang-wrapper for the old top bar (top: 3vh; right: calc(...); phones right: -80vw), which pushed the
   flag out of the hero (overflow: hidden). Reset the offsets so it sits in the row. */
/* The language flag sits under the sidebar menu card (Index.cshtml), aligned with it; its menu opens downward. */
/* Desktop: out of the flow, in the sheet's bottom-left corner (in line with the menu), so it adds no height. The sheet is the
   positioning box; the sidebar column is made static so the flag anchors to the sheet, not the column. Phones: in the menu. */
@media (min-width: 768px) {
    .partner-portal > .container { position: relative; }
    .partner-portal .customer-sidebar { position: static; }
    .partner-portal .partner-portal-lang { position: absolute; bottom: 1.25rem; left: 1.5rem; z-index: 5; }
}
@media (min-width: 992px) { .partner-portal .partner-portal-lang { left: 2rem; } }
@media (max-width: 767.98px) { .partner-portal .partner-portal-lang { margin-top: 0.75rem; padding-left: 0.4rem; } }
.partner-portal .partner-portal-lang .lang-wrapper { position: relative !important; top: auto; right: auto; left: auto; z-index: auto; color: #1f2937; }
.partner-portal .partner-portal-lang .lang-wrapper .lang-switcher .fi { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1); }
/* The toggle is the whole pill: flag + chevron, padded, so every click on it opens the menu. */
.partner-portal .partner-portal-lang .lang-wrapper .lang-switcher { display: inline-flex !important; align-items: center; gap: 0.4rem; padding: 0.35rem 0.6rem !important; border-radius: 999px; cursor: pointer; }
/* Flag and chevron are inside the link: they never catch the click themselves, so the gap between them is the link too. */
.partner-portal .partner-portal-lang .lang-wrapper .lang-switcher > * { pointer-events: none; }
.partner-portal .partner-portal-lang .lang-wrapper .lang-switcher .fa-angle-down { opacity: 0.6; font-size: 0.8rem; }
.partner-portal .partner-portal-lang .lang-wrapper > div { padding: 0; }   /* the pill padding now sits on the link itself */
.partner-portal .partner-portal-lang .lang-wrapper > div:hover, .partner-portal .partner-portal-lang .lang-wrapper > div:focus-within, .partner-portal .partner-portal-lang .lang-wrapper > div:has(.show) { background: transparent; }
.partner-portal .partner-portal-lang .lang-wrapper a.lang-switcher:hover, .partner-portal .partner-portal-lang .lang-wrapper a.lang-switcher:focus-visible, .partner-portal .partner-portal-lang .lang-wrapper a.lang-switcher[aria-expanded="true"] { background: color-mix(in srgb, var(--organiser-color) 15%, transparent) !important; }   /* Override the transparent phone chip on interaction. */
.partner-portal .partner-portal-lang .lang-wrapper .lang-flag-menu { min-width: 0; }
.partner-portal .partner-portal-lang .lang-wrapper .lang-flag-item { justify-content: center; padding: 0.45rem 0.6rem; }
@media (min-width: 992px) { .partner-portal .partner-portal-header { margin: -2rem -2rem 1.75rem; padding: 2rem 2.5rem 2rem 2rem; } }
/* Phones: the round burger under the hero (the shop's phone burger, shop-ui.css .navbar-toggler), right-aligned for the thumb. */
.partner-portal .partner-portal-menu-bar { display: flex; justify-content: flex-end; margin: -0.25rem 0 0.75rem; }
.partner-portal .partner-portal-menu-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ev-accent); font-size: 1.25rem; }
.partner-portal .partner-portal-menu-toggle:hover, .partner-portal .partner-portal-menu-toggle[aria-expanded="true"] { background: #f3f4f6; }
/* Phones: the burger sits snug under the hero's right corner instead of taking a row of its own. */
@media (max-width: 767.98px) {
    .partner-portal .partner-portal-menu-bar { margin: -0.6rem -0.4rem 0; }
    .partner-portal .partner-portal-menu-toggle { width: 36px; height: 36px; font-size: 1.05rem; }
}
@media (max-width: 767.98px) {
    .partner-portal .partner-portal-header { flex-wrap: wrap; gap: 0.9rem; min-height: 0; margin: -1rem -1rem 1rem; padding: 1.1rem 1rem; }
    .partner-portal .partner-portal-logo-tile { width: 64px; height: 64px; padding: 8px; }
    .partner-portal .partner-portal-heading-text { flex: 1 1 0; }
    .partner-portal .partner-portal-title { font-size: 1.2rem; }
    .partner-portal .partner-portal-title.is-long { font-size: 1.05rem; }
    .partner-portal .partner-portal-title.is-xlong { font-size: 0.95rem; }
    /* The name gets its own line(s) under "Godmorgen," and is capped at two lines (… after that; the full text is the title). */
    .partner-portal .partner-portal-title-toggle { display: block; }
    .partner-portal .partner-portal-title-name { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; -webkit-hyphens: manual; hyphens: manual; }
    /* The name steps down by its own length (name-* from Index.cshtml) so it fits two lines, breaking only between words. */
    .partner-portal .partner-portal-title-name.name-m { font-size: 1.05rem; }
    .partner-portal .partner-portal-title-name.name-s { font-size: 0.92rem; }
    .partner-portal .partner-portal-title-name.name-xs { font-size: 0.8rem; }
    .partner-portal .partner-portal-user-name { display: none; }   /* the avatar is enough on a phone */
    .partner-portal .partner-portal-avatar { width: 34px; height: 34px; font-size: 0.75rem; }
    /* shop-ui.css fills the phone language chip with the club colour for the shop's burger menu; here it stays a flag. */
    .partner-portal .partner-portal-lang .lang-wrapper { width: auto; margin: 0 !important; }
    /* shop-ui.css floats the phone flag menu to the LEFT of the flag (for the shop's right-aligned burger menu); here the flag is
       at the left edge, so the pill opens to its right. */
    .partner-portal .partner-portal-lang .lang-wrapper { justify-content: flex-start; align-self: flex-start !important; }
    .partner-portal .partner-portal-lang .lang-wrapper .lang-flag-menu { right: auto !important; left: calc(100% + 0.4rem) !important; }
    .partner-portal .partner-portal-lang .lang-wrapper .lang-switcher, .partner-portal .partner-portal-lang .lang-wrapper .lang-switcher:focus { padding: 0.35rem 0.4rem; background: transparent !important; color: inherit !important; }
}

/* With the name as the heading the sidebar's name card only exists as the phone toggle; the nav becomes the whole card. */
@media (min-width: 768px) {
    .partner-portal #CompanyNameBtn { display: none; }
    .partner-portal nav.list-group.customer-nav { border-top: var(--ev-card-border); border-radius: var(--ev-radius); }
}

/* Side by side (lg+) the menu column is only as wide as its labels need, not a third of the sheet; the content takes the
   rest. */
@media (min-width: 992px) {
    .partner-portal .customer-sidebar { flex: 0 0 220px; max-width: 220px; }   /* "Mine reservationskort" on one line */
    .partner-portal #content-control { flex: 1 1 0; max-width: none; min-width: 0; }
}

/* ---- Portal: tiles and cards ---- */
/* Home / Events / Registrations / Addons tiles as the shop's compact front-page tiles (shop-ui.css .home-page--compact): no
   card box, a rounded image, a divider under the body. The buttons stay: here they are the tile's action, not a duplicate link. */
.partner-portal .salesCard, .partner-portal .salesCard:hover { overflow: visible; background: transparent; border: 0; border-radius: 0; box-shadow: none !important; }
.partner-portal .salesCard .card-img-top { border-radius: var(--ev-radius); box-shadow: var(--ev-card-shadow); }
/* Image-only external promotions have no card-img-top; round the card that contains the complete banner. */
.partner-portal .salesCard.salesCard--bare { overflow: hidden; border-radius: var(--ev-radius); box-shadow: var(--ev-card-shadow) !important; transition: box-shadow 0.2s ease; }
.partner-portal .salesCard.salesCard--bare > img { display: block; width: 100%; height: auto; }
.partner-portal a[target="_blank"]:is(:hover, :focus-visible) .salesCard.salesCard--bare { box-shadow: 0 12px 28px rgba(var(--ev-shadow-rgb, 0, 0, 0), 0.22) !important; }
.partner-portal a[target="_blank"]:focus-visible .salesCard--bare { outline: 2px solid var(--ev-accent) !important; outline-offset: 3px; }
.partner-portal a[target="_blank"]:focus-visible .zooming:has(.salesCard--bare) { transform: scale(1.03); }
/* Home's image sits in a .card-img-top.home-card box of its own (the reservation tile: club colour and a heading): the box
   clips it, and only the box casts the shadow. */
.partner-portal .salesCard .home-card { overflow: hidden; }
.partner-portal .salesCard .home-card > .card-img-top { border-radius: 0; box-shadow: none; }
.partner-portal .salesCard > .card-body { position: relative; display: block; padding: 0.75rem 0.1rem 0.9rem; }
/* The divider and its soft shadow as one strip: the line is its top edge, the shadow fades below it; the mask fades both ends. */
.partner-portal .salesCard > .card-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; border-top: 1px solid rgba(0, 0, 0, 0.14); background: linear-gradient(rgba(0, 0, 0, 0.08), transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); pointer-events: none; }
/* Titles: Home's h6.card-title, the event tiles' span#cardTitle. display: block because an ellipsis only clips a box. */
.partner-portal .salesCard .card-title, .partner-portal .salesCard .event-title > span { display: block; margin-bottom: 0.4rem; overflow: hidden; color: #111827; font-size: 1.1rem; text-overflow: ellipsis; white-space: nowrap; line-height: 1.35; padding-bottom: 0.1em; }
/* The tile buttons lost their inline white. !important on .disabled: partner.css paints a disabled button's text in the club
   colour with !important, which is invisible on the club fill. */
/* Home's tiles are one link each (a[data-request-url]); their "Klik her" is a plain div, so it goes as on the shop's compact
   tiles and the title takes the row. The Events / Addons / Registrations buttons submit a form, so they stay, slim. */
.partner-portal a[data-request-url] .salesCard .card-body .col-md-4 { display: none; }
.partner-portal a[data-request-url] .salesCard .card-body .col-md-8 { flex: 0 0 100%; max-width: 100%; }
.partner-portal a[data-request-url]:hover, .partner-portal a[data-request-url]:hover .card-title { text-decoration: none; }
/* The whole home tile is a link: highlight its caption and divider in the club colour. */
.partner-portal a:is([data-request-url], [target="_blank"]):is(:hover, :focus-visible) .salesCard .card-title { color: var(--ev-accent); }
.partner-portal a:is([data-request-url], [target="_blank"]):is(:hover, :focus-visible) .salesCard > .card-body::after { border-top-color: var(--ev-accent); }
/* With the button gone the title is the whole caption, centred under the image. */
.partner-portal a[data-request-url] .salesCard .card-title { text-align: center; }
.partner-portal .salesCard .btn-primary { padding: 0.4rem 1rem; color: var(--ev-on-accent); font-size: 0.85rem; white-space: nowrap; }
.partner-portal .salesCard .btn-primary.disabled, .partner-portal .salesCard .btn-primary:disabled { color: var(--ev-on-accent) !important; }

/* Card, ticket, product and coupon tiles as on the profile pages (profile-page.css .userProfile). The .mp-card column around
   a product/coupon tile only wraps it; the tile inside takes these rules. */
.partner-portal .card-ticket, .partner-portal .card-ticket.hovercard { background: #fff; border: var(--ev-card-border); border-radius: var(--ev-radius); box-shadow: var(--ev-card-shadow); }
/* Icon, then label and value on one line. .info in the selector: digitalcards.css / tickets.css are injected after this sheet. */
.partner-portal .card-ticket.hovercard .info .desc { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0.6rem; padding: 0.3rem 0; text-align: left; }
.partner-portal .card-ticket.hovercard .info .desc .fa { flex: none; width: 1rem; text-align: center; color: var(--ev-accent); }
.partner-portal .card-ticket.hovercard .info .desc > span { flex: 1 1 0; min-width: 0; margin-left: 0; text-wrap: wrap; overflow-wrap: anywhere; font-size: 0.9rem; color: #4b5563; }
.partner-portal .card-ticket.hovercard .info .desc > span strong { color: #1f2937; }
/* MyAddons' filter buttons are pills like every other button; !important because .btn-group squares its members' inner corners. */
.partner-portal .btn-group > .mp-filter-btn { border-radius: 999px !important; }

/* MyAddons' filter row as the shop's chips (shop-ui.css .ui-chip): grey, the chosen filter the one filled club-colour chip.
   No focus halo after a click — keyboard focus keeps a ring. */
.partner-portal .btn-group > .mp-filter-btn { height: auto; padding: 0.4rem 0.9rem; border: 0; background: #f3f4f6; box-shadow: none; color: rgba(0, 0, 0, 0.72); font-size: 0.875rem; line-height: 1.3; }
.partner-portal .btn-group > .mp-filter-btn:hover { background: #e5e7eb; color: rgba(0, 0, 0, 0.72); }
.partner-portal .btn-group > .mp-filter-btn.active, .partner-portal .btn-group > .mp-filter-btn.active:hover { background: var(--ev-accent); color: var(--ev-on-accent); font-weight: 600 !important; }
.partner-portal .btn-group > .mp-filter-btn:focus { box-shadow: none; }
.partner-portal .btn-group > .mp-filter-btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--organiser-color) 25%, transparent); }
/* "Vis brugte og udløbne" + page size on one centred line: a club-colour checkbox and the count as a compact pill select. */
.partner-portal div:has(> #showUsedExpiredAddons) { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.partner-portal div:has(> #showUsedExpiredAddons) > label { margin: 0; color: #4b5563; }
.partner-portal #showUsedExpiredAddons { width: 18px; height: 18px; margin: 0; accent-color: var(--ev-accent); cursor: pointer; }
.partner-portal #addonsLimitSelect { height: 34px; margin-left: 0.75rem; padding: 0 0.75rem; border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 999px; background: #fff; color: #1f2937; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
.partner-portal #addonsLimitSelect:focus { border-color: var(--ev-accent); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--organiser-color) 15%, transparent); }

/* ---- Portal: tables ---- */
/* partner.css rounds every table and its last row's corner cells to 1.25rem with !important; the card below takes the corners. */
.partner-portal table.dataTable, .partner-portal .table { border-radius: 0 !important; }
.partner-portal .table tbody tr:last-child td, .partner-portal .table tbody tr:last-child th { border-radius: 0 !important; }
/* The profile tables' typography (profile-page.css), without .table-bordered's grid: rows are split by hairlines only. */
.partner-portal .table { margin-bottom: 0; }
.partner-portal .table-bordered { border: 0; }
.partner-portal .table-bordered th, .partner-portal .table-bordered td { border-right: 0; border-bottom: 0; border-left: 0; }
.partner-portal .table thead th { padding: 0.6rem 0.75rem; border-top: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); font-size: 0.78rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.02em; }
.partner-portal .table td, .partner-portal .table tbody th { padding: 0.65rem 0.75rem; border-top: 1px solid rgba(0, 0, 0, 0.05); vertical-align: middle; }
/* .table-data-centerd (partner.css) paints each cell white, which hid Bootstrap's zebra and hover greys the shop keeps. */
.partner-portal .table .table-data-centerd { background: transparent; }
/* Each DataTables list is a card (profile-page.css .dataTables_wrapper), at every width: these tables scroll or collapse
   instead of stacking. No overflow: hidden — the Orders rows open dropdown menus that must not be clipped. */
.partner-portal .dataTables_wrapper { padding-bottom: 0.5rem; border: var(--ev-card-border); border-radius: var(--ev-radius); background: #fff; box-shadow: var(--ev-card-shadow); }
.partner-portal .dataTables_wrapper .table th:first-child, .partner-portal .dataTables_wrapper .table td:first-child { padding-left: 1rem; }
.partner-portal .dataTables_wrapper .table th:last-child, .partner-portal .dataTables_wrapper .table td:last-child { padding-right: 1rem; }
/* Tables DataTables never initialises (Sponsorship's first two, reservation cards, the event-info modal) are the card themselves. */
.partner-portal table.dataTable:not(.dataTables_wrapper table) { border: var(--ev-card-border); border-radius: var(--ev-radius) !important; background: #fff; box-shadow: var(--ev-card-shadow); }
/* Hand-written class="dataTable" (Reservations) without DataTables: its stylesheet still reserved 30px of sort-arrow room on every
   header, which pushed the table out of the sheet. Real sortable headers carry a sorting* class and keep theirs. */
.partner-portal table.dataTable thead > tr > th:not([class*="sorting"]) { padding-right: 0.75rem; }
/* Reservationskort's "Vælg event": the styled list is as wide as its button, which was as wide as "Vælg event", so on a phone
   every event name broke over four lines. The field takes the whole row there; Bekræft/Frigiv wrap under it. */
@media (max-width: 767.98px) {
    .partner-portal .ui-select-wrap:has(> #EventsDropDown) { flex: 1 1 100%; }
}
/* Bekræft/Frigiv centred on the field (their mt-2 sat them on its bottom edge); the row gap spaces them when they wrap under it. */
.partner-portal .row:has(> .ui-select-wrap > #EventsDropDown) { align-items: center; row-gap: 0.5rem; }
/* A flex item never shrinks below its content, so a long event name pushed the field past the sheet; now it ends in … instead. */
.partner-portal .ui-select-wrap:has(> #EventsDropDown) { min-width: 0; max-width: 100%; }
.partner-portal .row:has(> .ui-select-wrap > #EventsDropDown) > .btn { margin-top: 0 !important; }   /* !important: Bootstrap's mt-2 */
/* Wrap reservation text within the available desktop column; keep action menus outside the table unclipped. */
@media (min-width: 992px) {
    .partner-portal #reservationCards { display: table; width: 100%; overflow: visible; }
    .partner-portal #reservationCards td { overflow-wrap: anywhere; }
}
/* Real table layout fills the card; Bootstrap's scrolling display:block left unused space beside Orders. */
.partner-layout .ui-stack-table { width: 100% !important; }
.partner-layout .ui-stack-table tbody :is(td, th) { overflow-wrap: anywhere; }
.partner-layout .ui-stack-table thead th { overflow-wrap: normal; word-break: normal; }
.partner-select-all { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
/* On the right, box last, over the row boxes it ticks: the table's last column on desktop, the right-hand values of the stacked
   cards on phones. Padding = the cell's (desktop 0.75rem, phone card 0.8rem) + the 1px border. */
.partner-select-all { display: flex; flex-direction: row-reverse; width: fit-content; margin-left: auto; padding-right: calc(0.75rem + 1px); }
@media (max-width: 767.98px) { .partner-select-all { padding-right: calc(0.8rem + 1px); } }
@media (min-width: 1280px) {
    .partner-layout .ui-stack-table { display: table; }
    /* Let product-type words set the column's minimum width instead of breaking off their last letters. */
    .partner-layout .ui-stack-table td.partner-product-type { overflow-wrap: normal; word-break: normal; }
    .partner-layout #orders-table td.partner-order-recipient { min-width: 12rem; }
}
@media (min-width: 1280px) and (max-width: 1399.98px) {
    .partner-portal #reservationCards th, .partner-portal #reservationCards td { padding-left: 0.5rem; padding-right: 0.5rem; }
}
/* Partner lists have a sidebar: switch to the webshop's label/value cards before columns become too narrow. */
@media (max-width: 1279.98px) {
    .partner-layout .dataTables_wrapper { border: 0; background: transparent; box-shadow: none; }
    body.partner-layout table.table.ui-stack-table { display: block; border: 0; border-radius: 0 !important; background: transparent; box-shadow: none; overflow: visible; }
    .partner-layout .ui-stack-table > thead { display: none; }
    .partner-layout .ui-stack-table > tbody { display: block; }
    .partner-layout .ui-stack-table > tbody > tr { display: flex; flex-direction: column; margin: 0 0 0.5rem; padding: 0.6rem 0.8rem; border: var(--ev-card-border); border-radius: var(--ev-radius); background: #fff !important; }
    .partner-layout .ui-stack-table > tbody > tr > :is(td, th) { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: auto !important; padding: 0.35rem 0 !important; margin: 0; border: 0 !important; font-size: 0.82rem; font-weight: 400; text-align: right; white-space: normal; overflow-wrap: anywhere; }
    .partner-layout .ui-stack-table > tbody > tr > :is(td, th)::before { content: attr(data-label); flex: none; max-width: 45%; font-size: 0.72rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.02em; text-align: left; }
    .partner-layout .ui-stack-table > tbody > tr > :is(td, th):empty { display: none; }
    .partner-layout .ui-stack-table > tbody > tr > :is(td, th):first-child:not(.partner-list-actions),
    .partner-layout .ui-stack-table > tbody > tr > .partner-list-title { display: block; order: -1; padding-bottom: 0.45rem !important; margin-bottom: 0.4rem; border-bottom: 1px solid rgba(0, 0, 0, 0.06); font-size: 0.95rem; font-weight: 700; text-align: left; }
    .partner-layout .ui-stack-table > tbody > tr > :is(td, th):first-child:not(.partner-list-actions)::before,
    .partner-layout .ui-stack-table > tbody > tr > .partner-list-title::before { content: none; }
    .partner-layout .ui-stack-table > tbody > tr > .partner-list-actions { order: 1; }
    .partner-layout .ui-stack-table > tbody > tr > .partner-list-actions::before { content: attr(data-label); }
    .partner-layout .ui-stack-table > tbody > tr > [colspan] { display: block; text-align: center; }
    .partner-layout .ui-stack-table > tbody > tr > [colspan]::before { content: none; }
    .partner-layout .ui-stack-table .dropdown-menu { max-width: calc(100vw - 3rem); }
    .partner-layout .ui-stack-table .dropdown-item { white-space: normal; overflow-wrap: anywhere; }
    .partner-layout .dataTables_wrapper .row:last-child > div { position: static; flex: 0 0 100%; max-width: 100%; transform: none; }
    .partner-layout .dataTables_wrapper .dataTables_info, .partner-layout .dataTables_wrapper .dataTables_paginate { float: none; width: 100%; text-align: center; }
}
/* Table actions are secondary: outlines that fill on hover (profile-page.css). !important throughout: the theme paints .btn
   white-on-club and tickets.css pins a.btn:focus with an !important of its own. */
.partner-portal .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; white-space: nowrap; overflow-wrap: normal; }
.partner-portal .table .btn:hover, .partner-portal .table .btn:focus, .partner-portal .table .btn:active { background: var(--ev-accent) !important; color: var(--ev-on-accent) !important; }

/* DataTables chrome (search box, length menu, pager), as on the profile pages. */
/* Inside the card the rows lose Bootstrap's -15px margins (they pushed the controls onto the card edge); the top row gets air. */
.partner-portal .dataTables_wrapper > .row { margin-right: 0; margin-left: 0; }
.partner-portal .dataTables_wrapper > .row:first-child { align-items: center; padding: 0.75rem 0.25rem 0.5rem; }
.partner-portal .dataTables_wrapper .dataTables_length label, .partner-portal .dataTables_wrapper .dataTables_filter label { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; }
.partner-portal .dataTables_wrapper .dataTables_filter input { margin-left: 0; }
/* Phones (Mine ordrer and the other lists): DataTables centres both controls, so "Søg:" sat crooked under "Vis 10 rækker".
   Both start at the left edge, like the cards under them, and the search box takes the rest of its row. */
@media (max-width: 767.98px) {
    .partner-portal .dataTables_wrapper .dataTables_length, .partner-portal .dataTables_wrapper .dataTables_filter { text-align: left; }
    .partner-portal .dataTables_wrapper .dataTables_filter { margin-top: 0.5rem; }
    .partner-portal .dataTables_wrapper .dataTables_filter label { display: flex; width: 100%; }
    .partner-portal .dataTables_wrapper .dataTables_filter input { flex: 1 1 auto; width: auto; min-width: 0; }
}
.partner-portal .dataTables_wrapper .dataTables_filter input, .partner-portal .dataTables_wrapper .dataTables_length select { padding: 0.45rem 0.75rem; border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 999px; }
.partner-portal .dataTables_wrapper .dataTables_filter input:focus, .partner-portal .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); }
.partner-portal .dataTables_wrapper .dataTables_info, .partner-portal .dataTables_wrapper .dataTables_length, .partner-portal .dataTables_wrapper .dataTables_filter { font-size: 0.85rem; color: #6b7280; }
.partner-portal .dataTables_wrapper .pagination { flex-wrap: wrap; gap: 4px; justify-content: center; }
.partner-portal .dataTables_wrapper .pagination .page-item { margin: 0; }
/* The footer is col-md-5 (the count) + col-md-7 (the pager): the count comes out of the flow so the pager centres on the table. */
@media (min-width: 992px) {
    .partner-portal .dataTables_wrapper .row:last-child { position: relative; }
    .partner-portal .dataTables_wrapper .row:last-child > div:first-child { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); }
    .partner-portal .dataTables_wrapper .row:last-child > div:last-child { flex: 0 0 100%; max-width: 100%; }
    .partner-portal .dataTables_wrapper .dataTables_paginate { float: none; }
}
/* Every pager control the same pill, so Forrige / a page number / Næste read as one row. */
.partner-portal .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: rgba(0, 0, 0, 0.72); font-size: 0.85rem; font-weight: 600; }
.partner-portal .dataTables_wrapper .pagination .page-link:hover { background: color-mix(in srgb, var(--organiser-color) 12%, transparent); color: var(--ev-accent); }
/* Bootstrap's blue ring stayed on after a click; club colour, keyboard only. */
.partner-portal .dataTables_wrapper .pagination .page-link:focus { box-shadow: none; }
.partner-portal .dataTables_wrapper .pagination .page-link:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--organiser-color) 15%, transparent); }
.partner-portal .dataTables_wrapper .pagination .active .page-link { background: var(--ev-accent); color: var(--ev-on-accent); }
.partner-portal .dataTables_wrapper .pagination .disabled .page-link { opacity: 0.45; }
/* Phones: the chrome has no columns to hang off, so it centres under the table. */
@media (max-width: 767.98px) {
    .partner-portal .dataTables_wrapper .dataTables_filter,
    .partner-portal .dataTables_wrapper .dataTables_length,
    .partner-portal .dataTables_wrapper .dataTables_info,
    .partner-portal .dataTables_wrapper .dataTables_paginate { float: none; width: 100%; padding-top: 0; text-align: center; }
}

/* Responsive child rows (Contacts, Orders, activities on a phone): the label/value lines of the shop's stacked tables
   (shop-ui.css .ui-stack-table). The selectors repeat DataTables Responsive's own, which are long. */
.partner-portal table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; }
.partner-portal table.dataTable > tbody > tr.child ul.dtr-details > li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.06); font-size: 0.82rem; overflow-wrap: anywhere; }
.partner-portal table.dataTable > tbody > tr.child ul.dtr-details > li:last-child { border-bottom: 0; }
.partner-portal table.dataTable > tbody > tr.child span.dtr-title { flex: none; min-width: 0; max-width: 45%; font-size: 0.72rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.02em; }
/* The expand dot: a club tint with a club-colour +, filled when open. Flex centres the glyph, which Responsive's own
   Courier line-height left high and to the left. */
.partner-portal table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before, .partner-portal table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before { display: flex; align-items: center; justify-content: center; box-sizing: border-box; left: 8px; width: 20px; height: 20px; margin-top: -10px; padding: 0; border: 0; border-radius: 50%; box-shadow: none; background-color: color-mix(in srgb, var(--organiser-color) 12%, transparent); color: var(--ev-accent); font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1; }
.partner-portal table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before, .partner-portal table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control::before { background-color: var(--ev-accent); color: var(--ev-on-accent); }

/* ---- Portal: forms, buttons and modals ---- */
/* The profile form's labels and field (profile-page.css) instead of partner.css's 30px pill. */
.partner-portal .form-group label { margin-bottom: 0.35rem; font-size: 0.8rem; font-weight: 700; color: #4b5563; }
.partner-portal .form-control { height: auto; padding: 0.65rem 0.9rem; border: 1px solid rgba(0, 0, 0, 0.14); border-radius: 10px; box-shadow: none; }
.partner-portal .form-control:focus { border-color: var(--ev-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--organiser-color) 15%, transparent); }
/* !important: .table-padding (partner.css) and Bootstrap's .py-0 zero the vertical padding with !important, and with
   height: auto the event selects collapsed to one text line. */
.partner-portal .form-control.table-padding, .partner-portal .form-control.py-0 { padding-top: 0.65rem !important; padding-bottom: 0.65rem !important; }
/* Buttons as slim pills (the wizard's 44px read too heavy here): the primary in club colour, the secondary grey.
   Not the cards' ☰ menus: those are .btn-secondary.dropdown-toggle drawn as a bare icon. */
.partner-portal .btn-primary, .partner-portal .btn-secondary:not(.dropdown-toggle) { height: auto; padding: 0.45rem 1.1rem; border-radius: 999px; font-size: 0.9rem; font-weight: 600; line-height: 1.3; }
/* Profile form actions cast a soft club-colour shadow underneath on interaction. */
.partner-portal .content-block button.btn-primary:not(:disabled):not(.disabled):is(:hover, :focus-visible) { box-shadow: 0 6px 14px -2px color-mix(in srgb, var(--ev-accent) 50%, transparent); color: var(--ev-on-accent, #fff); }
.partner-portal .btn-secondary:not(.dropdown-toggle) { background: #f3f4f6; border-color: transparent; color: rgba(0, 0, 0, 0.72); }
.partner-portal .btn-secondary:not(.dropdown-toggle):hover:not(.disabled), .partner-portal .btn-secondary:not(.dropdown-toggle):focus:not(.disabled) { background: #e5e7eb; color: rgba(0, 0, 0, 0.72); }
/* tickets.css (injected by the Billetter section) clears every focused a.btn with !important, which blanked a pressed primary. */
.partner-portal a.btn-primary:focus { background: var(--ev-accent) !important; border-color: var(--ev-accent) !important; }

/* ---- Portal: empty states ---- */
/* The shop's dashed box (shop-ui.css .ui-empty) sits in flex rows here, which would shrink it to its text: it spans the row,
   and inside a .row it keeps the columns' 15px gutter. */
.partner-portal .ui-empty { flex: 1 1 100%; }
.partner-portal .row > .ui-empty { margin: 0 15px; }

/* ---- Standalone pages ---- */
/* AddonsRedeem and RegistrationEvent share the unnumbered event page's markup, so they take its look (shop-ui.css
   .unnumbered-event-page): one sheet, the image and title straight on it, each option row a shop card. */
.partner-standalone > .card { background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-top: 4px solid var(--ev-accent); border-radius: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 24px 56px rgba(0, 0, 0, 0.18); }
.partner-standalone > .card > .card.salesCard { overflow: hidden; border: 0; border-radius: var(--ev-radius); box-shadow: none !important; transition: none; }
.partner-standalone > .card > .card.salesCard .card-img-top { border-radius: 0; }
.partner-standalone > .card > .card:has(> h2) { padding-left: 0 !important; padding-right: 0 !important; border: 0; background: transparent !important; box-shadow: none !important; }
/* Option rows (RegistrationEvent's .number-spinner, AddonsRedeem's .addons-stepper) fit their content: the inline height:
   150px, content centred by a translate, left a mostly empty box. */
.partner-standalone > .card > .card:has(.number-spinner), .partner-standalone > .card > .card:has(.addons-stepper) { height: auto !important; margin-bottom: 0.75rem; padding: 0.75rem 1.25rem !important; border: var(--ev-card-border); border-radius: var(--ev-radius); box-shadow: var(--ev-card-shadow) !important; }
.partner-standalone > .card > .card:has(.number-spinner) > .container-fluid { top: auto !important; transform: none !important; }
.partner-standalone > .card > .card:has(.number-spinner) .control-label, .partner-standalone > .card > .card:has(.addons-stepper) .control-label { margin: 0; }
.partner-standalone > .card > .card:has(.number-spinner) .row { justify-content: space-between; margin: 0; }
.partner-standalone .btn { border-radius: 999px; }
.partner-standalone .number-spinner .btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; font-size: 0.85rem; }
/* The count between − and + is a plain select here (no .ui-select): a compact pill at the buttons' 36px. !important: the
   theme's underline field (style.css) forces border, radius and background. */
.partner-standalone .number-spinner .form-control { flex: none; width: auto; min-width: 4.5rem; height: 36px; padding: 0 0.75rem; border: 1px solid rgba(0, 0, 0, 0.14) !important; border-radius: 999px !important; background: #fff !important; box-shadow: none; }
/* As a compact .ui-select: the same gap to − and + (compact only has a left margin), and the count centred — the chevron
   leaves the flow and the padding is mirrored so it no longer pushes the number left. */
.partner-standalone .number-spinner .ui-select-wrap { margin: 0 0.75rem; }
.partner-standalone .number-spinner .ui-select-wrap .ui-select__toggle { position: relative; justify-content: center; padding: 0 1.75rem; }
.partner-standalone .number-spinner .ui-select-wrap .ui-select__toggle .fa { position: absolute; right: 0.75rem; }
/* The Næste / basket button row: its air now comes from the option rows' 1.25rem, not an inline padding. */
.partner-standalone > .card > .d-flex:last-child { padding: 0 1.25rem 1.25rem 0; }
/* The participants list has no inner card: the container itself is the sheet (profile-page.css .innerWrapper). */
.partner-standalone:has(> .page-header) { padding: 1.5rem; background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); border-top: 4px solid var(--ev-accent); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 24px 56px rgba(0, 0, 0, 0.18); }
@media (min-width: 992px) { .partner-standalone:has(> .page-header) { padding: 2rem; } }

/* The sponsor band under the portal (_FooterPartial .lightSection, inline white): the sheet is position: relative (for the
   corner flag), so its shadow painted over the band. Positioned and later in the page, the band is solid white again. */
.partner-layout .lightSection { position: relative; z-index: 1; }

/* ---- Portal: welcome overlay after login ---- */
/* Full screen, above everything, with a white card in the middle holding the club logo, "Velkommen tilbage" and the company name.
   Transparent: the page's own fixed background (.partner-fixed-bg-image) shows through and the sheet and footer are hidden while it
   shows, from the first frame. Card rises, fades out, overlay removed (timing in Index.cshtml). */
/* Portal content loads behind this overlay without adding a page scrollbar during either card animation. */
html.partner-welcome-active, html.partner-welcome-active body { overflow: hidden; }
.partner-welcome { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.partner-welcome[hidden] { display: none; }
.partner-welcome:not([hidden]) ~ .partner-portal { opacity: 0; }
body:has(.partner-welcome:not([hidden])) .lightSection, body:has(.partner-welcome:not([hidden])) .footer-section { opacity: 0; }
/* While the welcome shows, the portal's red AJAX loader (loader.css, toggled inline by toggleLoader) stays hidden under it.
   The overlay is removed after the card's fade-out, so the loader works normally afterwards. */
.partner-welcome:not([hidden]) ~ .partner-portal .loader { display: none !important; }
.partner-welcome-card { position: relative; z-index: 1; }   /* placed mode makes it absolute below */
/* Leaving (Index.cshtml): the card's contents fade (replacing their slide-in animations, which would hold them at full opacity), then
   a ghost card grows from it into the sheet. Without partner.js the whole card fades and the sheet fades in as before. */
.partner-welcome.is-leaving .partner-welcome-card > * { animation: partner-welcome-content-out 0.2s ease forwards !important; }
.partner-welcome.is-leaving-plain .partner-welcome-card { animation: partner-welcome-content-out 0.35s ease forwards; }
@keyframes partner-welcome-content-out { to { opacity: 0; } }
.partner-welcome-card { max-width: 400px; width: 100%; padding: 2rem 1.75rem 1.25rem; border-top: 4px solid var(--organiser-color); border-radius: 0 0 var(--ev-radius) var(--ev-radius); background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 24px 56px rgba(0, 0, 0, 0.18); text-align: center; }
/* The dialog heading receives focus for reading; interactive controls retain their keyboard focus indicators. */
.partner-welcome-title[tabindex="-1"]:focus { outline: none; }
.partner-welcome-logo { display: block; max-width: 100%; max-height: 120px; margin: 0 auto 1.75rem; object-fit: contain; }
.partner-welcome.is-information .partner-welcome-card { max-width: 560px; width: 100%; max-height: calc(100dvh - 3rem); overflow-y: auto; }
.partner-welcome-information[hidden] { display: none; }
.partner-welcome-information { margin-top: 1rem; opacity: 0; transition: opacity 0.25s ease; }
.partner-welcome.is-information-ready .partner-welcome-information { opacity: 1; }
.partner-welcome-information-text { margin: 0; color: #374151; text-align: left; white-space: pre-line; overflow-wrap: anywhere; line-height: 1.5; }
.partner-welcome-information-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.5rem; }
.partner-welcome-information-actions .btn { min-width: 7rem; }
.partner-welcome-information-hint { margin: 0.6rem 0 0; color: #6b7280; font-size: 0.8rem; }
.partner-welcome-information-error { margin: 0.75rem 0 0; color: #b91c1c; font-size: 0.875rem; }
@media (prefers-reduced-motion: reduce) { .partner-welcome-information { transition: none; } }
/* One explicit font on both pages: the login and portal layouts fall back to different fonts (neither loads Poppins), which
   made the text jump at the switch. */
.partner-welcome-title { font-family: Arial, Helvetica, sans-serif; margin: 0 0 0.6rem; color: #111827; font-size: 2rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; animation: partner-welcome-text 0.8s 0.45s ease-out both; }
.partner-welcome-company { font-family: Arial, Helvetica, sans-serif; margin: 0 0 0.75rem; color: #4b5563; font-size: 1.05rem; line-height: 1.35; min-height: 2.7em; overflow-wrap: break-word; animation: partner-welcome-text 0.6s 0.95s ease-out both; will-change: transform, opacity; }   /* starts as the greeting settles; its own layer, so the portal's AJAX work underneath cannot make it stutter */
@media (max-width: 767.98px) {
    .partner-welcome-title { font-size: 1.5rem; }
}
/* Placed on the login card's top edge and width (see Index.cshtml); its height follows its content. No rise, or the red
   edge would move. */
.partner-welcome.is-placed { display: block; padding: 0; }
.partner-welcome.is-placed .partner-welcome-card { position: absolute; max-width: none; margin: 0; transition: none; }
.partner-welcome.is-placed .partner-welcome-title { animation: none; }   /* already faded in on the login page */
.partner-welcome.is-placed .partner-welcome-company { animation-delay: 0.15s; }
/* The placeholder stays visible until hidden content and its assets have settled. Only the name's own layer animates. */
.partner-welcome .partner-welcome-title { will-change: transform, opacity; }
.partner-welcome .partner-welcome-company { position: relative; animation: none; }
.partner-welcome-company-name { display: inline-block; max-width: 100%; will-change: transform, opacity; }
.partner-welcome.is-company-pending .partner-welcome-company-name { opacity: 0; }
.partner-welcome.is-company-ready .partner-welcome-company-name { animation: partner-welcome-text 0.6s ease-out both; }
.partner-welcome .partner-welcome-company::after { content: ""; position: absolute; top: 0.2em; left: 50%; width: 55%; height: 0.95em; border-radius: 999px; background: linear-gradient(90deg, #eef0f3 25%, #e1e4e9 50%, #eef0f3 75%); transform: translateX(-50%); pointer-events: none; opacity: 0; will-change: opacity; }
.partner-welcome.is-company-pending .partner-welcome-company::after { animation: partner-skeleton-pulse 1.4s 1.2s ease-in-out infinite; }
.partner-welcome.has-skeleton.is-company-pending .partner-welcome-company::after { animation-delay: 0s; }
.partner-welcome.is-company-ready .partner-welcome-company::after { animation: partner-skeleton-out 0.35s ease forwards; }
.partner-welcome.has-skeleton.is-company-ready .partner-welcome-company-name { animation-name: partner-welcome-fade; }
@keyframes partner-skeleton-out { from { opacity: var(--partner-skeleton-opacity, 0); } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .partner-welcome.is-company-ready .partner-welcome-company-name { animation-name: partner-welcome-fade; }
    .partner-welcome.is-company-pending .partner-welcome-company::after { animation: partner-skeleton-in 0.2s 1.2s ease forwards; }
    .partner-welcome.has-skeleton.is-company-pending .partner-welcome-company::after { animation-delay: 0s; }
}
@keyframes partner-welcome-text { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }   /* from under the logo, downwards */
/* Reduced motion: the text only fades, no slide. */
@media (prefers-reduced-motion: reduce) { .partner-welcome-title, .partner-welcome-company { animation-name: partner-welcome-fade; } }
@keyframes partner-welcome-fade { from { opacity: 0; } to { opacity: 1; } }