/* ==========================================================================
   U2B UI v2 — portal design system
   --------------------------------------------------------------------------
   Direction: a quiet Scandinavian working tool. Pale neutral ground, white
   surfaces defined by soft shadow rings, one deep pine for the sidebar and
   text, U2B lime only for the primary action and the peak in a chart.
   Labels in sentence case, never tracked capitals. No decorative dots, rings,
   glows or gradients. Cards never sit inside cards.

   1. Tokens   2. Base   3. Shell   4. Components   5. POS sales page
   6. Module bridge (existing panels)   7. Legacy pieces   8. Login
   Everything is scoped to body.u2b-ui, so the file is inert until enabled.
   ========================================================================== */

/* 1. TOKENS ================================================================ */
body.u2b-ui {
    /* Brand */
    --u2b-pine-950: #0b2016;
    --u2b-pine-900: #0f2a1d;   /* sidebar, top bar */
    --u2b-pine-800: #173a29;   /* hover on dark buttons */
    --u2b-pine-700: #2a5240;   /* chart bars */
    --u2b-pine-600: #4b7360;   /* secondary chart bars */
    --u2b-lime:       #cdee4f; /* primary action, chart peak */
    --u2b-lime-hover: #bde03a;
    --u2b-lime-ink:   #15200a;
    --u2b-lime-soft:  #f1f8d6;
    --u2b-lime-deep:  #4c6406;

    /* Neutrals (hue-biased toward the pine) */
    --u2b-canvas:     #f3f4f1;
    --u2b-surface:    #ffffff;
    --u2b-surface-2:  #f6f7f4;
    --u2b-line:       #e6e8e3;
    --u2b-line-strong:#cfd4cb;
    --u2b-ink:        #15201a;
    --u2b-ink-2:      #3a463f;
    --u2b-muted:      #646f67;
    --u2b-faint:      #9aa39c;

    /* Status */
    --u2b-good: #1d7444;  --u2b-good-bg: #e4f3ea;
    --u2b-warn: #935a00;  --u2b-warn-bg: #fdf1dc;
    --u2b-bad:  #c2372f;  --u2b-bad-bg:  #fce7e5;
    --u2b-info: #3a62d6;  --u2b-info-bg: #e7edfc;

    /* Chart series */
    --u2b-c-card:  #2a5240;
    --u2b-c-cash:  #cdee4f;
    --u2b-c-other: #b9c3bc;

    /* Type */
    --u2b-font: "Schibsted Grotesk", "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
    --u2b-fs-label: 12.5px;
    --u2b-fs-body: 14px;
    --u2b-fs-title: 16px;
    --u2b-fs-fig: 22px;
    --u2b-fs-lead: clamp(28px, 3.2vw, 38px);
    --u2b-fs-page: clamp(24px, 2.4vw, 30px);

    /* Shape: outer radius = inner radius + padding */
    --u2b-r-xs: 6px;
    --u2b-r-sm: 10px;
    --u2b-r-md: 14px;
    --u2b-r-lg: 18px;
    --u2b-r-pill: 999px;

    /* Depth: shadows for elevation, borders only for structure */
    --u2b-ring:   0 0 0 1px rgba(21, 32, 26, .07);
    --u2b-raise:  0 0 0 1px rgba(21, 32, 26, .06), 0 1px 2px rgba(21, 32, 26, .05), 0 8px 20px -12px rgba(21, 32, 26, .18);
    --u2b-pop:    0 0 0 1px rgba(21, 32, 26, .08), 0 16px 40px -12px rgba(21, 32, 26, .30);

    /* Motion */
    --u2b-ease: cubic-bezier(.2, 0, 0, 1);

    /* Layout */
    --u2b-side-w: 240px;
    --u2b-topbar-h: 56px;
    --u2b-admin-bar: var(--wp-admin--admin-bar--height, 0px);
}

/* 2. BASE ================================================================== */
html:has(body.u2b-ui) { overflow-x: clip; }
body.u2b-ui {
    overflow-x: clip;
    background: var(--u2b-canvas);
    color: var(--u2b-ink);
    font-family: var(--u2b-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    --uicore-primary-font-family: var(--u2b-font);
    --uicore-secondary-font-family: var(--u2b-font);
    --uicore-accent-font-family: var(--u2b-font);
    --uicore-text-font-family: var(--u2b-font);
    --e-global-typography-primary-font-family: var(--u2b-font);
    --e-global-typography-secondary-font-family: var(--u2b-font);
    --e-global-typography-text-font-family: var(--u2b-font);
    --e-global-typography-accent-font-family: var(--u2b-font);
}
body.u2b-ui :is(.uicore-content, .u2b-side, .u2b-topbar, .elementor, .u2b-auth-panel) :is(h1, h2, h3, h4, h5, h6, p, label, td, th, li, a, button, input, select, textarea, dt, dd, summary, .elementor-heading-title, .elementor-button, .elementor-field) {
    font-family: var(--u2b-font);
}
body.u2b-ui :is(h1, h2, h3) { text-wrap: balance; }
body.u2b-ui ::selection { background: var(--u2b-lime); color: var(--u2b-lime-ink); }
body.u2b-ui :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--u2b-ink);
    outline-offset: 2px;
    box-shadow: none;
}
body.u2b-ui :is(button, a, summary) { touch-action: manipulation; }

.u2b-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.u2b-js .u2b-js-hide { display: none !important; }

.u2b-skip { position: fixed; z-index: 100001; left: 12px; top: 8px; padding: 10px 14px; border-radius: var(--u2b-r-sm); background: var(--u2b-surface); color: var(--u2b-ink); font-weight: 600; box-shadow: var(--u2b-pop); transform: translateY(calc(-100% - 40px)); transition: transform .15s var(--u2b-ease); }
.u2b-skip:focus { transform: none; }

/* 3. SHELL ================================================================= */
body.u2b-ui-app #wrapper-navbar,
body.u2b-ui-app .uicore-mobile-menu-wrapper,
body.u2b-ui-app #uicore-back-to-top,
body.u2b-ui-app .uicore-animation-bg,
body.u2b-ui-app .ui-cursor,
body.u2b-ui-app .uicore-footer-wrapper { display: none !important; }

body.u2b-ui-app,
body.u2b-ui-app .uicore-body-content,
body.u2b-ui-app #uicore-page,
body.u2b-ui-app #content,
body.u2b-ui-app .uicore-content { background: var(--u2b-canvas) !important; }
body.u2b-ui-app :is(#primary, .content-area, .content-area > article, .entry-content) { background: transparent !important; box-shadow: none !important; }

/* z-index:auto so pop-ups inside the page (receipt lines) can rise above the sidebar */
body.u2b-ui-app #uicore-page { padding-left: var(--u2b-side-w) !important; min-height: calc(100vh - var(--u2b-admin-bar)); z-index: auto !important; }
body.u2b-ui-app #content.uicore-content { padding: 28px clamp(16px, 3vw, 44px) 56px !important; max-width: 1480px; }
body.u2b-ui-app #content .uicore-content-wrapper { max-width: none !important; padding: 0 !important; }
body.u2b-ui-app #content .uicore-content-wrapper > .uicore-content { padding: 0 !important; }
body.u2b-ui-app .uicore-content .elementor-section > .elementor-container { max-width: none; }
body.u2b-ui-app .uicore-content .elementor-section,
body.u2b-ui-app .uicore-content .elementor-column > .elementor-widget-wrap { background-color: transparent; }
body.u2b-ui-app .uicore-content .elementor-column-gap-default > .elementor-column > .elementor-element-populated { padding: 0; }
body.u2b-ui-app .uicore-content .elementor-spacer { display: none; }

/* Sidebar */
.u2b-side {
    position: fixed;
    z-index: 990;
    top: var(--u2b-admin-bar);
    bottom: 0;
    left: 0;
    width: var(--u2b-side-w);
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 20px 12px 14px;
    background: var(--u2b-pine-900);
    color: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .15) transparent;
}
.u2b-side__brand { display: flex; align-items: center; justify-content: space-between; padding: 0 10px 6px; }
.u2b-side__brand img { display: block; height: 30px; width: auto; }
.u2b-side__close { display: none !important; }
.u2b-side__nav { flex: 1 1 auto; }
.u2b-side .u2b-nav, .u2b-side .u2b-nav__sub { list-style: none; margin: 0; padding: 0; }
.u2b-side .u2b-nav { display: flex; flex-direction: column; gap: 2px; }
.u2b-side .u2b-nav__sub { margin: 2px 0 2px 30px; }

.u2b-side .u2b-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
    padding: 0 12px;
    border-radius: var(--u2b-r-sm);
    color: rgba(255, 255, 255, .74);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition-property: background-color, color;
    transition-duration: .15s;
    transition-timing-function: var(--u2b-ease);
}
.u2b-side .u2b-nav__link .u2b-ico { flex: none; opacity: .9; }
.u2b-side .u2b-nav__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u2b-side .u2b-nav__link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.u2b-side .u2b-nav__link.is-active { background: var(--u2b-surface); color: var(--u2b-ink); font-weight: 600; }
.u2b-side .u2b-nav__link.is-active .u2b-ico { opacity: 1; }
.u2b-side :focus-visible { outline-color: var(--u2b-lime) !important; }

.u2b-side__foot { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .1); }
.u2b-user { display: flex; align-items: center; gap: 10px; padding: 4px 10px; }
.u2b-user__avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--u2b-pine-700); color: #fff; font-size: 12.5px; font-weight: 700; }
.u2b-user__meta { display: flex; flex-direction: column; min-width: 0; }
.u2b-user__name { font-size: 13.5px; font-weight: 600; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u2b-user__company { font-size: 12.5px; color: rgba(255, 255, 255, .62); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Language switch */
.u2b-lang { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 3px; border-radius: var(--u2b-r-sm); background: var(--u2b-surface-2); box-shadow: var(--u2b-ring); }
.u2b-lang__opt { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 12px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--u2b-muted); text-decoration: none; transition-property: background-color, color; transition-duration: .15s; }
.u2b-lang__opt:hover { color: var(--u2b-ink); }
.u2b-lang__opt[aria-current] { background: var(--u2b-surface); color: var(--u2b-ink); font-weight: 600; box-shadow: var(--u2b-raise); }
.u2b-lang--dark { margin: 0 4px; background: rgba(255, 255, 255, .07); box-shadow: none; }
.u2b-lang--dark .u2b-lang__opt { color: rgba(255, 255, 255, .7); }
.u2b-lang--dark .u2b-lang__opt:hover { color: #fff; }
.u2b-lang--dark .u2b-lang__opt[aria-current] { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }

/* Icon button */
.u2b-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; margin: 0; border: 0; border-radius: var(--u2b-r-sm); background: transparent; color: var(--u2b-ink); cursor: pointer; transition-property: background-color, transform; transition-duration: .15s; }
.u2b-iconbtn:active { transform: scale(.96); }
.u2b-iconbtn--dark { color: #fff; background: rgba(255, 255, 255, .08); }
.u2b-iconbtn--dark:hover { background: rgba(255, 255, 255, .14); }

/* Mobile top bar + drawer */
.u2b-topbar { display: none; }
.u2b-scrim { position: fixed; inset: 0; z-index: 980; background: rgba(11, 32, 22, .45); }
.u2b-scrim[hidden] { display: none; }

@media (max-width: 1024px) {
    body.u2b-ui-app #uicore-page { padding-left: 0 !important; }
    body.u2b-ui-app #content.uicore-content { padding: 18px 16px 44px !important; }
    .u2b-topbar {
        position: sticky;
        top: var(--u2b-admin-bar);
        z-index: 970;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--u2b-topbar-h);
        padding: 0 8px 0 16px;
        background: var(--u2b-pine-900);
    }
    .u2b-topbar__brand img { display: block; height: 26px; width: auto; }
    .u2b-side__close { display: inline-flex !important; }
    .u2b-side { width: min(300px, 86vw); transform: translateX(-102%); transition: transform .22s var(--u2b-ease); }
    body.u2b-drawer-open .u2b-side { transform: none; box-shadow: var(--u2b-pop); }
    body.u2b-drawer-open { overflow: hidden; }
}
@media (max-width: 600px) {
    .u2b-topbar { top: 0 !important; }
    .u2b-side { top: 0; z-index: 100000; }
}
@media (prefers-reduced-motion: reduce) {
    .u2b-side, .u2b-skip { transition: none; }
    body.u2b-ui *, body.u2b-ui *::before, body.u2b-ui *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* 4. COMPONENTS ============================================================ */
.u2b-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 20px; }
.u2b-page-head__text { min-width: 0; }
.u2b-page-head__actions { display: flex; gap: 8px; flex-wrap: wrap; }
body.u2b-ui .u2b-page-title { margin: 0; font-size: var(--u2b-fs-page); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--u2b-ink); overflow-wrap: break-word; }
body.u2b-ui .u2b-page-sub { margin: 6px 0 0; font-size: var(--u2b-fs-body); color: var(--u2b-muted); }

.u2b-card { min-width: 0; background: var(--u2b-surface); border-radius: var(--u2b-r-lg); box-shadow: var(--u2b-raise); padding: 18px 20px; }
.u2b-card--flush { padding: 0; overflow: hidden; }
.u2b-card--flush > .u2b-card__head { padding: 16px 20px 12px; margin: 0; }
.u2b-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin: 0 0 14px; }
body.u2b-ui .u2b-card__title { margin: 0; font-size: var(--u2b-fs-title); font-weight: 600; letter-spacing: -.01em; color: var(--u2b-ink); }
.u2b-card__meta { font-size: var(--u2b-fs-label); color: var(--u2b-muted); }

.u2b-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    min-height: 40px; padding: 0 14px;
    font: 600 14px/1 var(--u2b-font); letter-spacing: 0; text-transform: none; text-decoration: none; white-space: nowrap;
    color: var(--u2b-ink); background: var(--u2b-surface);
    border: 0; border-radius: var(--u2b-r-sm); box-shadow: var(--u2b-raise);
    cursor: pointer;
    transition-property: background-color, box-shadow, transform; transition-duration: .15s; transition-timing-function: var(--u2b-ease);
}
.u2b-btn:hover { background: var(--u2b-surface-2); color: var(--u2b-ink); }
.u2b-btn:active { transform: scale(.96); }
.u2b-btn--primary { background: var(--u2b-lime); color: var(--u2b-lime-ink); box-shadow: inset 0 0 0 1px rgba(21, 32, 10, .08); }
.u2b-btn--primary:hover { background: var(--u2b-lime-hover); color: var(--u2b-lime-ink); }
.u2b-btn--dark { background: var(--u2b-ink); color: #fff; box-shadow: none; }
.u2b-btn--dark:hover { background: var(--u2b-pine-800); color: #fff; }
.u2b-btn .u2b-ico { flex: none; }
/* The theme kit pads every submit button 18px 36px; buttons here keep their own size. */
body.u2b-ui :is(button, a).u2b-btn { padding: 0 14px !important; min-height: 40px; line-height: 1 !important; font-size: 14px !important; letter-spacing: 0 !important; text-transform: none !important; }

/* Segmented control (period presets) */
.u2b-seg { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 12px; background: #e9ebe6; max-width: 100%; }
.u2b-seg__item {
    flex: none; display: inline-flex; align-items: center; gap: 6px;
    min-height: 34px; padding: 0 13px; border-radius: 9px;
    font-size: 13.5px; font-weight: 500; color: var(--u2b-ink-2); text-decoration: none; white-space: nowrap;
    list-style: none; cursor: pointer;
    transition-property: background-color, color, box-shadow; transition-duration: .15s;
}
.u2b-seg__item::-webkit-details-marker { display: none; }
.u2b-seg__item:hover { color: var(--u2b-ink); }
.u2b-seg__item[aria-current] { background: var(--u2b-surface); color: var(--u2b-ink); font-weight: 600; box-shadow: var(--u2b-raise); }

/* Pop-over (details) */
.u2b-pop { position: relative; }
.u2b-pop__panel { position: absolute; z-index: 50; top: calc(100% + 8px); right: -3px; padding: 14px; border-radius: var(--u2b-r-md); background: var(--u2b-surface); box-shadow: var(--u2b-pop); }

.u2b-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.u2b-field > span { font-size: var(--u2b-fs-label); font-weight: 500; color: var(--u2b-muted); }
body.u2b-ui :is(.u2b-input, .u2b-select) {
    height: 40px; padding: 0 12px;
    font: 500 14px var(--u2b-font); color: var(--u2b-ink);
    background-color: var(--u2b-surface); border: 1px solid var(--u2b-line-strong); border-radius: var(--u2b-r-sm);
    transition-property: border-color; transition-duration: .15s;
}
body.u2b-ui :is(.u2b-input, .u2b-select):hover { border-color: var(--u2b-faint); }

.u2b-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.u2b-toolbar__store { display: flex; gap: 8px; align-items: center; margin: 0; }
.u2b-toolbar__store .u2b-select { min-width: 200px; max-width: 320px; }
.u2b-toolbar__store.is-busy { opacity: .6; pointer-events: none; }

.u2b-dates { display: flex; align-items: flex-end; gap: 10px; }

.u2b-note { margin: 12px 0 0; font-size: var(--u2b-fs-label); color: var(--u2b-muted); }
.u2b-foot-note { margin: 18px 2px 0; font-size: var(--u2b-fs-label); color: var(--u2b-muted); }

.u2b-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; font-size: 12.5px; font-weight: 600; border-radius: var(--u2b-r-pill); background: var(--u2b-surface-2); color: var(--u2b-ink-2); white-space: nowrap; }
.u2b-badge--good { background: var(--u2b-good-bg); color: var(--u2b-good); }
.u2b-badge--warn { background: var(--u2b-warn-bg); color: var(--u2b-warn); }
.u2b-badge--bad  { background: var(--u2b-bad-bg);  color: var(--u2b-bad); }

.u2b-table { width: 100%; border-collapse: collapse; font-size: var(--u2b-fs-body); }
.u2b-table td { font-variant-numeric: tabular-nums; }
.u2b-table th { padding: 10px 14px; text-align: left; font-size: var(--u2b-fs-label); font-weight: 500; color: var(--u2b-muted); border-bottom: 1px solid var(--u2b-line); white-space: nowrap; }
.u2b-table td { padding: 11px 14px; border-bottom: 1px solid var(--u2b-line); }
.u2b-table .num { text-align: right; }

.u2b-alert { padding: 12px 14px; border-radius: var(--u2b-r-sm); font-size: 14px; background: var(--u2b-info-bg); color: var(--u2b-info); }
.u2b-alert--warn { background: var(--u2b-warn-bg); color: var(--u2b-warn); }
.u2b-alert--bad  { background: var(--u2b-bad-bg);  color: var(--u2b-bad); }
.u2b-alert--good { background: var(--u2b-good-bg); color: var(--u2b-good); }

/* 5. POS SALES PAGE ======================================================== */
.u2b-pos { display: flex; flex-direction: column; gap: 16px; color: var(--u2b-ink); }
/* Fixed-width digits only where numbers line up in columns (they also widen , and .) */
.u2b-pos :is(td, .u2b-legend dd, .u2b-rank__val, .u2b-bars__axis) { font-variant-numeric: tabular-nums; }
.u2b-pos > .u2b-page-head, .u2b-pos > .u2b-toolbar { margin: 0; }

/* Stat strip: one card, figures divided by hairlines */
.u2b-stats { container-type: inline-size; padding: 0; }
.u2b-stats__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); }
.u2b-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 18px 20px; }
.u2b-stat + .u2b-stat { border-left: 1px solid var(--u2b-line); }
.u2b-stat__label { font-size: var(--u2b-fs-label); font-weight: 500; color: var(--u2b-muted); }
.u2b-stat__value { font-size: var(--u2b-fs-fig); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--u2b-ink); overflow-wrap: anywhere; }
.u2b-stat__value small { font-size: .55em; font-weight: 600; letter-spacing: 0; color: var(--u2b-muted); }
.u2b-stat__sub { font-size: var(--u2b-fs-label); color: var(--u2b-muted); }
.u2b-stat--lead { justify-content: center; }
.u2b-stat--lead .u2b-stat__value { font-size: var(--u2b-fs-lead); font-weight: 700; letter-spacing: -.03em; }

.u2b-pos__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.u2b-pos__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Bar chart */
.u2b-bars { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; height: 250px; }
.u2b-bars__axis { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 22px; font-size: 11.5px; color: var(--u2b-muted); text-align: right; line-height: 1; }
.u2b-bars__plot {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--n), minmax(0, 1fr));
    gap: clamp(2px, .6vw, 8px);
    margin: 0; padding: 0 0 22px; list-style: none;
    background:
        linear-gradient(var(--u2b-line), var(--u2b-line)) 0 0 / 100% 1px no-repeat,
        linear-gradient(var(--u2b-line), var(--u2b-line)) 0 calc((100% - 22px) / 2) / 100% 1px no-repeat,
        linear-gradient(var(--u2b-line-strong), var(--u2b-line-strong)) 0 calc(100% - 22px) / 100% 1px no-repeat;
}
.u2b-bars__col { position: relative; display: flex; align-items: flex-end; justify-content: center; min-width: 0; }
.u2b-bars__bar { display: block; width: 100%; max-width: 34px; height: var(--h); border-radius: 4px 4px 0 0; background: var(--u2b-pine-700); transition-property: background-color; transition-duration: .15s; }
.u2b-bars__col:hover .u2b-bars__bar { background: var(--u2b-pine-900); }
.u2b-bars__col.is-peak .u2b-bars__bar { background: var(--u2b-lime); box-shadow: inset 0 0 0 1px rgba(21, 32, 10, .12); }
.u2b-bars__x { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); font-size: 11.5px; line-height: 18px; color: var(--u2b-muted); white-space: nowrap; }

/* Payment split */
.u2b-split { display: flex; gap: 3px; height: 12px; margin: 2px 0 14px; }
.u2b-split__seg { flex: 0 0 var(--w); min-width: 4px; border-radius: 3px; }
.u2b-split__seg--card  { background: var(--u2b-c-card); }
.u2b-split__seg--cash  { background: var(--u2b-c-cash); box-shadow: inset 0 0 0 1px rgba(21, 32, 10, .14); }
.u2b-split__seg--other { background: var(--u2b-c-other); }
.u2b-legend { margin: 0; display: flex; flex-direction: column; }
.u2b-legend__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--u2b-line); font-size: var(--u2b-fs-body); }
.u2b-legend__row:first-child { border-top: 0; padding-top: 0; }
.u2b-legend dt { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--u2b-ink-2); }
.u2b-legend dd { margin: 0; display: flex; gap: 10px; font-weight: 600; color: var(--u2b-ink); }
.u2b-legend dd span { min-width: 52px; text-align: right; font-weight: 500; color: var(--u2b-muted); }
.u2b-legend__key { width: 10px; height: 10px; border-radius: 3px; }
.u2b-legend__key--card  { background: var(--u2b-c-card); }
.u2b-legend__key--cash  { background: var(--u2b-c-cash); box-shadow: inset 0 0 0 1px rgba(21, 32, 10, .2); }
.u2b-legend__key--other { background: var(--u2b-c-other); }

/* Ranked rows (sellers) */
.u2b-rank { list-style: none; margin: 0; padding: 0; }
.u2b-rank__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--u2b-line); }
.u2b-rank__row:first-child { border-top: 0; padding-top: 0; }
.u2b-rank__name { font-size: var(--u2b-fs-body); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u2b-rank__val { font-size: var(--u2b-fs-body); font-weight: 600; text-align: right; }
.u2b-rank__sub { grid-column: 1 / -1; font-size: var(--u2b-fs-label); color: var(--u2b-muted); }
.u2b-rank__bar { grid-column: 1 / -1; height: 4px; border-radius: 2px; background: linear-gradient(var(--u2b-pine-600), var(--u2b-pine-600)) 0 0 / var(--w) 100% no-repeat, var(--u2b-surface-2); }

body.u2b-ui .u2b-empty p { margin: 6px 0 0; font-size: var(--u2b-fs-body); line-height: 1.5; color: var(--u2b-muted); }

@media (max-width: 1180px) {
    .u2b-pos__grid { grid-template-columns: minmax(0, 1fr); }
    .u2b-pos__side { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@container (max-width: 760px) {
    .u2b-stats__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .u2b-stat--lead { grid-column: 1 / -1; border-bottom: 1px solid var(--u2b-line); }
    .u2b-stat--lead + .u2b-stat { border-left: 0; }
}
@container (max-width: 480px) {
    .u2b-stats__grid { grid-template-columns: minmax(0, 1fr); }
    .u2b-stat + .u2b-stat { border-left: 0; border-top: 1px solid var(--u2b-line); }
    .u2b-stat--lead + .u2b-stat { border-top: 0; }
}
@media (max-width: 640px) {
    .u2b-toolbar { align-items: stretch; }
    .u2b-toolbar__store, .u2b-toolbar__store .u2b-select { width: 100%; max-width: none; }
    .u2b-seg { width: 100%; overflow-x: auto; scrollbar-width: none; }
    .u2b-seg::-webkit-scrollbar { display: none; }
    .u2b-pop { position: static; }
    .u2b-pop__panel { left: 0; right: 0; }
    .u2b-dates { flex-wrap: wrap; }
    .u2b-dates .u2b-field { flex: 1 1 130px; }
    .u2b-bars { height: 210px; }
    .u2b-stat { padding: 14px 16px; }
    .u2b-page-head__actions { width: 100%; }
    .u2b-page-head__actions .u2b-btn { flex: 1 1 0; }
}

/* 6. MODULE BRIDGE =========================================================
   The existing panels define --s4-* tokens on their root. Re-pointing them
   restyles every panel; the rules after it remove the generic tropes. */
body.u2b-ui :is(.u2bd, .s4-panel, .u2br, .u2bb, .u2bz, .s4ir) {
    --s4-accent: var(--u2b-lime);
    --s4-accent-ink: var(--u2b-lime-ink);
    --s4-ink: var(--u2b-ink);
    --s4-ink-2: var(--u2b-ink-2);
    --s4-muted: var(--u2b-muted);
    --s4-line: var(--u2b-line);
    --s4-bg: var(--u2b-surface);
    --s4-soft: var(--u2b-surface-2);
    --s4-good: var(--u2b-good); --s4-good-bg: var(--u2b-good-bg);
    --s4-bad: var(--u2b-bad);   --s4-bad-bg: var(--u2b-bad-bg);
    --s4-radius: var(--u2b-r-lg);
    --s4-radius-sm: var(--u2b-r-md);
    --s4-shadow: var(--u2b-raise);
    font-family: var(--u2b-font);
    color: var(--u2b-ink);
}
body.u2b-ui :is(.u2bd, .s4-panel, .u2br, .u2bb, .u2bz, .s4ir) td { font-variant-numeric: tabular-nums; }

/* Labels, table heads and pills: sentence case, untracked */
body.u2b-ui-app .uicore-content :is(th, [class*="__label"], [class*="-label"], [class*="__title"], [class*="pill"], [class*="__status"], [class*="badge"], .u2br-tab, .s4-preset, .u2br-chip, .u2br-btn, .s4-btn, button, .elementor-button) {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* Titles */
body.u2b-ui :is(.u2bd-hello, .s4-title, .u2br-title) {
    font-size: var(--u2b-fs-page) !important;
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
    line-height: 1.15 !important;
    color: var(--u2b-ink) !important;
}
body.u2b-ui :is(.u2bd-mod__title, .u2br-card__title, .u2bz-brief__title) { font-size: var(--u2b-fs-title); font-weight: 600; letter-spacing: -.01em; }
body.u2b-ui :is(.u2bd-fig__label, .s4-kpi__label, .u2br-kpi__label, .u2br-hl__label, .u2bd-card__title, .u2bd-trend__label, .u2br-field span, .u2bz-fig__label) {
    font-size: var(--u2b-fs-label) !important;
    font-weight: 500 !important;
    color: var(--u2b-muted) !important;
}

/* No decorative dots and rings */
body.u2b-ui :is(.s4-dot, .u2bd-ok .u2bd-dot) { display: none !important; }
body.u2b-ui :is(.u2bd-fig--accent, .s4-kpi--accent, .u2br-kpi--accent)::after { display: none !important; }

/* Surfaces: white, shadow-defined, no borders */
body.u2b-ui :is(.u2bd-mod, .u2bd-card, .u2bd-navcard, .s4-kpi, .s4-toolbar, .s4-card, .u2br-card, .u2br-kpi, .u2br-state, .u2bz-jobs, .u2bb-card) {
    border: 0 !important;
    box-shadow: var(--u2b-raise) !important;
    border-radius: var(--u2b-r-lg) !important;
    background: var(--u2b-surface) !important;
}
/* Featured tiles become ordinary tiles; size carries the emphasis */
body.u2b-ui :is(.s4-kpi--accent, .u2br-kpi--accent) { background: var(--u2b-surface) !important; }
body.u2b-ui :is(.s4-kpi--accent, .u2br-kpi--accent) :is(.s4-kpi__label, .u2br-kpi__label, .u2br-kpi__sub, .s4-kpi__cur) { color: var(--u2b-muted) !important; }
body.u2b-ui :is(.s4-kpi--accent .s4-kpi__value, .u2br-kpi--accent .u2br-kpi__value) { color: var(--u2b-ink) !important; font-size: clamp(22px, 2.6vw, 28px); }
body.u2b-ui .u2br-kpi--accent .u2br-delta--good { background: var(--u2b-good-bg); color: var(--u2b-good); }
body.u2b-ui .u2br-kpi--accent .u2br-delta--bad  { background: var(--u2b-bad-bg);  color: var(--u2b-bad); }
body.u2b-ui :is(.s4-kpi__value, .u2br-kpi__value, .u2bd-fig__value, .u2bz-fig__value, .u2br-hl__value) { font-weight: 700; letter-spacing: -.02em; font-variant-numeric: proportional-nums lining-nums; }

/* Dashboard: figures inside a module are a plain row, not cards inside a card */
body.u2b-ui .u2bd-figs { display: flex !important; flex-wrap: wrap; gap: 14px 32px !important; }
body.u2b-ui .u2bd-fig { flex: 1 1 140px; min-width: 0; background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; }
body.u2b-ui .u2bd-fig--accent .u2bd-fig__value { color: var(--u2b-ink) !important; font-size: clamp(20px, 2.2vw, 26px) !important; }
body.u2b-ui .u2bd-fig--accent :is(.u2bd-fig__label, .u2bd-fig__sub) { color: var(--u2b-muted) !important; }
body.u2b-ui .u2bd-mod__link { border-bottom: 0; text-decoration: underline; text-decoration-color: var(--u2b-line-strong); text-underline-offset: 3px; font-weight: 600; }
body.u2b-ui .u2bd-mod__link:hover { text-decoration-color: var(--u2b-ink); }
body.u2b-ui .u2bd-badge { background: var(--u2b-surface); border: 0; box-shadow: var(--u2b-ring); font-weight: 500; }
body.u2b-ui .u2bd-badge--store { background: var(--u2b-ink); color: #fff; box-shadow: none; }
body.u2b-ui .u2bd-spark__line { stroke: var(--u2b-pine-700); }
body.u2b-ui .u2bd-spark__fill { fill: var(--u2b-pine-700); opacity: .08; }
body.u2b-ui .u2bd-alert__pill--open { background: var(--u2b-warn-bg); color: var(--u2b-warn); }
body.u2b-ui .u2bd-alert__pill--dif  { background: var(--u2b-bad-bg); color: var(--u2b-bad); }
body.u2b-ui .u2bd-navcard__icon { background: var(--u2b-surface-2); color: var(--u2b-ink); border-radius: var(--u2b-r-sm); }
body.u2b-ui .u2bd-navcard:hover { transform: none; box-shadow: var(--u2b-pop) !important; }

/* Presets → segmented control */
body.u2b-ui .s4-presets { background: #e9ebe6 !important; border: 0 !important; border-radius: 12px !important; padding: 3px !important; gap: 2px !important; }
body.u2b-ui .s4-preset { font-weight: 500 !important; color: var(--u2b-ink-2) !important; border-radius: 9px !important; min-height: 34px; }
body.u2b-ui .s4-preset.is-active { background: var(--u2b-surface) !important; color: var(--u2b-ink) !important; font-weight: 600 !important; box-shadow: var(--u2b-raise) !important; }
body.u2b-ui .u2br-chips { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: #e9ebe6; max-width: 100%; }
body.u2b-ui .u2br .u2br-chip { background: transparent; border: 0; border-radius: 9px; min-height: 34px; padding: 0 13px; font-weight: 500; color: var(--u2b-ink-2); }
body.u2b-ui .u2br .u2br-chip[aria-pressed="true"] { background: var(--u2b-surface); color: var(--u2b-ink); font-weight: 600; box-shadow: var(--u2b-raise); }
body.u2b-ui .u2br .u2br-tab { font-weight: 500; color: var(--u2b-muted); border-bottom-width: 2px; }
body.u2b-ui .u2br .u2br-tab[aria-selected="true"] { color: var(--u2b-ink); font-weight: 600; border-bottom-color: var(--u2b-ink); }
body.u2b-ui .u2br .u2br-tab:hover { color: var(--u2b-ink); }

/* Buttons in panels */
body.u2b-ui :is(.s4-btn, .u2br .u2br-btn, .u2bb-btn) {
    border: 0 !important; border-radius: var(--u2b-r-sm) !important; min-height: 40px; font-weight: 600 !important;
    box-shadow: var(--u2b-raise);
    transition-property: background-color, box-shadow, transform; transition-duration: .15s;
}
body.u2b-ui :is(.s4-btn, .u2br .u2br-btn, .u2bb-btn):active { transform: scale(.96); }
body.u2b-ui :is(.s4-btn--accent, .u2bb-btn:not(.u2bb-btn--ghost)) { background: var(--u2b-lime) !important; color: var(--u2b-lime-ink) !important; filter: none !important; }
body.u2b-ui :is(.s4-btn--accent, .u2bb-btn:not(.u2bb-btn--ghost)):hover { background: var(--u2b-lime-hover) !important; }

/* Inputs in panels */
body.u2b-ui :is(.s4-date, .s4-select, .u2br .u2br-field input, .u2br .u2br-field select, .u2br .u2br-search input, .u2br .u2br-search select, .u2bb input[type="text"], .u2bb input[type="password"], .u2bb select) {
    border: 1px solid var(--u2b-line-strong) !important; border-radius: var(--u2b-r-sm) !important; min-height: 40px; box-shadow: none !important;
}

/* Tables in panels: sentence-case header on white, hairline rows */
body.u2b-ui .s4-panel table.dataTable thead th {
    background: var(--u2b-surface) !important; color: var(--u2b-muted) !important;
    font-size: var(--u2b-fs-label) !important; font-weight: 500 !important;
    border-bottom: 1px solid var(--u2b-line) !important; padding-top: 12px; padding-bottom: 12px;
}
body.u2b-ui .s4-panel table.dataTable tbody tr:hover td { background: var(--u2b-surface-2); }
body.u2b-ui .s4-panel table.dataTable tbody tr.s4-refund td { background: var(--u2b-warn-bg); }
body.u2b-ui .u2br-table th { font-size: var(--u2b-fs-label); font-weight: 500; }
body.u2b-ui .s4-spin { border-top-color: var(--u2b-ink); }

/* Group rows (payouts, Z-reports) */
body.u2b-ui .s4-panel .payout-row { background: var(--u2b-surface); color: var(--u2b-ink); }
body.u2b-ui .s4-panel .payout-row td { background: transparent !important; color: var(--u2b-ink); font-weight: 600; border-left: 0 !important; border-right: 0 !important; border-bottom: 1px solid var(--u2b-line) !important; }
body.u2b-ui .s4-panel .payout-row:hover { background: var(--u2b-surface-2); }
body.u2b-ui .s4-panel .payout-row.expanded { background: var(--u2b-surface-2); }
body.u2b-ui .s4-panel table.dataTable tbody tr.payout-row td[data-label]::before { color: var(--u2b-muted); }
body.u2b-ui .s4-panel .toggle-icon { width: 22px; height: 22px; border-radius: var(--u2b-r-xs); background: var(--u2b-surface-2); color: var(--u2b-ink); box-shadow: var(--u2b-ring); font-weight: 600; }
body.u2b-ui .s4-panel .detail-row td,
body.u2b-ui .s4-panel .detail-row > td { background: var(--u2b-surface-2); }
body.u2b-ui .u2bz-sec__title { border-bottom-color: var(--u2b-ink); }

/* Status pills → semantic badges */
body.u2b-ui .u2bz-pill { font-weight: 600 !important; padding: 3px 9px; font-size: 12.5px; }
body.u2b-ui .u2bz-pill--ok { background: var(--u2b-good-bg); color: var(--u2b-good); }
body.u2b-ui .u2bz-pill--open { background: var(--u2b-warn-bg); color: var(--u2b-warn); }
body.u2b-ui .u2bz-job__status { font-weight: 600 !important; font-size: 12.5px; }
body.u2b-ui .u2bz-job__status--done { background: var(--u2b-good-bg); color: var(--u2b-good); }
body.u2b-ui .u2bz-job__status--run { background: var(--u2b-warn-bg); color: var(--u2b-warn); }
body.u2b-ui .u2bz-job__status--err { background: var(--u2b-bad-bg); color: var(--u2b-bad); }
body.u2b-ui .u2bz-job__bar span { background: var(--u2b-pine-700); }
body.u2b-ui .u2bz-fig { border: 0; background: var(--u2b-surface-2); }

/* Menus */
body.u2b-ui :is(.s4-menu, .u2br-menu__list) { border: 0 !important; border-radius: var(--u2b-r-md) !important; box-shadow: var(--u2b-pop) !important; }
body.u2b-ui .s4-menu a:hover, body.u2b-ui .u2br .u2br-menu__list button:hover { background: var(--u2b-surface-2); }

/* Salgsrapport details */
body.u2b-ui .u2br-row__bar i { background: var(--u2b-pine-600); }
body.u2b-ui .u2br-progress i { background: var(--u2b-pine-700); }
body.u2b-ui .u2br-hl { background: var(--u2b-surface-2); border: 0; }
body.u2b-ui .u2br-legend i { background: var(--u2b-pine-700); }

/* 7. LEGACY PIECES ========================================================= */

/* Company switcher (header template, staff accounts) */
body.u2b-ui-app #uicore-tb-header { position: relative; z-index: 5; background: transparent; }
body.u2b-ui-app #uicore-tb-header .elementor-container { max-width: none !important; }
body.u2b-ui-app #uicore-tb-header .elementor-widget-wrap { padding: 0 !important; }
body.u2b-ui-app #uicore-tb-header .elementor-section { margin: 0 clamp(16px, 3vw, 44px); padding: 18px 0 0 !important; }
body.u2b-ui .shift4-picker-wrapper {
    display: flex !important; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 !important; padding: 8px 8px 8px 14px !important;
    background: var(--u2b-surface) !important; border: 0 !important; border-radius: var(--u2b-r-md) !important; box-shadow: var(--u2b-raise);
}
body.u2b-ui .shift4-picker-label { display: inline-flex !important; margin: 0 !important; font-size: var(--u2b-fs-label) !important; font-weight: 500 !important; color: var(--u2b-muted); }
body.u2b-ui .shift4-company-select {
    flex: 1 1 240px; max-width: 380px !important; height: 40px; margin: 0 !important; padding: 0 12px !important;
    font: 500 14px var(--u2b-font) !important; color: var(--u2b-ink);
    background-color: var(--u2b-surface) !important; border: 1px solid var(--u2b-line-strong) !important; border-radius: var(--u2b-r-sm) !important;
}
body.u2b-ui .shift4-picker-submit {
    min-height: 40px; padding: 0 16px !important; text-transform: none !important; letter-spacing: 0 !important;
    font: 600 14px var(--u2b-font) !important; color: #fff !important;
    background: var(--u2b-ink) !important; border: 0 !important; border-radius: var(--u2b-r-sm) !important;
    transition-property: background-color, transform; transition-duration: .15s;
}
body.u2b-ui .shift4-picker-submit:hover { background: var(--u2b-pine-800) !important; }
body.u2b-ui .shift4-picker-submit:active { transform: scale(.96); }
@media (max-width: 760px) {
    body.u2b-ui-app #uicore-tb-header .elementor-section { margin: 0 16px; padding-top: 14px !important; }
    body.u2b-ui .shift4-company-select { max-width: none !important; }
}

/* POS sales table (DataTables) inside the new page */
body.u2b-ui .u2b-pos__table #shift4-sales-table { margin: 0; overflow-x: auto; overscroll-behavior-x: contain; }
body.u2b-ui #shift4-sales-table .dataTables_wrapper { padding: 0 0 8px; }
body.u2b-ui #shift4-sales-table table.dataTable {
    width: 100% !important; margin: 0 !important; border: 0 !important; border-collapse: collapse;
    font: 400 14px var(--u2b-font);
}
body.u2b-ui #shift4-sales-table table.dataTable td:not(.s4-col-created) { font-variant-numeric: tabular-nums; }
body.u2b-ui #shift4-sales-table table.dataTable thead th {
    padding: 10px 14px !important;
    font-size: var(--u2b-fs-label) !important; font-weight: 500 !important; line-height: 1.3;
    white-space: nowrap; text-align: right;
    color: var(--u2b-muted) !important; background-color: var(--u2b-surface-2) !important;
    border: 0 !important; border-top: 1px solid var(--u2b-line) !important; border-bottom: 1px solid var(--u2b-line) !important;
}
body.u2b-ui #shift4-sales-table table.dataTable tbody td {
    padding: 11px 14px !important; text-align: right; white-space: nowrap;
    color: var(--u2b-ink); background: transparent !important;
    border: 0 !important; border-bottom: 1px solid var(--u2b-line) !important; vertical-align: middle;
}
body.u2b-ui #shift4-sales-table table.dataTable :is(th, td):is(.s4-col-voucher, .s4-col-created, .s4-col-seller, .s4-col-store) { text-align: left; }
body.u2b-ui #shift4-sales-table table.dataTable td.s4-col-total { font-weight: 600; }
body.u2b-ui .u2b-pos__table #shift4-sales-table table.dataTable :is(td, th).s4-col-store { display: none; }
body.u2b-ui #shift4-sales-table table.dataTable td:is(.s4-col-created, .s4-col-seller, .s4-col-refund) { color: var(--u2b-ink-2); }
body.u2b-ui #shift4-sales-table table.dataTable tbody tr:hover td { background: var(--u2b-surface-2) !important; }
body.u2b-ui #shift4-sales-table table.dataTable tbody tr { background: transparent !important; }

/* Receipt number: a link-styled button, no chip, no arrow */
body.u2b-ui #shift4-sales-table .s4-bilag-link {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 !important;
    font: 600 14px var(--u2b-font) !important; letter-spacing: 0 !important; text-transform: none !important;
    color: var(--u2b-ink) !important; background: transparent !important; border: 0 !important; box-shadow: none !important;
    text-decoration: underline; text-decoration-color: var(--u2b-line-strong); text-underline-offset: 4px;
    transition-property: text-decoration-color; transition-duration: .15s;
}
body.u2b-ui #shift4-sales-table .s4-bilag-link:hover { text-decoration-color: var(--u2b-ink); }

/* DataTables chrome */
body.u2b-ui .dataTables_wrapper :is(.dataTables_length, .dataTables_filter, .dataTables_info) { padding: 12px 16px 0; font: 400 13px var(--u2b-font); color: var(--u2b-muted); }
body.u2b-ui .dataTables_wrapper .dataTables_paginate { padding: 14px 16px 6px; display: flex; align-items: center; justify-content: flex-end; gap: 4px; flex-wrap: wrap; float: none; text-align: right; }
body.u2b-ui .dataTables_wrapper .dataTables_paginate > span { display: inline-flex; gap: 4px; flex-wrap: wrap; }
body.u2b-ui .dataTables_wrapper .dataTables_paginate .paginate_button {
    min-width: 36px; height: 36px; margin: 0 !important; padding: 0 12px !important;
    display: inline-flex !important; align-items: center; justify-content: center;
    font: 500 13.5px var(--u2b-font) !important; color: var(--u2b-ink-2) !important;
    background: transparent !important; border: 0 !important; border-radius: var(--u2b-r-sm) !important; box-shadow: none !important;
}
body.u2b-ui .dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--u2b-surface-2) !important; color: var(--u2b-ink) !important; }
body.u2b-ui .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.u2b-ui .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { color: var(--u2b-ink) !important; font-weight: 700 !important; background: var(--u2b-surface) !important; box-shadow: var(--u2b-raise) !important; }
body.u2b-ui .dataTables_wrapper .dataTables_paginate .paginate_button.disabled { opacity: .4; }

/* Receipt lines modal */
body.u2b-ui #s4-modal-backdrop { background: rgba(11, 32, 22, .45); }
body.u2b-ui #s4-modal { border-radius: var(--u2b-r-lg); box-shadow: var(--u2b-pop); font-family: var(--u2b-font); overscroll-behavior: contain; }
body.u2b-ui .s4-modal-header { padding: 14px 16px 14px 20px; background: var(--u2b-surface); border-bottom: 1px solid var(--u2b-line); }
body.u2b-ui #s4-modal-title { font-size: var(--u2b-fs-title); color: var(--u2b-ink); }
body.u2b-ui #s4-modal-title strong { font-weight: 600; }
body.u2b-ui .s4-modal-header .s4-actions { display: flex; align-items: center; gap: 6px; }
body.u2b-ui .s4-modal-header .s4-actions .button {
    min-height: 36px; margin: 0 !important; padding: 0 12px !important; display: inline-flex; align-items: center;
    font: 600 13.5px var(--u2b-font) !important; letter-spacing: 0; text-transform: none;
    color: var(--u2b-ink) !important; background: var(--u2b-surface) !important; border: 0 !important; border-radius: var(--u2b-r-sm) !important; box-shadow: var(--u2b-raise);
}
body.u2b-ui .s4-modal-header .s4-actions .button:hover { background: var(--u2b-surface-2) !important; }
body.u2b-ui #s4-modal-close { width: 36px; height: 36px; border-radius: var(--u2b-r-sm); color: var(--u2b-ink-2); }
body.u2b-ui #s4-modal-close:hover { background: var(--u2b-surface-2); }
body.u2b-ui .s4-lines-table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
body.u2b-ui .s4-lines-table th,
body.u2b-ui .s4-lines-table td { border: 0; border-bottom: 1px solid var(--u2b-line); padding: 10px 12px; font-size: 13.5px; }
body.u2b-ui .s4-lines-table thead th { background: var(--u2b-surface); color: var(--u2b-muted); font-size: var(--u2b-fs-label); font-weight: 500; }
body.u2b-ui .s4-lines-table .s4-totals td { background: var(--u2b-surface-2); font-weight: 600; }

/* Old date-range popup (Terminal Z-report page) */
body.u2b-ui .shift4-tx-panel { border-radius: var(--u2b-r-lg); overflow: hidden; box-shadow: var(--u2b-pop); border: 0; font-family: var(--u2b-font); }
body.u2b-ui .shift4-tx-sidebar-item { border-radius: var(--u2b-r-xs); }
body.u2b-ui .shift4-tx-sidebar-item.active { background: var(--u2b-ink) !important; color: #fff !important; }
body.u2b-ui .shift4-tx-btn-apply { background: var(--u2b-lime) !important; color: var(--u2b-lime-ink) !important; border-color: var(--u2b-lime) !important; }
body.u2b-ui :is(.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange) { background: var(--u2b-ink) !important; border-color: var(--u2b-ink) !important; color: #fff !important; }
body.u2b-ui .flatpickr-day.inRange { background: var(--u2b-surface-2) !important; border-color: var(--u2b-surface-2) !important; box-shadow: -5px 0 0 var(--u2b-surface-2), 5px 0 0 var(--u2b-surface-2) !important; }

/* 8. LOGIN ================================================================= */
body.u2b-ui-auth { background: var(--u2b-canvas); }
body.u2b-ui-auth :is(.uicore-animation-bg, .ui-cursor) { display: none !important; }

body.u2b-ui-auth.um-page-login .elementor-top-section { min-height: 100vh; background: var(--u2b-canvas) !important; }
body.u2b-ui-auth.um-page-login .elementor-top-section > .elementor-container { min-height: 100vh; max-width: none; }
body.u2b-ui-auth.um-page-login .elementor-top-section > .elementor-container > .elementor-column:first-child {
    width: 52% !important; display: flex; align-items: center; justify-content: center; background: transparent !important;
}
body.u2b-ui-auth.um-page-login .elementor-top-section > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap {
    width: 100%; max-width: 400px; margin: 0 !important; padding: 48px 24px !important; justify-content: center;
}
body.u2b-ui-auth.um-page-login .elementor-top-section > .elementor-container > .elementor-column:last-child { display: none !important; }
body.u2b-ui-auth.um-page-login .elementor-inner-section > .elementor-container { max-width: none; }
body.u2b-ui-auth.um-page-login .elementor-inner-section .elementor-widget-wrap { padding: 0 !important; }
body.u2b-ui-auth.um-page-login .elementor-widget-image { margin-bottom: 40px !important; text-align: left; }
body.u2b-ui-auth.um-page-login .elementor-widget-image > .elementor-widget-container { margin: 0 !important; padding: 0 !important; --e-transform-scale: 1 !important; transform: none !important; }
body.u2b-ui-auth.um-page-login .elementor-widget-image img { width: 84px !important; height: auto; }
body.u2b-ui-auth.um-page-login .elementor-widget-heading { margin-bottom: 24px !important; }
body.u2b-ui-auth.um-page-login .elementor-heading-title { font-size: 28px !important; font-weight: 700 !important; letter-spacing: -.02em !important; color: var(--u2b-ink) !important; }
body.u2b-ui-auth.um-page-login .elementor-heading-title::after {
    content: "Brug brugernavnet og adgangskoden, du har fået fra U2B.";
    display: block; margin-top: 8px; font-size: 15px; font-weight: 400; letter-spacing: 0; line-height: 1.5; color: var(--u2b-muted);
}
body.u2b-ui-auth.u2b-lang-en.um-page-login .elementor-heading-title::after { content: "Use the username and password you received from U2B."; }

body.u2b-ui-auth .elementor-login .elementor-field-group { padding: 0 !important; margin-bottom: 16px !important; }
body.u2b-ui-auth :is(.elementor-login .elementor-field-label, .um-field-label label) { display: block; margin-bottom: 6px !important; font: 500 14px var(--u2b-font) !important; color: var(--u2b-ink-2) !important; }
body.u2b-ui-auth :is(.elementor-login .elementor-field, .um-form input[type="text"], .um-form input[type="password"], .um-form input[type="email"]) {
    width: 100%; height: 46px !important; min-height: 46px; padding: 0 14px !important;
    font: 400 15px var(--u2b-font) !important; color: var(--u2b-ink) !important;
    background: var(--u2b-surface) !important; border: 1px solid var(--u2b-line-strong) !important; border-radius: var(--u2b-r-sm) !important; box-shadow: none !important;
    transition-property: border-color; transition-duration: .15s;
}
body.u2b-ui-auth :is(.elementor-login .elementor-field, .um-form input):hover { border-color: var(--u2b-faint) !important; }
body.u2b-ui-auth :is(.elementor-login .elementor-field, .um-form input):focus-visible { outline: 2px solid var(--u2b-ink); outline-offset: 1px; border-color: var(--u2b-ink) !important; }
body.u2b-ui-auth .elementor-login .elementor-remember-me label { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; font: 400 14px var(--u2b-font); color: var(--u2b-ink-2); cursor: pointer; }
body.u2b-ui-auth .elementor-login .elementor-remember-me input { width: 18px; height: 18px; accent-color: var(--u2b-ink); }
body.u2b-ui-auth .elementor-login .elementor-field-type-submit { margin-top: 4px !important; }
body.u2b-ui-auth :is(.elementor-login .elementor-button, .um-form .um-button) {
    width: 100% !important; height: 48px; padding: 0 20px !important;
    font: 600 15px var(--u2b-font) !important; letter-spacing: 0 !important; text-transform: none !important;
    color: var(--u2b-lime-ink) !important; background: var(--u2b-lime) !important;
    border: 0 !important; border-radius: var(--u2b-r-sm) !important; box-shadow: inset 0 0 0 1px rgba(21, 32, 10, .08) !important;
    transition-property: background-color, transform; transition-duration: .15s;
}
body.u2b-ui-auth :is(.elementor-login .elementor-button, .um-form .um-button):hover { background: var(--u2b-lime-hover) !important; }
body.u2b-ui-auth :is(.elementor-login .elementor-button, .um-form .um-button):active { transform: scale(.96); }
body.u2b-ui-auth :is(.elementor-lost-password, .um-form a) {
    display: inline-flex; align-items: center; min-height: 40px;
    font: 500 14px var(--u2b-font) !important; color: var(--u2b-ink-2) !important;
    text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--u2b-line-strong);
}
body.u2b-ui-auth .elementor-lost-password:hover { color: var(--u2b-ink) !important; text-decoration-color: currentColor; }
body.u2b-ui-auth:not(.um-page-login) .um { max-width: 420px !important; margin: 10vh auto !important; padding: 28px 24px !important; background: var(--u2b-surface); border-radius: var(--u2b-r-lg); box-shadow: var(--u2b-raise); }

/* Language switch on the login page */
.u2b-lang--auth { position: fixed; z-index: 20; top: 16px; left: 16px; }
body.u2b-ui-auth.admin-bar .u2b-lang--auth { top: calc(var(--u2b-admin-bar) + 16px); }

/* Side panel: what the portal holds + real support details */
.u2b-auth-panel { display: none; }
body.u2b-ui-auth.um-page-login .u2b-auth-panel {
    position: fixed; z-index: 2; top: 16px; right: 16px; bottom: 16px; width: calc(48% - 16px);
    display: flex; flex-direction: column; justify-content: flex-end; gap: 28px;
    padding: clamp(28px, 4vw, 56px);
    overflow-y: auto;
    border-radius: 24px;
    background: var(--u2b-pine-900);
    color: #fff;
}
body.u2b-ui .u2b-auth-panel__title { max-width: 440px; margin: 0; font: 700 clamp(26px, 2.4vw, 34px)/1.15 var(--u2b-font); letter-spacing: -.025em; color: #fff; }
.u2b-auth-panel__support { max-width: 440px; padding: 20px; border-radius: 14px; background: rgba(255, 255, 255, .06); }
body.u2b-ui .u2b-auth-panel__support h3 { margin: 0 0 4px; font: 600 16px var(--u2b-font); color: #fff; }
body.u2b-ui .u2b-auth-panel__support p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.u2b-auth-panel__support ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.u2b-auth-panel__support li { display: flex; align-items: center; gap: 10px; min-height: 32px; font-size: 14.5px; color: #fff; user-select: text; }
.u2b-auth-panel__support .u2b-ico { flex: none; color: rgba(255, 255, 255, .6); }
.u2b-auth-panel__support a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 3px; }
.u2b-auth-panel__support a:hover { text-decoration-color: #fff; }
.u2b-auth-panel :focus-visible { outline-color: var(--u2b-lime) !important; }

@media (max-width: 960px) {
    body.u2b-ui-auth.um-page-login .elementor-top-section > .elementor-container { flex-direction: column; }
    body.u2b-ui-auth.um-page-login .elementor-top-section > .elementor-container > .elementor-column:first-child { width: 100% !important; }
    body.u2b-ui-auth.um-page-login .elementor-top-section,
    body.u2b-ui-auth.um-page-login .elementor-top-section > .elementor-container { min-height: 0; }
    body.u2b-ui-auth.um-page-login .elementor-top-section > .elementor-container > .elementor-column:first-child > .elementor-widget-wrap { padding: 72px 20px 32px !important; }
    body.u2b-ui-auth.um-page-login .u2b-auth-panel {
        position: static; width: auto; margin: 0 16px 16px; gap: 24px; padding: 28px 22px; border-radius: 20px;
    }
}