/*
Theme Name: Astra Child
Template: astra
Version: 1.0.0
Description: Child theme for Trainrr, built on Astra.
Author: Trainrr
*/

/* =============================================================
   TRAINRR CUSTOM CSS
   Overført fra WordPress Customizer (custom_css post ID 17).
   Redigér kun her — aldrig i Customizer når child theme er aktivt.
   ============================================================= */

/* =============================================================
   DESIGN TOKENS — Centraliseret farvesystem, spacing, typografi
   ============================================================= */
:root {
    /* Farver — Primær */
    --color-primary: #2C3D33;
    --color-primary-dark: #1a2e23;
    --color-primary-hover: #3b5247;
    --color-primary-light: #f0f5f2;
    --color-primary-muted: #e4ebe7;
    --color-accent: #4ADE80;

    /* Farver — Tekst */
    --color-text: #1c1e21;
    --color-text-secondary: #4b5563;
    --color-text-tertiary: #6b7280;
    --color-text-disabled: #9ca3af;
    --color-text-inverse: #ffffff;

    /* Farver — Baggrunde */
    --color-bg: #ffffff;
    --color-bg-secondary: #f8faf9;
    --color-bg-tertiary: #f0f2f5;
    --color-bg-hover: #f5f7f6;

    /* Farver — Borders */
    --color-border: #e4ebe7;
    --color-border-strong: #d0d9d3;
    --color-border-subtle: #eef1ef;
    --color-border-light: #f0f2f5;
    --color-border-input: #e4e6eb;

    /* Farver — Semantisk */
    --color-success: #16a34a;
    --color-success-bg: #f0fdf4;
    --color-success-bg-muted: #E8F5E9;
    --color-warning: #d97706;
    --color-warning-bg: #fffbeb;
    --color-warning-bg-muted: #FFF8E1;
    --color-danger: #dc2626;
    --color-danger-bg: #fef2f2;
    --color-info: #2563eb;
    --color-info-bg: #eff6ff;

    /* Spacing — 8px grid */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* Typografi */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 17px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 30px;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-full: 50%;
    --radius-pill: 999px;

    /* Shadows — elevation scale */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.10);
    --shadow-xl: 0 16px 40px rgba(0,0,0,0.14);
    --shadow-focus: 0 0 0 3px rgba(44, 61, 51, 0.15);
    --shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.15);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* =============================================================
   GLOBAL RESETS & POLISH
   ============================================================= */

/* Focus-visible — tilgængelig fokusring for alle interaktive elementer */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Selection-farve */
::selection {
    background: rgba(44, 61, 51, 0.15);
    color: var(--color-text);
}

/* Smooth scroll (respektér reduced motion) */
html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Scrollbar-styling (Webkit) */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: var(--radius-pill); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-tertiary); }

/* Skeleton loading — shimmer placeholder for async content */
.tr-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}
.tr-skeleton * {
    visibility: hidden;
}
.tr-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 100%
    );
    animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.tr-skeleton--text {
    height: 14px;
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-2);
}
.tr-skeleton--text-sm {
    height: 10px;
    width: 60%;
    border-radius: var(--radius-sm);
}
.tr-skeleton--avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
}
.tr-skeleton--card {
    height: 120px;
    border-radius: var(--radius-lg);
}
.tr-skeleton--btn {
    height: 40px;
    width: 120px;
    border-radius: var(--radius-md);
}

/* -------------------------------------------------------
   CUSTOM HEADER — Rolle-baseret navigation
   ------------------------------------------------------- */

/* Skjul Elementor header */
.elementor-location-header,
header.elementor-element {
    display: none !important;
}

/* Fullwidth sider (community, roadmap) — fjern Astra flex/container begrænsning */
.tr-fullwidth-page .site-content .ast-container {
    display: block !important;
    max-width: 100% !important;
    padding: 0 !important;
}

.tr-fullwidth-page #primary,
.tr-fullwidth-page .content-area {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.tr-fullwidth-page .entry-content {
    margin: 0 !important;
}

.tr-fullwidth-page .entry-header {
    display: none !important;
}

.tr-fullwidth-page article {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

.tr-fullwidth-page .elementor-element,
.tr-fullwidth-page .elementor,
.tr-fullwidth-page .e-con,
.tr-fullwidth-page .e-con-inner,
.tr-fullwidth-page .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

.tr-fullwidth-page .ast-separate-container .ast-article-single {
    padding: 0 !important;
    background: transparent !important;
}

.tr-header {
    position: sticky;
    top: 0;
    z-index: 99999;
    background: linear-gradient(135deg, #1a2e23 0%, #2C3D33 50%, #1f332a 100%);
    width: 100%;
    box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.tr-header__inner {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 32px;
    height: 60px;
    display: flex;
    align-items: center;
    gap: var(--space-6);
}

/* Logo */
.tr-header__logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: 18px;
    font-weight: var(--font-bold);
    letter-spacing: 0.18em;
    color: var(--color-text-inverse);
    text-decoration: none;
    flex: 1;
    min-width: 0;
}

.tr-header__logo:hover {
    color: var(--color-text-inverse);
    text-decoration: none;
}

/* Logo ikon — dumbbell/fitness */
.tr-header__logo::before {
    content: "";
    display: block;
    width: 26px;
    height: 26px;
    background: #4ADE80;
    border-radius: 7px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.57 14.86L22 13.43 20.57 12 17 15.57 8.43 7 12 3.43 10.57 2 9.14 3.43 7.71 2 5.57 4.14 4.14 2.71 2.71 4.14l1.43 1.43L2 7.71l1.43 1.43L2 10.57 3.43 12 7 8.43 15.57 17 12 20.57 13.43 22l1.43-1.43L16.29 22l2.14-2.14 1.43 1.43 1.43-1.43-1.43-1.43L22 16.29z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.57 14.86L22 13.43 20.57 12 17 15.57 8.43 7 12 3.43 10.57 2 9.14 3.43 7.71 2 5.57 4.14 4.14 2.71 2.71 4.14l1.43 1.43L2 7.71l1.43 1.43L2 10.57 3.43 12 7 8.43 15.57 17 12 20.57 13.43 22l1.43-1.43L16.29 22l2.14-2.14 1.43 1.43 1.43-1.43-1.43-1.43L22 16.29z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Navigation */
.tr-header__nav {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
    justify-content: center;
}

.tr-header__link {
    padding: var(--space-2) var(--space-5);
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
    letter-spacing: 0.01em;
}

.tr-header__link:hover {
    color: var(--color-text-inverse);
    background: rgba(255,255,255,0.08);
    text-decoration: none;
    text-shadow: 0 0 12px rgba(255,255,255,0.4);
}

/* Aktiv side indikator */
.tr-header__link.is-active {
    color: var(--color-text-inverse);
    background: rgba(74, 222, 128, 0.12);
    box-shadow: inset 0 -2px 0 #4ADE80;
}

/* Link ikoner (emoji) */
.tr-header__link-icon {
    margin-right: 5px;
    font-size: 15px;
    line-height: 1;
}

/* "Mere" dropdown */
.tr-header__more {
    position: relative;
}

.tr-header__more-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-family: inherit;
}

.tr-header__more-arrow {
    transition: transform 0.2s;
    opacity: 0.7;
}

.tr-header__more.is-open .tr-header__more-arrow {
    transform: rotate(180deg);
}

.tr-header__more-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-4px);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 200px;
    padding: var(--space-2);
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.tr-header__more.is-open .tr-header__more-dropdown {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.tr-header__more-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}

.tr-header__more-item:hover {
    background: var(--color-bg-tertiary);
    text-decoration: none;
    color: var(--color-text);
}

.tr-header__more-item.is-active {
    background: rgba(44, 61, 51, 0.08);
    color: var(--color-primary);
    font-weight: 600;
}

.tr-header__more-icon {
    font-size: 16px;
    line-height: 1;
}

/* Mobil sekundær sektion — skjult på desktop */
.tr-header__mobile-secondary {
    display: none;
}

.tr-header__mobile-sep {
    height: 1px;
    background: rgba(255,255,255,0.15);
    margin: var(--space-2) 0;
}

/* Profil dropdown — navn og rolle */
.tr-header__dropdown-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
}

.tr-header__dropdown-role {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-secondary);
    line-height: 1.3;
}

/* Logout styling */
.tr-header__dropdown-item--logout {
    color: #dc2626;
}

.tr-header__dropdown-item--logout:hover {
    background: #fef2f2;
    color: #dc2626;
}

/* Højre side */
.tr-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: 1;
    justify-content: flex-end;
    min-width: 0;
}

/* Ikon-links */
.tr-header__icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.tr-header__icon:hover {
    color: var(--color-text-inverse);
    background: rgba(255,255,255,0.1);
    filter: drop-shadow(0 0 8px rgba(255,255,255,0.3));
}

.tr-header__badge {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 17px;
    height: 17px;
    background: #EF4444;
    color: var(--color-text-inverse);
    font-size: 10px;
    font-weight: 700;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    border: 2px solid #2C3D33;
}

/* Profil dropdown */
.tr-header__profile {
    position: relative;
    margin-left: 4px;
}

.tr-header__avatar-btn {
    background: none;
    border: none;
    padding: 4px 8px 4px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-radius: 24px;
    transition: background 0.2s;
}

.tr-header__avatar-btn:hover {
    background: rgba(255,255,255,0.08);
}

.tr-header__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.3);
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.tr-header__avatar-btn:hover .tr-header__avatar {
    border-color: rgba(255,255,255,0.6);
    box-shadow: 0 0 10px rgba(255,255,255,0.2);
}

.tr-header__name {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.85);
    margin-right: 8px;
    white-space: nowrap;
}

.tr-header__avatar-btn:hover .tr-header__name {
    color: var(--color-text-inverse);
}

.tr-header__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    min-width: 240px;
    padding: var(--space-2);
    z-index: 100;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity var(--transition-base), transform var(--transition-base);
}

.tr-header__profile.is-open .tr-header__dropdown {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.tr-header__dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    transition: background 0.15s;
}

.tr-header__dropdown-item:hover {
    background: var(--color-bg-tertiary);
    text-decoration: none;
    color: var(--color-text);
}

.tr-header__dropdown-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.tr-header__dropdown-sep {
    height: 1px;
    background: var(--color-border-input);
    margin: var(--space-1) 0;
}

/* Login / Signup knapper */
.tr-header__login {
    padding: var(--space-2) var(--space-5);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-inverse);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.tr-header__login:hover {
    background: rgba(255,255,255,0.1);
    color: var(--color-text-inverse);
    text-decoration: none;
}

.tr-header__signup {
    padding: var(--space-2) var(--space-5);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: opacity 0.15s;
}

.tr-header__signup:hover {
    opacity: 0.9;
    color: var(--color-primary);
    text-decoration: none;
}

/* Hamburger (mobil) */
.tr-header__hamburger {
    display: none;
    flex-direction: column;
    gap: var(--space-1);
    background: none;
    border: none;
    padding: var(--space-2);
    cursor: pointer;
}

.tr-header__hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--color-bg);
    border-radius: 2px;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.tr-header__hamburger.is-open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.tr-header__hamburger.is-open span:nth-child(2) {
    opacity: 0;
}

.tr-header__hamburger.is-open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ── Mobil responsiv ── */
@media (max-width: 768px) {
    .tr-header__inner {
        padding: 0 16px;
    }

    .tr-header__nav {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-primary);
        flex-direction: column;
        padding: var(--space-6);
        gap: var(--space-1);
        justify-content: flex-start;
        align-items: stretch;
        z-index: 99998;
        overflow-y: auto;
    }

    .tr-header__nav.is-open {
        display: flex;
    }

    .tr-header__link {
        font-size: 18px;
        padding: var(--space-4) var(--space-4);
        color: var(--color-text-inverse);
    }

    .tr-header__link.is-active {
        background: rgba(74, 222, 128, 0.15);
        box-shadow: inset 3px 0 0 #4ADE80;
    }

    .tr-header__link-icon {
        font-size: 18px;
        margin-right: 8px;
    }

    /* Skjul "Mere" dropdown på mobil — vis sekundære links direkte */
    .tr-header__more {
        display: none;
    }

    .tr-header__mobile-secondary {
        display: block;
    }

    .tr-header__hamburger {
        display: flex;
        margin-left: auto;
    }

    .tr-header__actions {
        margin-right: 12px;
    }

    .tr-header__name {
        display: none;
    }

    .tr-header__dropdown {
        right: -16px;
        min-width: 220px;
    }
}

/* -------------------------------------------------------
   LOGIN & REGISTER — Moderne auth-sider
   ------------------------------------------------------- */

/* Fjern ALLE Astra/Elementor wrappere på auth-sider */
.tr-auth-page .site-content,
.tr-auth-page #content {
    padding: 0 !important;
    margin: 0 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.tr-auth-page .ast-separate-container .site-content > .ast-container {
    padding-top: 0 !important;
}

.tr-auth-page .ast-container {
    max-width: 100% !important;
    padding: 0 !important;
}

.tr-auth-page #primary,
.tr-auth-page .content-area {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
}

.tr-auth-page .entry-content {
    margin: 0 !important;
}

.tr-auth-page .entry-header,
.tr-auth-page .page-header,
.tr-auth-page .ast-archive-description {
    display: none !important;
}

/* Skjul Elementor wrappere — vis kun vores indhold */
.tr-auth-page .elementor-element,
.tr-auth-page .elementor {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

.tr-auth-page .elementor-widget-container {
    padding: 0 !important;
    margin: 0 !important;
}

.tr-auth-page .e-con-inner,
.tr-auth-page .e-con {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* Fjern Astra content wrapper begrænsning */
.tr-auth-page .ast-separate-container .ast-article-single,
.tr-auth-page .ast-plain-container .ast-article-single,
.tr-auth-page article {
    padding: 0 !important;
    background: transparent !important;
    margin: 0 !important;
}

.tr-auth-page .ast-separate-container #primary,
.tr-auth-page .ast-plain-container #primary {
    background: transparent !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* Fjern mellemrum mellem header og hero */
.tr-auth-hero {
    margin-top: 0 !important;
}

/* Hero sektion */
.tr-auth-hero {
    text-align: center;
    padding: 56px 24px 48px;
    background: linear-gradient(135deg, #1a2e23 0%, #2C3D33 50%, #1f332a 100%);
}

.tr-auth-hero__title {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text-inverse);
    margin: 0 0 8px 0;
}

.tr-auth-hero__sub {
    font-size: 16px;
    color: rgba(255,255,255,0.7);
    margin: 0;
}

/* Form-kort */
.tr-auth-card {
    max-width: 460px;
    margin: -24px auto 60px;
    padding: 0 16px;
    position: relative;
    z-index: 1;
}

.tr-auth-card .um {
    background: var(--color-bg) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04) !important;
    padding: 36px 32px !important;
    border: none !important;
}

/* Input-felter */
.tr-auth-card .um .um-field input[type="text"],
.tr-auth-card .um .um-field input[type="password"],
.tr-auth-card .um .um-field input[type="email"],
.tr-auth-card .um .um-field select,
.tr-auth-card .um .um-field textarea {
    border: 1.5px solid #e0e5e2 !important;
    border-radius: var(--radius-lg) !important;
    padding: 14px 16px !important;
    font-size: 15px !important;
    background: var(--color-bg-secondary) !important;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base) !important;
    outline: none !important;
    box-shadow: none !important;
}

.tr-auth-card .um .um-field input:focus,
.tr-auth-card .um .um-field select:focus,
.tr-auth-card .um .um-field textarea:focus {
    border-color: var(--color-primary) !important;
    background: var(--color-bg) !important;
    box-shadow: 0 0 0 3px rgba(44,61,51,0.08) !important;
}

/* Labels */
.tr-auth-card .um .um-field-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--color-primary) !important;
    margin-bottom: var(--space-2) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.tr-auth-card .um .um-field-label label {
    font-weight: 600 !important;
    color: var(--color-primary) !important;
}

/* Submit-knap */
.tr-auth-card .um input[type="submit"],
.tr-auth-card .um .um-button {
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border: none !important;
    border-radius: var(--radius-lg) !important;
    padding: 14px 32px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: 0 2px 8px rgba(44,61,51,0.2) !important;
}

.tr-auth-card .um input[type="submit"]:hover,
.tr-auth-card .um .um-button:hover {
    background: #1a2e23 !important;
    box-shadow: 0 4px 16px rgba(44,61,51,0.3) !important;
    transform: translateY(-1px) !important;
}

/* Links (forgot password, register etc) */
.tr-auth-card .um a {
    color: var(--color-primary) !important;
    font-weight: 500 !important;
    transition: color 0.15s !important;
}

.tr-auth-card .um a:hover {
    color: #1a2e23 !important;
    text-decoration: underline !important;
}

/* Fejlbeskeder */
.tr-auth-card .um .um-field-error {
    color: #E53935 !important;
    font-size: 13px !important;
    margin-top: var(--space-1) !important;
}

/* Checkbox + label — kompakt layout */
.tr-auth-card .um label.um-field-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    cursor: pointer !important;
}

.tr-auth-card .um label.um-field-checkbox .um-field-checkbox-state {
    position: static !important;
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
}

.tr-auth-card .um label.um-field-checkbox .um-field-checkbox-state i {
    font-size: 20px !important;
    line-height: 20px !important;
    height: 20px !important;
}

.tr-auth-card .um label.um-field-checkbox .um-field-checkbox-option {
    margin-left: 6px !important;
    line-height: 20px !important;
    font-size: 14px !important;
}

/* Rolle-vælger på register-formular */
.tr-role-selector {
    margin-bottom: var(--space-4) !important;
}

.tr-role-selector__options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.tr-role-selector__option {
    cursor: pointer;
}

.tr-role-selector__option input[type="radio"] {
    display: none;
}

.tr-role-selector__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    border: 2px solid #e0e5e2;
    border-radius: var(--radius-lg);
    background: var(--color-bg-secondary);
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
    text-align: center;
}

.tr-role-selector__option:hover .tr-role-selector__card {
    border-color: var(--color-primary);
    background: var(--color-bg);
}

.tr-role-selector__option.is-selected .tr-role-selector__card {
    border-color: var(--color-primary);
    background: var(--color-bg);
    box-shadow: 0 0 0 3px rgba(44,61,51,0.1);
}

.tr-role-selector__icon {
    font-size: 28px;
    line-height: 1;
}

.tr-role-selector__label {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
}

.tr-role-selector__desc {
    font-size: 12px;
    color: var(--color-text-secondary);
}

/* Divider / or separator */
.tr-auth-card .um .um-col-alt {
    text-align: center !important;
    padding-top: var(--space-4) !important;
}

/* Responsiv */
@media (max-width: 640px) {
    .tr-auth-card {
        margin: -20px 16px 40px;
    }
    .tr-auth-card .um {
        padding: 28px 20px !important;
        border-radius: var(--radius-xl) !important;
    }
    .tr-auth-hero {
        padding: 36px 20px 28px;
    }
    .tr-auth-hero__title {
        font-size: 26px;
    }
}

/* Skjul WP admin bar overlap */
.admin-bar .tr-header {
    top: 32px;
}

@media (max-width: 768px) {
    .admin-bar .tr-header {
        top: 46px;
    }
}

/* ----- Registreringsformular ----- */
.registerform input,
.registerform textarea,
.registerform select {
  border-radius: var(--radius-lg) !important;
}

.registerform .um-field-label {
  padding-left: 7px;
}

#um-submit-btn {
  background: var(--color-primary) !important; /* grøn */
  color: #ffffff !important;
  border: 2px solid #ffffff !important; /* hvid border */
  border-radius: var(--radius-lg) !important;
  padding: var(--space-4) var(--space-6);
  font-weight: 600;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

#um-submit-btn:hover {
  background: #ffffff !important; /* bliver hvid */
  color: var(--color-primary) !important; /* grøn tekst */
  border: 2px solid #2C3D33 !important; /* grøn border */
}

#um-submit-btn {
  transition: background var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

/* ===================================================================
   TRÆNER PROFILSIDE — Visuelle forbedringer
   =================================================================== */

/* ----- Profil navigation: Facebook-stil (hvid bar, grøn bundlinje) ----- */
.um .um-profile-nav {
    background: var(--color-bg) !important;
    border-radius: 0 !important;
    padding: 0 !important;
    border-bottom: 2px solid #e8eeeb;
}

/* Aktiv tab: grøn bundlinje */
.um .um-profile-nav-item.active a,
.um .um-profile-nav-item.active a:hover {
    color: var(--color-primary) !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid #2C3D33 !important;
    margin-bottom: -2px !important;
}

/* Inaktive tab-links */
.um .um-profile-nav-item a {
    color: var(--color-text-secondary) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 13px 16px !important;
    border-radius: 0 !important;
    transition: color 0.15s, background 0.15s !important;
    border-bottom: 3px solid transparent !important;
}

.um .um-profile-nav-item a:hover {
    color: var(--color-primary) !important;
    background: #f5f8f5 !important;
}

/* ----- Send besked-knap på profilside ----- */
.um-profile a.um-message-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    padding: 9px 20px !important;
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
    box-shadow: none !important;
}

.um-profile a.um-message-btn:hover {
    background: #3f5a4d !important;
    color: var(--color-text-inverse) !important;
}

.um-profile a.um-message-btn:before {
    color: var(--color-text-inverse) !important;
    margin-right: 0 !important;
}

/* ----- Profil: navn og bio ----- */
.um .um-name a {
    color: #1a2e23;
    font-weight: 700;
}

.um .um-meta {
    color: var(--color-text-secondary);
    font-size: 13px;
}

/* ----- Profil tab-indhold: luft og layout ----- */
.um .um-profile-body {
    padding: 24px 0;
}

/* Forløb-grid inde i profiltab:
   Sænker min-width til 220px så 2 kolonner kan passe
   i profilens ~600px brede indholdscontainer */
.um .um-profile-body .forloeb-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-5);
}

/* Lidt mindre billedhøjde på kortene inde i profilen */
.um .um-profile-body .forloeb-item img {
    height: 160px;
}

/* ----- Profil: tom forløb-tilstand ----- */
.um .um-profile-body .forloeb-empty {
    text-align: center;
    color: var(--color-text-secondary);
    padding: 40px 0;
    font-size: 15px;
}


/* ===================================================================
   TRÆNER PROFILSIDE — Poleret "social profile" design
   =================================================================== */

/* ----- Skjul "Request Verification" ----- */
.um-profile .um-verified-info {
    display: none !important;
}

/* ----- Cover: afrundet øverst, flad mod header ----- */
.um-cover.has-cover {
    border-radius: 16px 16px 0 0 !important;
    overflow: hidden;
}

/* ----- Header: tæt på coveret, renere spacing ----- */
.um-profile .um-header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    background: var(--color-bg);
}

/* ----- Profilnavn ----- */
.um-profile .um-name a {
    color: #111 !important;
    font-weight: 800 !important;
    font-size: 28px !important;
    letter-spacing: -0.025em !important;
    line-height: 1.2 !important;
}

/* ----- Meta spans (rolle, sted osv.) ----- */
.um-profile .um-meta {
    margin-top: var(--space-1) !important;
}

.um-profile .um-meta span {
    font-size: 14px !important;
    color: var(--color-text-secondary) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif,
                 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !important;
}

/* Skjul defekte ikon-tegn (????) i meta-spans */
.um-profile .um-meta span i {
    display: none !important;
}

/* ----- Skjul defekte ikoner (????) i feltlabels ----- */
.um-profile .um-field-label i {
    display: none !important;
}

/* ----- Bio/beskrivelse ----- */
.um-profile .um-meta-text {
    font-size: 14px !important;
    color: #444 !important;
    line-height: 1.65 !important;
    margin-top: var(--space-2) !important;
}

/* ----- Profilfoto: overlapper cover, hvid kant + skygge ----- */
.um-profile .um-profile-photo a.um-profile-photo-img {
    border: 4px solid #fff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.15) !important;
}

/* ----- Feltlabels i visningstilstand ----- */
.um-profile.um-viewing .um-field-label {
    font-size: 11px !important;
    color: var(--color-text-tertiary) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    border-bottom: 1px solid #edf2ef !important;
    padding-bottom: var(--space-1) !important;
    margin-bottom: var(--space-1) !important;
}

/* ----- Feltværdier ----- */
.um-profile.um-viewing .um-field-value {
    font-size: 14px !important;
    color: #222 !important;
    line-height: 1.55 !important;
}

/* ----- Navbar (followers-bar + knapper): ingen øvre separator ----- */
.um .um-profile-navbar {
    border-top: none;
    margin-top: 0;
    padding: 0;
    background: var(--color-bg);
}

/* ----- Followers/Following: stats-widget ----- */
.um-profile-navbar .um-followers-bar {
    padding: 10px 0 16px !important;
    border-bottom: 1px solid #e8eeeb;
    margin-bottom: 0;
}

.um-profile-navbar .um-followers-links {
    display: flex !important;
    align-items: stretch !important;
}

.um-profile-navbar .um-followers-rc {
    text-transform: none !important;
}

.um-profile-navbar .um-followers-rc a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 20px 0 0 !important;
    margin-right: 20px !important;
    border-right: 1px solid #e2e9e4 !important;
    text-decoration: none !important;
    color: #777 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1 !important;
    transition: color 0.15s !important;
}

.um-profile-navbar .um-followers-rc:last-child a {
    border-right: none !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
}

/* Tal: stort og markant */
.um-profile-navbar .um-followers-rc a span {
    color: #111 !important;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    display: block !important;
    margin-bottom: var(--space-1) !important;
}

.um-profile-navbar .um-followers-rc a:hover { color: var(--color-primary) !important; }
.um-profile-navbar .um-followers-rc a:hover span { color: var(--color-primary) !important; }
.um-profile-navbar .um-followers-rc a.current span { color: var(--color-primary) !important; }

/* Follow-knap */
.um-profile-navbar a.um-follow-btn,
.um-profile-navbar a.um-login-to-follow-btn {
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border-radius: var(--radius-md) !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    min-width: auto !important;
    letter-spacing: 0 !important;
    transition: background 0.2s !important;
}

.um-profile-navbar a.um-follow-btn:hover,
.um-profile-navbar a.um-login-to-follow-btn:hover {
    background: #3f5a4d !important;
}

.um-profile-navbar a.um-unfollow-btn,
.um-profile-navbar a.um-unfollow-btn2 {
    background: transparent !important;
    color: var(--color-text-secondary) !important;
    border: 1.5px solid #d0d9d3 !important;
    border-radius: var(--radius-md) !important;
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
    min-width: auto !important;
    letter-spacing: 0 !important;
}

.um-profile-navbar a.um-unfollow-btn:hover,
.um-profile-navbar a.um-unfollow-btn2:hover {
    background: #fff5f5 !important;
    color: #c0392b !important;
    border-color: #c0392b !important;
}

/* ----- Profil nav tabs: Facebook-stil, enkelt scrollbar-fri række ----- */
.um .um-profile-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    align-items: stretch !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    gap: 0 !important;
    text-align: left !important;
    padding: 0 !important;
}

.um .um-profile-nav::-webkit-scrollbar {
    display: none;
}

.um .um-profile-nav-item {
    flex-shrink: 0 !important;
}

.um .um-profile-nav-item a {
    float: none;
    white-space: nowrap !important;
    display: inline-flex;
    align-items: center;
    margin-left: 0 !important;
}

/* Skjul ikoner */
.um .um-profile-nav-item i {
    display: none !important;
}

.um .um-profile-nav-item a span.title {
    padding-left: 0 !important;
}

/* Skjul mobile-links på desktop */
.um .um-profile-nav-item a.uimob800-show,
.um .um-profile-nav-item a.uimob500-show,
.um .um-profile-nav-item a.uimob340-show {
    display: none !important;
}

/* ----- Profil body: pæn margin fra nav ----- */
.um-profile .um-profile-body {
    padding-top: var(--space-8) !important;
}


/* ----- Forløb cards (Mine forløb + offentlige) ----- */
.forloeb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-6);
    align-items: stretch;
}

/* ===== Offentlige Forløb cards ===== */
.forloeb-grid > .forloeb-item {
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.forloeb-grid > .forloeb-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    color: inherit;
}

/* ===== Mine forløb ydre card ===== */
.forloeb-admin-card {
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.forloeb-admin-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

/* ===== Nulstil inner link i Mine forløb ===== */
.forloeb-admin-card .forloeb-item {
    display: block;
    text-decoration: none;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    flex: 1 1 auto;
}

.forloeb-admin-card .forloeb-item:hover {
    color: inherit;
    text-decoration: none;
}

/* ===== Fælles indholdsstyling ===== */
.forloeb-item img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

.forloeb-item h4 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    margin: var(--space-4) var(--space-4) var(--space-3);
    color: var(--color-primary);
}

.forloeb-preview {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin: 0 16px 18px;

    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Knapområde i Mine forløb ===== */
.forloeb-admin-actions {
    padding: 0 16px 18px;
    margin-top: auto;
}

.forloeb-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-4);
    background: var(--color-primary);
    color: var(--color-text-inverse) !important;
    border: 1px solid #2C3D33;
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.forloeb-edit-btn:hover {
    background: var(--color-primary-hover);
    border-color: #3b5247;
    color: var(--color-text-inverse) !important;
}

/* ===== Cursor ===== */
.forloeb-grid > .forloeb-item,
.forloeb-grid > .forloeb-item *,
.forloeb-admin-card .forloeb-item,
.forloeb-admin-card .forloeb-item * {
    cursor: pointer;
}

/* ===== Mobil ===== */
@media (max-width: 768px) {
    .forloeb-grid {
        grid-template-columns: 1fr;
    }

    .forloeb-item img {
        height: 220px;
    }
}

/* ===== Full width fix ===== */
.um-profile-body,
.um-tab-content,
.um-col-alt,
.um-col-1 {
    width: 100% !important;
    max-width: 100% !important;
}

/* ----- Pricing / Opret medlemsskab ----- */

/* ===== PRICING SEKTION WRAPPER ===== */
.elementor-element-4827984b {
    max-width: 1240px;
    margin: 0 auto;
    padding: 40px 20px 70px;
}

/* ===== TOP TEKSTER ===== */
.elementor-element-bd9d945 {
    text-align: center;
    margin-bottom: var(--space-8);
}

.elementor-element-5ae69bd .elementor-heading-title {
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--color-primary);
    margin: 0 0 8px;
}

.elementor-element-aec393f .elementor-heading-title {
    font-size: 72px;
    line-height: 1.05;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0;
}

/* ===== KORT WRAPPER ===== */
.elementor-element-d5471d8 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    align-items: stretch;
}

/* ===== SELVE KORTENE ===== */
.elementor-element-6dcac3e,
.elementor-element-74145ec {
    background: rgba(255,255,255,0.92);
    border: 2px solid #2C3D33;
    border-radius: 28px;
    padding: 28px 22px 26px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    backdrop-filter: blur(2px);
    min-height: 100%;
}

/* Lidt mere fokus på gratis-kortet */
.elementor-element-6dcac3e {
    background: rgba(255,255,255,0.92);
    border: 2px solid #2C3D33;
    border-radius: 28px;
    padding: 28px 22px 26px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    backdrop-filter: blur(2px);
    min-height: 100%;
}

/* ===== TITLER I KORT ===== */
.elementor-element-b671044 .elementor-heading-title,
.elementor-element-e8e00b8 .elementor-heading-title {
    font-size: 34px;
    line-height: 1.08;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 8px;
}

/* Undertekst */
.elementor-element-4c388ba,
.elementor-element-82484be,
.elementor-element-f75c8ee {
    color: #5f5f5a;
    font-size: 16px;
    line-height: 1.55;
}

/* ===== PRIS ===== */
.elementor-element-e1ac895 h2,
.elementor-element-aec6d48 h2 {
    font-size: 64px !important;
    line-height: 1;
    font-weight: var(--font-bold);
    color: var(--color-text);
    margin: var(--space-3) 0 var(--space-3) !important;
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.elementor-element-e1ac895 h2 span,
.elementor-element-aec6d48 h2 span {
    font-size: 22px !important;
    line-height: 1.1;
    font-weight: 500 !important;
    color: var(--color-primary);
}

/* ===== KNAPPER ===== */
.elementor-element-31d229a7 .elementor-button,
.elementor-element-6f717dc .elementor-button {
    width: 100%;
    min-height: 58px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 20px !important;
    border-radius: var(--radius-xl);
    background: var(--color-primary) !important;
    border: 2px solid #2C3D33 !important;
    color: var(--color-text-inverse) !important;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1 !important;
    box-shadow: none !important;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}

.elementor-element-31d229a7 .elementor-button:hover,
.elementor-element-6f717dc .elementor-button:hover {
    background: #3c5448 !important;
    border-color: #3c5448 !important;
    transform: translateY(-1px);
}

/* ===== FEATURE CONTENT ===== */
.pricing-card-content {
    margin-top: var(--space-5);
}

.pricing-card-content h3 {
    font-size: 28px;
    line-height: 1.15;
    color: var(--color-text);
    margin: var(--space-6) 0 var(--space-3);
    font-weight: 700;
}

.pricing-card-content p {
    margin: 0 0 12px;
    color: #4f4f4a;
    font-size: 17px;
    line-height: 1.6;
}

.pricing-card-content img.emoji {
    width: 16px !important;
    height: 16px !important;
    vertical-align: -2px;
    margin-right: 8px;
}

/* Begrænsninger lidt mere afdæmpet */
.elementor-element-76525cb .pricing-card-content h3:last-of-type {
    color: var(--color-text);
}

/* ===== GENEREL LUFT MELLEM WIDGETS ===== */
.elementor-element-6dcac3e > .elementor-element,
.elementor-element-74145ec > .elementor-element {
    margin-bottom: var(--space-3);
}

.elementor-element-6dcac3e > .elementor-element:last-child,
.elementor-element-74145ec > .elementor-element:last-child {
    margin-bottom: 0;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    .elementor-element-aec393f .elementor-heading-title {
        font-size: 56px;
    }

    .elementor-element-b671044 .elementor-heading-title,
    .elementor-element-e8e00b8 .elementor-heading-title {
        font-size: 30px;
    }

    .elementor-element-e1ac895 h2,
    .elementor-element-aec6d48 h2 {
        font-size: 52px !important;
    }
}

@media (max-width: 768px) {
    .elementor-element-4827984b {
        padding: 26px 14px 40px;
    }

    .elementor-element-d5471d8 {
        grid-template-columns: 1fr !important;
        gap: var(--space-5);
    }

    .elementor-element-aec393f .elementor-heading-title {
        font-size: 42px;
    }

    .elementor-element-5ae69bd .elementor-heading-title {
        font-size: 18px;
    }

    .elementor-element-b671044 .elementor-heading-title,
    .elementor-element-e8e00b8 .elementor-heading-title {
        font-size: 28px;
    }

    .elementor-element-e1ac895 h2,
    .elementor-element-aec6d48 h2 {
        font-size: 46px !important;
    }

    .pricing-card-content h3 {
        font-size: 24px;
    }

    .pricing-card-content p {
        font-size: 16px;
    }
}

.pricing-card-content h3 {
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  font-size: 15px;
}

.pricing-card-content p {
  margin: 0 0 10px;
  line-height: 1.6;
  font-size: 13px;
}

/* ============================================================
   TRÆNER DASHBOARD  (.tr-dashboard)
   ============================================================ */

/* Lys side-baggrund — træner-dashboard (11255) + klient-dashboard (11256) */
.page-id-11255 .site-content,
.page-id-11255 .content-area,
.page-id-11255 #content,
.page-id-11256 .site-content,
.page-id-11256 .content-area,
.page-id-11256 #content {
    background: #f4f5f2;
}

.page-id-11255 .entry-content,
.page-id-11256 .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* ── Badge på hero-knap (bruges i klient-hero besked-knap) ── */
.tr-btn__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-danger);
    color: var(--color-text-inverse);
    font-size: 11px;
    font-weight: 700;
    padding: 2px var(--space-2);
    border-radius: var(--radius-pill);
    min-width: 18px;
    margin-left: 6px;
    line-height: 1.4;
}

/* ── Onboarding-steps (klient-dashboard) ── */
.tr-onboarding-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.tr-step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    background: var(--color-bg);
    border: 1.5px solid #e8e8e4;
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
}

.tr-step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-size: 16px;
    font-weight: 700;
    border-radius: 50%;
    line-height: 1;
}

.tr-step__content strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-1);
}

.tr-step__content p {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 640px) {
    .tr-onboarding-steps {
        gap: var(--space-3);
    }

    .tr-step {
        padding: var(--space-4) var(--space-4);
    }
}

.tr-dashboard {
    font-family: inherit;
}

/* ── Hero (mørk, full-width) ── */
.tr-dashboard__hero {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    /* Bryder ud af Astras content-container */
    margin-left:  calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: var(--space-12) calc(50vw - 50%) 52px;
}

.tr-dashboard__hero-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.tr-dashboard__title {
    font-size: var(--text-3xl);
    font-weight: var(--font-bold);
    color: var(--color-text-inverse);
    margin: 0 0 var(--space-1);
    line-height: var(--leading-tight);
}

.tr-dashboard__subtitle {
    font-size: 16px;
    color: rgba(255,255,255,0.7);
    margin: 0;
    font-weight: var(--font-normal);
}

.tr-dashboard__hero-actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* ── Body (lys baggrund under hero) ── */
.tr-dashboard__body {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-10) var(--space-6) 80px;
}

/* Completion banner */
.tr-dashboard__banner {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-8);
}

.tr-dashboard__banner--warning {
    background: var(--color-warning-bg);
    border: 1.5px solid var(--color-warning);
}

.tr-dashboard__banner-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.tr-dashboard__banner strong {
    display: block;
    font-size: var(--text-md);
    color: var(--color-text);
    margin-bottom: 2px;
}

.tr-dashboard__banner p {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    margin: 0;
}

/* Quick action cards */
.tr-dashboard__actions {
    display: flex;
    gap: var(--space-4);
    margin-bottom: var(--space-12);
    flex-wrap: wrap;
}

.tr-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-6);
    background: var(--color-bg);
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-lg);
    text-decoration: none;
    color: var(--color-primary);
    font-weight: var(--font-semibold);
    font-size: var(--text-md);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    min-width: 130px;
    box-shadow: var(--shadow-sm);
}

.tr-action-card--primary {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.tr-action-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    color: var(--color-primary);
}

.tr-action-card--primary:hover {
    background: var(--color-primary-hover);
    color: var(--color-text-inverse);
}

.tr-action-card__icon {
    font-size: 22px;
    line-height: 1;
    position: relative;
    display: inline-flex;
}

.tr-action-card__label {
    line-height: 1;
}

/* Ulæst-badge på besked-kort */
.tr-action-card__badge {
    position: absolute;
    top: -6px;
    right: -10px;
    background: var(--color-danger);
    color: var(--color-text-inverse);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 3px var(--space-2);
    border-radius: var(--radius-pill);
    min-width: 18px;
    text-align: center;
}

/* Section */
.tr-dashboard__section {
    margin-bottom: var(--space-12);
}

.tr-dashboard__section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}

.tr-dashboard__section-title {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: var(--color-text);
    margin: 0;
}

/* Empty state */
.tr-dashboard__empty {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    background: var(--color-bg-secondary);
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
}

.tr-dashboard__empty p {
    font-size: 16px;
    margin-bottom: var(--space-5);
}

/* Shared buttons */
.tr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    cursor: pointer;
    border: 1.5px solid transparent;
    box-shadow: var(--shadow-xs);
}

.tr-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.tr-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

.tr-btn--primary {
    background: var(--color-primary);
    color: var(--color-text-inverse) !important;
    border-color: var(--color-primary);
}

.tr-btn--primary:hover {
    background: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.tr-btn--outline {
    background: transparent;
    color: var(--color-primary) !important;
    border-color: var(--color-border-strong);
    box-shadow: none;
    white-space: nowrap;
}

.tr-btn--outline:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse) !important;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* Hvid knap — bruges i hero på mørk baggrund */
.tr-btn--white {
    background: var(--color-bg);
    color: var(--color-primary) !important;
    border-color: var(--color-bg);
    font-weight: var(--font-bold);
}

.tr-btn--white:hover {
    background: var(--color-bg-tertiary);
    border-color: var(--color-bg-tertiary);
    transform: translateY(-1px);
}

/* Ghost knap — bruges i hero, transparent med hvid kant */
.tr-btn--ghost {
    background: transparent;
    color: var(--color-text-inverse) !important;
    border-color: rgba(255,255,255,0.5);
    box-shadow: none;
}

.tr-btn--ghost:hover {
    background: rgba(255,255,255,0.12);
    border-color: var(--color-text-inverse);
}

/* Danger knap — destruktive handlinger */
.tr-btn--danger {
    background: var(--color-danger);
    color: var(--color-text-inverse) !important;
    border-color: var(--color-danger);
}

.tr-btn--danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.tr-btn--danger:focus-visible {
    box-shadow: var(--shadow-focus-danger);
}

/* Secondary knap — subtil baggrund */
.tr-btn--secondary {
    background: var(--color-primary-light);
    color: var(--color-primary) !important;
    border-color: transparent;
    box-shadow: none;
}

.tr-btn--secondary:hover {
    background: var(--color-primary-muted);
}

.tr-btn--sm {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
}

.tr-btn--lg {
    padding: var(--space-4) var(--space-8);
    font-size: 16px;
    border-radius: var(--radius-md);
}

/* Responsive */
@media (max-width: 640px) {
    .tr-dashboard__hero {
        padding-top: var(--space-8);
        padding-bottom: var(--space-10);
    }

    .tr-dashboard__hero-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .tr-dashboard__body {
        padding: 24px 16px 60px;
    }

    .tr-dashboard__title {
        font-size: 26px;
    }

    .tr-dashboard__actions {
        gap: var(--space-3);
    }

    .tr-action-card {
        flex: 1 1 calc(50% - 6px);
        min-width: 0;
        padding: var(--space-4) var(--space-3);
    }

    .tr-dashboard__banner {
        flex-wrap: wrap;
    }

    .tr-dashboard__section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
}


/* ----- Launch badge (kun 50 pladser) ----- */
.launch-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(44, 61, 51, 0.95);
    color: var(--color-text-inverse);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    line-height: 1;
    margin-bottom: var(--space-4);
    box-shadow: 0 6px 16px rgba(44, 61, 51, 0.18);
}


/* ===================================================================
   GRUPPER — UM Groups: gennemgående visuelt design
   =================================================================== */

/* ----- Hero på Opret gruppe-siden (samme stil som dashboard) ----- */
.tr-groups-hero {
    background: var(--color-primary);
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: 48px calc(50vw - 50%) 52px;
    margin-bottom: var(--space-10);
}

.tr-groups-hero__inner {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}

/* Genbrug dashboard-titler — ingen ekstra CSS nødvendig */

/* ----- Gruppe-directory: grid ----- */
.um-groups-directory {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--space-5);
    padding: 8px 0 32px;
}

/* ----- Gruppe-card ----- */
.um-groups-directory .um-group-item {
    display: flex !important;
    flex-direction: column;
    background: var(--color-bg);
    border: 1.5px solid var(--color-border) !important;
    border-radius: var(--radius-xl);
    overflow: hidden;
    padding: 0 !important;
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.um-groups-directory .um-group-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary) !important;
}

/* ── DOM-rækkefølge: actions er først i HTML, men skal vises sidst ── */
.um-groups-directory .um-group-item > a       { order: 1; }
.um-groups-directory .um-group-item .um-group-meta { order: 2; }
.um-groups-directory .um-group-item .actions  { order: 3; }

/* ── Billede ── */
.um-groups-directory .um-group-item > a {
    text-decoration: none;
    color: inherit;
    display: flex !important;
    flex-direction: column;
}

.um-groups-directory .um-group-item .um-group-image {
    float: none !important;
    width: 100% !important;
    height: 175px;
    object-fit: cover;
    display: block !important;
    margin: 0 !important;
    flex-shrink: 0;
}

/* Hvis ingen gruppe har et billede — vis farvet placeholder */
.um-groups-directory .um-group-item > a:not(:has(.um-group-image)) {
    background: linear-gradient(135deg, #2C3D33 0%, #3f5a4d 100%);
    min-height: 100px;
}

/* ── Gruppenavn ── */
.um-groups-directory .um-group-item h4.um-group-name,
.um-groups-directory .um-group-item .um-group-name {
    display: block !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #1b2d23 !important;
    padding: 16px 18px 4px !important;
    margin: 0 !important;
    line-height: 1.3;
}

/* ── Meta-sektion (privacy, creator, description) ── */
.um-groups-directory .um-group-item .um-group-meta {
    padding: 0 18px 14px;
    flex: 1;
}

.um-groups-directory .um-group-item .um-group-meta ul {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

.um-groups-directory .um-group-item .um-group-meta ul li {
    font-size: 13px !important;
    color: var(--color-text-secondary) !important;
    line-height: 1.5;
    margin-bottom: var(--space-1);
    border: none !important;
}

/* Privacy-badge */
.um-groups-directory .um-group-item .um-group-meta ul li.privacy {
    display: inline-flex !important;
    align-items: center;
    gap: var(--space-1);
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    background: #edf4ef;
    border: none !important;
    border-radius: var(--radius-pill);
    padding: 3px var(--space-3);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Oprettet-af link */
.um-groups-directory .um-group-item .um-group-meta ul li.user {
    font-size: 12px !important;
    color: var(--color-text-secondary) !important;
}
.um-groups-directory .um-group-item .um-group-meta ul li.user a {
    color: var(--color-primary) !important;
    font-weight: 600;
    text-decoration: none;
}
.um-groups-directory .um-group-item .um-group-meta ul li.user a:hover {
    text-decoration: underline;
}

/* Beskrivelse — max 2 linjer */
.um-groups-directory .um-group-item .um-group-meta ul li.description {
    color: #777 !important;
    font-size: 13px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: var(--space-2);
    line-height: 1.55;
}

/* ── Actions-footer (stats + knap) ── */
.um-groups-directory .um-group-item .actions {
    float: none !important;
    padding: 12px 18px 16px;
    border-top: 1px solid #f0f4f1;
    margin-top: auto;
    display: flex !important;
    flex-direction: column;
    gap: var(--space-3);
}

.um-groups-directory .um-group-item .actions ul {
    list-style: none !important;
    margin: 0;
    padding: 0;
    display: flex !important;
    gap: var(--space-4);
    align-items: center;
}

/* Skjul "last active" — for støjende på et kort */
.um-groups-directory .um-group-item .actions ul li.last-active {
    display: none !important;
}

/* Antal-stats */
.um-groups-directory .um-group-item .actions ul li {
    font-size: 12px !important;
    color: var(--color-text-secondary) !important;
    text-align: left !important;
    font-weight: 500;
}
.um-groups-directory .um-group-item .actions ul li span {
    font-weight: 700;
    color: var(--color-primary);
}

/* Tilmeld / forlad / afventer — fuld bredde */
.um-groups-directory .um-group-item .actions a.um-button.um-groups-btn-join,
.um-groups-directory .um-group-item .actions a.um-button.um-groups-btn-leave,
.um-groups-directory .um-group-item .actions a.um-button.um-groups-btn-pending,
.um-groups-directory .um-group-item .actions a.um-button.um-groups-btn-guest {
    display: block !important;
    width: 100% !important;
    float: none !important;
    padding: 10px 18px !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border: none !important;
}

.um-groups-directory .um-group-item .actions a.um-button.um-groups-btn-join {
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    box-shadow: none !important;
}
.um-groups-directory .um-group-item .actions a.um-button.um-groups-btn-join:hover {
    background: #3f5a4d !important;
}

.um-groups-directory .um-group-item .actions a.um-button.um-groups-btn-leave {
    background: transparent !important;
    color: var(--color-text-secondary) !important;
    border: 1.5px solid #d0d9d3 !important;
    box-shadow: none !important;
}
.um-groups-directory .um-group-item .actions a.um-button.um-groups-btn-leave:hover {
    border-color: var(--color-text-secondary) !important;
    color: #333 !important;
    background: transparent !important;
}

.um-groups-directory .um-group-item .actions a.um-button.um-groups-btn-pending {
    background: #edf4ef !important;
    color: var(--color-primary) !important;
    border: 1px solid #b2d0bd !important;
    box-shadow: none !important;
}

.um-groups-directory .um-group-item .actions a.um-button.um-groups-btn-guest {
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    box-shadow: none !important;
}

/* ===================================================================
   GRUPPER — Søgeformular
   =================================================================== */

.um-groups-directory-header {
    margin-bottom: var(--space-6);
}

/* Søge-input */
.um-groups-search-form input[type="text"] {
    border: 1.5px solid #d0d9d3 !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    height: auto !important;
    background: #fafbfa !important;
    color: var(--color-primary) !important;
}
.um-groups-search-form input[type="text"]:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(44,61,51,0.10) !important;
    outline: none !important;
    background: var(--color-bg) !important;
}

/* Søg-knap */
.um-groups-search-form input[type="submit"].um-button,
.um-groups-search-form .um-col-alt input[type="submit"] {
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 22px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    height: auto !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
}
.um-groups-search-form input[type="submit"].um-button:hover {
    background: #3f5a4d !important;
}

/* Ryd-knap */
.um-groups-search-form a.um-button.um-alt {
    background: transparent !important;
    color: var(--color-text-secondary) !important;
    border: 1.5px solid #d0d9d3 !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 22px !important;
    font-size: 14px !important;
    height: auto !important;
    line-height: normal !important;
    text-align: center !important;
    display: block !important;
    box-shadow: none !important;
}
.um-groups-search-form a.um-button.um-alt:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

/* ===================================================================
   GRUPPER — Filterfaner (All Groups / My Groups / Create)
   =================================================================== */

#um-groups-filters.um-groups-found-posts {
    margin-bottom: var(--space-8);
}
#um-groups-filters ul.filters {
    border-top: none !important;
    border-bottom: 2px solid #e8ede9 !important;
    padding: 0 !important;
    margin: 0 0 4px !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 2px;
    list-style: none !important;
}
#um-groups-filters ul.filters li {
    display: inline-flex !important;
    border-right: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}
#um-groups-filters ul.filters li a {
    display: block !important;
    padding: 9px 16px !important;
    border-radius: 8px 8px 0 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--color-text-secondary) !important;
    text-decoration: none !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
    transition: color 0.15s ease, border-color 0.15s ease !important;
}
#um-groups-filters ul.filters li a:hover {
    color: var(--color-primary) !important;
}
#um-groups-filters ul.filters li.active {
    background: transparent !important;
}
#um-groups-filters ul.filters li.active a {
    color: var(--color-primary) !important;
    font-weight: 700 !important;
    border-bottom-color: var(--color-primary) !important;
}

/* Tæller-badge ved siden af fane-teksten */
#um-groups-filters ul.filters li a span {
    background: #edf4ef !important;
    border: 1px solid #b2d0bd !important;
    color: var(--color-primary) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 1px 7px !important;
    border-radius: 20px !important;
    margin-left: 5px !important;
}

/* "Create a Group"-link i filterbaren */
#um-groups-filters ul.filters li.create a {
    color: var(--color-primary) !important;
    font-weight: 600 !important;
}
#um-groups-filters ul.filters li.create a::before {
    content: '+ ';
}

/* ===================================================================
   GRUPPER — Pagination
   =================================================================== */

.um-groups-directory-pagi.um-members-pagi {
    text-align: center;
    margin-top: var(--space-8);
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.um-groups-directory-pagi.um-members-pagi a,
.um-groups-directory-pagi.um-members-pagi span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    border: 1.5px solid var(--color-border-strong);
    color: var(--color-primary) !important;
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.um-groups-directory-pagi.um-members-pagi a:hover {
    background: #edf4ef;
    border-color: var(--color-primary);
}
.um-groups-directory-pagi.um-members-pagi span.current,
.um-groups-directory-pagi.um-members-pagi span.current:hover {
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border-color: var(--color-primary) !important;
}

/* ===================================================================
   GRUPPER — Enkelt gruppe-side (single group)
   =================================================================== */

/* Header med billede, titel og join-knap */
.um-groups-single .um-group-single-header {
    background: var(--color-bg);
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-8);
    box-shadow: 0 2px 16px rgba(0,0,0,0.07);
    margin-bottom: var(--space-5);
}

/* Gruppetitel */
.um-groups-single .um-group-single-header .um-group-name strong {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: var(--color-primary) !important;
}

/* Beskrivelse */
.um-groups-single .um-group-description {
    color: var(--color-text-secondary) !important;
    font-size: 15px !important;
}

/* Privatliv / antal medlemmer */
.um-groups-single .um-group-privacy,
.um-groups-single .um-group-members-count {
    color: var(--color-text-secondary) !important;
    font-size: 13px !important;
}

/* Join-knap på enkelt gruppe-side */
.um-groups-single a.um-button.um-groups-btn-join {
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 700 !important;
    border: none !important;
    padding: 10px 22px !important;
    font-size: 14px !important;
    box-shadow: none !important;
}
.um-groups-single a.um-button.um-groups-btn-join:hover {
    background: #3f5a4d !important;
}

/* Leave-knap på enkelt gruppe-side */
.um-groups-single a.um-button.um-groups-btn-leave {
    background: transparent !important;
    color: var(--color-text-secondary) !important;
    border: 1.5px solid #d0d9d3 !important;
    border-radius: var(--radius-md) !important;
    font-weight: 500 !important;
    padding: 10px 22px !important;
    font-size: 14px !important;
    box-shadow: none !important;
}
.um-groups-single a.um-button.um-groups-btn-leave:hover {
    border-color: var(--color-text-secondary) !important;
    color: #333 !important;
    background: transparent !important;
}

/* Fane-navigation på enkelt gruppe-side */
.um-groups-single div.um-group-tabs-wrap {
    border-top: 2px solid #e8ede9 !important;
    border-bottom: 2px solid #e8ede9 !important;
    margin-top: var(--space-5) !important;
    margin-bottom: var(--space-5) !important;
    padding: 8px 0 !important;
}
.um-groups-single ul.um-groups-single-tabs li a {
    color: var(--color-text-secondary) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
    border-bottom: none !important;
}
.um-groups-single ul.um-groups-single-tabs li a:hover {
    color: var(--color-primary) !important;
    background: #edf4ef !important;
}
.um-groups-single ul.um-groups-single-tabs li.active a {
    color: var(--color-primary) !important;
    font-weight: 700 !important;
    background: #edf4ef !important;
}

/* Indhold-tabs */
.um-groups-single .um-group-tab-content-wrap {
    background: var(--color-bg);
    border-radius: var(--radius-xl);
    padding: var(--space-6) var(--space-8);
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

/* ===================================================================
   GRUPPER — Invitationer (group_invites side)
   =================================================================== */

.um-groups-invite-list .um-group-invite-name {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    text-align: left !important;
    text-transform: none !important;
    border-bottom: 2px solid #e8ede9;
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-5) !important;
}

/* Accept / ignorer invite-knapper */
.um-groups-single-button-pending {
    background: #fafbfa;
    border: 1.5px solid #e8ede9;
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-3) !important;
}
.um-groups-single-button-pending a.um-groups-confirm-invite {
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    border: none !important;
}
.um-groups-single-button-pending a.um-groups-confirm-invite:hover {
    background: #3f5a4d !important;
}
.um-groups-single-button-pending a.um-groups-ignore-invite {
    background: transparent !important;
    color: var(--color-text-secondary) !important;
    border: 1.5px solid #d0d9d3 !important;
    border-radius: var(--radius-md) !important;
}
.um-groups-single-button-pending a.um-groups-ignore-invite:hover {
    border-color: var(--color-text-secondary) !important;
    color: #333 !important;
}

/* ===================================================================
   GRUPPER — "Ingen grupper" / tom tilstand
   =================================================================== */

.um-groups-directory:empty::after {
    content: 'Ingen grupper fundet.';
    display: block;
    text-align: center;
    padding: 48px 0;
    color: var(--color-text-secondary);
    font-size: 15px;
}

/* ----- Opret gruppe: formular-wrapper som hvidt kort ----- */
.um-groups-create,
.um-groups-form {
    background: var(--color-bg);
    border-radius: var(--radius-xl);
    padding: 36px 40px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    max-width: 680px;
    margin: 0 auto 48px;
}

/* ----- Feltlabels ----- */
.um-groups-form .group-form-label,
.um-groups-form .group-form-label label,
.um-groups-form label > .group-form-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}

/* ----- Tekstinput og textarea ----- */
.um-group-fields .um-group-field input[type="text"],
.um-group-fields .um-group-field textarea {
    border: 1.5px solid #d0d9d3 !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    color: #2b2b2b;
    background: var(--color-bg);
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.um-group-fields .um-group-field input[type="text"]:focus,
.um-group-fields .um-group-field textarea:focus {
    border-color: #2f5d50 !important;
    box-shadow: 0 0 0 3px rgba(47,93,80,0.10) !important;
    outline: none;
}

.um-group-fields .um-group-field textarea {
    min-height: 100px;
    resize: vertical;
}

/* ----- Selects (moderation, invite) ----- */
.um-group-fields .um-group-field select,
.um-group-fields .um-group-field .group-form-field select {
    border: 1.5px solid #d0d9d3 !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: #2b2b2b;
    background: var(--color-bg);
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    cursor: pointer;
}

/* ----- Privacy radio-knapper som kort ----- */
.um-group-field ul.um-privacy-wrap {
    list-style: none !important;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.um-group-field ul.um-privacy-wrap > li {
    background: #f8faf8;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-4);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    margin: 0 !important;
}

.um-group-field ul.um-privacy-wrap > li:has(input:checked) {
    border-color: var(--color-primary);
    background: #edf4ef;
}

.um-group-field ul.um-privacy-wrap > li > label {
    font-weight: 700;
    font-size: 14px;
    color: var(--color-primary);
    width: auto !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    gap: var(--space-2);
}

.um-group-field ul.um-privacy-wrap > li > ul {
    margin: var(--space-2) 0 0 var(--space-6) !important;
    padding: 0;
    list-style: none;
}

.um-group-field ul.um-privacy-wrap > li > ul li {
    font-size: 12px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 2px;
}

/* Radio-dot: erstat standard med grøn ----- */
.um-group-fields .um-group-field input[type="radio"] {
    accent-color: var(--color-primary);
    width: 16px;
    height: 16px;
    margin: 0 !important;
    cursor: pointer;
}

/* ----- Checkbox (Enable invites) ----- */
.um-group-fields .um-group-field input[type="checkbox"] {
    accent-color: var(--color-primary);
    width: 16px;
    height: 16px;
    margin-right: 8px !important;
    cursor: pointer;
}

.um-group-field[data-key="invites_settings"] label {
    font-size: 14px;
    color: var(--color-primary);
    font-weight: 600;
}

/* ----- Afstand mellem felter ----- */
.um-group-fields .um-group-field {
    margin-bottom: var(--space-8) !important;
}

/* ----- Submit-knap ----- */
.um-groups-form .um-button,
.um-groups-form input[type="submit"].um-button {
    display: inline-block !important;
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 13px 32px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(44,61,51,0.15) !important;
}

.um-groups-form .um-button:hover,
.um-groups-form input[type="submit"].um-button:hover {
    background: #3f5a4d !important;
}

/* ----- Sidebaggund på alle gruppe-sider ----- */
/* body.page-id-XXXX er mere pålidelig end .site-content / #primary
   da Astra tilføjer egne dynamiske baggrunde på indre containere */
body.page-id-10706,
body.page-id-10707,
body.page-id-10708,
body.page-id-10709 {
    background: #f4f5f2 !important;
}

body.page-id-10706 .site-content,
body.page-id-10706 #primary,
body.page-id-10706 article,
body.page-id-10706 .entry-content,
body.page-id-10706 .ast-container,
body.page-id-10707 .site-content,
body.page-id-10707 #primary,
body.page-id-10707 article,
body.page-id-10707 .entry-content,
body.page-id-10707 .ast-container,
body.page-id-10708 .site-content,
body.page-id-10708 #primary,
body.page-id-10708 article,
body.page-id-10708 .entry-content,
body.page-id-10708 .ast-container,
body.page-id-10709 .site-content,
body.page-id-10709 #primary,
body.page-id-10709 article,
body.page-id-10709 .entry-content,
body.page-id-10709 .ast-container {
    background: transparent !important;
}

/* Fjern Astras padding/shadow på article/entry-content for gruppe-sider */
body.page-id-10706 article,
body.page-id-10707 article,
body.page-id-10708 article,
body.page-id-10709 article {
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}
body.page-id-10706 .entry-content,
body.page-id-10707 .entry-content,
body.page-id-10708 .entry-content,
body.page-id-10709 .entry-content {
    padding: 0 !important;
    margin: 0 !important;
}

/* Body-wrapper under hero */
.tr-groups-body {
    padding: 36px 0 48px;
}

/* Hvidt kort rundt om directory-indhold */
.tr-groups-card {
    background: var(--color-bg);
    border-radius: var(--radius-xl);
    padding: var(--space-8) var(--space-10);
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    max-width: 960px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .tr-groups-card {
        padding: var(--space-5) var(--space-4);
    }
    .tr-groups-body {
        padding: 24px 0 32px;
    }
}

/* ----- Mobil ----- */
@media (max-width: 768px) {
    .um-groups-directory {
        grid-template-columns: 1fr !important;
    }

    .um-groups-create,
    .um-groups-form {
        padding: 24px 20px !important;
    }

    .tr-groups-hero {
        padding: 36px 20px 40px;
    }
}



/* ===================================================================
   FIND TRÆNER — page-id-8815
   Følger nøjagtigt samme mønster som gruppe-sider (10706-10709)
   =================================================================== */

body.page-id-8815 {
    background: #f4f5f2 !important;
}

body.page-id-8815 .site-content,
body.page-id-8815 #primary,
body.page-id-8815 .ast-container {
    background: transparent !important;
}

body.page-id-8815 article {
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

body.page-id-8815 .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

body.page-id-8815 .entry-header {
    display: none !important;
}

/* ===================================================================
   FIND TRÆNER — Tab-navigation
   =================================================================== */

.tr-finder-nav {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1.5px solid #e2e9e4;
    margin-bottom: var(--space-6);
}

.tr-finder-nav__tab {
    padding: var(--space-3) var(--space-5);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-decoration: none !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1.5px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.tr-finder-nav__tab:hover {
    color: var(--color-primary);
}

.tr-finder-nav__tab--active {
    color: var(--color-primary) !important;
    font-weight: 700 !important;
    border-bottom-color: var(--color-primary) !important;
}

.tr-finder-nav__tab--soon {
    opacity: 0.45;
    cursor: default;
}

/* Tab som <button> — nulstil browser-standardstile */
button.tr-finder-nav__tab {
    background: none;
    border: none;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1.5px;
    font-family: inherit;
}

/* Tæller-badge på finder-tabs (samme stil som Groups) */
.tr-finder-nav__count {
    background: #edf4ef;
    border: 1px solid #b2d0bd;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--radius-xl);
    line-height: 1.6;
}

/* Gemte trænere — loading + tom besked */
.tr-saved-loading {
    padding: 32px 0;
    color: var(--color-text-secondary);
    text-align: center;
}
.tr-saved-empty {
    padding: 32px 0;
    color: var(--color-text-secondary);
    text-align: center;
    font-size: 14px;
}

/* Cover-foto på gemte træner kort (fast højde — UM's JS resizer kører ikke her) */
.tr-saved-container .um-member-cover {
    height: 120px !important;
    display: block !important;
    border-radius: 12px 12px 0 0;
}

/* ===================================================================
   FIND TRÆNER — Søgelinje (Groups-stil: input fuld bredde, knap nedenunder)
   Bruger UM's fulde selector-specificitet for at override um-members.css
   =================================================================== */

.um-directory .um-member-directory-header {
    padding: 0 !important;
}

/* Search-rækken: fyld hele bredden */
.um-directory .um-member-directory-header .um-member-directory-header-row.um-member-directory-search-row {
    display: block !important;
    width: 100% !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

/* Søgefeltet: CSS grid
   Række 1: input span 2 kolonner (fuld bredde)
   Række 2: Search (venstre) | Ryd (højre)
*/
.um-directory .um-member-directory-header .um-member-directory-header-row .um-member-directory-search-line {
    display: grid !important;
    grid-template-columns: 1fr 1fr auto !important;
    grid-template-rows: auto auto !important;
    gap: var(--space-3) !important;
    width: 100% !important;
    align-items: center !important;
}

/* Label span begge kolonner (fuld bredde) */
.um-directory .um-member-directory-header .um-member-directory-header-row .um-member-directory-search-line label {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    flex: none !important;
}

/* Skjul "Search:"-tekst */
.um-directory .um-member-directory-header .um-member-directory-header-row .um-member-directory-search-line label span {
    display: none !important;
}

/* Input: fuld bredde, pill-form */
.um-directory .um-member-directory-header .um-member-directory-header-row .um-member-directory-search-line label .um-search-line {
    display: block !important;
    width: 100% !important;
    padding: 13px 20px !important;
    border: 1.5px solid #d0d9d3 !important;
    border-radius: 999px !important;
    background: #f5f6f4 !important;
    font-size: 15px !important;
    color: var(--color-primary) !important;
    height: auto !important;
    box-sizing: border-box !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.um-directory .um-member-directory-header .um-member-directory-header-row .um-member-directory-search-line label .um-search-line:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(44,61,51,0.10) !important;
    background: var(--color-bg) !important;
}

/* Search-knap: grid celle 1/2, mørkegrøn pill */
.um-directory .um-member-directory-header .um-member-directory-header-row .um-member-directory-search-line .um-do-search {
    grid-column: 1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
    width: 100% !important;
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 22px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    height: auto !important;
    cursor: pointer !important;
    transition: background 0.2s ease !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.um-directory .um-member-directory-header .um-member-directory-header-row .um-member-directory-search-line .um-do-search:hover {
    background: #3f5a4d !important;
}

/* Ryd-knap: grid celle 2/3, outline pill */
.tr-finder-clear-btn {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 100% !important;
    background: var(--color-bg) !important;
    color: var(--color-primary) !important;
    border: 1.5px solid #d0d9d3 !important;
    border-radius: 999px !important;
    padding: 12px 22px !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    height: auto !important;
    cursor: pointer !important;
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base) !important;
    box-shadow: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.tr-finder-clear-btn:hover {
    background: #f5f6f4 !important;
    border-color: var(--color-primary) !important;
}

/* More filters: grid celle 3/3 (flyttet ind via JS) */
.um-member-directory-search-line .um-member-directory-filters {
    grid-column: 3 !important;
    grid-row: 2 !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

/* Skjul den nu-tomme nav-linje (Sort by + More filters er væk) */
.um-directory .um-member-directory-header .um-member-directory-header-row:has(.um-member-directory-nav-line:empty),
.um-directory .um-member-directory-header .um-member-directory-header-row:has(.um-member-directory-nav-line) {
    display: none !important;
}

/* ===================================================================
   FIND TRÆNER — Sort, filtre og filter-tags
   =================================================================== */

.um-directory .um-member-directory-nav-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-4);
    padding-top: var(--space-1);
}

/* Sort by og More filters på hver sin side */
.um-directory .um-member-directory-sorting {
    margin-right: auto;
}

/* Filter-panel container */
.um-directory .um-search {
    padding: 20px !important;
    background: var(--color-bg-secondary) !important;
    border: 1px solid #e4ebe7 !important;
    border-radius: var(--radius-lg) !important;
    margin-top: var(--space-3) !important;
    margin-bottom: var(--space-4) !important;
    gap: var(--space-4) !important;
}

/* Individuelle filter-blokke */
.um-directory .um-search .um-search-filter {
    margin-bottom: 0 !important;
}

/* Select2 dropdowns i filtre */
.um-directory .um-search .select2-container {
    width: 100% !important;
}

.um-directory .um-search .select2-selection--single {
    border: 1.5px solid #d0d9d3 !important;
    border-radius: var(--radius-md) !important;
    background: var(--color-bg) !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
}

.um-directory .um-search .select2-selection--single .select2-selection__rendered {
    color: #1c1e21 !important;
    font-size: 14px !important;
    padding: 0 !important;
}

.um-directory .um-search .select2-selection--single .select2-selection__placeholder {
    color: var(--color-text-tertiary) !important;
}

.um-directory .um-search .select2-selection--single .select2-selection__arrow {
    height: 42px !important;
    right: 10px !important;
}

/* Lokation text-input */
.um-directory .um-search .um-text-filter-type input[type="text"] {
    border: 1.5px solid #d0d9d3 !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    background: var(--color-bg) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.um-directory .um-search .um-text-filter-type input[type="text"]:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(44,61,51,0.08) !important;
}


/* Rating slider */
.um-directory .um-search .um-slider .ui-slider {
    background: #e4ebe7 !important;
    border: none !important;
    border-radius: 4px !important;
    height: 6px !important;
}

.um-directory .um-search .um-slider .ui-slider .ui-slider-range {
    background: var(--color-primary) !important;
    border-radius: 4px !important;
}

.um-directory .um-search .um-slider .ui-slider .ui-slider-handle {
    background: var(--color-bg) !important;
    border: 2.5px solid #2C3D33 !important;
    border-radius: 50% !important;
    width: 20px !important;
    height: 20px !important;
    top: -8px !important;
    cursor: grab !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12) !important;
    outline: none !important;
}

.um-directory .um-search .um-slider .ui-slider .ui-slider-handle:active {
    cursor: grabbing !important;
    box-shadow: 0 0 0 4px rgba(44,61,51,0.1) !important;
}

.um-directory .um-search .um-slider-range {
    font-size: 13px !important;
    color: #65676B !important;
    margin-top: var(--space-3) !important;
}

.um-directory .um-search .um-slider-range strong {
    color: #1c1e21 !important;
}

.um-directory .um-member-directory-filters {
    margin-left: auto;
}

/* Sort by tekst + dropdown */
.um-directory .um-member-directory-sorting {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
    color: var(--color-primary);
}

.um-directory .um-member-directory-sorting .um-member-directory-sorting-a a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
}

.um-directory .um-member-directory-sorting .um-member-directory-sorting-a .um-new-dropdown {
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    background: var(--color-bg);
    overflow: hidden;
    min-width: 180px;
}

.um-directory .um-member-directory-sorting .um-member-directory-sorting-a .um-new-dropdown li a {
    color: var(--color-primary);
    padding: var(--space-2) var(--space-4);
    font-size: 14px;
    transition: background 0.15s;
}

.um-directory .um-member-directory-sorting .um-member-directory-sorting-a .um-new-dropdown li a:hover,
.um-directory .um-member-directory-sorting .um-member-directory-sorting-a .um-new-dropdown li a[data-selected="1"] {
    background: #edf4ef;
    color: var(--color-primary);
    font-weight: 600;
}

/* "More filters" toggle */
.um-directory .um-member-directory-filters-a a,
.um-member-directory-search-line .um-member-directory-filters-a a {
    display: inline-flex !important;
    align-items: center;
    gap: var(--space-1);
    padding: 7px 14px !important;
    border: 1.5px solid #d0d9d3 !important;
    border-radius: 8px !important;
    background: var(--color-bg) !important;
    color: var(--color-primary) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    white-space: nowrap;
}

.um-directory .um-member-directory-filters-a a:hover,
.um-member-directory-search-line .um-member-directory-filters-a a:hover,
.um-directory .um-member-directory-filters-a.um-member-directory-filters-visible a {
    background: #edf4ef !important;
    border-color: var(--color-primary) !important;
}

/* Grid/liste view-ikoner */
.um-directory .um-member-directory-view-type-a {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-sm);
    border: 1.5px solid #d0d9d3 !important;
    color: var(--color-text-secondary) !important;
    background: var(--color-bg);
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    text-decoration: none !important;
}

.um-directory .um-member-directory-view-type-a:hover {
    background: #edf4ef !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

/* Filter-dropdowns (Select2) */
.um-directory .um-search-filter {
    margin-bottom: var(--space-3);
}

.um-directory .um-search-filter .select2-container {
    width: 100% !important;
}

.um-directory .um-search-filter .select2-container--default .select2-selection--multiple,
.um-directory .um-search-filter .select2-container--default .select2-selection--single {
    border: 1.5px solid #d0d9d3 !important;
    border-radius: var(--radius-md) !important;
    background: #fafbfa !important;
    min-height: 44px !important;
    display: flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
}

.um-directory .um-search-filter .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-primary);
    font-size: 14px;
    padding: 0;
    line-height: 1.5;
}

.um-directory .um-search-filter .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
    right: 10px;
}

.um-directory .um-search-filter.um-text-filter-type input {
    border: 1.5px solid #d0d9d3 !important;
    border-radius: var(--radius-md) !important;
    height: auto !important;
    padding: 10px 14px !important;
    font-size: 14px;
    color: var(--color-primary);
    background: #fafbfa;
    width: 100%;
    box-sizing: border-box;
    outline: none;
}

.um-directory .um-search-filter.um-text-filter-type input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(44,61,51,0.10) !important;
    background: var(--color-bg) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: #edf4ef !important;
    color: var(--color-primary) !important;
}

/* Aktive filter-tags */
.um-directory .um-members-filter-tag {
    background: #edf4ef;
    border: 1px solid #b2d0bd;
    border-radius: var(--radius-pill);
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 500;
    padding: var(--space-1) var(--space-3);
}

.um-directory .um-members-filter-tag .um-members-filter-remove {
    color: var(--color-primary);
    opacity: 0.6;
}

.um-directory .um-members-filter-tag .um-members-filter-remove:hover {
    opacity: 1;
    color: #c0392b;
}

.um-directory .um-clear-filters a {
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
}

/* ===================================================================
   FIND TRÆNER — Member-kort (Groups-stil)
   Cover → avatar lille i hjørne → navn → rating → bio → knapper
   =================================================================== */

.um-members .um-member {
    display: flex !important;
    flex-direction: column;
    background: var(--color-bg);
    border: 1.5px solid #e2e9e4;
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    text-align: left !important;
}

.um-members .um-member:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(44,61,51,0.12);
    border-color: var(--color-primary);
}

/* ── Cover ──────────────────────────────────────────────────────── */
.um-members .um-member .um-member-cover {
    width: 100%;
    flex-shrink: 0;
    position: relative;
}

.um-members .um-member .um-member-cover-e {
    height: 175px;
    overflow: hidden;
    background: linear-gradient(135deg, #2C3D33 0%, #3f5a4d 100%);
}

.um-members .um-member .um-member-cover-e a {
    display: block;
    height: 100%;
}

.um-members .um-member .um-member-cover-e img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Avatar — lille cirkel nede til venstre på coveret ──────────── */
/* UM's JS sætter cover-højden dynamisk (ratio 2.7:1 × kortbredde ≈ 127px),
   så vi kan ikke bruge en fast top-værdi. I stedet bruger vi negative
   margin-top så avataren ALTID overlapper cover-bunden med 22px. */

.um-members .um-member .um-member-photo {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin: -22px 0 0 18px !important;
    padding: 0 !important;
    text-align: left !important;
    align-self: flex-start !important;
    z-index: 3;
    line-height: 0;
}

.um-members .um-member .um-member-photo a {
    display: block !important;
    text-decoration: none;
    line-height: 0;
    box-shadow: none !important;
}

/* Override UM's egne styles på img'en (position:relative, top:-35px, etc.) */
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member.with-cover .um-member-photo a img,
.um-members .um-member .um-member-photo img.um-avatar {
    position: static !important;
    top: auto !important;
    margin-bottom: 0 !important;
    float: none !important;
    display: block !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 50% !important;
    border: 3px solid #fff !important;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* .um-member skal have position:relative så bookmark-ikonet kan positioneres absolut */
.um-members .um-member {
    position: relative !important;
}

/* ── Gem træner — bookmark-ikon (top-højre hjørne af kortet) ── */
.um-members .um-member .tr-bookmark-wrapper {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 10 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    width: 34px;
    height: 34px;
}
.um-members .um-member .tr-bookmark-wrapper .um-user-bookmarks-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    background: rgba(255,255,255,0.88) !important;
    border-radius: 50% !important;
    color: var(--color-text-secondary) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
    box-shadow: 0 1px 5px rgba(0,0,0,0.18) !important;
    border: none !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
.um-members .um-member .tr-bookmark-wrapper .um-user-bookmarks-button:hover {
    background: var(--color-bg) !important;
    color: var(--color-primary) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22) !important;
}
/* Gemt-tilstand: bookmark er fyldt og grøn */
.um-members .um-member .tr-bookmark-wrapper .um-user-bookmarks-remove-button {
    color: var(--color-primary) !important;
    background: rgba(255,255,255,0.95) !important;
}
/* Skjul tekst-label fra plugin (vi viser kun ikonet) */
.um-members .um-member .tr-bookmark-wrapper .um-user-bookmarks-button .text {
    display: none !important;
}

/* ── Kortindhold ─────────────────────────────────────────────────── */
/* Avatar er nu i flowet (30px effektiv højde efter -22px margin).
   Kortindholdet starter naturligt under avataren.
   Padding-top: 12px giver åndrum over navnet. */
.um-members .um-member .um-member-card {
    padding: 12px 18px 0 !important;
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: left !important;
}

/* Navn */
.um-members .um-member .um-member-card .um-member-name {
    margin: 0 0 2px;
    line-height: 1.2;
    justify-content: flex-start !important;
}

.um-members .um-member .um-member-card .um-member-name a {
    font-size: 17px !important;
    font-weight: 800 !important;
    color: #1b2d23 !important;
    text-decoration: none !important;
    justify-content: flex-start !important;
}

.um-members .um-member .um-member-card .um-member-name a:hover {
    color: var(--color-primary) !important;
}

/* Rating-stjerner (um-reviews) — vis dem, lille og diskret */
.um-directory .um-members .um-member .um-member-rating {
    display: block !important;
    margin: 2px 0 6px;
    font-size: 12px;
}

/* Tagline — maks 3 linjer */
/* UM's own CSS adds padding: 0 15px which misaligns bio vs name — override it */
.um-directory .um-members-wrapper .um-members.um-members-grid .um-member .um-member-card .um-member-tagline,
.um-members .um-member .um-member-card .um-member-tagline {
    font-size: 13px !important;
    color: var(--color-text-secondary) !important;
    line-height: 1.55;
    margin-bottom: var(--space-2);
    padding: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: left !important;
}

/* ── Skjul støjende elementer ──────────────────────────────────── */
/* Brug UM's fulde selector-kæde for maksimal specificitet */
.um-directory .um-members-wrapper .um-members .um-member .um-member-status { display: none !important; }
.um-directory .um-members-wrapper .um-members .um-member .um-members-follow-stats { display: none !important; }
.um-directory .um-members-wrapper .um-members .um-member .um-members-follow-btn { display: none !important; }
.um-directory .um-members-wrapper .um-members .um-member .um-member-card .um-member-meta-main { display: none !important; }
.um-directory .um-members-wrapper .um-members .um-member .um-member-card .um-member-meta { display: none !important; }
.um-directory .um-members-wrapper .um-members .um-member .um-member-card .um-member-metaline { display: none !important; }
.um-directory .um-members-wrapper .um-members .um-member .um-member-social { display: none !important; }
.um-directory .um-members-wrapper .um-members .um-member [class*="um-icon-android-mail"],
.um-directory .um-members-wrapper .um-members .um-member [class*="um-icon-email"],
.um-directory .um-members-wrapper .um-members .um-member a[href^="mailto"] { display: none !important; }
/* Edit-knap og alle ukendte knapper i kortet */
.um-directory .um-members-wrapper .um-members .um-member .um-members-edit-btn { display: none !important; }
.um-directory .um-members-wrapper .um-members .um-member .um-member-card .um-member-more { display: none !important; }
.um-directory .um-members-wrapper .um-members .um-member .um-member-card .um-member-less { display: none !important; }

/* ── Skjul original messaging-wrapper (erstattes af tr-member-footer) ── */
.um-directory .um-members-wrapper .um-members .um-member .um-members-messaging-btn { display: none !important; }

/* ── Kort-footer: separator + Se profil + Kontakt (injiceres via JS) ── */
.tr-member-footer {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    border-top: 1px solid #e2e9e4;
    /* Extend full card width (card has 18px h-padding), keep content aligned with name/rating */
    margin-left: -18px;
    margin-right: -18px;
    padding: 12px 18px 12px;
    margin-top: auto;
}

/* "Se profil" — primær, fyldt grøn (som Groups' Join-knap) */
.tr-member-profile-btn {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 14px !important;
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1em !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: background 0.15s ease !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

.tr-member-profile-btn:hover {
    background: #3f5a4d !important;
    color: var(--color-text-inverse) !important;
}

/* ── Trainer professionel data på kort ── */
.tr-member-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); justify-content: center; margin: var(--space-2) 0 var(--space-1); }
.tr-member-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px var(--space-2); border-radius: var(--radius-sm); background: #e8f5e9; color: var(--color-primary); }
.tr-member-info { font-size: 12px; color: var(--color-text-secondary); text-align: center; margin: 4px 0 6px; line-height: 1.5; }
.tr-member-price { font-weight: 700; color: var(--color-primary); }
.tr-member-exp, .tr-member-loc { color: var(--color-text-secondary); }

/* ── Profil: Professionelt info-kort ── */
.tr-profile-pro__price { text-align: center; font-size: 18px; color: var(--color-primary); margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
.tr-profile-pro__price span { font-size: 13px; font-weight: 400; color: var(--color-text-secondary); }
.tr-profile-pro__row { display: flex; justify-content: space-between; align-items: flex-start; padding: 6px 0; font-size: 14px; color: var(--color-text); }
.tr-profile-pro__label { font-weight: 600; color: var(--color-text-secondary); min-width: 100px; flex-shrink: 0; }
.tr-profile-pro__tags { display: flex; flex-wrap: wrap; gap: var(--space-1); justify-content: flex-end; }

/* ── Check-in: Skader-advarsel + klient tags ── */
.tr-ci-injury-alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: #fff8e1; border: 1px solid #f9a825; border-radius: var(--radius-md); margin: var(--space-3) 0 var(--space-2); font-size: 13px; color: #5d4037; }
.tr-ci-injury-alert__icon { font-size: 18px; flex-shrink: 0; }
.tr-ci-client-tags { display: flex; gap: var(--space-2); margin: 6px 0 8px; flex-wrap: wrap; }
.tr-ci-tag--outline { background: transparent !important; border: 1px solid #d0d9d3; color: var(--color-text-secondary) !important; }

/* ── Nutrition: diet præference hint ── */
.tr-nutrition__diet-hint { font-size: 13px; color: var(--color-text-secondary); background: #e8f5e9; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); margin-bottom: var(--space-2); }

/* "Kontakt" — sekundær, outline (som Groups' Leave-knap) */
.tr-member-contact-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    background: transparent;
    color: var(--color-text-secondary) !important;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
    white-space: nowrap;
    cursor: pointer;
}

.tr-member-contact-btn:hover {
    background: transparent;
    border-color: var(--color-text-secondary);
    color: #333 !important;
}

/* ── Skjul gammel standalone message-knap (sikkerhedsnet) ── */
.um-members a.um-message-abtn,
.um-members a.um-message-btn {
    display: none !important;
    margin: var(--space-2) var(--space-5) var(--space-4) !important;
    padding: 10px 18px !important;
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: background 0.2s ease !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

.um-members a.um-message-abtn:hover,
.um-members a.um-message-btn:hover {
    background: #3f5a4d !important;
}

/* ── Vores Kontakt-knap har um-message-abtn/btn klasse (nødvendig for modal),
   men skal se ud som Groups' Leave-knap — override med højere specificitet ── */
.um-members a.um-message-abtn.tr-member-contact-btn,
.um-members a.um-message-btn.tr-member-contact-btn,
.um-members a.um-login-to-msg-btn.tr-member-contact-btn {
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    background: transparent !important;
    color: var(--color-text-secondary) !important;
    border: 1.5px solid #d0d9d3 !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1em !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    cursor: pointer !important;
}

.um-members a.um-message-abtn.tr-member-contact-btn:hover,
.um-members a.um-message-btn.tr-member-contact-btn:hover,
.um-members a.um-login-to-msg-btn.tr-member-contact-btn:hover {
    background: transparent !important;
    border-color: var(--color-text-secondary) !important;
    color: #333 !important;
}

/* ===================================================================
   FIND TRÆNER — Grid-layout (override UM's float/masonry)
   =================================================================== */

.um .um-members.um-members-grid,
.tr-saved-container .um-members.um-members-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: var(--space-5) !important;
    clear: both !important;
    height: auto !important;
    position: relative !important;
}

.um .um-members.um-members-grid .um-member,
.tr-saved-container .um-members.um-members-grid .um-member {
    float: none !important;
    width: 100% !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
}

.um .um-members.um-members-grid .um-gutter-sizer {
    display: none !important;
}

.um-members-wrapper {
    margin-top: var(--space-5) !important;
}

.um-members .um-members-none p {
    text-align: center;
    padding: 48px 0;
    color: var(--color-text-secondary);
    font-size: 15px;
}

/* ===================================================================
   FIND TRÆNER — Pagination
   =================================================================== */

.um-members-pagination-box {
    margin-top: var(--space-8);
}

.um-members-pagi {
    display: flex !important;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0 !important;
    list-style: none !important;
    margin: 0 !important;
}

.um-members-pagi a,
.um-members-pagi span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    border: 1.5px solid var(--color-border-strong);
    color: var(--color-primary) !important;
    text-decoration: none !important;
    background: var(--color-bg);
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.um-members-pagi a:hover {
    background: #edf4ef !important;
    border-color: var(--color-primary) !important;
}

.um-members-pagi .current,
.um-members-pagi span.current {
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border-color: var(--color-primary) !important;
}

@media (max-width: 768px) {
    .um .um-members.um-members-grid {
        grid-template-columns: 1fr !important;
    }
}


/* ===================================================================
   PROFIL — To-kolonne layout (Facebook-stil)
   =================================================================== */

/* Override UM's max-width: 600px på profile body */
.um-profile .um-profile-body {
    max-width: 100% !important;
}

/* Grid-wrapper */
.tr-profile-cols {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--space-5);
    align-items: start;
}

.tr-profile-col-left,
.tr-profile-col-right {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

/* Info-boks */
.tr-profile-info-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    box-shadow: var(--shadow-xs);
}

.tr-profile-info-card__title {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 0 12px 0 !important;
    padding-bottom: var(--space-3) !important;
    border-bottom: 1px solid #edf2ef !important;
    line-height: 1.3 !important;
}

/* Om-boks: bio tekst */
.tr-profile-info-card__bio {
    font-size: 14px;
    color: var(--color-text);
    line-height: 1.7;
    margin: 0;
}

/* Vurdering: stjerner */
.tr-profile-info-card__stars {
    display: flex;
    gap: 3px;
    margin-bottom: var(--space-2);
}

.tr-pic-star          { font-size: 22px; line-height: 1; }
.tr-pic-star--full    { color: #f5a623; }
.tr-pic-star--half    { color: #f5a623; opacity: 0.55; }
.tr-pic-star--empty   { color: var(--color-border); }

.tr-profile-info-card__rating-link {
    font-size: 13px;
    color: var(--color-text-secondary);
    text-decoration: none !important;
    display: block;
}

.tr-profile-info-card__rating-link strong { color: var(--color-text); }
.tr-profile-info-card__rating-count { color: var(--color-text-tertiary); }
.tr-profile-info-card__rating-link:hover { color: var(--color-primary); }

/* Netværk */
.tr-profile-info-card__net {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tr-profile-info-card__net-item {
    font-size: 14px;
    color: var(--color-text-secondary);
    text-decoration: none !important;
}

.tr-profile-info-card__net-item strong { color: var(--color-text); }
.tr-profile-info-card__net-item:hover  { color: var(--color-primary); }

/* Tom tilstand */
.tr-profile-info-card__empty {
    font-size: 14px;
    color: var(--color-text-disabled);
    margin: 0;
    text-align: center;
    padding: 20px 0 8px;
}

/* Detaljer-boks: UM's felter inde i kortet */
.tr-profile-info-card--fields .um-field {
    border-bottom: 1px solid #f0f4f1 !important;
    padding: 8px 0 !important;
    margin: 0 !important;
}

.tr-profile-info-card--fields .um-field:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.tr-profile-info-card--fields .um-field-label,
.tr-profile-info-card--fields .um-field-label label {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: #aaa !important;
    margin: 0 0 2px 0 !important;
    border-bottom: none !important;
    padding: 0 !important;
    display: block !important;
}

.tr-profile-info-card--fields .um-field-area {
    margin: 0 !important;
    padding: 0 !important;
}

.tr-profile-info-card--fields .um-field-value {
    font-size: 14px !important;
    color: #222 !important;
    line-height: 1.45 !important;
}

/* Forløb-liste i højre kolonne — samme stil som grupper */
.tr-profile-forloeb-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tr-profile-forloeb-item {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f4f1;
}

.tr-profile-forloeb-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.tr-profile-forloeb-item:first-child {
    padding-top: 0;
}

.tr-profile-forloeb-item__img {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #edf2ef;
}

.tr-profile-forloeb-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.tr-profile-forloeb-item__body {
    flex: 1;
    min-width: 0;
}

.tr-profile-forloeb-item__title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 0 3px 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tr-profile-forloeb-item__desc {
    font-size: 12px !important;
    color: var(--color-text-secondary) !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.4 !important;
}

.tr-profile-forloeb-item__btns {
    display: flex;
    gap: var(--space-2);
}

.tr-forloeb-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 12px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    border: none !important;
    white-space: nowrap !important;
    transition: opacity 0.15s !important;
    line-height: 1.4 !important;
}

.tr-forloeb-btn:hover {
    opacity: 0.82 !important;
    text-decoration: none !important;
}

.tr-forloeb-btn--primary {
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
}

.tr-forloeb-btn--secondary {
    background: #f0f4f1 !important;
    color: var(--color-primary) !important;
}

.tr-forloeb-btn--outline {
    background: transparent !important;
    color: var(--color-primary) !important;
    border: 1.5px solid #cdd8d1 !important;
}

.tr-forloeb-btn--full {
    width: 100% !important;
    justify-content: center !important;
    padding: 11px 18px !important;
    font-size: 15px !important;
}

/* -------------------------------------------------------
   PROFIL TABS — Forløb, Mine forløb, Opret forløb
   ------------------------------------------------------- */
.tr-tab-wrap {
    padding: 4px 0;
}

.tr-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}

.tr-tab-header__title {
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    color: #111 !important;
}

.tr-tab-empty {
    color: var(--color-text-disabled);
    font-size: 14px;
    text-align: center;
    padding: 40px 0;
}

/* Grid af forløb-kort i tab */
.tr-tab-forloeb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-5);
}

.tr-tab-forloeb-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s;
}

.tr-tab-forloeb-card:hover {
    box-shadow: 0 4px 16px rgba(44,61,51,0.10);
}

.tr-tab-forloeb-card__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #edf2ef;
}

.tr-tab-forloeb-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block !important;
    margin: 0 !important;
}

.tr-tab-forloeb-card__body {
    padding: 14px 14px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: var(--space-2);
}

.tr-tab-forloeb-card__title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.tr-tab-forloeb-card__desc {
    font-size: 13px !important;
    color: #777 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    flex: 1;
}

.tr-tab-forloeb-card__btns {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

/* Opret-tab: ACF-form stylet som create group */
.um .um-profile-body .acf-form {
    background: var(--color-bg);
    border-radius: var(--radius-xl);
    padding: 36px 40px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    max-width: 680px;
    margin: 0 auto 48px;
}

/* ACF formular i profil-tab (opret forløb) */
.tr-tab-acf-form {
    max-width: 640px;
    margin: 0 auto;
}

.tr-tab-acf-form .acf-form {
    background: var(--color-bg) !important;
    border-radius: var(--radius-xl) !important;
    padding: 28px 28px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07) !important;
    border: 1px solid #e4ebe7 !important;
}

.tr-tab-acf-form .acf-field {
    padding: 12px 0 !important;
    border-top: 1px solid #f0f2f5 !important;
}

.tr-tab-acf-form .acf-field:first-child {
    border-top: none !important;
    padding-top: 0 !important;
}

.tr-tab-acf-form .acf-label label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1c1e21 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: var(--space-1) !important;
}

.tr-tab-acf-form .acf-input input[type="text"],
.tr-tab-acf-form .acf-input input[type="number"],
.tr-tab-acf-form .acf-input input[type="email"],
.tr-tab-acf-form .acf-input input[type="url"],
.tr-tab-acf-form .acf-input textarea,
.tr-tab-acf-form .acf-input select {
    border: 1.5px solid #d0d9d3 !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    background: var(--color-bg-secondary) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}

.tr-tab-acf-form .acf-input input:focus,
.tr-tab-acf-form .acf-input textarea:focus,
.tr-tab-acf-form .acf-input select:focus {
    border-color: var(--color-primary) !important;
    background: var(--color-bg) !important;
    box-shadow: 0 0 0 3px rgba(44,61,51,0.08) !important;
    outline: none !important;
}

/* Prepend/Append (kr, etc) */
.tr-tab-acf-form .acf-input-prepend,
.tr-tab-acf-form .acf-input-append {
    background: #f0f2f5 !important;
    border: 1.5px solid #d0d9d3 !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    color: #65676B !important;
    font-weight: 500 !important;
    line-height: 1 !important;
}

.tr-tab-acf-form .acf-input-prepend {
    border-radius: 10px 0 0 10px !important;
    border-right: none !important;
}

.tr-tab-acf-form .acf-input-append {
    border-radius: 0 10px 10px 0 !important;
    border-left: none !important;
}

.tr-tab-acf-form .acf-input-prepend + input,
.tr-tab-acf-form .acf-input-wrap input {
    border-radius: var(--radius-md) !important;
}

.tr-tab-acf-form .acf-input-prepend + input {
    border-radius: 0 10px 10px 0 !important;
}

/* Billede-upload */
.tr-tab-acf-form .acf-image-uploader {
    background: var(--color-bg-secondary) !important;
    border: 2px dashed #d0d9d3 !important;
    border-radius: var(--radius-lg) !important;
    padding: 24px !important;
    text-align: center !important;
    transition: border-color 0.15s !important;
}

.tr-tab-acf-form .acf-image-uploader:hover {
    border-color: var(--color-primary) !important;
}

.tr-tab-acf-form .acf-image-uploader img {
    border-radius: 8px !important;
    max-height: 200px !important;
}

/* Instructions tekst */
.tr-tab-acf-form .acf-field .description,
.tr-tab-acf-form .acf-field p.description {
    font-size: 12px !important;
    color: var(--color-text-tertiary) !important;
    margin-top: var(--space-1) !important;
}

/* Submit knap */
.tr-tab-acf-form .acf-form-submit {
    padding-top: var(--space-4) !important;
    border-top: 1px solid #f0f2f5 !important;
    margin-top: var(--space-2) !important;
}

.tr-tab-acf-form .acf-form-submit input[type="submit"],
.tr-tab-acf-form .acf-button.button-primary {
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 14px 36px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: opacity 0.15s !important;
    width: 100% !important;
    max-width: none !important;
    text-transform: none !important;
}

.tr-tab-acf-form .acf-form-submit input[type="submit"]:hover {
    opacity: 0.85 !important;
}

/* Select dropdown */
.tr-tab-acf-form .acf-input select {
    appearance: auto !important;
    -webkit-appearance: auto !important;
}

/* Centreret overskrift */
.tr-tab-header--center {
    display: block !important;
    text-align: center;
    margin-bottom: var(--space-8) !important;
}

.tr-tab-header--center .tr-tab-header__title {
    font-size: 22px !important;
}

.tr-tab-header--center .tr-tab-header__sub {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-top: var(--space-1);
    display: block;
}

/* Feltlabels — samme som group-form-label */
.um .um-profile-body .acf-form .acf-label label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--color-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: var(--space-2) !important;
}

/* Input og textarea */
.um .um-profile-body .acf-form input[type="text"],
.um .um-profile-body .acf-form input[type="number"],
.um .um-profile-body .acf-form input[type="email"],
.um .um-profile-body .acf-form textarea,
.um .um-profile-body .acf-form select {
    border: 1.5px solid #d0d9d3 !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    color: #2b2b2b !important;
    background: var(--color-bg) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.um .um-profile-body .acf-form input:focus,
.um .um-profile-body .acf-form textarea:focus,
.um .um-profile-body .acf-form select:focus {
    border-color: #2f5d50 !important;
    box-shadow: 0 0 0 3px rgba(47,93,80,0.10) !important;
    outline: none !important;
}

/* Submit */
.um .um-profile-body .acf-form .acf-submit {
    text-align: center;
    margin-top: var(--space-2) !important;
}

.um .um-profile-body .acf-form .acf-button,
.um .um-profile-body .acf-form .acf-button.button,
.um .um-profile-body .acf-form .acf-button.button-primary,
.um .um-profile-body .acf-form input.acf-button {
    background: var(--color-primary) !important;
    background-color: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 12px 36px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: opacity 0.15s !important;
    width: 100% !important;
    max-width: 280px !important;
    box-shadow: none !important;
}

.um .um-profile-body .acf-form .acf-button:hover,
.um .um-profile-body .acf-form input.acf-button:hover {
    background-color: var(--color-primary) !important;
    opacity: 0.85 !important;
    color: var(--color-text-inverse) !important;
}

@media (max-width: 640px) {
    .tr-tab-forloeb-grid {
        grid-template-columns: 1fr;
    }
}

/* -------------------------------------------------------
   UM ACTIVITY WALL — profil-tab + dashboard styling
   ------------------------------------------------------- */
.tr-tab-opslag .um-activity,
.tr-dashboard-wall .um-activity {
    max-width: 680px;
    margin: 0 auto;
}

/* Publish-boks */
.tr-tab-opslag .um-activity-publish,
.tr-dashboard-wall .um-activity-publish {
    background: var(--color-bg);
    border: 1.5px solid #e4ebe7;
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-5);
    margin-bottom: var(--space-5);
}

.tr-tab-opslag .um-activity-textarea,
.tr-dashboard-wall .um-activity-textarea {
    border: none !important;
    box-shadow: none !important;
    resize: none;
    font-size: 15px;
    min-height: 60px;
}

.tr-tab-opslag .um-activity-post,
.tr-dashboard-wall .um-activity-post {
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: opacity 0.15s !important;
}

.tr-tab-opslag .um-activity-post:hover,
.tr-dashboard-wall .um-activity-post:hover {
    opacity: 0.85 !important;
}

/* Indlæg-kort */
.tr-tab-opslag .um-activity-widget,
.tr-dashboard-wall .um-activity-widget {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
}

.tr-tab-opslag .um-activity-widget .um-activity-head,
.tr-dashboard-wall .um-activity-widget .um-activity-head {
    margin-bottom: var(--space-3);
}

.tr-tab-opslag .um-activity-widget .um-activity-bodytext,
.tr-dashboard-wall .um-activity-widget .um-activity-bodytext {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text);
}

.tr-tab-opslag .um-activity-widget .um-activity-foot,
.tr-dashboard-wall .um-activity-widget .um-activity-foot {
    border-top: 1px solid #eee;
    margin-top: var(--space-4);
    padding-top: var(--space-3);
}

/* -------------------------------------------------------
   "OPRET OPSLAG" KORT — Facebook-style CTA
   Bruges i profil-sidebar (Om-tab) og dashboard
   ------------------------------------------------------- */
.tr-create-post-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    margin-bottom: var(--space-4);
}

.tr-create-post-card__top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4);
}

.tr-create-post-card__avatar,
.tr-create-post-card__avatar img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0;
}

.tr-create-post-card__avatar--placeholder {
    display: block;
    background: var(--color-border-input);
}

.tr-create-post-card__input {
    flex: 1;
    background: var(--color-bg-tertiary);
    border-radius: 22px;
    padding: var(--space-3) var(--space-4);
    font-size: 16px;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background 0.15s;
    cursor: pointer;
    line-height: 1.25;
}

.tr-create-post-card__input:hover {
    background: var(--color-border-input);
    color: var(--color-text-secondary);
    text-decoration: none;
}

.tr-create-post-card__actions {
    display: flex;
    border-top: 1px solid var(--color-border);
    padding: var(--space-1) var(--space-2);
}

.tr-create-post-card__action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 10px 0;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background 0.15s;
}

.tr-create-post-card__action:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
    text-decoration: none;
}

/* Farve-ikoner via CSS */
.tr-create-post-card__icon {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: inline-block;
}

.tr-create-post-card__icon--photo {
    background: #45BD62;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.tr-create-post-card__icon--video {
    background: #F3425F;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M17 10.5V7c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1v10c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-3.5l4 4v-11l-4 4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.tr-create-post-card__icon--activity {
    background: #F7B928;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* -------------------------------------------------------
   OPRET OPSLAG MODAL — Facebook-style popup
   ------------------------------------------------------- */
.tr-post-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 999999;
    align-items: center;
    justify-content: center;
}

.tr-post-modal.is-open {
    display: flex;
}

.tr-post-modal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1;
}

.tr-post-modal__dialog {
    position: relative;
    z-index: 2;
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    width: 500px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--shadow-xl);
    animation: modalEntry 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalEntry {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Header */
.tr-post-modal__header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-input);
}

.tr-post-modal__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.tr-post-modal__close {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--color-border-input);
    font-size: 22px;
    line-height: 1;
    color: #606770;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.tr-post-modal__close:hover {
    background: #d8dadf;
}

/* Sektion 1: Bruger-info + synlighed */
.tr-post-modal__user {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 14px 16px 8px;
}

.tr-post-modal__avatar {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex-shrink: 0;
}

.tr-post-modal__user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tr-post-modal__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.2;
}

.tr-post-modal__visibility {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-border-input);
    padding: 2px var(--space-2);
    border-radius: var(--radius-sm);
    width: fit-content;
}

.tr-post-modal__visibility i {
    font-size: 10px;
}

/* UM Activity Form inde i modal */
.tr-post-modal__form .um {
    margin: 0 !important;
}

.tr-post-modal__form .um-activity-posting-only {
    padding: 0 !important;
}

.tr-post-modal__form .um-activity-widget {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

.tr-post-modal__form .um-activity-posting-only,
.tr-post-modal__form .um-form {
    padding: 0 !important;
    margin: 0 !important;
}

.tr-post-modal__form .um {
    padding: 0 !important;
}

.tr-post-modal__form .um-activity-head {
    display: none !important;
}

.tr-post-modal__form .um-activity-publish {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.tr-post-modal__form .um-activity-body {
    padding: 0 18px 12px 18px !important;
    border: none !important;
    margin: 0 !important;
}

.tr-post-modal__form .um-activity-textarea {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Override UM's .um-activity-widget div.um-activity-textarea textarea selector */
.tr-post-modal__form .um-activity-widget div.um-activity-textarea textarea,
.tr-post-modal__form .um-activity-widget div.um-activity-textarea textarea:hover,
.tr-post-modal__form .um-activity-widget div.um-activity-textarea textarea:focus,
.tr-post-modal__form .um-activity-widget div.um-activity-textarea textarea:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 22px !important;
    line-height: 1.5 !important;
    min-height: 120px !important;
    resize: none !important;
    color: #1c1e21 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
    text-indent: 0 !important;
}

.tr-post-modal__form .um-activity-textarea-elem::placeholder {
    color: #65676B !important;
    font-size: 22px !important;
}

/* Footer inde i modal */
.tr-post-modal__form .um-activity-foot {
    border-top: 1px solid #e4e6eb !important;
    margin: 0 18px !important;
    padding: 12px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.tr-post-modal__form .um-activity-left {
    float: none !important;
}

.tr-post-modal__form .um-activity-right {
    float: none !important;
}

.tr-post-modal__form .um-activity-insert-photo {
    font-size: 22px !important;
    color: #45BD62 !important;
    background: none !important;
    border: none !important;
    padding: 8px 10px !important;
    border-radius: 50% !important;
    transition: background 0.15s !important;
}

.tr-post-modal__form .um-activity-insert-photo:hover {
    background: #f0f2f5 !important;
}

/* "Slå op" knap i modal */
.tr-post-modal__form .um-activity-post {
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 48px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    transition: opacity 0.15s !important;
    text-decoration: none !important;
}

.tr-post-modal__form .um-activity-post:hover {
    opacity: 0.85 !important;
    color: var(--color-text-inverse) !important;
}

.tr-post-modal__form .um-activity-post.um-disabled {
    background: #E4E6EB !important;
    color: #BCC0C4 !important;
    cursor: default !important;
    opacity: 1 !important;
}

.tr-post-modal__form .um-clear {
    display: none !important;
}

/* Billed-preview i modal */
.tr-post-modal__form .um-activity-preview {
    padding: 0 !important;
    margin-top: var(--space-3) !important;
    overflow: hidden !important;
    clear: both !important;
}

.tr-post-modal__form .um-activity-preview img {
    border-radius: var(--radius-md) !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
}

.tr-post-modal__form .um-activity-preview-spn {
    position: relative !important;
    display: block !important;
}

.tr-post-modal__form .um-activity-img-remove {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 32px !important;
    height: 32px !important;
    background: rgba(0,0,0,0.6) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--color-text-inverse) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    z-index: 2 !important;
}

/* Skjul upload statusbar i modal */
.tr-post-modal__form .upload-statusbar {
    display: none !important;
}

/* Skjul drag-drop zone visuelt */
.tr-post-modal__form .ajax-upload-dragdrop {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
}

/* Skjul UM's eget footer visuelt men behold i DOM for JS-bindings */
.tr-post-modal__form .um-activity-foot {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    padding: 0 !important;
    margin: -1px !important;
}

/* Sektion 3: "Føj til dit opslag" boks */
.tr-post-modal__add-to {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    margin: 0 18px 12px;
    padding: var(--space-3) var(--space-4);
}

.tr-post-modal__add-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

.tr-post-modal__add-icons {
    display: flex;
    gap: var(--space-1);
}

.tr-post-modal__add-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: background 0.15s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.tr-post-modal__add-btn:hover {
    background: #f0f2f5 !important;
}

.tr-post-modal__add-btn svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
}

/* Sektion 4: Stor "Slå op" knap */
.tr-post-modal__submit {
    padding: 0 18px 16px;
}

.tr-post-modal__submit-btn {
    width: 100%;
    padding: 12px 0;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.tr-post-modal__submit-btn:hover {
    opacity: 0.85;
}

.tr-post-modal__submit-btn:disabled {
    background: #E4E6EB;
    color: #BCC0C4;
    cursor: default;
    opacity: 1;
}

/* -------------------------------------------------------
   UM ACTIVITY WALL — Facebook-style posts
   Bruges i profil-tab (posts) + dashboard
   ------------------------------------------------------- */

/* Skjul UM's egen opret-formular (vi bruger vores custom CTA + modal) */
.tr-tab-opslag .um-activity-new-post,
.tr-dashboard-wall .um-activity-new-post {
    display: none !important;
}

/* Wall container — fuld bredde i kolonne */
.tr-tab-opslag .um-activity-wall,
.tr-dashboard-wall .um-activity-wall {
    max-width: none;
    margin: 0;
}

.tr-tab-opslag .um,
.tr-tab-opslag .um-form {
    max-width: none !important;
}

/* ── Hvert post-kort ── */
.tr-tab-opslag .um-activity-widget,
.tr-dashboard-wall .um-activity-widget {
    background: var(--color-bg) !important;
    border: 1px solid #e4ebe7 !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04) !important;
    margin-bottom: var(--space-3) !important;
    margin-top: 0 !important;
    padding: 0 !important;
    overflow: hidden;
}

/* Spacing mellem CTA-kort og første post */
.tr-create-post-card {
    margin-bottom: var(--space-3);
}

/* ── Sektion 1: Header — profilbillede, navn, tidspunkt ── */
.tr-tab-opslag .um-activity-widget > .um-activity-head,
.tr-dashboard-wall .um-activity-widget > .um-activity-head {
    display: flex !important;
    align-items: center !important;
    padding: 12px 16px !important;
    border: none !important;
}

.tr-tab-opslag .um-activity-author,
.tr-dashboard-wall .um-activity-author {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-3) !important;
    float: none !important;
    flex: 1;
}

.tr-tab-opslag .um-activity-ava,
.tr-dashboard-wall .um-activity-ava {
    flex-shrink: 0;
    line-height: 0;
}

.tr-tab-opslag .um-activity-ava img,
.tr-dashboard-wall .um-activity-ava img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.tr-tab-opslag .um-activity-author-meta,
.tr-dashboard-wall .um-activity-author-meta {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tr-tab-opslag .um-activity-author-url a,
.tr-dashboard-wall .um-activity-author-url a {
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #1c1e21 !important;
    text-decoration: none !important;
}

.tr-tab-opslag .um-activity-author-url a:hover,
.tr-dashboard-wall .um-activity-author-url a:hover {
    text-decoration: underline !important;
}

.tr-tab-opslag .um-activity-metadata,
.tr-dashboard-wall .um-activity-metadata {
    font-size: 12px !important;
    color: #65676B !important;
}

.tr-tab-opslag .um-activity-metadata a,
.tr-dashboard-wall .um-activity-metadata a {
    color: #65676B !important;
    text-decoration: none !important;
}

.tr-tab-opslag .um-activity-metadata a:hover,
.tr-dashboard-wall .um-activity-metadata a:hover {
    text-decoration: underline !important;
}

/* Dropdown-menu (edit/delete) */
.tr-tab-opslag .um-activity-widget > .um-activity-head > .um-activity-right,
.tr-dashboard-wall .um-activity-widget > .um-activity-head > .um-activity-right {
    float: none !important;
    margin-left: auto;
}

/* ── Sektion 2: Beskrivelse/tekst ── */
.tr-tab-opslag .um-activity-body,
.tr-dashboard-wall .um-activity-widget > .um-activity-body {
    padding: 0 16px !important;
    border: none !important;
}

.tr-tab-opslag .um-activity-bodyinner-txt,
.tr-dashboard-wall .um-activity-bodyinner-txt {
    font-size: 15px !important;
    line-height: 1.4 !important;
    color: #1c1e21 !important;
    word-wrap: break-word;
    display: -webkit-box !important;
    -webkit-line-clamp: 5 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Sektion 3: Billede — fuld bredde, ingen padding ── */
.tr-tab-opslag .um-activity-bodyinner-photo,
.tr-dashboard-wall .um-activity-bodyinner-photo {
    margin: 8px -16px 0 -16px !important;
    overflow: hidden;
}

.tr-tab-opslag .um-activity-bodyinner-photo img,
.tr-dashboard-wall .um-activity-bodyinner-photo img {
    width: 100% !important;
    max-height: 500px !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
}

.tr-tab-opslag .um-activity-bodyinner-photo a,
.tr-dashboard-wall .um-activity-bodyinner-photo a {
    display: block !important;
    line-height: 0 !important;
}

/* Likes/comments tæller — flyt ind i action-bar via flex */
.tr-tab-opslag .um-activity-disp,
.tr-dashboard-wall .um-activity-disp {
    display: none !important;
}

/* ── Sektion 4: Like / Kommentar / Del — Facebook-style ── */
.tr-tab-opslag .um-activity-foot.status,
.tr-dashboard-wall .um-activity-foot.status {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 6px 16px !important;
    padding-left: 4px !important;
    border-top: 1px solid #e4ebe7 !important;
    border-bottom: none !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: unset !important;
    white-space: normal !important;
    margin: 0 !important;
}

.tr-tab-opslag .um-activity-actions,
.tr-dashboard-wall .um-activity-actions {
    display: flex !important;
    float: none !important;
    gap: 2px !important;
    width: auto !important;
    padding-left: 0 !important;
}

.tr-tab-opslag .um-activity-like,
.tr-tab-opslag .um-activity-comment,
.tr-dashboard-wall .um-activity-like,
.tr-dashboard-wall .um-activity-comment {
    flex: none !important;
    text-align: center !important;
}

/* Skjul UM's originale ikoner — vi bruger SVG via ::before */
.tr-tab-opslag .um-activity-like i,
.tr-tab-opslag .um-activity-comment i,
.tr-dashboard-wall .um-activity-like i,
.tr-dashboard-wall .um-activity-comment i {
    display: none !important;
}

/* Like + Kommentar knapper — Facebook outline style med tal */
.tr-tab-opslag .um-activity-like a,
.tr-tab-opslag .um-activity-comment a,
.tr-dashboard-wall .um-activity-like a,
.tr-dashboard-wall .um-activity-comment a {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    border: none !important;
    text-decoration: none !important;
    transition: background 0.15s !important;
    background: transparent !important;
}

.tr-tab-opslag .um-activity-like a:hover,
.tr-tab-opslag .um-activity-comment a:hover,
.tr-dashboard-wall .um-activity-like a:hover,
.tr-dashboard-wall .um-activity-comment a:hover {
    background: #f0f2f5 !important;
}

/* Vis UM tekst (antal vises via span) */
.tr-tab-opslag .um-activity-like span,
.tr-tab-opslag .um-activity-comment span,
.tr-dashboard-wall .um-activity-like span,
.tr-dashboard-wall .um-activity-comment span {
    display: inline !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #65676B !important;
}

/* Like ikon — outline thumbs up */
.tr-tab-opslag .um-activity-like a::before,
.tr-dashboard-wall .um-activity-like a::before {
    content: "" !important;
    display: block !important;
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    background: #65676B !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9v12H1V9h4m4 12a2 2 0 01-2-2V9c0-.55.22-1.05.59-1.41L14.17 1l1.06 1.06c.27.27.44.64.44 1.05l-.03.32L14.69 8H21a2 2 0 012 2v2c0 .26-.05.5-.14.73l-3.02 7.05C19.54 20.5 18.83 21 18 21H9m0-2h9.03L21 12v-2h-8.79l1.13-5.43L9 9v10z'/%3E%3C/svg%3E") center/contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 9v12H1V9h4m4 12a2 2 0 01-2-2V9c0-.55.22-1.05.59-1.41L14.17 1l1.06 1.06c.27.27.44.64.44 1.05l-.03.32L14.69 8H21a2 2 0 012 2v2c0 .26-.05.5-.14.73l-3.02 7.05C19.54 20.5 18.83 21 18 21H9m0-2h9.03L21 12v-2h-8.79l1.13-5.43L9 9v10z'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

/* Like active — filled */
.tr-tab-opslag .um-activity-like.active a::before,
.tr-dashboard-wall .um-activity-like.active a::before {
    background: var(--color-primary) !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h4V9H1v12zm22-11c0-1.1-.9-2-2-2h-6.31l.95-4.57.03-.32c0-.41-.17-.79-.44-1.06L14.17 1 7.59 7.59C7.22 7.95 7 8.45 7 9v10c0 1.1.9 2 2 2h9c.83 0 1.54-.5 1.84-1.22l3.02-7.05c.09-.23.14-.47.14-.73v-2z'/%3E%3C/svg%3E") !important;
}

.tr-tab-opslag .um-activity-like.active span,
.tr-dashboard-wall .um-activity-like.active span {
    color: var(--color-primary) !important;
}

/* Del knap — outline share ikon */
.tr-tab-opslag .um-activity-share,
.tr-dashboard-wall .um-activity-share {
    flex: none !important;
}

.tr-tab-opslag .um-activity-share a,
.tr-dashboard-wall .um-activity-share a {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    border: none !important;
    text-decoration: none !important;
    transition: background 0.15s !important;
    background: transparent !important;
}

.tr-tab-opslag .um-activity-share a:hover,
.tr-dashboard-wall .um-activity-share a:hover {
    background: #f0f2f5 !important;
}

.tr-tab-opslag .um-activity-share i,
.tr-dashboard-wall .um-activity-share i {
    display: none !important;
}

.tr-tab-opslag .um-activity-share span,
.tr-dashboard-wall .um-activity-share span {
    display: inline !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #65676B !important;
}

.tr-tab-opslag .um-activity-share a::before,
.tr-dashboard-wall .um-activity-share a::before {
    content: "" !important;
    display: block !important;
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    background: #65676B !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E") center/contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

/* Kommentar ikon — outline chat bubble */
.tr-tab-opslag .um-activity-comment a::before,
.tr-dashboard-wall .um-activity-comment a::before {
    content: "" !important;
    display: block !important;
    flex-shrink: 0 !important;
    width: 20px !important;
    height: 20px !important;
    background: #65676B !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z'/%3E%3C/svg%3E") center/contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H5.17L4 17.17V4h16v12z'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

/* Like-tæller i højre side af action-bar */
.tr-tab-opslag .um-activity-foot.status .um-activity-join,
.tr-dashboard-wall .um-activity-foot.status .um-activity-join {
    float: none !important;
}

/* Vis likes-antal via JS-injiceret element */
.tr-tab-opslag .um-activity-foot.status::after,
.tr-dashboard-wall .um-activity-foot.status::after {
    content: none;
}

/* ── Sektion 5: Kommentarer ── */
.tr-tab-opslag .um-activity-comments,
.tr-dashboard-wall .um-activity-comments {
    padding: 8px 16px 12px !important;
}

.tr-tab-opslag .um-activity-comment-area,
.tr-dashboard-wall .um-activity-comment-area {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--space-2) !important;
    margin-bottom: var(--space-3) !important;
}

.tr-tab-opslag .um-activity-comment-area .um-activity-ava img,
.tr-dashboard-wall .um-activity-comment-area .um-activity-ava img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
}

/* Kommentar-boble */
.tr-tab-opslag .um-activity-comment-data,
.tr-dashboard-wall .um-activity-comment-data {
    background: #f0f2f5 !important;
    border-radius: 18px !important;
    padding: 8px 14px !important;
    flex: 1;
}

.tr-tab-opslag .um-activity-comment-data .um-link,
.tr-dashboard-wall .um-activity-comment-data .um-link {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #1c1e21 !important;
    text-decoration: none !important;
    display: block !important;
}

.tr-tab-opslag .um-activity-comment-text,
.tr-dashboard-wall .um-activity-comment-text {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #1c1e21 !important;
}

/* ── Kommentar-input — separat sektion, fuld bredde ── */
.tr-tab-opslag .um-activity-commentl.um-activity-comment-area,
.tr-dashboard-wall .um-activity-commentl.um-activity-comment-area {
    display: flex !important;
    align-items: flex-start !important;
    gap: var(--space-3) !important;
    /* Bryd ud af .um-activity-comments padding */
    margin: 0 -16px !important;
    padding: 10px 16px !important;
    border-top: 1px solid #e4ebe7 !important;
    position: static !important;
    min-height: unset !important;
    height: auto !important;
    overflow: visible !important;
}

.tr-tab-opslag .um-activity-commentl.um-activity-comment-area .um-activity-comment-avatar,
.tr-dashboard-wall .um-activity-commentl.um-activity-comment-area .um-activity-comment-avatar {
    position: static !important;
    flex-shrink: 0 !important;
    height: auto !important;
    line-height: 0 !important;
    padding-top: 2px !important;
}

.tr-tab-opslag .um-activity-commentl.um-activity-comment-area .um-activity-comment-avatar img,
.tr-dashboard-wall .um-activity-commentl.um-activity-comment-area .um-activity-comment-avatar img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.tr-tab-opslag .um-activity-commentl.um-activity-comment-area .um-activity-comment-box,
.tr-dashboard-wall .um-activity-commentl.um-activity-comment-area .um-activity-comment-box {
    flex: 1 !important;
    min-width: 0 !important;
}

.tr-tab-opslag .um-activity-comment-textarea,
.tr-dashboard-wall .um-activity-comment-textarea,
.tr-tab-opslag .um-activity-comment-textarea:hover,
.tr-dashboard-wall .um-activity-comment-textarea:hover,
.tr-tab-opslag .um-activity-comment-textarea:focus,
.tr-dashboard-wall .um-activity-comment-textarea:focus {
    width: 100% !important;
    background: #f0f2f5 !important;
    border: none !important;
    border-radius: 18px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    resize: none !important;
    min-height: unset !important;
    height: 36px !important;
    max-height: 116px !important;
    outline: none !important;
    box-shadow: none !important;
    line-height: 20px !important;
    box-sizing: border-box !important;
    overflow-y: hidden !important;
    transition: height 0.1s ease !important;
}

/* Send-knap som rund ikon */
.tr-tab-opslag .um-activity-commentl.um-activity-comment-area .um-activity-right,
.tr-dashboard-wall .um-activity-commentl.um-activity-comment-area .um-activity-right {
    display: flex !important;
    float: none !important;
    align-items: flex-start !important;
    flex-shrink: 0 !important;
    padding-top: 2px !important;
}

.tr-tab-opslag .um-activity-comment-area a.um-activity-comment-post,
.tr-dashboard-wall .um-activity-comment-area a.um-activity-comment-post {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: var(--color-primary) !important;
    border: none !important;
    padding: 0 !important;
    font-size: 0 !important;
    cursor: pointer !important;
    float: none !important;
    margin: 0 !important;
    text-decoration: none !important;
    transition: opacity 0.15s !important;
}

.tr-tab-opslag .um-activity-comment-area a.um-activity-comment-post::before,
.tr-dashboard-wall .um-activity-comment-area a.um-activity-comment-post::before {
    content: "" !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    background: var(--color-bg) !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E") center/contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E") center/contain no-repeat !important;
}

.tr-tab-opslag .um-activity-comment-area a.um-activity-comment-post:hover,
.tr-dashboard-wall .um-activity-comment-area a.um-activity-comment-post:hover {
    opacity: 0.85 !important;
}

.tr-tab-opslag .um-activity-comment-area a.um-activity-comment-post.um-disabled,
.tr-dashboard-wall .um-activity-comment-area a.um-activity-comment-post.um-disabled {
    background: #E4E6EB !important;
}

.tr-tab-opslag .um-activity-comment-area a.um-activity-comment-post.um-disabled::before,
.tr-dashboard-wall .um-activity-comment-area a.um-activity-comment-post.um-disabled::before {
    background: #BCC0C4 !important;
}

/* Skjul UM clear divs */
.tr-tab-opslag .um-activity-commentl .um-clear,
.tr-dashboard-wall .um-activity-commentl .um-clear {
    display: none !important;
}

/* ── Eksisterende kommentarer ── */
.tr-tab-opslag .um-activity-commentl:not(.um-activity-comment-area),
.tr-dashboard-wall .um-activity-commentl:not(.um-activity-comment-area) {
    padding-left: 40px !important;
    position: relative !important;
}

.tr-tab-opslag .um-activity-commentl:not(.um-activity-comment-area) .um-activity-comment-avatar img,
.tr-dashboard-wall .um-activity-commentl:not(.um-activity-comment-area) .um-activity-comment-avatar img {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.tr-tab-opslag .um-activity-comment-data,
.tr-dashboard-wall .um-activity-comment-data {
    background: #f0f2f5 !important;
    border-radius: 18px !important;
    padding: 8px 14px !important;
    display: inline-block !important;
}

.tr-tab-opslag .um-activity-comment-data .um-link,
.tr-dashboard-wall .um-activity-comment-data .um-link {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #1c1e21 !important;
}

.tr-tab-opslag .um-activity-comment-text,
.tr-dashboard-wall .um-activity-comment-text {
    font-size: 14px !important;
    line-height: 1.4 !important;
    color: #1c1e21 !important;
}

/* ── Sticky kommentar-bar i modal ── */
.tr-detail-modal__content .um-activity-commentl.um-activity-comment-area {
    position: sticky !important;
    bottom: 0 !important;
    margin: 0 -16px -12px !important;
    padding: 10px 16px !important;
    z-index: 10 !important;
    background: var(--color-bg) !important;
}

.tr-detail-modal .um-activity-commentl.um-activity-comment-area .um-activity-comment-avatar {
    position: static !important;
    flex-shrink: 0 !important;
    height: auto !important;
}

.tr-detail-modal .um-activity-commentl.um-activity-comment-area .um-activity-comment-avatar img {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
}

.tr-detail-modal .um-activity-commentl.um-activity-comment-area .um-activity-comment-box {
    flex: 1 !important;
}

.tr-detail-modal .um-activity-commentl.um-activity-comment-area .um-activity-comment-box textarea,
.tr-detail-modal .um-activity-commentl.um-activity-comment-area .um-activity-comment-box textarea:hover,
.tr-detail-modal .um-activity-commentl.um-activity-comment-area .um-activity-comment-box textarea:focus {
    width: 100% !important;
    background: #f0f2f5 !important;
    border: none !important;
    border-radius: 20px !important;
    padding: 8px 16px !important;
    font-size: 15px !important;
    resize: none !important;
    min-height: unset !important;
    height: 36px !important;
    outline: none !important;
    box-shadow: none !important;
    line-height: 20px !important;
}

/* Modal send-knap — lidt større */
.tr-detail-modal__content .um-activity-commentl.um-activity-comment-area .um-activity-comment-post {
    width: 36px !important;
    min-width: 36px !important;
    height: 36px !important;
}

.tr-detail-modal__content .um-activity-commentl.um-activity-comment-area .um-activity-comment-post::before {
    width: 18px !important;
    height: 18px !important;
}

/* Fjern UM floats */
.tr-tab-opslag .um-activity-widget .um-clear,
.tr-dashboard-wall .um-activity-widget .um-clear {
    display: none !important;
}

/* -------------------------------------------------------
   POST DETAIL MODAL — fullscreen scroll popup
   ------------------------------------------------------- */
.tr-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-10) var(--space-4);
    overflow-y: auto;
}

.tr-detail-modal__dialog {
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    width: 720px;
    max-width: 100%;
    box-shadow: 0 12px 28px rgba(0,0,0,0.25);
    overflow: hidden;
}

.tr-detail-modal__header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border-input);
}

.tr-detail-modal__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text);
}

.tr-detail-modal__close {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--color-border-input);
    font-size: 22px;
    line-height: 1;
    color: #606770;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.tr-detail-modal__close:hover {
    background: #d8dadf;
}

.tr-detail-modal__content {
    max-height: calc(90vh - 60px);
    overflow-y: auto;
}

.tr-detail-modal__content .um-activity-widget {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* Vis fuld billedehøjde i modal */
.tr-detail-modal__content .um-activity-bodyinner-photo img {
    max-height: none !important;
    object-fit: contain !important;
}


/* Opslag-kort (profil-tab liste) */
.tr-opslag-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.tr-opslag-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-5);
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
}

.tr-opslag-card__img {
    width: 120px;
    min-width: 120px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

.tr-opslag-card__img img {
    width: 100%;
    height: auto;
    display: block;
}

.tr-opslag-card__body {
    flex: 1;
}

.tr-opslag-card__text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text);
    margin: 0 0 8px 0;
}

.tr-opslag-card__date {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

@media (max-width: 640px) {
    .tr-opslag-card {
        flex-direction: column;
    }
    .tr-opslag-card__img {
        width: 100%;
        min-width: unset;
    }
}

/* -------------------------------------------------------
   FORLØB DASHBOARD CARDS (mine forløb / træner-visning)
   ------------------------------------------------------- */
.tr-forloeb-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tr-forloeb-card {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #f0f4f1;
}

.tr-forloeb-card:last-child { border-bottom: none; padding-bottom: 0; }
.tr-forloeb-card:first-child { padding-top: 0; }

.tr-forloeb-card__img {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: #edf2ef;
}

.tr-forloeb-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.tr-forloeb-card__body { flex: 1; min-width: 0; }

.tr-forloeb-card__title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 0 3px 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tr-forloeb-card__desc {
    font-size: 12px !important;
    color: var(--color-text-secondary) !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.4 !important;
}

.tr-forloeb-card__btns {
    display: flex;
    gap: var(--space-2);
}

/* -------------------------------------------------------
   FORLØB ARKIV (archive-forloeb.php)
   ------------------------------------------------------- */
.tr-forloeb-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--space-5);
}

.tr-forloeb-archive-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.15s;
}

.tr-forloeb-archive-card:hover {
    box-shadow: 0 4px 16px rgba(44,61,51,0.10);
}

.tr-forloeb-archive-card__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #edf2ef;
}

.tr-forloeb-archive-card__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block !important;
    margin: 0 !important;
}

.tr-forloeb-archive-card__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.tr-forloeb-archive-card__title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #111 !important;
    margin: 0 0 4px 0 !important;
    line-height: 1.3 !important;
}

.tr-forloeb-archive-card__trainer {
    font-size: 12px;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none !important;
    margin-bottom: var(--space-2);
    display: block;
}

.tr-forloeb-archive-card__trainer:hover {
    text-decoration: underline !important;
}

.tr-forloeb-archive-card__desc {
    font-size: 13px !important;
    color: #777 !important;
    line-height: 1.5 !important;
    margin: 0 0 14px 0 !important;
    flex: 1;
}

.tr-forloeb-archive-card__btns {
    display: flex;
    gap: var(--space-2);
}

/* -------------------------------------------------------
   SINGLE FORLØB (single-forloeb.php)
   ------------------------------------------------------- */

/* Fjern Astra container-begrænsning på single-forloeb */
.single-forloeb .site-content .ast-container {
    display: block !important;
    max-width: 100% !important;
    padding: 0 !important;
}

.single-forloeb #primary,
.single-forloeb .content-area {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

.single-forloeb .entry-content {
    margin: 0 !important;
}

.single-forloeb .entry-header,
.single-forloeb .post-navigation {
    display: none !important;
}

.single-forloeb article {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
}

/* Hero med cover-billede baggrund */
.tr-forloeb-hero {
    position: relative;
    background-size: cover;
    background-position: center;
    background-color: var(--color-primary);
    min-height: 420px;
    display: flex;
    align-items: flex-end;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    width: 100vw !important;
}

.tr-forloeb-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0.3) 100%);
}

.tr-forloeb-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-10) var(--space-6);
    width: 100%;
}

.tr-forloeb-hero__title {
    font-size: 36px;
    font-weight: var(--font-bold);
    color: var(--color-text-inverse);
    margin: 0 0 8px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.tr-forloeb-hero__sub {
    font-size: 16px;
    color: rgba(255,255,255,0.85);
    margin: 0 0 16px;
    max-width: 600px;
}

.tr-forloeb-hero__trainer {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

.tr-forloeb-hero__trainer:hover {
    color: var(--color-text-inverse);
    text-decoration: none;
}

.tr-forloeb-hero__trainer-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.5);
}

/* Detalje-kort (varighed, pris, etc) */
.tr-forloeb-single__details {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.tr-forloeb-detail {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    text-align: center;
}

.tr-forloeb-detail__icon {
    font-size: 22px;
    line-height: 1;
}

.tr-forloeb-detail__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    font-weight: 600;
}

.tr-forloeb-detail__value {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}

/* Indhold + sidebar grid */
.tr-forloeb-single {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-8);
    align-items: start;
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}

.tr-forloeb-single__content {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-6);
    line-height: 1.7;
    font-size: 15px;
    color: var(--color-text);
}

/* Sidebar */
.tr-forloeb-single__sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    position: sticky;
    top: 80px;
}

.tr-forloeb-single__cta {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tr-forloeb-single__cta-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.tr-forloeb-single__cta-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin: 0;
}

.tr-forloeb-single__cta-btn {
    display: block;
    text-align: center;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s;
}

.tr-forloeb-single__cta-btn:hover {
    opacity: 0.85;
    color: var(--color-text-inverse);
    text-decoration: none;
}

.tr-forloeb-single__cta-msg .um-message-btn,
.tr-forloeb-single__cta-msg a.um-message-btn {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 10px !important;
    border-radius: var(--radius-md) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background: #f0f4f1 !important;
    color: var(--color-primary) !important;
    border: none !important;
    text-decoration: none !important;
}

/* Træner-kort i sidebar */
.tr-forloeb-single__trainer-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
}

.tr-forloeb-single__trainer-label {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--color-text-tertiary);
    letter-spacing: 0.05em;
    margin-bottom: var(--space-3);
    display: block;
}

.tr-forloeb-single__trainer-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    color: var(--color-text);
}

.tr-forloeb-single__trainer-link:hover {
    text-decoration: none;
}

.tr-forloeb-single__trainer-img {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.tr-forloeb-single__trainer-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    display: block;
}

.tr-forloeb-single__trainer-view {
    font-size: 13px;
    color: var(--color-primary);
    font-weight: 500;
}

/* LEGACY — Messenger-knap i sidebar (gammel) */
.tr-single-forloeb__cta .um-message-btn,
.tr-single-forloeb__cta a.um-message-btn {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 9px 18px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background: #f0f4f1 !important;
    color: var(--color-primary) !important;
    text-decoration: none !important;
    border: none !important;
}

.tr-single-forloeb__trainer {
    padding: var(--space-4) var(--space-4);
}

.tr-single-forloeb__trainer-label {
    font-size: 11px !important;
    text-transform: uppercase !important;
    color: #aaa !important;
    letter-spacing: 0.05em !important;
    margin: 0 0 8px 0 !important;
}

.tr-single-forloeb__trainer-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none !important;
    color: #111 !important;
    font-weight: 600;
    font-size: 14px;
}

.tr-single-forloeb__trainer-img {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 !important;
}

@media (max-width: 768px) {
    .tr-single-forloeb {
        grid-template-columns: 1fr;
    }

    .tr-single-forloeb__sidebar {
        position: static;
    }

    .tr-forloeb-single {
        grid-template-columns: 1fr;
    }

    .tr-forloeb-single__sidebar {
        position: static;
    }

    .tr-forloeb-hero__title {
        font-size: 26px;
    }

    .tr-forloeb-archive-grid {
        grid-template-columns: 1fr;
    }
}

/* Responsivt: én kolonne på mobil */
@media (max-width: 1024px) {
    .tr-profile-cols {
        grid-template-columns: 1fr;
    }
}

/* --- Grupper-boks --- */
.tr-profile-groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-1);
}

.tr-profile-group-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none !important;
    color: #222 !important;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.15s;
}

.tr-profile-group-item:hover { color: var(--color-primary) !important; }

.tr-profile-group-item__img {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #edf2ef;
    flex-shrink: 0;
}

.tr-profile-group-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.tr-profile-group-item__name {
    line-height: 1.3;
}

.tr-profile-info-card__more-link {
    display: inline-block;
    margin-top: var(--space-3);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary) !important;
    text-decoration: none !important;
}

.tr-profile-info-card__more-link:hover {
    text-decoration: underline !important;
}

/* --- Opslag-boks --- */
.tr-profile-posts-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.tr-profile-post-item {
    display: flex;
    gap: var(--space-4);
    padding: 14px 0;
    border-bottom: 1px solid #f0f4f1;
}

.tr-profile-post-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.tr-profile-post-item__img {
    flex-shrink: 0;
    width: 72px;
    height: 54px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #edf2ef;
}

.tr-profile-post-item__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.tr-profile-post-item__body {
    flex: 1;
    min-width: 0;
}

.tr-profile-post-item__text {
    font-size: 14px !important;
    color: #333 !important;
    line-height: 1.5 !important;
    margin: 0 0 4px 0 !important;
}

.tr-profile-post-item__date {
    font-size: 12px;
    color: var(--color-text-disabled);
}

/* -------------------------------------------------------
   PROFIL HEADER CTA — Facebook-style
   Navn + stats til venstre, knapper absolut højre
   ------------------------------------------------------- */

/* Skjul followers-bar + messaging-knap i navbar */
.um-profile-navbar .um-followers-links,
.um-profile-navbar .um-followers-bar,
.um-profile-navbar .um-message-btn,
.um-profile-navbar a.um-message-btn {
    display: none !important;
}

/* Giv meta-området relativ positionering til at holde CTA-knapper */
.um-profile .um-profile-meta {
    position: relative !important;
    padding-right: 260px !important;
}

/* Tving navn til fuld bredde så stats går på ny linje */
.um-profile .um-name {
    display: block !important;
    width: 100% !important;
}

/* Følger-stats — vises under navn via JS */
.tr-profile-follow-stats {
    display: flex !important;
    width: 100% !important;
    gap: var(--space-4);
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 4px 0 6px 0;
}

.tr-follow-stat {
    text-decoration: none !important;
    color: var(--color-text-secondary) !important;
    border: none !important;
}

.tr-follow-stat strong {
    color: var(--color-text);
    font-weight: 700;
}

.tr-follow-stat:hover strong {
    text-decoration: underline;
}

/* CTA knapper — absolut positioneret til højre, centreret vertikalt */
.tr-profile-header-cta {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
}

/* Base CTA button */
.tr-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: none !important;
    transition: opacity 0.15s ease !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}

.tr-cta-btn:hover {
    opacity: 0.85 !important;
    text-decoration: none !important;
}

.tr-cta-btn--secondary {
    background: #f0f4f1 !important;
    color: var(--color-primary) !important;
}

/* Messaging-knap */
.tr-profile-header-cta .um-message-btn,
.tr-profile-header-cta a.um-message-btn {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    text-decoration: none !important;
    border: none !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    min-width: 0 !important;
    width: auto !important;
}

/* Følg-knap */
.tr-profile-header-cta a.um-follow-btn,
.tr-profile-header-cta a.um-unfollow-btn,
.tr-profile-header-cta a.um-unfollow-btn2 {
    display: inline-flex !important;
    align-items: center !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    background: #f0f4f1 !important;
    color: var(--color-primary) !important;
    text-decoration: none !important;
    border: none !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
    min-width: 0 !important;
    width: auto !important;
}

.tr-profile-header-cta a.um-follow-btn:before,
.tr-profile-header-cta a.um-unfollow-btn:before,
.tr-profile-header-cta a.um-unfollow-btn2:before {
    display: none !important;
}

/* Responsive */
@media (max-width: 640px) {
    .um-profile .um-profile-meta {
        padding-right: 0 !important;
    }

    .tr-profile-header-cta {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        transform: none !important;
        flex-wrap: wrap !important;
        margin-top: var(--space-3) !important;
    }
}

/* -------------------------------------------------------
   ROADMAP — Feature voting system
   ------------------------------------------------------- */


/* Roadmap/Idébanken body centrering */
.tr-roadmap .tr-groups-body {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}

/* Filtre */
.tr-roadmap__filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.tr-roadmap__tabs {
    display: flex;
    gap: var(--space-1);
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--space-1);
}

.tr-roadmap__tab {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tr-roadmap__tab:hover {
    background: var(--color-border-input);
    color: var(--color-text);
    text-decoration: none;
}

.tr-roadmap__tab.is-active {
    background: var(--color-bg);
    color: var(--color-text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.tr-roadmap__sort {
    display: flex;
    gap: var(--space-1);
}

.tr-roadmap__sort-btn {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tr-roadmap__sort-btn:hover {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
    text-decoration: none;
}

.tr-roadmap__sort-btn.is-active {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.tr-roadmap__sort-btn.is-active:hover {
    color: var(--color-text-inverse);
}

/* Grid */
.tr-roadmap__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Projekt-kort */
.tr-roadmap__card {
    display: flex;
    align-items: flex-start;
    gap: 0;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: box-shadow 0.15s;
}

.tr-roadmap__card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

/* Upvote sektion */
.tr-roadmap__vote {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-4) var(--space-4);
    border-right: 1px solid var(--color-border);
    min-width: 60px;
    gap: 2px;
}

.tr-roadmap__vote-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #BCC0C4;
    padding: var(--space-1);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tr-roadmap__vote-btn:hover {
    color: var(--color-primary);
    background: var(--color-bg-tertiary);
}

.tr-roadmap__vote.is-voted .tr-roadmap__vote-btn {
    color: var(--color-primary);
}

.tr-roadmap__vote-count {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
}

.tr-roadmap__vote.is-voted .tr-roadmap__vote-count {
    color: var(--color-primary);
}

/* Kort-body */
.tr-roadmap__card-body {
    flex: 1;
    padding: var(--space-4) var(--space-5);
    min-width: 0;
}

.tr-roadmap__card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 4px 0;
}

.tr-roadmap__card-desc {
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text-secondary);
    margin: 0 0 10px 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Meta-linje */
.tr-roadmap__card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Status badges */
.tr-roadmap__badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px var(--space-3);
    border-radius: var(--radius-lg);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.tr-roadmap__badge--idea {
    background: var(--color-border-input);
    color: var(--color-text-secondary);
}

.tr-roadmap__badge--planned {
    background: #E3F2FD;
    color: #1565C0;
}

.tr-roadmap__badge--in-progress {
    background: var(--color-success-bg-muted);
    color: #2E7D32;
}

.tr-roadmap__badge--done {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.tr-roadmap__badge--cat {
    background: var(--color-warning-bg-muted);
    color: #F57F17;
}

.tr-roadmap__comments {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.tr-roadmap__author {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

/* Opret-modal form */
.tr-roadmap__form {
    padding: var(--space-5);
}

.tr-roadmap__form-field {
    margin-bottom: var(--space-4);
}

.tr-roadmap__form-field label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

.tr-roadmap__form-field input[type="text"],
.tr-roadmap__form-field textarea,
.tr-roadmap__form-field select {
    width: 100%;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-md);
    box-sizing: border-box;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tr-roadmap__form-field input:focus,
.tr-roadmap__form-field textarea:focus,
.tr-roadmap__form-field select:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

.tr-roadmap__form-submit {
    width: 100%;
    padding: 14px 0;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: var(--font-semibold);
    cursor: pointer;
    transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
    box-shadow: var(--shadow-xs);
}

.tr-roadmap__form-submit:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

@media (max-width: 640px) {
    .tr-roadmap__filters {
        flex-direction: column;
        align-items: stretch;
    }
    .tr-roadmap__tabs {
        overflow-x: auto;
    }
}

/* -------------------------------------------------------
   BOOKING SYSTEM
   ------------------------------------------------------- */

/* Tilgængeligheds-indstilling */
.tr-availability {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tr-availability__row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
}

.tr-availability__day {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
}

.tr-availability__day input[type="checkbox"] {
    accent-color: var(--color-primary);
    width: 18px;
    height: 18px;
}

.tr-availability__slots {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
}

.tr-availability__slot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Plus-knap med dropdown-menu */
.tr-avail-add-wrap {
    position: relative;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

.tr-avail-add {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--color-border-strong);
    background: var(--color-bg);
    color: var(--color-primary);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tr-avail-add:hover {
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border-color: var(--color-primary);
}

.tr-avail-add-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 4px);
    background: var(--color-bg);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    padding: var(--space-1);
    z-index: 10;
    min-width: 180px;
}

.tr-avail-add-menu.is-open {
    display: block;
}

.tr-avail-add-option {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: none;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.tr-avail-add-option:hover {
    background: var(--color-bg-tertiary);
}

.tr-avail-remove {
    background: none;
    border: none;
    color: var(--color-text-disabled);
    font-size: 18px;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}

.tr-avail-remove:hover {
    color: var(--color-danger);
}

/* Undtagelse-slot (inline, anden farve) */
.tr-availability__slot--exception {
    background: var(--color-warning-bg-muted);
    border: 1px solid #FFE082;
    border-radius: var(--radius-sm);
    padding: var(--space-1) var(--space-2);
}

.tr-avail-exception-label {
    font-size: 11px;
    font-weight: 700;
    color: #E65100;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-right: 4px;
}

.tr-availability__time {
    padding: var(--space-2) var(--space-3);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: 14px;
    outline: none;
}

.tr-availability__time:focus {
    border-color: var(--color-primary);
}

.tr-availability__time:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* Booking-kort */
.tr-booking-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    margin-bottom: var(--space-2);
}

.tr-booking-card__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 52px;
    padding: 8px 0;
    background: var(--color-bg-tertiary);
    border-radius: var(--radius-md);
}

.tr-booking-card__day {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
}

.tr-booking-card__num {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.1;
}

.tr-booking-card__month {
    font-size: 11px;
    color: var(--color-text-secondary);
}

.tr-booking-card__info {
    flex: 1;
    min-width: 0;
}

.tr-booking-card__top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.tr-booking-card__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
}

.tr-booking-card__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    display: block;
}

.tr-booking-card__time {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.tr-booking-card__note {
    font-size: 13px;
    color: var(--color-text-secondary);
    margin: 4px 0 0;
    font-style: italic;
}

.tr-booking-card__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.tr-booking-card__badge {
    font-size: 11px;
    font-weight: 700;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-lg);
    text-transform: uppercase;
}

.tr-booking-card__badge--pending {
    background: #FFF3E0;
    color: #E65100;
}

.tr-booking-card__badge--confirmed {
    background: var(--color-success-bg-muted);
    color: #2E7D32;
}

.tr-booking-card__badge--cancelled {
    background: #FFEBEE;
    color: #C62828;
}

.tr-booking-card__btn {
    padding: var(--space-2) var(--space-4);
    border: none;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
}

.tr-booking-card__btn--confirm {
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.tr-booking-card__btn--cancel {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

.tr-booking-card__btn:hover {
    opacity: 0.85;
}

/* Booking-modal form */
.tr-booking-form {
    padding: var(--space-5);
}

.tr-booking-form__field {
    margin-bottom: var(--space-4);
}

.tr-booking-form__field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: var(--space-2);
}

.tr-booking-form__input {
    width: 100%;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: 15px;
    box-sizing: border-box;
    outline: none;
}

.tr-booking-form__input:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* Tidsslot-grid */
.tr-booking-form__slot-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.tr-booking-form__slot {
    padding: var(--space-3) var(--space-5);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tr-booking-form__slot:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-secondary);
}

.tr-booking-form__slot.is-selected {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-text-inverse);
}

.tr-booking-form__submit {
    width: 100%;
    padding: var(--space-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-md);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    margin-top: var(--space-2);
}

.tr-booking-form__submit:hover {
    opacity: 0.85;
}

.tr-booking-form__submit:disabled {
    background: #E4E6EB;
    color: #BCC0C4;
    cursor: default;
}

.tr-booking-form__msg {
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    margin-top: var(--space-3);
}

/* CTA knap på profil */
.tr-cta-btn--primary {
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border-radius: 8px !important;
    padding: 8px 18px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: opacity 0.15s !important;
    cursor: pointer !important;
    border: none !important;
}

.tr-cta-btn--primary:hover {
    opacity: 0.85 !important;
    color: var(--color-text-inverse) !important;
}

@media (max-width: 640px) {
    .tr-availability__row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-2);
    }
    .tr-availability__day {
        min-width: unset;
    }
    .tr-booking-card {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .tr-booking-card__date {
        flex-direction: row;
        gap: var(--space-2);
        justify-content: center;
    }
}

/* -------------------------------------------------------
   FREMSKRIDTS-TRACKER
   ------------------------------------------------------- */

/* Stat-kort grid */
.tr-progress__stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.tr-progress__stats--compact {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: var(--space-3);
}

.tr-progress__stat {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    text-align: center;
}

.tr-progress__stat-icon {
    font-size: 22px;
    line-height: 1;
}

.tr-progress__stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    font-weight: 600;
}

.tr-progress__stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
}

/* SVG graf */
.tr-progress__chart-wrap {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}

.tr-progress-chart {
    width: 100%;
    height: auto;
}

.tr-progress-chart__empty {
    text-align: center;
    color: var(--color-text-tertiary);
    font-size: 13px;
    padding: 20px 0;
}

/* Sektion-titler */
.tr-progress__section-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 12px;
}

/* Actions (knapper) */
.tr-progress__actions {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

/* Synligheds-toggle */
.tr-progress__visibility {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: 14px;
    color: var(--color-text-secondary);
}

.tr-progress__vis-select {
    padding: var(--space-2) var(--space-3);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font-size: 13px;
    background: var(--color-bg);
    outline: none;
}

.tr-progress__vis-select:focus {
    border-color: var(--color-primary);
}

/* Billede-galleri */
.tr-progress__gallery {
    margin-bottom: var(--space-6);
}

.tr-progress__gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-3);
}

.tr-progress__photo-group {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    text-align: center;
}

.tr-progress__photo-date {
    font-size: 12px;
    color: var(--color-text-tertiary);
    display: block;
    margin-bottom: var(--space-2);
}

.tr-progress__photo {
    width: 100%;
    border-radius: var(--radius-sm);
    object-fit: cover;
    max-height: 200px;
    margin-bottom: var(--space-1);
}

/* PR-kort */
.tr-progress__pr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-3);
}

.tr-progress__pr-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.tr-progress__pr-exercise {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    font-weight: 600;
}

.tr-progress__pr-value {
    font-size: 22px;
    font-weight: var(--font-bold);
    color: var(--color-primary);
}

.tr-progress__pr-date {
    font-size: 11px;
    color: var(--color-text-disabled);
}

/* Historik-liste */
.tr-progress__history {
    margin-bottom: var(--space-6);
}

.tr-progress__entry {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    margin-bottom: var(--space-2);
}

.tr-progress__entry-date {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    min-width: 80px;
    padding-top: 2px;
}

.tr-progress__entry-data {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    flex: 1;
}

.tr-progress__entry-metric {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

.tr-progress__entry-note {
    font-size: 13px;
    color: var(--color-text-secondary);
    font-style: italic;
    width: 100%;
}

/* Fil-upload input */
.tr-progress__file-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 2px dashed #d0d9d3;
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.tr-progress__file-input:hover {
    border-color: var(--color-primary);
}

/* Kropsmål grid i modal */
.tr-progress__measures-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.tr-progress__measures-grid .tr-roadmap__form-field {
    margin-bottom: 0;
}

/* Responsiv */
@media (max-width: 640px) {
    .tr-progress__stats {
        grid-template-columns: 1fr;
    }
    .tr-progress__pr-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .tr-progress__gallery-grid {
        grid-template-columns: 1fr;
    }
    .tr-progress__measures-grid {
        grid-template-columns: 1fr;
    }
    .tr-progress__entry {
        flex-direction: column;
        gap: var(--space-2);
    }
}

/* -------------------------------------------------------
   CUSTOM FOOTER
   ------------------------------------------------------- */

/* Skjul Astra's default footer */
.site-footer,
.ast-small-footer,
.site-footer-primary-section,
footer.site-footer {
    display: none !important;
}

.tr-footer {
    background: linear-gradient(135deg, #1a2e23 0%, #2C3D33 50%, #1f332a 100%);
    color: rgba(255,255,255,0.7);
    padding: 60px 0 0;
}

.tr-footer__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-10);
}

.tr-footer__logo {
    font-size: 20px;
    font-weight: var(--font-bold);
    letter-spacing: 0.18em;
    color: var(--color-text-inverse);
    display: block;
    margin-bottom: var(--space-3);
}

.tr-footer__desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255,255,255,0.55);
    margin: 0 0 20px;
    max-width: 280px;
}

.tr-footer__social {
    display: flex;
    gap: var(--space-3);
}

.tr-footer__social-link {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.6);
    transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.tr-footer__social-link:hover {
    background: rgba(255,255,255,0.15);
    color: var(--color-text-inverse);
    transform: translateY(-2px);
}

.tr-footer__heading {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-inverse);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 16px;
}

.tr-footer__col {
    display: flex;
    flex-direction: column;
}

.tr-footer__link {
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    padding: 5px 0;
    transition: color 0.15s;
}

.tr-footer__link:hover {
    color: var(--color-text-inverse);
    text-decoration: none;
}

.tr-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin-top: var(--space-12);
    padding: var(--space-5) var(--space-6);
    text-align: center;
}

.tr-footer__bottom p {
    font-size: 13px;
    color: rgba(255,255,255,0.35);
    margin: 0;
}

@media (max-width: 768px) {
    .tr-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }
}

@media (max-width: 480px) {
    .tr-footer__inner {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .tr-footer {
        padding: 40px 0 0;
    }
}

/* -------------------------------------------------------
   RESPECT & ACHIEVEMENT SYSTEM
   ------------------------------------------------------- */

/* Community body centrering */
.tr-community .tr-groups-body {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-8) var(--space-6);
}

/* Community layout */
.tr-community__layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: var(--space-8);
    align-items: start;
}

/* Respect feed */
.tr-respect-feed {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.tr-respect-card {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.tr-respect-card__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.tr-respect-card__body {
    flex: 1;
}

.tr-respect-card__text {
    font-size: 14px;
    color: var(--color-text);
    margin: 0 0 4px;
    line-height: 1.4;
}

.tr-respect-card__msg {
    font-size: 14px;
    color: var(--color-primary);
    font-style: italic;
    margin: 0 0 4px;
    background: var(--color-primary-light);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    display: inline-block;
}

.tr-respect-card__time {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

/* Leaderboard */
.tr-leaderboard {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    position: sticky;
    top: 80px;
}

.tr-leaderboard__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 16px;
}

.tr-leaderboard__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.tr-leaderboard__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    transition: background 0.15s;
}

.tr-leaderboard__item:hover {
    background: var(--color-bg-secondary);
}

.tr-leaderboard__rank {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-bg-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.tr-leaderboard__rank--gold {
    background: var(--color-warning-bg-muted);
    color: #F57F17;
}

.tr-leaderboard__rank--silver {
    background: #F5F5F5;
    color: #757575;
}

.tr-leaderboard__rank--bronze {
    background: #FBE9E7;
    color: #BF360C;
}

.tr-leaderboard__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.tr-leaderboard__info {
    flex: 1;
    min-width: 0;
}

.tr-leaderboard__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tr-leaderboard__badges {
    font-size: 14px;
    display: flex;
    gap: 2px;
}

.tr-leaderboard__count {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
    flex-shrink: 0;
}

/* Respect modal — type selector */
.tr-respect-types {
    display: flex;
    gap: var(--space-2);
}

.tr-respect-type {
    cursor: pointer;
}

.tr-respect-type input {
    display: none;
}

.tr-respect-type span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    font-size: 22px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tr-respect-type:hover span {
    border-color: var(--color-primary);
}

.tr-respect-type.is-selected span {
    border-color: var(--color-primary);
    background: var(--color-primary);
    box-shadow: 0 2px 8px rgba(44,61,51,0.2);
}

/* Bruger-søg resultater */
.tr-respect-results {
    max-height: 200px;
    overflow-y: auto;
}

.tr-respect-result {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background 0.1s;
}

.tr-respect-result:hover {
    background: var(--color-bg-tertiary);
}

.tr-respect-result__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}

/* Badge-ikoner (på profil) */
.tr-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.tr-badge {
    font-size: 18px;
    cursor: default;
    transition: transform 0.15s;
}

.tr-badge:hover {
    transform: scale(1.3);
}

/* Top respected denne uge */
.tr-top-respected {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.tr-top-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-4);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
    transition: transform 0.15s, box-shadow 0.15s;
}

.tr-top-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}

.tr-top-card__medal {
    font-size: 32px;
    line-height: 1;
}

.tr-top-card__avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #e4ebe7;
}

.tr-top-card__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text);
}

.tr-top-card__count {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
}

@media (max-width: 640px) {
    .tr-top-respected {
        grid-template-columns: 1fr;
    }
}

/* Level-kort */
.tr-level-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-bottom: var(--space-5);
}

.tr-level-card__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.tr-level-card__icon {
    font-size: 36px;
    line-height: 1;
}

.tr-level-card__name {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text);
    display: block;
}

.tr-level-card__xp {
    font-size: 13px;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.tr-level-card__progress {
    margin-bottom: var(--space-4);
}

.tr-level-card__bar {
    height: 8px;
    background: #e4ebe7;
    border-radius: 100px;
    overflow: hidden;
    margin-bottom: var(--space-2);
}

.tr-level-card__fill {
    height: 100%;
    background: linear-gradient(90deg, #2C3D33, #4ADE80);
    border-radius: 100px;
    transition: width 0.5s ease;
}

.tr-level-card__next {
    font-size: 12px;
    color: var(--color-text-tertiary);
}

/* Badges i level-kort */
.tr-level-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tr-level-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: transform 0.15s;
    cursor: default;
}

.tr-level-badge.is-earned {
    background: var(--color-bg);
    border: 2px solid #2C3D33;
    box-shadow: 0 2px 6px rgba(44,61,51,0.1);
}

.tr-level-badge.is-locked {
    background: var(--color-bg-tertiary);
    border: 2px solid var(--color-border);
    filter: grayscale(1);
    opacity: 0.4;
}

.tr-level-badge.is-earned:hover {
    transform: scale(1.2);
}

/* Sidebar sektion spacing */
.tr-sidebar-section {
    margin-bottom: var(--space-4);
}

/* Respect knap på profil */
.tr-cta-btn--respect {
    background: transparent !important;
    color: var(--color-primary) !important;
    border: 1.5px solid #d0d9d3 !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
    text-decoration: none !important;
}

.tr-cta-btn--respect:hover {
    background: var(--color-primary) !important;
    color: var(--color-text-inverse) !important;
    border-color: var(--color-primary) !important;
}

/* Respect knap på activity posts */
.um-activity-respect a {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: background 0.15s !important;
}

.um-activity-respect a:hover {
    background: #f0f2f5 !important;
}

.um-activity-respect span {
    font-size: 18px !important;
}

/* Responsiv */
@media (max-width: 768px) {
    .tr-community__layout {
        grid-template-columns: 1fr;
    }
    .tr-leaderboard {
        position: static;
    }
}


/* -------------------------------------------------------
   WORKOUT PROGRAM (Hevy-style)
   ------------------------------------------------------- */

.tr-workout__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }

/* Workout graf */
.tr-workout__chart-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-5); }
.tr-workout__chart-card--full { width: 100%; }
.tr-workout__chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); flex-wrap: wrap; gap: var(--space-2); }
.tr-workout__chart-label { font-size: 15px; font-weight: 700; color: var(--color-text); }

/* Variabel-tabs */
.tr-workout__chart-tabs { display: flex; gap: var(--space-1); background: var(--color-bg-tertiary); border-radius: var(--radius-sm); padding: 3px; }
.tr-chart-tab { padding: var(--space-2) var(--space-4); border: none; background: transparent; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.tr-chart-tab:hover { color: var(--color-text); }
.tr-chart-tab.is-active { background: var(--color-bg); color: var(--color-text); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* Bar chart */
.tr-bar-chart { display: flex; align-items: flex-end; gap: 3px; height: 140px; padding-bottom: var(--space-6); position: relative; border-bottom: 1px solid var(--color-border); }
.tr-bar-chart__col { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); flex: 1; position: relative; }
.tr-bar-chart__val { font-size: 10px; color: var(--color-text-secondary); font-weight: 600; }
.tr-bar-chart__bar { background: linear-gradient(180deg, #2C3D33, #4a7c5c); border-radius: 4px 4px 0 0; min-height: 4px; width: 100%; max-width: 40px; transition: height 0.3s; }
.tr-bar-chart__date { position: absolute; bottom: -22px; font-size: 10px; color: var(--color-text-tertiary); white-space: nowrap; }
.tr-workout__section-title { font-size: 16px; font-weight: 700; color: var(--color-text); margin: 0 0 12px; }

/* Rutine-kort grid */
.tr-routine-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.tr-routine-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
.tr-routine-card__title { font-size: 15px; font-weight: 700; color: var(--color-text); margin: 0 0 4px; }
.tr-routine-card__meta { font-size: 12px; color: var(--color-text-tertiary); }

/* Workout log */
.tr-workout-log { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-3); }
.tr-workout-log__header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-3); }
.tr-workout-log__title { font-size: 16px; font-weight: 700; color: var(--color-text); display: block; }
.tr-workout-log__date { font-size: 12px; color: var(--color-text-tertiary); }
.tr-workout-log__stats { display: flex; gap: var(--space-3); font-size: 13px; color: var(--color-text-secondary); }
.tr-workout-log__exercises { display: flex; flex-direction: column; gap: var(--space-1); }
.tr-workout-log__exercise { display: flex; align-items: center; gap: var(--space-3); padding: 6px 0; }
.tr-workout-log__ex-name { font-size: 14px; font-weight: 600; color: var(--color-text); min-width: 120px; }
.tr-workout-log__ex-sets { font-size: 13px; color: var(--color-text-secondary); }
.tr-workout-log__ex-best { font-size: 13px; color: var(--color-primary); font-weight: 600; margin-left: auto; }

/* Workout session modal */
.tr-wo-exercise { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-3); }
.tr-wo-exercise__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.tr-wo-exercise__name { font-size: 16px; font-weight: 700; color: var(--color-primary); }

/* Set header + rows */
.tr-wo-sets-header { display: grid; grid-template-columns: 40px 1fr 70px 60px 40px; gap: var(--space-2); font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; padding: 0 4px 4px; }
.tr-wo-set { display: grid; grid-template-columns: 40px 1fr 70px 60px 40px; gap: var(--space-2); align-items: center; padding: var(--space-1); border-radius: var(--radius-sm); margin-bottom: 2px; }
.tr-wo-set.is-done { background: var(--color-success-bg-muted); }
.tr-wo-set__num { font-size: 13px; font-weight: 600; color: var(--color-text-tertiary); text-align: center; }
.tr-wo-set__prev { font-size: 12px; color: var(--color-text-tertiary); }
.tr-wo-set__weight, .tr-wo-set__reps { border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-2); font-size: 14px; text-align: center; width: 100%; box-sizing: border-box; outline: none; }
.tr-wo-set__weight:focus, .tr-wo-set__reps:focus { border-color: var(--color-primary); }
.tr-wo-set__check { background: none; border: none; font-size: 18px; cursor: pointer; padding: 0; }
.tr-wo-add-set { background: none; border: none; color: var(--color-primary); font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 0; }

/* Øvelsessøg */
.tr-wo-search { width: 100%; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: 15px; outline: none; box-sizing: border-box; margin-bottom: var(--space-1); }
.tr-wo-search:focus { border-color: var(--color-primary); }
.tr-wo-search-results { max-height: 250px; overflow-y: auto; }
.tr-wo-search-result { display: flex; justify-content: space-between; padding: var(--space-3) var(--space-4); cursor: pointer; border-radius: var(--radius-sm); }
.tr-wo-search-result:hover { background: var(--color-bg-tertiary); }
.tr-wo-search-muscle { font-size: 12px; color: var(--color-text-tertiary); text-transform: capitalize; }
.tr-wo-search-custom { color: var(--color-primary); font-weight: 600; }

/* Timer + footer */
.tr-wo-footer { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-4); border-top: 1px solid var(--color-border); margin-top: var(--space-4); }
.tr-wo-timer { font-size: 24px; font-weight: 700; color: var(--color-primary); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------
   KOSTPLAN / ERNÆRING (MFP-style)
   ------------------------------------------------------- */

/* Kalorie-ring */
.tr-meal-overview { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-4); }
.tr-meal-overview__main { display: flex; align-items: center; gap: var(--space-8); margin-bottom: var(--space-5); }
.tr-meal-ring { position: relative; width: 120px; height: 120px; flex-shrink: 0; }
.tr-meal-ring__svg { width: 100%; height: 100%; }
.tr-meal-ring__text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.tr-meal-ring__remaining { font-size: 26px; font-weight: var(--font-bold); color: var(--color-text); }
.tr-meal-ring__label { font-size: 11px; color: var(--color-text-tertiary); text-transform: uppercase; }
.tr-meal-overview__numbers { display: flex; gap: var(--space-6); }
.tr-meal-macro { display: flex; flex-direction: column; align-items: center; }
.tr-meal-macro__label { font-size: 11px; color: var(--color-text-tertiary); text-transform: uppercase; }
.tr-meal-macro__value { font-size: 20px; font-weight: 700; color: var(--color-text); }

/* Makro progress-bars */
.tr-meal-macrobars { display: flex; flex-direction: column; gap: var(--space-3); }
.tr-meal-macrobar__header { display: flex; justify-content: space-between; font-size: 13px; color: var(--color-text-secondary); margin-bottom: var(--space-1); }
.tr-meal-macrobar__track { height: 8px; background: #e4ebe7; border-radius: 100px; overflow: hidden; }
.tr-meal-macrobar__fill { height: 100%; border-radius: 100px; transition: width 0.3s; }

/* Måltids-grupper */
.tr-meal-group { margin-bottom: var(--space-3); }
.tr-meal-group__type { font-size: 14px; font-weight: 600; color: var(--color-text); display: block; margin-bottom: var(--space-2); }
.tr-meal .tr-meal-item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-3); background: var(--color-bg-secondary); border-radius: var(--radius-sm); margin-bottom: var(--space-1); }
.tr-meal .tr-meal-item__name { font-size: 14px; font-weight: 600; color: var(--color-text); }
.tr-meal .tr-meal-item__macros { font-size: 12px; color: var(--color-text-tertiary); }

/* TDEE result */
.tr-tdee-result__card { background: var(--color-success-bg-muted); border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-3); font-size: 14px; line-height: 1.6; color: var(--color-text); }

@media (max-width: 640px) {
    .tr-meal-overview__main { flex-direction: column; align-items: center; }
    .tr-meal-overview__numbers { gap: var(--space-4); }
    .tr-routine-grid { grid-template-columns: 1fr; }
    .tr-wo-sets-header, .tr-wo-set { grid-template-columns: 30px 1fr 60px 50px 35px; }
}

/* -------------------------------------------------------
   ONBOARDING WIZARD
   ------------------------------------------------------- */

/* Fullscreen onboarding-side */
.tr-onboarding-page .site-content .ast-container { display: block !important; max-width: 100% !important; padding: 0 !important; }
.tr-onboarding-page #primary { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
.tr-onboarding-page .entry-header { display: none !important; }
.tr-onboarding-page article { padding: 0 !important; margin: 0 !important; }
.tr-onboarding-page .tr-header { display: none !important; }
.tr-onboarding-page .site-footer, .tr-onboarding-page .tr-footer { display: none !important; }

.tr-onboarding {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-10) var(--space-6);
    background: linear-gradient(135deg, #f8faf9 0%, #e8f0eb 100%);
    position: relative;
}

/* Progress (bar — erstatter dots) */
.tr-onboarding__progress {
    display: flex;
    gap: var(--space-2);
    margin-bottom: 32px;
}

/* Steps container */
.tr-onboarding__steps {
    position: relative;
    width: 100%;
    max-width: 520px;
}

.tr-onboarding__step {
    display: none;
    background: var(--color-bg);
    border-radius: var(--radius-xl);
    padding: var(--space-12) var(--space-10);
    text-align: center;
    box-shadow: 0 8px 40px rgba(0,0,0,0.06);
    animation: fadeInUp 0.4s ease;
}

.tr-onboarding__step.is-active {
    display: block;
}

.tr-onboarding__step.is-exit {
    animation: fadeOutLeft 0.3s ease forwards;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeOutLeft {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-30px); }
}

.tr-onboarding__icon {
    font-size: 48px;
    margin-bottom: var(--space-4);
}

.tr-onboarding__title {
    font-size: 26px;
    font-weight: var(--font-bold);
    color: var(--color-text);
    margin: 0 0 10px;
}

.tr-onboarding__desc {
    font-size: 15px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 24px;
}

/* Feature grid */
.tr-onboarding__features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.tr-onboarding__feature {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-3);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.tr-onboarding__feature span {
    font-size: 20px;
}

/* Checklist */
.tr-onboarding__checklist {
    text-align: left;
    margin-bottom: var(--space-6);
}

.tr-onboarding__check-item {
    padding: 8px 0;
    font-size: 14px;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border-light);
}

/* Trainer cards */
.tr-onboarding__trainers {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin-bottom: var(--space-5);
}

.tr-onboarding__trainer-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-4);
    background: var(--color-bg-secondary);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: transform 0.15s;
    min-width: 100px;
}

.tr-onboarding__trainer-card:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.tr-onboarding__trainer-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.tr-onboarding__trainer-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
}

/* Preview cards */
.tr-onboarding__preview {
    margin-bottom: var(--space-5);
}

.tr-onboarding__preview-card {
    background: var(--color-bg-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: left;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.tr-onboarding__preview-card strong {
    color: var(--color-text);
    display: block;
    margin-bottom: var(--space-1);
}

/* Buttons */
.tr-onboarding__btn {
    display: block;
    width: 100%;
    padding: var(--space-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-lg);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
    text-decoration: none;
    text-align: center;
    margin-top: var(--space-2);
}

.tr-onboarding__btn:hover {
    opacity: 0.85;
    color: var(--color-text-inverse);
    text-decoration: none;
}

.tr-onboarding__btn--secondary {
    background: var(--color-primary-light);
    color: var(--color-primary);
}

.tr-onboarding__btn--secondary:hover {
    color: var(--color-primary);
    background: #e4ebe7;
}

.tr-onboarding__btn--finish {
    background: linear-gradient(135deg, #2C3D33, #4a7c5c);
}

/* Skip */
.tr-onboarding__skip {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: none;
    color: var(--color-text-tertiary);
    font-size: 14px;
    cursor: pointer;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.tr-onboarding__skip:hover {
    background: rgba(0,0,0,0.05);
    color: var(--color-text-secondary);
}

/* Dashboard onboarding banner */
.tr-dashboard__banner--onboarding {
    background: linear-gradient(135deg, #2C3D33, #4a7c5c);
    color: var(--color-text-inverse);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.tr-dashboard__banner--onboarding strong {
    color: var(--color-text-inverse);
    display: block;
    margin-bottom: 2px;
}

.tr-dashboard__banner--onboarding p {
    margin: 0;
    font-size: 13px;
    opacity: 0.8;
}

/* Onboarding 2.0 — Progress bar */
.tr-onboarding__progress { flex-direction: column; align-items: center; gap: var(--space-2); width: 100%; max-width: 520px; }
.tr-onboarding__progress-bar { width: 100%; height: 6px; background: #e4ebe7; border-radius: 3px; overflow: hidden; }
.tr-onboarding__progress-fill { height: 100%; background: var(--color-primary); border-radius: 3px; transition: width .4s ease; }
.tr-onboarding__progress-text { font-size: 12px; color: var(--color-text-tertiary); font-weight: 600; }

/* Options (single/multi select) */
.tr-onboarding__options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-5); text-align: left; }
.tr-onboarding__options--inline { display: flex; gap: var(--space-2); }
.tr-onboarding__option { background: var(--color-bg-secondary); border: 2px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-4); font-size: 14px; font-weight: 600; color: var(--color-text); cursor: pointer; transition: all .15s; text-align: left; line-height: 1.3; }
.tr-onboarding__option:hover { border-color: var(--color-primary); background: var(--color-primary-light); }
.tr-onboarding__option.is-selected { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-inverse); }
.tr-onboarding__option small { display: block; font-size: 12px; font-weight: 400; opacity: 0.7; margin-top: 2px; }
.tr-onboarding__option--sm { padding: var(--space-3) var(--space-5); flex: 1; text-align: center; }

/* Form fields */
.tr-onboarding__form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); text-align: left; margin-bottom: var(--space-5); }
.tr-onboarding__field { display: flex; flex-direction: column; gap: var(--space-1); text-align: left; }
.tr-onboarding__field label { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); }
.tr-onboarding__input, .tr-onboarding__select, .tr-onboarding__textarea { border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: 14px; color: var(--color-text); outline: none; background: var(--color-bg); transition: border-color .15s; width: 100%; box-sizing: border-box; }
.tr-onboarding__input:focus, .tr-onboarding__select:focus, .tr-onboarding__textarea:focus { border-color: var(--color-primary); }
.tr-onboarding__textarea { resize: vertical; font-family: inherit; }

/* Summary */
.tr-onboarding__summary { margin-bottom: var(--space-5); }
.tr-onboarding__summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); text-align: left; }
.tr-onboarding__summary-item { display: flex; align-items: center; gap: var(--space-3); background: var(--color-bg-secondary); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.tr-onboarding__summary-item span:first-child { font-size: 20px; }
.tr-onboarding__summary-item strong { display: block; font-size: 12px; color: var(--color-text-secondary); font-weight: 600; }
.tr-onboarding__summary-item div > span { font-size: 14px; font-weight: 700; color: #1a1a1a; }
.tr-onboarding__subtitle { font-size: 15px; font-weight: 700; margin: var(--space-4) 0 var(--space-3); color: #1a1a1a; }

/* Availability picker */
.tr-onboarding__avail { text-align: left; margin-bottom: var(--space-5); }
.tr-onboarding__avail-day { padding: 8px 0; border-bottom: 1px solid #f0f2f0; }
.tr-onboarding__avail-label { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 600; color: var(--color-text); cursor: pointer; }
.tr-onboarding__avail-label input[type="checkbox"] { accent-color: var(--color-primary); width: 18px; height: 18px; }
.tr-onboarding__avail-times { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); margin-left: 26px; }
.tr-onboarding__avail-times select { border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); font-size: 13px; }
.tr-onboarding__avail-times span { color: var(--color-text-tertiary); font-size: 13px; }

@media (max-width: 640px) {
    .tr-onboarding__step { padding: var(--space-8) var(--space-6); }
    .tr-onboarding__title { font-size: 22px; }
    .tr-onboarding__features { grid-template-columns: 1fr; }
    .tr-onboarding__trainers { flex-direction: column; align-items: center; }
    .tr-onboarding__options { grid-template-columns: 1fr; }
    .tr-onboarding__form-grid { grid-template-columns: 1fr; }
    .tr-onboarding__summary-grid { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------
   TRÆNINGSSIDE — Hevy-style layout
   ------------------------------------------------------- */

/* Skjul header padding på træningsside */
.tr-training-page .site-content { padding-top: 0 !important; }

/* Layout: sidebar + main */
.tr-training { display: flex; min-height: calc(100vh - 60px); }

/* Sidebar */
.tr-training__sidebar {
    width: 220px; flex-shrink: 0;
    background: var(--color-bg); border-right: 1px solid var(--color-border);
    padding: var(--space-5) 0; position: sticky; top: 60px; height: calc(100vh - 60px);
    overflow-y: auto;
}
.tr-training__sidebar-inner { display: flex; flex-direction: column; gap: 2px; padding: 0 var(--space-2); }
.tr-training__nav-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    font-size: var(--text-base); font-weight: var(--font-medium); color: var(--color-text-secondary);
    text-decoration: none; transition: background var(--transition-fast), color var(--transition-fast);
}
.tr-training__nav-item span { font-size: 18px; }
.tr-training__nav-item:hover { background: var(--color-bg-tertiary); color: var(--color-text); text-decoration: none; }
.tr-training__nav-item.is-active { background: var(--color-primary-light); color: var(--color-primary); font-weight: var(--font-semibold); }

/* Main */
.tr-training__main { flex: 1; padding: var(--space-6) var(--space-8); max-width: 900px; }
.tr-training__title { font-size: 24px; font-weight: var(--font-bold); color: var(--color-text); margin: 0 0 16px; }
.tr-training__subtitle { font-size: 14px; color: var(--color-text-secondary); margin: 0 0 12px; }
.tr-training__header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.tr-training__stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }

/* Quick start */
.tr-training__quickstart { margin-bottom: var(--space-5); }

/* Feed */
.tr-feed { display: flex; flex-direction: column; gap: var(--space-4); }
.tr-feed__card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-xs); transition: box-shadow var(--transition-base); }
.tr-feed__card:hover { box-shadow: var(--shadow-sm); }
.tr-feed__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.tr-feed__avatar { width: 40px; height: 40px; border-radius: var(--radius-full); object-fit: cover; }
.tr-feed__name { font-size: var(--text-md); font-weight: var(--font-semibold); color: var(--color-text); display: block; }
.tr-feed__time { font-size: var(--text-xs); color: var(--color-text-tertiary); }
.tr-feed__title { font-size: 18px; font-weight: var(--font-bold); color: var(--color-text); margin: 0 0 var(--space-2); }
.tr-feed__stats { display: flex; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.tr-feed__exercises { display: flex; flex-direction: column; gap: var(--space-1); }
.tr-feed__exercise { font-size: var(--text-base); color: var(--color-text); padding: var(--space-1) 0; border-bottom: 1px solid var(--color-border-subtle); }
.tr-feed__exercise--more { color: var(--color-primary); font-weight: var(--font-semibold); border: none; cursor: pointer; }

/* Rutiner */
.tr-routines-list { display: flex; flex-direction: column; gap: var(--space-2); }
.tr-routine-card {
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5); display: flex; justify-content: space-between; align-items: center;
    box-shadow: var(--shadow-xs); transition: box-shadow var(--transition-base), transform var(--transition-base);
}
.tr-routine-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.tr-routine-card__title { font-size: 16px; font-weight: var(--font-bold); color: var(--color-text); margin: 0 0 var(--space-1); }
.tr-routine-card__exercises { font-size: var(--text-sm); color: var(--color-text-tertiary); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 500px; }

/* Øvelser */
.tr-exercises-page__filters { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }
.tr-exercises-page__search { flex: 1; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); font-size: var(--text-base); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.tr-exercises-page__search:focus { border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.tr-exercises-page__filter { padding: var(--space-3) var(--space-4); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); font-size: var(--text-base); background: var(--color-bg); }
.tr-exercises-list { display: flex; flex-direction: column; gap: var(--space-1); }
.tr-exercise-item {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); cursor: pointer; transition: background 0.15s;
}
.tr-exercise-item:hover { background: var(--color-bg-secondary); }
.tr-exercise-item__icon { font-size: 24px; width: 40px; height: 40px; background: var(--color-bg-tertiary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.tr-exercise-item__name { font-size: 15px; font-weight: 600; color: var(--color-text); display: block; }
.tr-exercise-item__muscle { font-size: 12px; color: var(--color-text-tertiary); }

/* Templates/Udforsk */
.tr-templates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-3); }
.tr-template-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); transition: box-shadow var(--transition-base), transform var(--transition-base); box-shadow: var(--shadow-xs); }
.tr-template-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tr-template-card__title { font-size: 16px; font-weight: var(--font-bold); margin: 0 0 var(--space-1); color: var(--color-text); }
.tr-template-card__desc { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0 0 var(--space-3); }
.tr-template-card__meta { display: flex; gap: var(--space-3); align-items: center; font-size: var(--text-xs); color: var(--color-text-tertiary); }

/* Klient-oversigt (coach) */
.tr-clients-list { display: flex; flex-direction: column; gap: var(--space-2); }
.tr-client-card {
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5); display: flex; justify-content: space-between; align-items: center;
}
.tr-client-card__left { display: flex; align-items: center; gap: var(--space-3); }
.tr-client-card__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.tr-client-card__name { font-size: 15px; font-weight: 600; color: var(--color-text); display: block; }
.tr-client-card__last { font-size: 12px; color: var(--color-text-tertiary); }
.tr-client-card__right { display: flex; align-items: center; gap: var(--space-3); }
.tr-client-card__streak { font-size: 13px; font-weight: 600; color: var(--color-primary); }

/* Kalender */
.tr-training__calendar { margin-top: var(--space-6); }
.tr-cal { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); max-width: 320px; }
.tr-cal__header { font-size: 16px; font-weight: 700; text-align: center; margin-bottom: var(--space-3); }
.tr-cal__days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; color: var(--color-text-tertiary); font-weight: 600; margin-bottom: var(--space-1); }
.tr-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; gap: 2px; }
.tr-cal__day { padding: 8px 0; font-size: 13px; border-radius: 50%; }
.tr-cal__day.has-workout { background: var(--color-primary); color: var(--color-text-inverse); font-weight: 600; }
.tr-cal__day.is-today { border: 2px solid #2C3D33; }

/* TDEE beregner */
/* TDEE Beregner — redesigned */
.tr-tdee-page__hero { margin-bottom: var(--space-6); }
.tr-tdee-layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-6); }
.tr-tdee-layout__form { min-width: 0; }
.tr-tdee-layout__result { display: flex; flex-direction: column; gap: var(--space-5); }
.tr-tdee { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.tr-tdee__section-title { font-size: 16px; font-weight: 700; color: var(--color-text); margin: 0 0 14px; }
.tr-tdee__form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.tr-tdee__row { display: flex; flex-direction: column; gap: var(--space-1); }
.tr-tdee__row--full { grid-column: 1 / -1; }
.tr-tdee__row label { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); }
.tr-tdee__row input, .tr-tdee__row select { padding: var(--space-3) var(--space-4); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); font-size: var(--text-base); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); }
.tr-tdee__row input:focus, .tr-tdee__row select:focus { border-color: var(--color-primary); box-shadow: var(--shadow-focus); outline: none; }

/* Activity cards */
.tr-tdee__activity-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.tr-tdee__activity-option, .tr-tdee__goal-option { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-4) var(--space-2); border: 2px solid var(--color-border-input); border-radius: var(--radius-lg); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); background: var(--color-bg); }
.tr-tdee__activity-option input, .tr-tdee__goal-option input { display: none; }
.tr-tdee__activity-option span, .tr-tdee__goal-option span { font-size: 14px; font-weight: 600; color: var(--color-text); }
.tr-tdee__activity-option small, .tr-tdee__goal-option small { font-size: 11px; color: var(--color-text-tertiary); margin-top: 2px; }
.tr-tdee__activity-option.is-checked, .tr-tdee__goal-option.is-checked { border-color: var(--color-primary); background: var(--color-primary-light); }
.tr-tdee__activity-option:hover, .tr-tdee__goal-option:hover { border-color: #aab8b0; }

/* Goal cards */
.tr-tdee__goal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }

/* Result section */
.tr-tdee__current { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); text-align: center; }
.tr-tdee__result-ring { position: relative; display: flex; align-items: center; justify-content: center; margin: 16px auto; }
.tr-tdee__result-ring-text { position: absolute; text-align: center; }
.tr-tdee__result-ring-text strong { font-size: 28px; font-weight: var(--font-bold); color: var(--color-primary); display: block; }
.tr-tdee__result-ring-text small { font-size: 13px; color: var(--color-text-tertiary); }
.tr-tdee__result-macros { display: flex; justify-content: center; gap: var(--space-6); margin-top: var(--space-4); }
.tr-tdee__result-macro { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.tr-tdee__result-macro-icon { width: 10px; height: 10px; border-radius: 50%; }
.tr-tdee__result-macro span { font-size: 12px; color: var(--color-text-tertiary); }
.tr-tdee__result-macro strong { font-size: 18px; font-weight: 700; color: var(--color-text); }
.tr-tdee__result { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); text-align: center; }

/* Info card */
.tr-tdee__info-card { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.tr-tdee__info-card h4 { font-size: 14px; font-weight: 700; color: var(--color-text); margin: 0 0 6px; }
.tr-tdee__info-card h4:not(:first-child) { margin-top: var(--space-4); }
.tr-tdee__info-card p { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 4px; line-height: 1.5; }

/* Mobil */
@media (max-width: 768px) {
    .tr-training { flex-direction: column; }
    .tr-training__sidebar {
        width: 100%; height: auto; position: static;
        border-right: none; border-bottom: 1px solid var(--color-border);
        padding: var(--space-2); overflow-x: auto;
    }
    .tr-training__sidebar-inner { flex-direction: row; gap: var(--space-1); }
    .tr-training__nav-item { white-space: nowrap; padding: var(--space-2) var(--space-3); font-size: 13px; }
    .tr-training__nav-item span { font-size: 16px; }
    .tr-training__main { padding: var(--space-4); }
    .tr-training__stat-grid { grid-template-columns: repeat(2, 1fr); }
    .tr-tdee__form { grid-template-columns: 1fr; }
}

/* Feed layout med profil-sidebar */
.tr-training__feed-layout { display: flex; gap: var(--space-8); align-items: flex-start; }
.tr-training__feed-main { flex: 1; min-width: 0; }

/* Profil sidebar widget */
.tr-training__profile-sidebar { width: 300px; flex-shrink: 0; position: sticky; top: 80px; }

.tr-profile-widget {
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: var(--space-6); text-align: center; margin-bottom: var(--space-4); box-shadow: var(--shadow-sm);
}
.tr-profile-widget__avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-bottom: var(--space-3); }
.tr-profile-widget__name { font-size: 16px; font-weight: 700; color: var(--color-text); display: block; margin-bottom: var(--space-4); }
.tr-profile-widget__stats { display: flex; justify-content: center; gap: var(--space-6); margin-bottom: var(--space-4); }
.tr-profile-widget__stats div { text-align: center; }
.tr-profile-widget__stats strong { display: block; font-size: 18px; color: var(--color-text); }
.tr-profile-widget__stats span { font-size: 12px; color: var(--color-text-tertiary); }
.tr-profile-widget__btn {
    display: block; width: 100%; padding: var(--space-3);
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 600; color: var(--color-text);
    text-decoration: none; text-align: center; transition: background 0.15s;
}
.tr-profile-widget__btn:hover { background: var(--color-bg-tertiary); text-decoration: none; color: var(--color-text); }

.tr-profile-widget__section {
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3); box-shadow: var(--shadow-xs);
}
.tr-profile-widget__section h4 { font-size: 15px; font-weight: 700; color: var(--color-text); margin: 0 0 10px; }
.tr-profile-widget__activity { font-size: 13px; color: var(--color-text); margin: 0; }
.tr-profile-widget__activity span { color: var(--color-text-tertiary); font-size: 12px; }

/* Foreslåede atleter */
.tr-profile-widget__suggested { display: flex; align-items: center; gap: var(--space-3); padding: 6px 0; }
.tr-profile-widget__sug-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.tr-profile-widget__sug-name { font-size: 14px; font-weight: 600; color: var(--color-text); text-decoration: none; }
.tr-profile-widget__sug-name:hover { text-decoration: underline; }
.tr-profile-widget__follow {
    margin-left: auto; font-size: 13px; font-weight: 600; color: var(--color-primary);
    text-decoration: none; padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); transition: background 0.15s;
}
.tr-profile-widget__follow:hover { background: var(--color-success-bg-muted); text-decoration: none; }

@media (max-width: 1024px) {
    .tr-training__profile-sidebar { display: none; }
}

/* -------------------------------------------------------
   TRÆNINGS-PROFIL (Hevy-style)
   ------------------------------------------------------- */

/* Profil header */
.tr-tprofile__header {
    display: flex; align-items: center; gap: var(--space-5);
    padding-bottom: var(--space-6); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-6);
}
.tr-tprofile__avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tr-tprofile__info { flex: 1; }
.tr-tprofile__name { font-size: 24px; font-weight: var(--font-bold); color: var(--color-text); margin: 0 0 8px; }
.tr-tprofile__stats-row { display: flex; gap: var(--space-6); }
.tr-tprofile__stats-row div { font-size: 14px; color: var(--color-text-secondary); }
.tr-tprofile__stats-row strong { font-size: 18px; color: var(--color-text); display: block; }

/* Body: stats + kalender */
.tr-tprofile__body { display: flex; gap: var(--space-8); align-items: flex-start; }
.tr-tprofile__main { flex: 1; min-width: 0; }
.tr-tprofile__sidebar { width: 300px; flex-shrink: 0; }

/* Sektioner */
.tr-tprofile__section {
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: var(--space-5); margin-bottom: var(--space-4);
}
.tr-tprofile__section h3 { font-size: 17px; font-weight: 700; color: var(--color-text); margin: 0 0 4px; }
.tr-tprofile__section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }

/* This week */
.tr-tprofile__this-week { margin-bottom: var(--space-4); }
.tr-tprofile__this-week-val { font-size: 28px; font-weight: var(--font-bold); color: var(--color-text); }
.tr-tprofile__this-week-label { font-size: 14px; color: var(--color-text-tertiary); margin-left: 6px; }

/* Taller bar chart */
.tr-bar-chart--tall { height: 180px; }

@media (max-width: 1024px) {
    .tr-tprofile__body { flex-direction: column; }
    .tr-tprofile__sidebar { width: 100%; }
    .tr-tprofile__header { flex-direction: column; text-align: center; }
    .tr-tprofile__stats-row { justify-content: center; }
}

/* Quick start dropdown */
.tr-quickstart-wrap { position: relative; display: inline-block; }
.tr-quickstart-menu { position: absolute; top: calc(100% + 4px); left: 0; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 4px 16px rgba(0,0,0,0.08); z-index: 10; min-width: 200px; padding: var(--space-1); }
.tr-quickstart-option { display: block; width: 100%; padding: var(--space-3) var(--space-4); border: none; background: none; font-size: 14px; font-weight: 500; color: var(--color-text); text-align: left; cursor: pointer; border-radius: var(--radius-sm); text-decoration: none; transition: background 0.1s; }
.tr-quickstart-option:hover { background: var(--color-bg-tertiary); text-decoration: none; color: var(--color-text); }

/* Feed øvelses-rækker (Hevy-style) */
.tr-feed__exercise-row { display: flex; align-items: center; gap: var(--space-3); padding: 8px 0; border-bottom: 1px solid var(--color-border-light); }
.tr-feed__exercise-row:last-child { border-bottom: none; }
.tr-feed__exercise-icon { font-size: 24px; width: 40px; height: 40px; background: var(--color-bg-tertiary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tr-feed__exercise-info { flex: 1; }
.tr-feed__exercise-name { font-size: 14px; font-weight: 600; color: var(--color-text); display: block; }
.tr-feed__exercise-sets { font-size: 12px; color: var(--color-text-tertiary); }
.tr-feed__exercise-more { display: block; padding: 8px 0; font-size: 13px; color: var(--color-primary); font-weight: 600; text-decoration: none; }
.tr-feed__exercise-more:hover { text-decoration: underline; }

/* Workout detalje-side */
.tr-training__back { font-size: 14px; color: var(--color-text-secondary); text-decoration: none; display: inline-block; margin-bottom: var(--space-4); }
.tr-training__back:hover { color: var(--color-text); text-decoration: none; }
.tr-wo-detail { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); }
.tr-wo-detail__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.tr-wo-detail__title { font-size: 22px; font-weight: var(--font-bold); color: var(--color-text); margin: 0 0 8px; }

/* Øvelses-blok i workout detalje */
.tr-wo-detail__exercise { margin-bottom: var(--space-6); }
.tr-wo-detail__exercise-header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.tr-wo-detail__exercise-icon { font-size: 24px; width: 44px; height: 44px; background: var(--color-bg-tertiary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; }
.tr-wo-detail__exercise-header h4 { font-size: 16px; font-weight: 700; color: var(--color-text); margin: 0; }

/* Sæt-tabel */
.tr-wo-detail__sets { border-radius: var(--radius-md); overflow: hidden; }
.tr-wo-detail__set-header { display: flex; padding: var(--space-2) var(--space-4); font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.05em; }
.tr-wo-detail__set-header span:first-child { width: 60px; }
.tr-wo-detail__set { display: flex; padding: var(--space-3) var(--space-4); font-size: 14px; align-items: center; }
.tr-wo-detail__set--alt { background: var(--color-bg-secondary); }
.tr-wo-detail__set-num { width: 60px; font-weight: 700; color: var(--color-text); }
.tr-wo-detail__set-num--warm { color: #F59E0B; }
.tr-wo-detail__set-num--drop { color: #3B82F6; }

/* Feed card som link */
a.tr-feed__card--link { text-decoration: none; color: inherit; display: block; cursor: pointer; transition: box-shadow 0.15s; }
a.tr-feed__card--link:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); text-decoration: none; color: inherit; }

/* Øvelses-item med tilføj-knap */
.tr-exercise-item { justify-content: flex-start; }
.tr-exercise-item__info { flex: 1; }
.tr-exercise-item__add { flex-shrink: 0; }

/* Rutine-form items */
.tr-rtn-ex-item { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); background: var(--color-bg-secondary); border-radius: var(--radius-sm); margin-bottom: var(--space-1); font-size: 14px; font-weight: 500; }

/* Template rutiner (udforsk) */
.tr-template-card__routines { margin-top: var(--space-3); border-top: 1px solid var(--color-border-light); padding-top: var(--space-3); }
.tr-template-routine { padding: 6px 0; border-bottom: 1px solid var(--color-border-light); }
.tr-template-routine:last-child { border-bottom: none; }
.tr-template-routine strong { font-size: 13px; color: var(--color-text); display: block; }
.tr-template-routine__exs { font-size: 12px; color: var(--color-text-tertiary); }
.tr-template-card__actions { display: flex; gap: var(--space-2); margin-top: var(--space-3); }

/* Fix feed card spacing */
.tr-feed__header { margin-bottom: var(--space-2); }
.tr-feed__name { line-height: 1.2; }
.tr-feed__time { line-height: 1.2; display: block; margin-top: 1px; }
.tr-feed__title { margin: 0 0 6px; }

/* Autocomplete søg */
.tr-autocomplete-wrap { position: relative; }
.tr-autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: 0 4px 16px rgba(0,0,0,0.08); z-index: 10; max-height: 240px; overflow-y: auto; display: none; }
.tr-autocomplete-item { padding: var(--space-3) var(--space-4); cursor: pointer; font-size: 14px; transition: background 0.1s; }
.tr-autocomplete-item:hover { background: var(--color-bg-tertiary); }
.tr-autocomplete-item strong { color: var(--color-text); }
.tr-autocomplete-item span { color: var(--color-text-tertiary); font-size: 12px; margin-left: 6px; }

/* Rutine-kort klikbart */
a.tr-routine-card--link { text-decoration: none; color: inherit; cursor: pointer; transition: box-shadow 0.15s; }
a.tr-routine-card--link:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); text-decoration: none; color: inherit; }
.tr-routine-card__arrow { font-size: 24px; color: var(--color-text-disabled); flex-shrink: 0; }

/* Rutine detalje-side (Hevy-style) */
.tr-rtn-detail { display: flex; gap: var(--space-8); align-items: flex-start; }
.tr-rtn-detail__main { flex: 1; min-width: 0; }
.tr-rtn-detail__sidebar { width: 300px; flex-shrink: 0; position: sticky; top: 80px; }

.tr-rtn-detail__title { font-size: 22px; font-weight: var(--font-bold); color: var(--color-text); margin: 0 0 20px; }

/* Øvelses-rækker */
.tr-rtn-exercise {
    display: flex; align-items: center; gap: var(--space-4);
    padding: 14px 0; border-bottom: 1px solid var(--color-border-light);
}
.tr-rtn-exercise:last-child { border-bottom: none; }
.tr-rtn-exercise__icon {
    width: 52px; height: 52px; background: var(--color-bg-tertiary); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0;
}
.tr-rtn-exercise__name { font-size: 15px; font-weight: 600; color: var(--color-text); display: block; }
.tr-rtn-exercise__detail { font-size: 13px; color: var(--color-text-tertiary); }

/* Creator sektion */
.tr-rtn-detail__creator {
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
    padding: var(--space-4); text-align: center; margin-bottom: var(--space-3);
}
.tr-rtn-detail__creator-label { font-size: 12px; color: var(--color-text-tertiary); display: block; margin-bottom: var(--space-2); }
.tr-rtn-detail__creator-info { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.tr-rtn-detail__creator-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.tr-rtn-detail__creator-info span { font-size: 15px; font-weight: 600; color: var(--color-text); }

/* Actions */
.tr-rtn-detail__actions { margin-bottom: var(--space-3); }

/* Summary kort */
.tr-rtn-detail__summary {
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5);
}
.tr-rtn-detail__summary h4 { font-size: 16px; font-weight: 700; color: var(--color-text); margin: 0 0 14px; }
.tr-rtn-detail__summary-stats { display: flex; gap: var(--space-4); margin-bottom: var(--space-4); }
.tr-rtn-detail__summary-stats div { text-align: center; flex: 1; }
.tr-rtn-detail__summary-label { font-size: 11px; color: var(--color-text-tertiary); display: block; margin-bottom: 2px; }
.tr-rtn-detail__summary-stats strong { font-size: 20px; color: var(--color-text); }

/* Muskelgruppe-fordeling */
.tr-rtn-detail__muscles { border-top: 1px solid var(--color-border-light); padding-top: var(--space-4); }
.tr-rtn-detail__muscles h5 { font-size: 13px; font-weight: 600; color: var(--color-text); margin: 0 0 10px; }
.tr-rtn-detail__muscle-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.tr-rtn-detail__muscle-name { font-size: 13px; color: var(--color-text); min-width: 70px; }
.tr-rtn-detail__muscle-bar { flex: 1; height: 8px; background: #e4ebe7; border-radius: 4px; overflow: hidden; }
.tr-rtn-detail__muscle-fill { height: 100%; background: #3B82F6; border-radius: 4px; }
.tr-rtn-detail__muscle-sets { font-size: 13px; font-weight: 600; color: var(--color-text); min-width: 24px; text-align: right; }

@media (max-width: 1024px) {
    .tr-rtn-detail { flex-direction: column; }
    .tr-rtn-detail__sidebar { width: 100%; position: static; }
}

/* Søgefelt over feed */
.tr-training__search { margin-bottom: var(--space-4); }
.tr-training__search-input { width: 100%; padding: 12px 16px 12px 38px; border: 1.5px solid #e4ebe7; border-radius: var(--radius-lg); font-size: 15px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 14px center no-repeat; outline: none; transition: border-color 0.15s; }
.tr-training__search-input:focus { border-color: var(--color-primary); }

/* Søgeresultater */
.tr-search-result { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); text-decoration: none; color: var(--color-text); transition: background 0.1s; }
.tr-search-result:hover { background: var(--color-bg-tertiary); text-decoration: none; color: var(--color-text); }
.tr-search-result__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.tr-search-result__name { font-size: 14px; font-weight: 600; }

/* Sidebar søgefelt */
.tr-sidebar-search { margin-bottom: var(--space-2); }
input.tr-sidebar-search__input, input.tr-sidebar-search__input[type="text"] { width: 100% !important; padding: 10px 14px !important; border: none !important; border-radius: 20px !important; font-size: 14px !important; background: #f0f2f5 !important; color: #65676B !important; outline: none !important; box-sizing: border-box !important; transition: background 0.15s !important; box-shadow: none !important; -webkit-appearance: none !important; }
.tr-sidebar-search__input:focus { background: var(--color-border-input); color: var(--color-text); }

/* Følger-state */
.tr-profile-widget__follow--following { color: var(--color-text-tertiary) !important; cursor: default; }
button.tr-follow-btn { border: none; background: none; cursor: pointer; }

/* -------------------------------------------------------
   NUTRITION PAGE — Coachway-style
   ------------------------------------------------------- */

/* Header med kalorie-ring + makro-bars */
.tr-nutrition__header { display: flex; align-items: center; gap: var(--space-8); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); margin-bottom: var(--space-5); }

/* Kalorie-ring */
.tr-nutrition__target { text-align: center; flex-shrink: 0; }
.tr-nutrition__target-ring { position: relative; width: 90px; height: 90px; }
.tr-nutrition__ring-svg { width: 90px; height: 90px; transform: rotate(-90deg); }
.tr-nutrition__ring-bg { fill: none; stroke: #e4ebe7; stroke-width: 3; }
.tr-nutrition__ring-fill { fill: none; stroke: #2C3D33; stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray 0.5s; }
.tr-nutrition__target-cal { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 20px; font-weight: var(--font-bold); color: var(--color-text); }
.tr-nutrition__target-label { font-size: 12px; color: var(--color-text-tertiary); display: block; margin-top: var(--space-1); }

/* Makro-bars */
.tr-nutrition__macros-bar { flex: 1; display: flex; gap: var(--space-5); }
.tr-nutrition__macro { flex: 1; }
.tr-nutrition__macro-icon { font-size: 16px; }
.tr-nutrition__macro-label { font-size: 12px; color: var(--color-text-tertiary); margin-left: 4px; }
.tr-nutrition__macro strong { display: block; font-size: 18px; color: var(--color-text); margin: 2px 0 6px; }
.tr-nutrition__macro-bar { height: 8px; background: #e4ebe7; border-radius: 4px; overflow: hidden; }
.tr-nutrition__macro-fill { height: 100%; border-radius: 4px; transition: width 0.3s; }
.tr-nutrition__macro-fill--protein { background: #E53935; }
.tr-nutrition__macro-fill--carbs { background: var(--color-primary); }
.tr-nutrition__macro-fill--fat { background: #F59E0B; }

/* Måltids-sektioner */
.tr-nutrition__meal { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-3); }
.tr-nutrition__meal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.tr-nutrition__meal-header h3 { font-size: 17px; font-weight: 700; color: var(--color-text); margin: 0; }
.tr-nutrition__meal-cal { font-size: 14px; font-weight: 600; color: var(--color-text-secondary); }

/* Opskrift-kort i kostplan */
.tr-nutrition__recipe-card { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-3); background: var(--color-bg-secondary); border-radius: var(--radius-md); margin-bottom: var(--space-2); }
.tr-nutrition__recipe-name { font-size: 14px; font-weight: 600; color: var(--color-text); display: block; }
.tr-nutrition__recipe-macros { font-size: 12px; color: var(--color-text-tertiary); }
.tr-nutrition__recipe-remove { background: none; border: none; font-size: 18px; color: var(--color-text-disabled); cursor: pointer; padding: 0 4px; }
.tr-nutrition__recipe-remove:hover { color: var(--color-danger); }

/* Tilføj opskrift knap */
.tr-nutrition__add-recipe { display: block; width: 100%; padding: var(--space-3); border: 2px dashed #d0d9d3; border-radius: var(--radius-md); background: none; color: var(--color-primary); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.15s; margin-top: var(--space-2); }
.tr-nutrition__add-recipe:hover { background: var(--color-bg-secondary); }

/* Opskrift-valg i modal */
.tr-nutrition__recipe-option { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-3); border-bottom: 1px solid var(--color-border-light); }
.tr-nutrition__recipe-option strong { font-size: 14px; color: var(--color-text); display: block; }

/* Opskrifter grid */
.tr-nutrition__recipes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); }
.tr-nutrition__rcp-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; }
.tr-nutrition__rcp-card .tr-nutrition__rcp-link { flex: 1; display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.tr-nutrition__rcp-card .tr-rcp-quick-add,
.tr-nutrition__rcp-card .tr-rcp-quick-add-custom { margin-top: auto !important; }
.tr-nutrition__rcp-name { font-size: 15px; font-weight: 700; color: var(--color-text); margin: 0 0 8px; }
.tr-nutrition__rcp-meta { display: flex; gap: var(--space-2); align-items: center; margin-bottom: var(--space-2); font-size: 12px; color: var(--color-text-tertiary); }
.tr-nutrition__rcp-macros { display: flex; gap: var(--space-3); font-size: 12px; color: var(--color-text-secondary); margin-bottom: var(--space-2); }
.tr-nutrition__rcp-tags { display: flex; gap: var(--space-1); }
.tr-nutrition__rcp-tag { font-size: 11px; background: var(--color-success-bg-muted); color: #2E7D32; padding: 2px var(--space-2); border-radius: var(--radius-md); }

/* Indkøbsliste */
.tr-shopping-group { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-4); }
.tr-shopping-group__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); padding-bottom: var(--space-3); border-bottom: 2px solid #f0f2f5; }
.tr-shopping-group__title { font-size: 16px; font-weight: 700; color: var(--color-text); margin: 0; }
.tr-shopping-group__meal { font-size: 13px; color: var(--color-text-secondary); }
.tr-shopping-list { }
.tr-shopping-item { display: flex; align-items: center; gap: var(--space-3); padding: 8px 0; border-bottom: 1px solid var(--color-border-light); cursor: pointer; font-size: 14px; color: var(--color-text); }
.tr-shopping-item:last-child { border-bottom: none; }
.tr-shopping-item__check { accent-color: var(--color-primary); width: 18px; height: 18px; }
.tr-shopping-item__check:checked + span { text-decoration: line-through; color: var(--color-text-tertiary); }

@media (max-width: 640px) {
    .tr-nutrition__header { flex-direction: column; }
    .tr-nutrition__macros-bar { flex-direction: column; gap: var(--space-3); }
    .tr-nutrition__recipes-grid { grid-template-columns: 1fr; }
}

/* Mad feed */
.tr-nutrition__feed-type { font-size: 12px; color: var(--color-text-secondary); display: block; margin-bottom: var(--space-1); }
.tr-nutrition__feed-photo { width: 100%; border-radius: var(--radius-md); margin: var(--space-3) 0; max-height: 300px; object-fit: cover; }
.tr-nutrition__feed-desc { font-size: 14px; color: var(--color-text-secondary); margin: 6px 0 0; line-height: 1.5; }

/* Opskrift-kort klikbart */
.tr-nutrition__rcp-link { text-decoration: none; color: inherit; display: block; }
.tr-nutrition__rcp-link:hover { text-decoration: none; color: inherit; }
.tr-nutrition__rcp-card { transition: box-shadow 0.15s; }
.tr-nutrition__rcp-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }

/* Opskrift detalje makro-bokse */
.tr-nutrition__rcp-detail-macros { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); }
.tr-nutrition__rcp-macro-box { flex: 1; background: var(--color-bg-secondary); border-radius: var(--radius-md); padding: var(--space-4); text-align: center; }
.tr-nutrition__rcp-macro-box span { font-size: 20px; display: block; margin-bottom: var(--space-1); }
.tr-nutrition__rcp-macro-box strong { font-size: 18px; color: var(--color-text); display: block; }
.tr-nutrition__rcp-macro-box small { font-size: 11px; color: var(--color-text-tertiary); }

/* Ingrediens-liste */
.tr-nutrition__ingredients-list { list-style: none; padding: 0; margin: 0; }
.tr-nutrition__ingredients-list li { padding: 8px 0; border-bottom: 1px solid var(--color-border-light); font-size: 14px; color: var(--color-text); }
.tr-nutrition__ingredients-list li:last-child { border-bottom: none; }
.tr-nutrition__ingredients-list li::before { content: "•"; color: var(--color-primary); margin-right: 10px; font-weight: 700; }

/* Mad feed sidebar */
.tr-nutrition__mini-ring { text-align: center; margin-bottom: var(--space-3); }
.tr-nutrition__mini-ring-text { text-align: center; margin-top: var(--space-2); }
.tr-nutrition__mini-ring-text strong { font-size: 20px; color: var(--color-text); display: block; }
.tr-nutrition__mini-ring-text small { font-size: 12px; color: var(--color-text-tertiary); }

.tr-nutrition__mini-macros { display: flex; flex-direction: column; gap: var(--space-1); font-size: 13px; color: var(--color-text); margin-bottom: var(--space-3); }
.tr-nutrition__mini-macros div { display: flex; align-items: center; gap: var(--space-2); }

.tr-nutrition__streak { text-align: center; font-size: 14px; font-weight: 600; color: #E65100; background: #FFF3E0; padding: var(--space-2); border-radius: var(--radius-sm); margin-bottom: var(--space-3); }

/* Uge-dots */
.tr-nutrition__week-dots { display: flex; gap: var(--space-1); justify-content: center; }
.tr-nutrition__week-dot { width: 30px; height: 30px; border-radius: 50%; background: var(--color-bg-tertiary); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: var(--color-text-tertiary); }
.tr-nutrition__week-dot.is-logged { background: var(--color-primary); color: var(--color-text-inverse); }

/* Populære / foreslåede opskrifter i sidebar */
.tr-nutrition__pop-recipe { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-border-light); text-decoration: none; transition: background 0.1s; }
.tr-nutrition__pop-recipe:last-child { border-bottom: none; }
.tr-nutrition__pop-recipe:hover { text-decoration: none; }
.tr-nutrition__pop-name { font-size: 14px; font-weight: 500; color: var(--color-text); }
.tr-nutrition__pop-cal { font-size: 12px; color: var(--color-text-tertiary); }

/* Opskrift-kategorier tabs */
.tr-nutrition__rcp-tabs { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); }

/* Inline meal-dropdown (tilføj til kostplan) */
.tr-rcp-meal-dropdown { position: absolute; bottom: 100%; left: 0; right: 0; background: var(--color-bg); border: 1px solid var(--color-border-input); border-radius: var(--radius-md); box-shadow: 0 4px 16px rgba(0,0,0,.12); z-index: 50; overflow: hidden; margin-bottom: var(--space-1); }
.tr-rcp-meal-option { display: block; width: 100%; padding: var(--space-3) var(--space-4); border: none; background: none; text-align: left; font-size: 14px; cursor: pointer; transition: background 0.15s; }
.tr-rcp-meal-option:hover { background: var(--color-bg-tertiary); }
.tr-nutrition__rcp-card { position: relative; }

/* Profil layout */
.tr-profil-layout { display: grid; grid-template-columns: 1fr 300px; gap: var(--space-6); margin-top: var(--space-5); }
.tr-profil-layout__main { min-width: 0; }
.tr-profil-layout__sidebar { display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 768px) { .tr-profil-layout { grid-template-columns: 1fr; } }

/* Profil target rows */
.tr-profil-target { display: flex; flex-direction: column; gap: 0; }
.tr-profil-target__row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-border-light); font-size: 14px; color: var(--color-text); }
.tr-profil-target__row:last-child { border-bottom: none; }
.tr-profil-target__row strong { font-weight: 700; }

/* Profil chart */
.tr-chart-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-1); }
.tr-chart-header h3 { margin: 0; }
.tr-chart-toggles { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tr-chart-toggle { padding: var(--space-1) var(--space-3); border: 2px solid var(--color-border-input); border-radius: var(--radius-xl); background: var(--color-bg); font-size: 13px; font-weight: 600; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); color: var(--color-text-secondary); }
.tr-chart-toggle.is-active { border-color: var(--tc, #2C3D33); background: var(--tc, #2C3D33); color: var(--color-text-inverse); }
.tr-chart-toggle:hover:not(.is-active) { border-color: var(--color-text-disabled); }
.tr-chart-container { width: 100%; overflow-x: auto; }
.tr-profil-chart__svg { width: 100%; height: auto; min-height: 200px; }

/* Dag-detalje */
.tr-day-summary { display: flex; align-items: center; gap: var(--space-6); padding: 16px 0; }
.tr-day-summary__ring { position: relative; display: flex; align-items: center; justify-content: center; }
.tr-day-summary__ring-text { position: absolute; text-align: center; line-height: 1.2; }
.tr-day-summary__ring-text strong { font-size: 16px; font-weight: var(--font-bold); display: block; color: var(--color-text); }
.tr-day-summary__ring-text small { font-size: 11px; color: var(--color-text-tertiary); }
.tr-day-summary__macros { font-size: 14px; color: var(--color-text); display: flex; flex-direction: column; gap: var(--space-1); }

/* Dag-måltider tidslinje */
.tr-day-meals { display: flex; flex-direction: column; gap: 0; }
.tr-day-meals__item { display: flex; gap: var(--space-4); padding: 12px 0; border-bottom: 1px solid var(--color-border-light); }
.tr-day-meals__item:last-child { border-bottom: none; }
.tr-day-meals__time { font-size: 14px; font-weight: 700; color: var(--color-primary); min-width: 44px; padding-top: 2px; }
.tr-day-meals__info { display: flex; flex-direction: column; gap: 2px; }
.tr-day-meals__type { font-size: 12px; color: var(--color-text-secondary); }
.tr-day-meals__title { font-size: 15px; font-weight: 600; color: var(--color-text); }
.tr-day-meals__meta { font-size: 13px; color: var(--color-text-tertiary); }

/* Dags-wall cards */
.tr-daywall { display: flex; flex-direction: column; gap: var(--space-2); }
.tr-daywall__card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow 0.15s; }
.tr-daywall__card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.tr-daywall__header { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); cursor: pointer; user-select: none; }
.tr-daywall__left { min-width: 120px; }
.tr-daywall__date { font-size: 14px; font-weight: 600; color: var(--color-text); display: block; }
.tr-daywall__meals-count { font-size: 12px; color: var(--color-text-tertiary); }
.tr-daywall__right { flex: 1; display: flex; align-items: center; gap: var(--space-3); }
.tr-daywall__macros { display: flex; gap: var(--space-3); flex: 1; flex-wrap: wrap; }
.tr-daywall__macro { font-size: 12px; font-weight: 600; white-space: nowrap; }
.tr-daywall__pct-bar { width: 60px; height: 6px; background: var(--color-bg-tertiary); border-radius: 3px; overflow: hidden; flex-shrink: 0; }
.tr-daywall__pct-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.tr-daywall__chevron { font-size: 12px; color: var(--color-text-tertiary); transition: transform 0.2s; flex-shrink: 0; }
.tr-daywall__card.is-open .tr-daywall__chevron { transform: rotate(180deg); }
.tr-daywall__body { display: none; padding: 0 18px 18px; }
.tr-daywall__card.is-open .tr-daywall__body { display: block; }
.tr-daywall__bars { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); padding-top: var(--space-1); border-top: 1px solid var(--color-border-light); }
.tr-daywall__bar-row { display: flex; align-items: center; gap: var(--space-3); font-size: 13px; color: var(--color-text); }
.tr-daywall__bar-row > span:first-child { width: 70px; font-weight: 500; }
.tr-daywall__bar-row > span:last-child { width: 90px; text-align: right; font-size: 12px; color: var(--color-text-tertiary); }
.tr-daywall__bar { flex: 1; height: 8px; background: var(--color-bg-tertiary); border-radius: 4px; overflow: hidden; }
.tr-daywall__bar > div { height: 100%; border-radius: 4px; }

/* Goals edit */
.tr-goals-edit { display: flex; flex-direction: column; gap: var(--space-2); }
.tr-goals-edit__row { display: flex; flex-direction: column; gap: 3px; }
.tr-goals-edit__row label { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.tr-goals-edit__row input { padding: var(--space-2) var(--space-3); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: 14px; }
.tr-goals-edit__row input:focus { border-color: var(--color-primary); outline: none; }

@media (max-width: 768px) {
    .tr-tdee-layout { grid-template-columns: 1fr; }
    .tr-tdee__activity-grid { grid-template-columns: 1fr 1fr; }
    .tr-daywall__header { flex-wrap: wrap; }
    .tr-daywall__right { flex-wrap: wrap; }
}

/* Kostplan mode-vælger */
.tr-mealplan-modes { display: flex; gap: var(--space-2); margin: var(--space-4) 0; }
.tr-mealplan-mode { flex: 1; padding: var(--space-3) var(--space-4); border: 2px solid var(--color-border-input); border-radius: var(--radius-lg); background: var(--color-bg); font-size: 14px; font-weight: 600; cursor: pointer; text-align: center; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); color: var(--color-text-secondary); }
.tr-mealplan-mode.is-active { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-text-inverse); }
.tr-mealplan-mode:hover:not(.is-active) { border-color: #aab8b0; }

/* Meal check-marks */
.tr-meal-check { display: flex; align-items: center; cursor: pointer; flex-shrink: 0; }
.tr-meal-check__input { display: none; }
.tr-meal-check__box { width: 22px; height: 22px; border: 2px solid #d0d9d3; border-radius: var(--radius-sm); transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); display: flex; align-items: center; justify-content: center; }
.tr-meal-check__input:checked + .tr-meal-check__box { background: #4CAF50; border-color: #4CAF50; }
.tr-meal-check__input:checked + .tr-meal-check__box::after { content: '✓'; color: var(--color-text-inverse); font-size: 14px; font-weight: 700; }
.tr-nutrition__recipe-card.is-checked .tr-nutrition__recipe-info { opacity: 0.5; }
.tr-nutrition__recipe-card.is-checked .tr-nutrition__recipe-name { text-decoration: line-through; }

/* Recipe card layout with checkbox + share */
.tr-nutrition__recipe-card { display: flex; align-items: center; gap: var(--space-3); }
.tr-nutrition__recipe-actions { display: flex; gap: var(--space-1); align-items: center; margin-left: auto; flex-shrink: 0; }
.tr-meal-share-btn { background: none; border: none; font-size: 16px; cursor: pointer; padding: var(--space-1); border-radius: var(--radius-sm); transition: background 0.15s; }
.tr-meal-share-btn:hover { background: var(--color-bg-tertiary); }

/* Smart filters (tag toggle buttons) */
.tr-smart-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tr-smart-filter { padding: var(--space-1) var(--space-3); border: 1.5px solid var(--color-border-input); border-radius: var(--radius-xl); background: var(--color-bg); font-size: 12px; font-weight: 600; cursor: pointer; color: var(--color-text-secondary); transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.tr-smart-filter.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); }
.tr-smart-filter:hover:not(.is-active) { border-color: #aab8b0; }

/* Recipe tag checkboxes in create form */
.tr-recipe-tags-select { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tr-tag-option { display: flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-3); border: 1.5px solid var(--color-border-input); border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.tr-tag-option:has(input:checked) { background: var(--color-success-bg-muted); border-color: #4CAF50; }
.tr-tag-option input { accent-color: var(--color-primary); }

/* Steps list */
.tr-nutrition__steps-list { padding-left: 20px; margin: 0; }
.tr-nutrition__steps-list li { font-size: 14px; color: var(--color-text); padding: 6px 0; line-height: 1.5; }

/* Privacy select */
.tr-privacy-select { padding: var(--space-1) var(--space-2); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: 12px; background: var(--color-bg); }

/* Recipe card image */
.tr-rcp-card__img { width: 100%; height: 140px; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: var(--space-2); }

/* Range filters */
.tr-range-filters { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-4); }
.tr-range-filter { display: flex; flex-direction: column; gap: var(--space-1); }
.tr-range-filter label { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.tr-range-filter input[type="range"] { width: 100%; accent-color: var(--color-primary); height: 6px; cursor: pointer; }
@media (max-width: 768px) { .tr-range-filters { grid-template-columns: 1fr 1fr; } }

/* Feed share buttons */
.tr-feed-share-btns { display: flex; gap: var(--space-2); margin-bottom: var(--space-4); flex-wrap: wrap; }

/* Feed dagsoversigt kort */
.tr-feed-daily { background: var(--color-bg-secondary); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); }
.tr-feed-daily__row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; color: var(--color-text); }
.tr-feed-daily__row strong { font-weight: 700; }

/* Feed kostplan kort */
.tr-feed-plan__meal { margin-bottom: var(--space-2); }
.tr-feed-plan__label { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); display: block; margin-bottom: var(--space-1); }
.tr-feed-plan__item { display: flex; justify-content: space-between; padding: var(--space-1) var(--space-2); font-size: 13px; color: var(--color-text); background: var(--color-bg-secondary); border-radius: var(--radius-sm); margin-bottom: 3px; }
.tr-feed-plan__item span { color: var(--color-text-tertiary); font-size: 12px; }

/* Bookmark saved badge */
.tr-rcp-card--saved { border: 2px solid #2C3D33 !important; }
.tr-rcp-saved-badge { display: inline-block; font-size: 11px; font-weight: 700; color: var(--color-primary); background: var(--color-success-bg-muted); padding: 2px var(--space-2); border-radius: var(--radius-sm); margin-bottom: var(--space-2); }

/* Klient card v2 */
.tr-client-card-v2 { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); margin-bottom: var(--space-3); transition: box-shadow 0.15s; }
.tr-client-card-v2:hover { box-shadow: 0 2px 12px rgba(0,0,0,.05); }
.tr-client-card-v2__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.tr-client-card-v2__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tr-client-card-v2__avatar-placeholder { width: 48px; height: 48px; border-radius: 50%; background: var(--color-bg-tertiary); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.tr-client-card-v2__info { flex: 1; min-width: 0; }
.tr-client-card-v2__name { font-size: 16px; font-weight: 700; color: var(--color-text); text-decoration: none; display: block; }
.tr-client-card-v2__name:hover { color: var(--color-primary); text-decoration: none; }
.tr-client-card-v2__badges { display: flex; gap: var(--space-2); margin-top: var(--space-1); align-items: center; }
.tr-client-card-v2__streak { font-size: 12px; font-weight: 600; color: #E65100; }
.tr-client-card-v2__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-3); }
.tr-client-card-v2__stat { background: var(--color-bg-secondary); border-radius: var(--radius-sm); padding: var(--space-3); text-align: center; }
.tr-client-card-v2__stat-label { font-size: 11px; color: var(--color-text-tertiary); display: block; margin-bottom: 2px; }
.tr-client-card-v2__stat-value { font-size: 15px; font-weight: 700; color: var(--color-text); }
.tr-client-card-v2__bar { height: 6px; background: var(--color-bg-tertiary); border-radius: 3px; overflow: hidden; margin-bottom: var(--space-1); }
.tr-client-card-v2__bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
.tr-client-card-v2__bar-label { font-size: 11px; color: var(--color-text-tertiary); }
.tr-client-card-v2__actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-3); }
.tr-client-card-v2__meal { display: flex; justify-content: space-between; padding: var(--space-2) var(--space-2); border-radius: var(--radius-sm); font-size: 13px; margin-top: var(--space-1); background: var(--color-bg-secondary); }
.tr-client-card-v2__meal.is-done { background: var(--color-success-bg-muted); }

/* Client status badges */
.tr-client-status-badge { font-size: 11px; font-weight: 600; padding: 2px var(--space-2); border-radius: var(--radius-sm); }
.tr-client-status-badge--alert { background: #FFEBEE; color: #C62828; }
.tr-client-status-badge--attention { background: #FFF3E0; color: #E65100; }
.tr-client-status-badge--warning { background: var(--color-warning-bg-muted); color: #F57F17; }
.tr-client-status-badge--ok { background: var(--color-success-bg-muted); color: #2E7D32; }
.tr-client-status-badge--great { background: var(--color-success-bg-muted); color: #1B5E20; }

/* Client card status border */
.tr-client-card-v2--alert { border-left: 4px solid #E53935; }
.tr-client-card-v2--attention { border-left: 4px solid #FF9800; }
.tr-client-card-v2--warning { border-left: 4px solid #F59E0B; }
.tr-client-card-v2--ok { border-left: 4px solid #66BB6A; }
.tr-client-card-v2--great { border-left: 4px solid #4CAF50; }

/* Client score */
.tr-client-card-v2__score { font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); }

/* Client chart */
.tr-client-chart { margin: var(--space-3) 0; }
.tr-client-chart__controls { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); flex-wrap: wrap; }
.tr-client-chart__toggles { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.tr-client-chart__toggles .tr-chart-toggle { font-size: 11px; padding: 3px var(--space-3); }
.tr-client-chart__period { padding: var(--space-1) var(--space-2); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: 12px; background: var(--color-bg); }
.tr-client-chart__svg { width: 100%; height: auto; min-height: 110px; border-radius: var(--radius-md); }

/* Threshold settings */
.tr-threshold-settings { background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-4); }
.tr-threshold-settings__toggle { padding: var(--space-3) var(--space-4); font-size: 13px; font-weight: 600; color: var(--color-text-secondary); cursor: pointer; list-style: none; }
.tr-threshold-settings__toggle::-webkit-details-marker { display: none; }
.tr-threshold-settings__toggle::before { content: '⚙️ '; }
.tr-threshold-settings__body { padding: 0 16px 16px; }

/* Threshold visual bar */
.tr-thresh-visual { margin-bottom: var(--space-1); }
.tr-thresh-visual__bar { display: flex; height: 28px; border-radius: var(--radius-sm); overflow: hidden; }
.tr-thresh-visual__zone { display: flex; align-items: center; justify-content: center; font-size: 14px; min-width: 30px; }
.tr-thresh-visual__labels { position: relative; height: 18px; font-size: 10px; color: var(--color-text-tertiary); margin-top: 2px; }
.tr-thresh-visual__labels span { position: absolute; transform: translateX(-50%); }
.tr-thresh-visual__labels span:first-child { left: 0; transform: none; }
.tr-thresh-visual__labels span:last-child { right: 0; left: auto; transform: none; }

/* Threshold input cards */
.tr-thresh-input { display: flex; align-items: center; gap: var(--space-2); background: var(--color-bg); border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); }
.tr-thresh-input__icon { width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.tr-thresh-input label { font-size: 12px; font-weight: 600; color: var(--color-text); line-height: 1.3; flex: 1; }
.tr-thresh-input label small { font-weight: 400; color: var(--color-text-tertiary); }
.tr-thresh-input input { width: 50px; padding: var(--space-1) var(--space-2); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: 13px; text-align: center; }
.tr-thresh-input small { font-size: 12px; color: var(--color-text-tertiary); }

/* Client detail section */
.tr-client-card-v2__detail { padding-top: var(--space-4); margin-top: var(--space-4); border-top: 1px solid var(--color-border-light); }
.tr-client-card-v2__stats { grid-template-columns: repeat(4, 1fr); }
@media (min-width: 769px) { .tr-client-card-v2__stats { grid-template-columns: repeat(5, 1fr); } }

/* Trainer client selector */
.tr-trainer-client-selector { display: flex; align-items: center; gap: var(--space-3); background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.tr-trainer-target-info { background: var(--color-warning-bg-muted); border: 1px solid #F59E0B; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); margin-bottom: var(--space-3); font-size: 13px; color: #F57F17; }

/* Plan selector */
.tr-plan-selector { display: flex; align-items: center; gap: var(--space-2); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
@media (max-width: 768px) { .tr-plan-selector { flex-wrap: wrap; } }

/* Client filters (redesigned) */
.tr-client-filters { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.tr-client-filters__search { display: flex !important; align-items: center !important; background: var(--color-bg) !important; border: 2px solid #e4ebe7 !important; border-radius: var(--radius-lg) !important; padding: 0 16px !important; flex: 1; min-width: 220px; transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base) !important; box-shadow: none !important; }
.tr-client-filters__search:focus-within { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px rgba(44,61,51,0.1) !important; }
.tr-client-filters__icon { font-size: 15px; margin-right: 10px; opacity: 0.4; flex-shrink: 0; }
input.tr-client-filters__input,
input.tr-client-filters__input[type="text"] { border: none !important; outline: none !important; background: transparent !important; padding: 0 !important; height: 20px !important; line-height: 20px !important; font-size: 14px !important; width: 100% !important; color: #1c1e21 !important; box-shadow: none !important; -webkit-appearance: none !important; margin: 0 !important; }
input.tr-client-filters__input::placeholder { color: var(--color-text-tertiary) !important; }
.tr-client-filters__search { height: 44px !important; }
select.tr-client-filters__select { height: 44px !important; padding: 0 32px 0 16px !important; border: 2px solid #e4ebe7 !important; border-radius: var(--radius-lg) !important; font-size: 14px !important; background: var(--color-bg) !important; color: #1c1e21 !important; min-width: 170px; -webkit-appearance: none !important; appearance: none !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; cursor: pointer; transition: border-color 0.15s !important; box-sizing: border-box !important; }
select.tr-client-filters__select:focus { border-color: var(--color-primary) !important; outline: none !important; }
.tr-client-filters__count { font-size: 13px; color: var(--color-text-tertiary); white-space: nowrap; font-weight: 500; }

/* Makro pie chart */
.tr-macro-pie { display: flex; align-items: center; gap: var(--space-4); }
.tr-macro-pie__chart { width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; }
.tr-macro-pie__legend { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--color-text); }
.tr-macro-pie__legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }

/* Water tracker */
.tr-water-tracker__glasses { display: flex; gap: var(--space-1); margin-bottom: var(--space-1); }
.tr-water-glass { background: none; border: none; font-size: 18px; cursor: pointer; opacity: 0.25; transition: opacity 0.15s; padding: 2px; }
.tr-water-glass.is-filled { opacity: 1; }
.tr-water-glass:hover { opacity: 0.7; }
.tr-water-tracker__label { font-size: 12px; color: var(--color-text-tertiary); }

/* Weekly report */
.tr-weekly-report__row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13px; color: var(--color-text); border-bottom: 1px solid var(--color-border-light); }
.tr-weekly-report__row:last-child { border-bottom: none; }

/* Badges grid */
.tr-badges-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tr-badge { display: flex; align-items: center; gap: var(--space-1); background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); }
.tr-badge__icon { font-size: 16px; }
.tr-badge__name { font-size: 11px; font-weight: 600; color: var(--color-text); }

/* Compliance history bars */
.tr-comp-history { display: flex; gap: var(--space-1); align-items: flex-end; height: 80px; }
.tr-comp-history__bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.tr-comp-history__fill { width: 100%; border-radius: 3px 3px 0 0; min-height: 2px; transition: height 0.3s; }
.tr-comp-history__bar span { font-size: 8px; color: var(--color-text-tertiary); margin-top: 3px; }

/* Weekplan */
.tr-weekplan__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); flex-wrap: wrap; gap: var(--space-2); }
.tr-weekplan__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2); }
.tr-weekplan__day { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-3); min-height: 120px; }
.tr-weekplan__day-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border-light); }
.tr-weekplan__day-header strong { font-size: 13px; color: var(--color-text); }
.tr-weekplan__day-header span { font-size: 11px; color: var(--color-text-tertiary); }
.tr-weekplan__meal { margin-bottom: var(--space-1); }
.tr-weekplan__meal-type { font-size: 10px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; display: block; margin-top: var(--space-2); }
.tr-weekplan__meal-name { font-size: 12px; color: var(--color-text); display: block; line-height: 1.4; }
@media (max-width: 768px) { .tr-weekplan__grid { grid-template-columns: 1fr 1fr; } }


/* Badge locked/unlocked */
.tr-badge.is-locked { opacity: 0.35; filter: grayscale(1); }
.tr-badge.is-unlocked { border-color: var(--color-primary); background: var(--color-success-bg-muted); }


/* Trainer notes widget */
.tr-trainer-notes-widget { border-left: 3px solid #2C3D33 !important; }
.tr-trainer-note { padding: 8px 0; border-bottom: 1px solid var(--color-border-light); }
.tr-trainer-note:last-child { border-bottom: none; }
.tr-trainer-note__header { display: flex; justify-content: space-between; margin-bottom: 3px; }
.tr-trainer-note__header strong { font-size: 13px; color: var(--color-text); }
.tr-trainer-note__header span { font-size: 11px; color: var(--color-text-tertiary); }
.tr-trainer-note p { font-size: 13px; color: var(--color-text); margin: 0; line-height: 1.4; }

/* Weekplan add button */
.tr-weekplan__add-btn { width: 100%; margin-top: var(--space-2); padding: var(--space-2); border: 1.5px dashed #d0d9d3; border-radius: var(--radius-sm); background: none; font-size: 12px; color: var(--color-text-tertiary); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.tr-weekplan__add-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }


/* Trainer note read button */
.tr-trainer-note__read { display: block; margin-top: var(--space-2); padding: var(--space-1) var(--space-3); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-bg); font-size: 12px; color: var(--color-text-secondary); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.tr-trainer-note__read:hover { border-color: #4CAF50; color: #4CAF50; }

/* Today top layout */
.tr-today-top { display: flex; align-items: center; gap: var(--space-3); }


/* Today ring — combined calorie + macro donut */
.tr-today-ring { position: relative; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; width: 120px; height: 120px; }
.tr-today-ring__svg { width: 120px; height: 120px; }
.tr-today-ring__center { position: absolute; text-align: center; line-height: 1.2; }
.tr-today-ring__center strong { font-size: 20px; font-weight: var(--font-bold); color: var(--color-text); display: block; }
.tr-today-ring__center small { font-size: 10px; color: var(--color-text-tertiary); }

/* Today macro bars */
.tr-today-macros { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-3); }
.tr-today-macro__header { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; }
.tr-today-macro__header span:first-child { font-weight: 600; }
.tr-today-macro__header span:last-child { color: var(--color-text-tertiary); }
.tr-today-macro__bar { height: 6px; background: var(--color-bg-tertiary); border-radius: 3px; overflow: hidden; }
.tr-today-macro__bar > div { height: 100%; border-radius: 3px; transition: width 0.3s; }

/* Today bottom */
.tr-today-bottom { display: flex; flex-direction: column; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--color-border-light); }
.tr-today-bottom__streak { display: flex; align-items: center; gap: var(--space-2); }
.tr-today-bottom__streak .tr-nutrition__streak { font-size: 12px; padding: 3px var(--space-2); margin: 0; }

/* Today shortfall */
.tr-today-shortfall { margin-top: var(--space-3); padding-top: var(--space-2); border-top: 1px solid var(--color-border-light); font-size: 11px; color: var(--color-text-tertiary); line-height: 1.6; }
.tr-today-shortfall span { font-weight: 600; }
.tr-today-shortfall a { color: var(--color-primary); display: block; text-decoration: none; }
.tr-today-shortfall a:hover { text-decoration: underline; }


/* Client actions bar (replaces sidebar) */
.tr-client-actions-bar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-bg-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.tr-client-actions-bar__alert { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--color-danger); }


/* Template weekday select */
.tr-tpl-weekday-wrap { flex: 1; }
.tr-tpl-weekday-select { width: 100%; padding: var(--space-2) var(--space-3); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-sm); font-size: 12px; background: var(--color-bg); cursor: pointer; }


/* Template use dropdown */
.tr-tpl-use-wrap { position: relative; }
.tr-tpl-use-dropdown { position: absolute; top: 100%; right: 0; z-index: 50; background: var(--color-bg); border: 1px solid var(--color-border-input); border-radius: var(--radius-md); box-shadow: 0 4px 16px rgba(0,0,0,.12); min-width: 180px; padding: 6px 0; margin-top: var(--space-1); }
.tr-tpl-use-opt { display: block; width: 100%; padding: var(--space-2) var(--space-4); border: none; background: none; text-align: left; font-size: 13px; cursor: pointer; transition: background 0.1s; color: var(--color-text); }
.tr-tpl-use-opt:hover { background: var(--color-bg-tertiary); }
.tr-tpl-use-divider { height: 1px; background: var(--color-bg-tertiary); margin: var(--space-1) 0; }
.tr-tpl-use-label { display: block; padding: var(--space-1) var(--space-4); font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; }

/* Weekplan meal item with remove */
.tr-weekplan__meal-item { display: flex; align-items: center; justify-content: space-between; }
.tr-weekplan__meal-remove { background: none; border: none; color: var(--color-text-disabled); cursor: pointer; font-size: 14px; padding: 0 2px; line-height: 1; transition: color 0.1s; }
.tr-weekplan__meal-remove:hover { color: var(--color-danger); }
.tr-weekplan__day-actions { display: flex; gap: var(--space-1); margin-top: var(--space-2); }
.tr-weekplan__clear-btn { padding: var(--space-2) var(--space-2); border: 1.5px dashed #d0d9d3; border-radius: var(--radius-sm); background: none; font-size: 12px; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.tr-weekplan__clear-btn:hover { border-color: var(--color-danger); }


/* ═══ CHECK-IN SIDE — HubFit-inspireret ═══ */

/* Hero */
.tr-ci-hero { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-5); margin-bottom: var(--space-5); display: flex; gap: var(--space-6); align-items: center; }
.tr-ci-hero__left { flex: 1; }
.tr-ci-hero__title { font-size: 18px; font-weight: var(--font-bold); color: var(--color-text); margin: 0 0 12px; }
.tr-ci-hero__stats { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.tr-ci-hero__stat { text-align: center; }
.tr-ci-hero__stat-big { font-size: 22px; font-weight: var(--font-bold); color: var(--color-text); display: block; }
.tr-ci-hero__stat span:last-child { font-size: 11px; color: var(--color-text-tertiary); }
.tr-ci-hero__chart { width: 280px; flex-shrink: 0; }
.tr-ci-hero__svg { width: 100%; height: auto; }
@media (max-width: 640px) { .tr-ci-hero { flex-direction: column; } .tr-ci-hero__chart { width: 100%; } }

/* Form */
.tr-ci-form { display: flex; flex-direction: column; gap: var(--space-3); }
.tr-ci-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
.tr-ci-card__label { font-size: 14px; font-weight: 700; color: var(--color-text); display: block; margin-bottom: var(--space-3); }
.tr-ci-sublabel { font-size: 12px; color: var(--color-text-tertiary); display: block; margin-bottom: var(--space-1); }
.tr-ci-row { display: flex; gap: var(--space-3); }
.tr-ci-row--3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
@media (max-width: 640px) { .tr-ci-row { flex-direction: column; } .tr-ci-row--3 { grid-template-columns: 1fr; } }
.tr-ci-input { width: 100%; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); font-size: 14px; box-sizing: border-box; transition: border-color 0.15s; }
.tr-ci-input:focus { border-color: var(--color-primary); outline: none; }
textarea.tr-ci-input { resize: vertical; font-family: inherit; }
.tr-ci-submit { width: 100%; padding: var(--space-4); font-size: 15px; border-radius: var(--radius-lg); }

/* Mood picker */
.tr-ci-mood { display: flex; gap: var(--space-3); justify-content: center; }
.tr-ci-mood__opt { cursor: pointer; text-align: center; }
.tr-ci-mood__opt input { display: none; }
.tr-ci-mood__face { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; border: 2.5px solid #e4e6eb; font-size: 24px; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.tr-ci-mood__text { display: block; font-size: 10px; color: var(--color-text-tertiary); margin-top: var(--space-1); font-weight: 600; }
.tr-ci-mood__opt input:checked + .tr-ci-mood__face { border-color: var(--color-primary); background: var(--color-success-bg-muted); transform: scale(1.12); box-shadow: 0 2px 8px rgba(44,61,51,.15); }
.tr-ci-mood__opt input:checked ~ .tr-ci-mood__text { color: var(--color-primary); }
.tr-ci-mood__opt:hover .tr-ci-mood__face { border-color: #aab8b0; }

/* Scale (1-5 buttons) */
.tr-ci-scale { display: flex; gap: var(--space-2); }
.tr-ci-scale__opt { flex: 1; }
.tr-ci-scale__opt input { display: none; }
.tr-ci-scale__opt span { display: flex; align-items: center; justify-content: center; height: 40px; border: 2px solid var(--color-border-input); border-radius: var(--radius-md); font-size: 15px; font-weight: 700; color: var(--color-text-secondary); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.tr-ci-scale__opt input:checked + span { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-inverse); }
.tr-ci-scale--stress .tr-ci-scale__opt input:checked + span { background: #E53935; border-color: var(--color-danger); }
.tr-ci-scale__opt:hover span { border-color: #aab8b0; }
.tr-ci-scale__labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-text-tertiary); margin-top: var(--space-1); }

/* Star rating */
.tr-ci-stars { display: flex; gap: var(--space-1); }
.tr-ci-star { cursor: pointer; }
.tr-ci-star input { display: none; }
.tr-ci-star span { font-size: 22px; color: #d0d9d3; transition: color 0.1s; }
.tr-ci-star input:checked ~ span, .tr-ci-star:has(input:checked) span { color: #F59E0B; }
.tr-ci-stars:has(.tr-ci-star:nth-child(1) input:checked) .tr-ci-star:nth-child(-n+1) span,
.tr-ci-stars:has(.tr-ci-star:nth-child(2) input:checked) .tr-ci-star:nth-child(-n+2) span,
.tr-ci-stars:has(.tr-ci-star:nth-child(3) input:checked) .tr-ci-star:nth-child(-n+3) span,
.tr-ci-stars:has(.tr-ci-star:nth-child(4) input:checked) .tr-ci-star:nth-child(-n+4) span,
.tr-ci-stars:has(.tr-ci-star:nth-child(5) input:checked) .tr-ci-star:nth-child(-n+5) span { color: #F59E0B; }

/* Already done */
.tr-checkin-done { display: flex; align-items: center; gap: var(--space-4); background: var(--color-success-bg-muted); border: 1px solid #A5D6A7; border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-4); }
.tr-checkin-done__emoji { font-size: 36px; }
.tr-checkin-done strong { font-size: 15px; color: var(--color-text); display: block; }
.tr-checkin-done p { font-size: 13px; color: var(--color-text-secondary); margin: 4px 0 0; }

/* History cards (Pending/Reviewed) */
.tr-ci-history { display: flex; flex-direction: column; gap: var(--space-2); }
.tr-ci-history__card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: box-shadow 0.15s; }
.tr-ci-history__card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.tr-ci-history__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); gap: var(--space-3); }
.tr-ci-history__date { display: flex; align-items: center; gap: var(--space-2); }
.tr-ci-history__date strong { font-size: 14px; color: var(--color-text); }
.tr-ci-status { font-size: 11px; font-weight: 600; padding: 2px var(--space-2); border-radius: var(--radius-sm); }
.tr-ci-status--pending { background: var(--color-warning-bg-muted); color: #F57F17; }
.tr-ci-status--reviewed { background: var(--color-success-bg-muted); color: #2E7D32; }
.tr-ci-history__quick { display: flex; gap: var(--space-3); font-size: 13px; color: var(--color-text-secondary); }
.tr-ci-history__body { display: none; padding: 0 18px 18px; }
.tr-ci-history__card.is-open .tr-ci-history__body { display: block; }
.tr-ci-history__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-3); }
.tr-ci-history__metric { background: var(--color-bg-secondary); border-radius: var(--radius-sm); padding: var(--space-3); text-align: center; }
.tr-ci-history__metric span { font-size: 11px; color: var(--color-text-tertiary); display: block; margin-bottom: 2px; }
.tr-ci-history__metric strong { font-size: 15px; color: var(--color-text); }
.tr-ci-history__note { font-size: 13px; color: var(--color-text); margin: 6px 0 0; padding: var(--space-2) var(--space-3); background: var(--color-bg-secondary); border-radius: var(--radius-sm); line-height: 1.5; }
.tr-ci-history__photo { width: 100%; max-width: 280px; border-radius: var(--radius-md); margin-top: var(--space-2); }
.tr-ci-history__feedback { background: var(--color-primary-light); border-left: 3px solid #2C3D33; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-3); margin-top: var(--space-2); font-size: 13px; }
.tr-ci-history__feedback strong { font-size: 12px; color: var(--color-primary); }
.tr-ci-history__feedback p { margin: 4px 0 0; color: var(--color-text); }

/* Feedback form */
.tr-ci-feedback-form { display: flex; gap: var(--space-2); align-items: center; }

/* Compare */
.tr-ci-compare-selects { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.tr-ci-compare { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.tr-ci-compare__header { display: grid; grid-template-columns: 1fr auto 1fr; text-align: center; padding: var(--space-4) var(--space-5); background: var(--color-bg-secondary); font-size: 14px; font-weight: 700; color: var(--color-text); gap: var(--space-3); }
.tr-ci-compare__header span:nth-child(2) { color: var(--color-text-tertiary); font-weight: 400; }
.tr-ci-compare__row { display: grid; grid-template-columns: 1fr auto 1fr; text-align: center; padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border-light); align-items: center; gap: var(--space-3); }
.tr-ci-compare__val { font-size: 18px; font-weight: 700; color: var(--color-text); }
.tr-ci-compare__label { font-size: 13px; color: var(--color-text-secondary); }
.tr-ci-compare__label small { font-weight: 600; }
.tr-ci-compare__photos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.tr-ci-compare__photos img { width: 100%; border-radius: var(--radius-md); }
.tr-ci-compare__nophoto { background: var(--color-bg-tertiary); border-radius: var(--radius-md); height: 150px; display: flex; align-items: center; justify-content: center; font-size: 13px; color: var(--color-text-tertiary); }
.tr-ci-cmp-section { margin-bottom: var(--space-5); }
.tr-ci-cmp-client-bar { display: flex; align-items: center; justify-content: space-between; background: var(--color-bg); border: 1px solid var(--color-border-input); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.tr-ci-cmp-client-bar__profile { display: flex; align-items: center; gap: var(--space-3); }
.tr-ci-cmp-client-bar__avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }

/* Klient cards (trainer) */
.tr-ci-clients { display: flex; flex-direction: column; gap: var(--space-3); }
.tr-ci-client-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); transition: box-shadow 0.15s; }
.tr-ci-client-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.tr-ci-client-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.tr-ci-client-card__user { display: flex; align-items: center; gap: var(--space-3); }
.tr-ci-client-card__user strong { font-size: 14px; color: var(--color-text); display: block; }
.tr-ci-client-card__metrics { display: flex; gap: var(--space-3); font-size: 13px; color: var(--color-text-secondary); }

/* Template cards */
.tr-ci-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.tr-ci-template-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
.tr-ci-template-card h4 { font-size: 15px; font-weight: 700; color: var(--color-text); margin: 0 0 4px; }


/* Dashboard cards */
.tr-ci-dashboard { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.tr-ci-dash-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.tr-ci-dash-card__title { font-size: 16px; font-weight: 700; color: var(--color-text); margin: 0 0 14px; }

/* Overblik clickable cards */
.tr-ci-dash-card__titlelink { display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: inherit; margin-bottom: var(--space-4); }
.tr-ci-dash-card__titlelink h3 { margin: 0; }
.tr-ci-dash-card__titlelink span:last-child { font-size: 14px; color: var(--color-text-disabled); transition: color 0.15s; }
.tr-ci-dash-card__titlelink:hover span:last-child { color: #3B82F6; }
.tr-ci-dash-client--link { display: flex; align-items: center; text-decoration: none; color: inherit; border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); margin: -4px -6px; transition: background 0.15s; cursor: pointer; }
.tr-ci-dash-client--link:hover { background: var(--color-bg-tertiary); }
.tr-ci-dash-list__item--link { display: flex; align-items: center; text-decoration: none; color: inherit; border-radius: var(--radius-sm); padding: var(--space-2); margin: -4px -8px; transition: background 0.15s; cursor: pointer; }
.tr-ci-dash-list__item--link:hover { background: #f7f8fa; }
.tr-ci-msg-item--link { display: flex; align-items: flex-start; text-decoration: none; color: inherit; border-radius: var(--radius-sm); padding: var(--space-2); margin: -4px -8px; transition: background 0.15s; cursor: pointer; }
.tr-ci-msg-item--link:hover { background: var(--color-bg-tertiary); }
.tr-ci-dash-card--clickable { display: block; cursor: pointer; transition: box-shadow 0.15s; }
.tr-ci-dash-card--clickable:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.tr-ci-dash-card--progress { display: flex; flex-direction: column; align-items: center; }

/* Client row in dashboard */
.tr-ci-dash-client { display: flex; align-items: center; gap: var(--space-3); padding: 8px 0; border-bottom: 1px solid var(--color-border-light); }
.tr-ci-dash-client:last-child { border-bottom: none; }
.tr-ci-dash-client__avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--color-text-inverse); font-weight: 700; font-size: 14px; flex-shrink: 0; }
.tr-ci-dash-client__name { flex: 1; font-size: 14px; font-weight: 500; color: var(--color-text); }
.tr-ci-dash-client__bar { width: 80px; height: 6px; background: var(--color-bg-tertiary); border-radius: 3px; overflow: hidden; }
.tr-ci-dash-client__bar > div { height: 100%; border-radius: 3px; }
.tr-ci-dash-client__pct { font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); width: 35px; text-align: right; }

/* Progress ring */
.tr-ci-progress-ring { position: relative; display: flex; align-items: center; justify-content: center; margin: var(--space-3) 0; }
.tr-ci-progress-ring__pct { position: absolute; font-size: 28px; font-weight: var(--font-bold); color: #3B82F6; }
.tr-ci-progress-legend { display: flex; gap: var(--space-4); font-size: 13px; color: var(--color-text-secondary); }
.tr-ci-progress-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; }

/* Recent check-ins list */
.tr-ci-dash-list__item { display: flex; align-items: center; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--color-border-light); font-size: 13px; }
.tr-ci-dash-list__item:last-child { border-bottom: none; }
.tr-ci-dash-list__name { font-weight: 600; color: var(--color-text); min-width: 100px; }
.tr-ci-dash-list__type { color: var(--color-text-secondary); flex: 1; }
.tr-ci-dash-list__time { color: var(--color-text-tertiary); min-width: 80px; }
.tr-ci-dash-list__action { color: #F59E0B; font-weight: 600; text-decoration: none; }
.tr-ci-dash-list__action:hover { text-decoration: underline; }

/* Profile header (sammenlign) */
.tr-ci-profile-header { display: flex; align-items: center; gap: var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-5); margin-bottom: 0; }
.tr-ci-profile-header__avatar { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.tr-ci-profile-header__info { flex: 1; }
.tr-ci-profile-header__badges { display: flex; gap: var(--space-2); margin-top: var(--space-1); }

/* Profile tabs */
.tr-ci-profile-tabs { display: flex; background: var(--color-bg); border: 1px solid var(--color-border); border-top: none; border-radius: 0 0 14px 14px; overflow: hidden; margin-bottom: var(--space-4); }
.tr-ci-profile-tabs a { flex: 1; text-align: center; padding: var(--space-3); font-size: 13px; font-weight: 600; color: var(--color-text-secondary); text-decoration: none; border-bottom: 2px solid transparent; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.tr-ci-profile-tabs a.is-active { color: #3B82F6; border-bottom-color: #3B82F6; }
.tr-ci-profile-tabs a:hover { color: var(--color-text); }

/* Add question (HubFit-stil) */
.tr-ci-q-types { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.tr-ci-q-type { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.tr-ci-q-type:hover { border-color: #3B82F6; background: #f8faff; }
.tr-ci-q-type__icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: var(--font-bold); flex-shrink: 0; }
.tr-ci-q-type strong { font-size: 14px; color: var(--color-text); display: block; }
.tr-ci-q-type small { font-size: 11px; color: var(--color-text-tertiary); display: block; }

/* Added question chip */
.tr-ci-q-added { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-3); background: var(--color-bg-secondary); border-radius: var(--radius-sm); margin-bottom: var(--space-1); font-size: 13px; }
.tr-ci-q-added small { color: var(--color-text-tertiary); }

@media (max-width: 768px) { .tr-ci-dashboard { grid-template-columns: 1fr; } .tr-ci-q-types { grid-template-columns: 1fr; } }


/* Overblik layout (3 cols) */
.tr-ci-overblik-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-5); }
.tr-ci-overblik-main { min-width: 0; }
.tr-ci-overblik-sidebar { display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 1024px) { .tr-ci-overblik-layout { grid-template-columns: 1fr; } }

/* Message items */
.tr-ci-msg-item { display: flex; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid var(--color-border-light); }
.tr-ci-msg-item:last-child { border-bottom: none; }
.tr-ci-msg-item__content { flex: 1; min-width: 0; }
.tr-ci-msg-item__header { display: flex; justify-content: space-between; margin-bottom: 2px; }
.tr-ci-msg-item__header strong { font-size: 13px; color: var(--color-text); }
.tr-ci-msg-item__header span { font-size: 11px; color: var(--color-text-tertiary); }
.tr-ci-msg-item__content p { font-size: 13px; color: var(--color-text-secondary); margin: 0; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Task items */
.tr-ci-task-item { display: flex; align-items: flex-start; gap: var(--space-2); padding: 8px 0; border-bottom: 1px solid var(--color-border-light); }
.tr-ci-task-item:last-child { border-bottom: none; }
.tr-ci-task-check { cursor: pointer; flex-shrink: 0; margin-top: 2px; }
.tr-ci-task-check input { accent-color: #3B82F6; width: 16px; height: 16px; }
.tr-ci-task-item__content { flex: 1; font-size: 13px; color: var(--color-text); line-height: 1.4; }
.tr-ci-task-item__content.is-done span { text-decoration: line-through; color: var(--color-text-tertiary); }
.tr-ci-task-item__content small { display: block; font-size: 11px; color: var(--color-text-tertiary); margin-top: 1px; }
.tr-ci-task-new { display: flex; gap: 0; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border-light); }
.tr-ci-task-new .tr-ci-input { border-radius: 10px 0 0 10px !important; border-right: none !important; }
.tr-ci-task-new .tr-btn { border-radius: 0 10px 10px 0 !important; padding: 8px 14px !important; min-width: 40px; }


/* Client table list */
.tr-ci-client-list__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.tr-ci-client-table__head { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.3px; border-bottom: 1px solid var(--color-border-light); }
.tr-ci-client-table__row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--space-2); padding: var(--space-3); align-items: center; border-bottom: 1px solid var(--color-border-light); text-decoration: none; color: inherit; transition: background 0.1s; cursor: pointer; }
.tr-ci-client-table__row:hover { background: var(--color-bg-secondary); text-decoration: none; color: inherit; }
.tr-ci-client-table__col { font-size: 13px; color: var(--color-text-secondary); }
.tr-ci-client-table__col--name { display: flex; align-items: center; gap: var(--space-3); }
.tr-ci-client-table__col--name strong { font-size: 14px; color: var(--color-text); display: block; }
.tr-ci-client-table__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tr-ci-client-table__tags { display: flex; gap: var(--space-1); margin-top: 2px; }
.tr-ci-tag { font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 4px; }
.tr-ci-tag--blue { background: #E3F2FD; color: #1565C0; }
.tr-ci-tag--green { background: var(--color-success-bg-muted); color: #2E7D32; }
.tr-ci-status--notset { background: var(--color-bg-tertiary); color: var(--color-text-tertiary); }

/* Client detail view */
.tr-ci-detail-header { display: flex; align-items: center; gap: var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 14px 14px 0 0; padding: var(--space-5) var(--space-5); }
.tr-ci-detail-header__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tr-ci-detail-header__info { flex: 1; }
.tr-ci-detail-header__meta { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-1); font-size: 13px; color: var(--color-text-secondary); flex-wrap: wrap; }

/* Detail 3-col grid */
.tr-ci-detail-grid { display: grid; grid-template-columns: 280px 1fr 300px; gap: var(--space-4); margin-top: var(--space-4); }
.tr-ci-detail-col { display: flex; flex-direction: column; gap: var(--space-4); }
@media (max-width: 1024px) { .tr-ci-detail-grid { grid-template-columns: 1fr; } }

/* Note cards */
.tr-ci-note-card { background: var(--color-bg-secondary); border-radius: var(--radius-md); padding: var(--space-3); margin-bottom: var(--space-2); }
.tr-ci-note-card strong { font-size: 13px; color: var(--color-text); display: block; margin-bottom: var(--space-1); }
.tr-ci-note-card p { font-size: 13px; color: var(--color-text-secondary); margin: 0; line-height: 1.5; }
.tr-ci-note-card--warn { background: #FFF3E0; border-left: 3px solid #F59E0B; }

/* Photo grid */
.tr-ci-photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.tr-ci-photo-grid__img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }

/* Activity timeline */
.tr-ci-activity { display: flex; flex-direction: column; gap: 0; }
.tr-ci-activity__item { display: flex; gap: var(--space-3); padding: 8px 0; border-bottom: 1px solid var(--color-border-light); }
.tr-ci-activity__item:last-child { border-bottom: none; }
.tr-ci-activity__icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.tr-ci-activity__item span { font-size: 13px; color: var(--color-text); display: block; }
.tr-ci-activity__item small { font-size: 11px; color: var(--color-text-tertiary); }


/* Sub-tabs (Indsendte / Tildelte formularer) */
.tr-ci-subtabs { display: flex; border-bottom: 2px solid #f0f2f5; margin-bottom: var(--space-4); }
.tr-ci-subtabs a { padding: var(--space-3) var(--space-5); font-size: 14px; font-weight: 600; color: var(--color-text-secondary); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.tr-ci-subtabs a.is-active { color: #3B82F6; border-bottom-color: #3B82F6; }
.tr-ci-subtabs a:hover { color: var(--color-text); }

/* Split view (list + detail) */
.tr-ci-split { display: grid; grid-template-columns: 280px 1fr; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg); min-height: 400px; }
.tr-ci-split__list { border-right: 1px solid #f0f2f5; overflow-y: auto; max-height: 600px; }
.tr-ci-split__list-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-light); }
.tr-ci-split__list-header span { font-size: 11px; font-weight: 700; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.3px; }
.tr-ci-split__item { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-light); text-decoration: none; color: inherit; transition: background 0.1s; cursor: pointer; }
.tr-ci-split__item:hover { background: var(--color-bg-secondary); text-decoration: none; color: inherit; }
.tr-ci-split__item.is-active { background: #EBF5FF; border-left: 3px solid #3B82F6; }
.tr-ci-split__item strong { font-size: 13px; color: #3B82F6; }
.tr-ci-split__item span { font-size: 12px; color: var(--color-text-tertiary); }
.tr-ci-split__detail { padding: var(--space-5); overflow-y: auto; max-height: 600px; }

/* Answers display */
.tr-ci-answer { padding: 14px 0; border-bottom: 1px solid var(--color-border-light); }
.tr-ci-answer:last-child { border-bottom: none; }
.tr-ci-answer strong { font-size: 14px; color: var(--color-text); display: block; margin-bottom: var(--space-2); }
.tr-ci-answer p { font-size: 14px; color: var(--color-text-secondary); margin: 0; padding: var(--space-2) var(--space-3); background: var(--color-bg-secondary); border-radius: var(--radius-sm); display: inline-block; }
.tr-ci-answer__scale { height: 8px; background: var(--color-bg-tertiary); border-radius: 4px; overflow: hidden; margin: 6px 0 4px; }
.tr-ci-answer__scale-fill { height: 100%; border-radius: 4px; }

/* Review bar */
.tr-ci-review-bar { margin-top: var(--space-4); padding: var(--space-4); background: var(--color-warning-bg-muted); border-radius: var(--radius-md); display: flex; gap: var(--space-2); }
.tr-ci-review-bar .tr-ci-input { flex: 1; }

/* Forms table */
.tr-ci-forms-table__head { display: grid; grid-template-columns: 2fr 1fr 1fr; padding: var(--space-2) var(--space-3); font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; border-bottom: 1px solid var(--color-border-light); }
.tr-ci-forms-table__row { display: grid; grid-template-columns: 2fr 1fr 1fr; padding: var(--space-3); align-items: center; border-bottom: 1px solid var(--color-border-light); font-size: 14px; }

@media (max-width: 768px) { .tr-ci-split { grid-template-columns: 1fr; } .tr-ci-split__list { max-height: 200px; border-right: none; border-bottom: 1px solid var(--color-border-light); } }


/* Metrics layout */
.tr-ci-metrics-layout { display: grid; grid-template-columns: 240px 1fr; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; background: var(--color-bg); }
.tr-ci-metrics-list { border-right: 1px solid #f0f2f5; padding: var(--space-4); }
.tr-ci-metric-item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3); border-radius: var(--radius-sm); text-decoration: none; color: inherit; transition: background 0.1s; margin-bottom: var(--space-1); }
.tr-ci-metric-item:hover { background: var(--color-bg-secondary); text-decoration: none; color: inherit; }
.tr-ci-metric-item.is-active { background: #EBF5FF; }
.tr-ci-metric-item strong { font-size: 14px; color: #3B82F6; display: block; }
.tr-ci-metric-item small { font-size: 12px; color: var(--color-text-tertiary); }
.tr-ci-metric-item span { font-size: 11px; color: var(--color-text-tertiary); }
.tr-ci-metrics-detail { padding: var(--space-5); }
.tr-ci-metric-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px var(--space-2); border-radius: var(--radius-sm); margin-left: 8px; }

/* Metric data table */
.tr-ci-metric-table { border: 1px solid var(--color-border-light); border-radius: var(--radius-md); overflow: hidden; }
.tr-ci-metric-table__head { display: grid; grid-template-columns: 1fr 1fr 40px; padding: var(--space-3) var(--space-4); font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; background: var(--color-bg-secondary); }
.tr-ci-metric-table__row { display: grid; grid-template-columns: 1fr 1fr 40px; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border-light); font-size: 14px; align-items: center; }

/* Success bar */
.tr-ci-success-bar { height: 8px; background: var(--color-bg-tertiary); border-radius: 4px; overflow: hidden; margin: var(--space-3) 0 var(--space-1); }
.tr-ci-success-bar > div { height: 100%; background: #3B82F6; border-radius: 4px; transition: width 0.5s; }

@media (max-width: 768px) { .tr-ci-metrics-layout { grid-template-columns: 1fr; } .tr-ci-metrics-list { border-right: none; border-bottom: 1px solid var(--color-border-light); } }


/* Template detail table */
.tr-ci-tpl-table__head { display: grid; grid-template-columns: 3fr 1fr 1fr 40px; padding: var(--space-3) var(--space-4); font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; border-bottom: 1px solid var(--color-border-light); }
.tr-ci-tpl-table__row { display: grid; grid-template-columns: 3fr 1fr 1fr 40px; padding: var(--space-4) var(--space-4); border-bottom: 1px solid var(--color-border-light); align-items: center; font-size: 14px; }
.tr-ci-tpl-table__q { display: flex; align-items: center; gap: var(--space-3); }
.tr-ci-tpl-del { background: none; border: none; cursor: pointer; font-size: 16px; opacity: 0.4; transition: opacity 0.15s; }
.tr-ci-tpl-del:hover { opacity: 1; }
.tr-ci-req-badge { font-size: 11px; font-weight: 600; padding: 2px var(--space-2); border-radius: 4px; }
.tr-ci-req-badge--yes { background: #FFEBEE; color: #C62828; }
.tr-ci-req-badge--no { background: var(--color-bg-tertiary); color: var(--color-text-tertiary); }

/* Reminder days */
.tr-ci-reminder-days { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.tr-ci-reminder-day { cursor: pointer; display: flex; align-items: center; gap: var(--space-1); }
.tr-ci-reminder-day input { display: none; }
.tr-ci-reminder-day span { display: flex; align-items: center; justify-content: center; min-width: 38px; height: 34px; border: 2px solid var(--color-border-input); border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; color: var(--color-text-secondary); transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); padding: 0 6px; }
.tr-ci-reminder-day input:checked + span { background: #3B82F6; border-color: #3B82F6; color: var(--color-text-inverse); }

/* Q type selected */
.tr-ci-q-type.is-selected { border-color: #3B82F6; background: #EBF5FF; box-shadow: 0 0 0 2px rgba(59,130,246,0.2); }


/* Sidebar section label */
.tr-sidebar-label { display: block; font-size: 10px; font-weight: 700; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; padding: 0 12px; margin-bottom: var(--space-1); }

/* ═══ KLIENT SEKTIONSHEADER ═══ */
.tr-ci-section-header { display: flex; align-items: center; gap: var(--space-2); padding: 14px 16px 10px; border-bottom: 1px solid var(--color-border-light); }
.tr-ci-section-header__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tr-ci-section-header__title { font-size: 14px; font-weight: 600; color: #1C1E21; margin: 0; }
.tr-ci-section-header__count { font-size: 12px; color: var(--color-text-tertiary); background: var(--color-bg-tertiary); border-radius: var(--radius-md); padding: 2px var(--space-2); font-weight: 600; }

/* ═══ OPGAVER (Tasks) SIDE ═══ */
.tr-ci-tasks-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.tr-ci-tasks-header .tr-training__title { margin: 0; }

.tr-ci-task-table {}
.tr-ci-task-table__head { display: grid; grid-template-columns: 1fr 140px 160px; padding: var(--space-3) var(--space-4); font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.3px; border-bottom: 1px solid var(--color-border-light); }
.tr-ci-task-table__row { display: grid; grid-template-columns: 1fr 140px 160px; padding: var(--space-3) var(--space-4); align-items: center; border-bottom: 1px solid #f7f8fa; transition: background 0.15s; }
.tr-ci-task-table__row:hover { background: #f9fafb; }
.tr-ci-task-table__row--done { opacity: 0.6; }
.tr-ci-task-table__col { font-size: 14px; color: var(--color-text); }
.tr-ci-task-table__col--task { display: flex; align-items: center; gap: var(--space-3); }
.tr-ci-task--overdue { color: var(--color-danger); font-weight: 600; }

.tr-ci-task-assignee { display: flex; align-items: center; gap: var(--space-2); font-size: 13px; }

/* ═══ BESKEDER (Messages) SIDE ═══ */
.tr-ci-messages-layout { display: grid; grid-template-columns: 320px 1fr; gap: 0; background: var(--color-bg); border-radius: var(--radius-lg); border: 1px solid var(--color-border-input); min-height: 520px; overflow: hidden; }

.tr-ci-msg-sidebar { border-right: 1px solid #e4e6eb; padding: var(--space-4); overflow-y: auto; max-height: 600px; }
.tr-ci-msg-sidebar .tr-ci-search-input { margin-bottom: var(--space-3); width: 100%; }
.tr-ci-msg-client-list { display: flex; flex-direction: column; gap: 2px; }
.tr-ci-msg-client { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-3); border-radius: var(--radius-md); text-decoration: none; color: inherit; transition: background 0.15s; position: relative; }
.tr-ci-msg-client:hover { background: var(--color-bg-tertiary); }
.tr-ci-msg-client.is-active { background: #EBF5FF; }
.tr-ci-msg-client__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tr-ci-msg-client__info { flex: 1; min-width: 0; }
.tr-ci-msg-client__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.tr-ci-msg-client__top strong { font-size: 14px; color: #1C1E21; }
.tr-ci-msg-client__time { font-size: 11px; color: var(--color-text-tertiary); white-space: nowrap; }
.tr-ci-msg-client__preview { font-size: 13px; color: var(--color-text-secondary); margin: 2px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-ci-msg-badge { background: #E53935; color: var(--color-text-inverse); font-size: 11px; font-weight: 700; border-radius: var(--radius-md); padding: 2px 7px; min-width: 20px; text-align: center; position: absolute; top: 8px; right: 8px; }

.tr-ci-msg-thread { display: flex; flex-direction: column; }
.tr-ci-msg-thread__header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-input); }
.tr-ci-msg-thread__header strong { font-size: 15px; color: #1C1E21; }
.tr-ci-msg-thread__body { flex: 1; padding: var(--space-5); overflow-y: auto; max-height: 420px; display: flex; flex-direction: column; gap: var(--space-3); }
.tr-ci-msg-bubble { max-width: 75%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); }
.tr-ci-msg-bubble--client { background: var(--color-bg-tertiary); align-self: flex-start; border-bottom-left-radius: 4px; }
.tr-ci-msg-bubble--trainer { background: #3B82F6; color: var(--color-text-inverse); align-self: flex-end; border-bottom-right-radius: 4px; }
.tr-ci-msg-bubble--trainer .tr-ci-msg-bubble__meta { color: rgba(255,255,255,0.7); }
.tr-ci-msg-bubble__meta { font-size: 11px; color: var(--color-text-tertiary); margin-bottom: var(--space-1); }
.tr-ci-msg-bubble__text { font-size: 14px; line-height: 1.5; }
.tr-ci-msg-thread__input { display: flex; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border-input); align-items: flex-end; }
.tr-ci-msg-thread__input textarea { flex: 1; resize: none; }

/* ═══ VANER (Habits) SIDE ═══ */
.tr-ci-habits-table {}
.tr-ci-habits-table__head { display: grid; grid-template-columns: 1fr 200px 200px 60px 40px; padding: var(--space-3) var(--space-4); font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.3px; border-bottom: 1px solid var(--color-border-light); }
.tr-ci-habits-table__row { display: grid; grid-template-columns: 1fr 200px 200px 60px 40px; padding: var(--space-4) var(--space-4); align-items: center; border-bottom: 1px solid #f7f8fa; transition: background 0.15s; }
.tr-ci-habits-table__row:hover { background: #f9fafb; }
.tr-ci-habits-table__col { font-size: 14px; color: var(--color-text); }
.tr-ci-habits-table__col--name { display: flex; align-items: center; gap: var(--space-3); }
.tr-ci-habits-table__col--days { display: flex; gap: var(--space-1); }
.tr-ci-habits-table__col--actions { text-align: center; }
.tr-ci-habit-icon { font-size: 20px; }
.tr-ci-habit-goal { background: #FFF3E0; color: #E65100; font-size: 12px; font-weight: 600; padding: var(--space-1) var(--space-3); border-radius: var(--radius-xl); white-space: nowrap; }
.tr-ci-habit-day { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-size: 11px; font-weight: 700; color: var(--color-text-disabled); background: #f7f8fa; }
.tr-ci-habit-day.is-active { background: #3B82F6; color: var(--color-text-inverse); }

/* Habit icon picker */
.tr-ci-habit-icon-btn { width: 40px; height: 40px; border: 2px solid var(--color-border-input); border-radius: var(--radius-md); background: var(--color-bg); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.tr-ci-habit-icon-btn:hover { border-color: #3B82F6; }
.tr-ci-habit-icon-btn.is-active { border-color: #3B82F6; background: #EBF5FF; box-shadow: 0 0 0 2px rgba(59,130,246,0.2); }

/* Habit day picker in modal */
.tr-ci-habit-day-btn { width: 36px; height: 36px; border: 2px solid var(--color-border-input); border-radius: 50%; background: var(--color-bg); font-size: 13px; font-weight: 700; color: var(--color-text-secondary); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); display: flex; align-items: center; justify-content: center; }
.tr-ci-habit-day-btn:hover { border-color: #3B82F6; }
.tr-ci-habit-day-btn.is-active { background: #3B82F6; border-color: #3B82F6; color: var(--color-text-inverse); }

/* ═══ SØGEFELT MED RUNDE HJØRNER ═══ */
.tr-ci-search-input { border-radius: 20px !important; padding: 9px 16px !important; font-size: 13px !important; border: 1px solid #e4e6eb !important; background: #f7f8fa !important; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast) !important; }
.tr-ci-search-input:focus { background: var(--color-bg) !important; border-color: #3B82F6 !important; box-shadow: 0 0 0 3px rgba(59,130,246,0.1) !important; }

/* ═══ HABIT ICON BUTTONS FIX ═══ */
.tr-ci-habit-icon-btn { font-size: 22px; line-height: 1; padding: 0; }
.tr-ci-habit-icons { display: flex !important; gap: var(--space-2) !important; flex-wrap: wrap !important; }

/* Habit day in table — centered */
.tr-ci-habit-day { display: inline-flex; align-items: center; justify-content: center; line-height: 1; }

/* ═══ TASK DELETE BUTTON ═══ */
.tr-ci-task-del { background: none; border: none; font-size: 18px; color: var(--color-text-disabled); cursor: pointer; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); padding: 0; }
.tr-ci-task-del:hover { background: #FEE2E2; color: var(--color-danger); }
.tr-ci-task-table__col--del { width: 36px; text-align: center; flex-shrink: 0; }

/* Task table grid with delete column */
.tr-ci-task-table__head, .tr-ci-task-table__row { grid-template-columns: 1fr 140px 160px 36px; }

/* ═══ OVERBLIK TASKS REDESIGN ═══ */
.tr-ci-ob-tasks-scroll { max-height: 280px; overflow-y: auto; }
.tr-ci-ob-task { display: flex; align-items: flex-start; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid #f7f8fa; }
.tr-ci-ob-task:last-child { border-bottom: none; }
.tr-ci-ob-task--todo { }
.tr-ci-ob-task--done { opacity: 0.5; }
.tr-ci-ob-task--todo .tr-ci-ob-task__content span { color: #1C1E21; font-size: 13px; font-weight: 500; }
.tr-ci-ob-task--done .tr-ci-ob-task__content s { color: var(--color-text-tertiary); font-size: 13px; }
.tr-ci-ob-task__content { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tr-ci-ob-task__content small { font-size: 11px; color: var(--color-text-tertiary); }
.tr-ci-ob-task__content small.tr-ci-task--overdue { color: var(--color-danger); font-weight: 600; }
.tr-ci-ob-tasks-divider { font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.3px; padding: 8px 0 4px; margin-top: var(--space-1); border-top: 1px solid var(--color-border-input); }
.tr-ci-task-add { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border-light); }
.tr-ci-task-add__input { width: 100%; border: none; background: none; font-size: 13px; color: #3B82F6; padding: 6px 0; outline: none; cursor: pointer; font-weight: 500; }
.tr-ci-task-add__input:focus { color: #1C1E21; cursor: text; }
.tr-ci-task-add__input::placeholder { color: #3B82F6; font-weight: 500; }

/* ═══ FOTO UPLOAD (Forfra/Side/Bagfra) ═══ */
.tr-ci-photo-uploads { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-3); }
.tr-ci-photo-upload { text-align: center; }
.tr-ci-photo-upload__label { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); margin-bottom: var(--space-2); display: block; }
.tr-ci-photo-upload__drop { width: 100%; aspect-ratio: 3/4; border: 2px dashed #e4e6eb; border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); background: #f9fafb; position: relative; overflow: hidden; }
.tr-ci-photo-upload__drop:hover { border-color: #3B82F6; background: #EBF5FF; }
.tr-ci-photo-upload__icon { font-size: 24px; margin-bottom: var(--space-1); }
.tr-ci-photo-upload__text { font-size: 12px; color: var(--color-text-tertiary); }
.tr-ci-photo-upload__remove { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; background: rgba(0,0,0,0.5); color: var(--color-text-inverse); border: none; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.tr-ci-photo-upload__remove:hover { background: #E53935; }

/* ═══ FOTO COMPARISON (HubFit-stil) ═══ */
.tr-ci-photo-compare { background: var(--color-bg); border-radius: var(--radius-lg); border: 1px solid var(--color-border-input); padding: var(--space-5); }
.tr-ci-photo-compare__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.tr-ci-photo-compare__tabs { display: flex; gap: 0; border: 1px solid var(--color-border-input); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-4); }
.tr-ci-photo-tab { flex: 1; padding: var(--space-3) var(--space-4); font-size: 14px; font-weight: 600; color: var(--color-text-secondary); background: var(--color-bg); border: none; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); text-align: center; }
.tr-ci-photo-tab:not(:last-child) { border-right: 1px solid #e4e6eb; }
.tr-ci-photo-tab:hover { background: #f7f8fa; }
.tr-ci-photo-tab.is-active { background: var(--color-bg-tertiary); color: #1C1E21; }
.tr-ci-photo-compare__selectors { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-4); }
.tr-ci-photo-select select { width: 100%; }
.tr-ci-photo-compare__display { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); border-radius: var(--radius-lg); overflow: hidden; min-height: 300px; background: var(--color-bg-tertiary); }
.tr-ci-photo-compare__left, .tr-ci-photo-compare__right { min-height: 300px; display: flex; align-items: center; justify-content: center; background: #f7f8fa; position: relative; }
.tr-ci-photo-compare__left img, .tr-ci-photo-compare__right img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; max-height: 500px; }
.tr-ci-photo-compare__placeholder { color: #bbb; font-size: 13px; text-align: center; padding: var(--space-5); }
.tr-ci-photo-compare__nav { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-3); }
.tr-ci-photo-nav-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--color-border-input); background: var(--color-bg); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); color: var(--color-text); }
.tr-ci-photo-nav-btn:hover { background: var(--color-bg-tertiary); border-color: #3B82F6; }

/* ═══ FOTOS TAB (HubFit galleri) ═══ */
.tr-ci-photos-layout { display: grid; grid-template-columns: 320px 1fr; gap: 0; background: var(--color-bg); border-radius: var(--radius-lg); border: 1px solid var(--color-border-input); min-height: 500px; overflow: hidden; }
.tr-ci-photos-sidebar { border-right: 1px solid #e4e6eb; display: flex; flex-direction: column; }
.tr-ci-photos-filter { display: flex; border-bottom: 1px solid var(--color-border-input); }
.tr-ci-photo-filter-btn { flex: 1; padding: var(--space-3) var(--space-2); font-size: 13px; font-weight: 600; color: var(--color-text-secondary); background: var(--color-bg); border: none; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); text-align: center; }
.tr-ci-photo-filter-btn:not(:last-child) { border-right: 1px solid #e4e6eb; }
.tr-ci-photo-filter-btn:hover { background: #f7f8fa; }
.tr-ci-photo-filter-btn.is-active { background: var(--color-bg-tertiary); color: #1C1E21; border-bottom: 2px solid #3B82F6; }
.tr-ci-photos-list { flex: 1; overflow-y: auto; max-height: 520px; }
.tr-ci-photos-list__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); cursor: pointer; border-bottom: 1px solid #f7f8fa; transition: background 0.15s; }
.tr-ci-photos-list__item:hover { background: #f9fafb; }
.tr-ci-photos-list__item.is-active { background: #EBF5FF; border-left: 3px solid #3B82F6; }
.tr-ci-photos-list__thumb { width: 44px; height: 44px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.tr-ci-photos-list__info { display: flex; flex-direction: column; gap: 2px; }
.tr-ci-photos-list__tag { font-size: 11px; font-weight: 700; padding: 2px var(--space-2); border-radius: var(--radius-sm); display: inline-block; width: fit-content; }
.tr-ci-photos-list__date { font-size: 12px; color: var(--color-text-tertiary); }
.tr-ci-photos-main { display: flex; flex-direction: column; }
.tr-ci-photos-main__toolbar { display: flex; justify-content: flex-end; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-light); }
.tr-ci-photos-main__preview { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: #f7f8fa; }
.tr-ci-photos-main__preview img { max-width: 100%; max-height: 480px; object-fit: contain; border-radius: var(--radius-sm); }

/* ═══ NOTER TAB ═══ */
.tr-ci-notes-layout { max-width: 800px; }
.tr-ci-note-entry { padding: 14px 0; border-bottom: 1px solid var(--color-border-light); }
.tr-ci-note-entry:last-child { border-bottom: none; }
.tr-ci-note-entry__header { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.tr-ci-note-entry__tag { font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: var(--radius-sm); }
.tr-ci-note-entry__date { font-size: 12px; color: var(--color-text-tertiary); flex: 1; }
.tr-ci-note-entry__text { font-size: 14px; line-height: 1.6; color: var(--color-text); margin: 0; }

/* Notes timeline */
.tr-ci-notes-timeline {}
.tr-ci-notes-timeline__item { display: flex; gap: var(--space-3); padding: 12px 0; border-bottom: 1px solid #f7f8fa; }
.tr-ci-notes-timeline__item:last-child { border-bottom: none; }
.tr-ci-notes-timeline__icon { font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.tr-ci-notes-timeline__content { flex: 1; }
.tr-ci-notes-timeline__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-1); }
.tr-ci-notes-timeline__header strong { font-size: 13px; color: #1C1E21; }
.tr-ci-notes-timeline__header span { font-size: 12px; color: var(--color-text-tertiary); }
.tr-ci-notes-timeline__content p { font-size: 14px; color: #444; line-height: 1.5; margin: 0; }

/* ═══ INLINE PAGES (Træning/Ernæring) ═══ */
.tr-ci-inline-page { max-width: 800px; }
.tr-ci-inline-stats { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.tr-ci-inline-stat { flex: 1; min-width: 120px; background: var(--color-bg); border: 1px solid var(--color-border-input); border-radius: var(--radius-lg); padding: var(--space-4); text-align: center; }
.tr-ci-inline-stat__value { display: block; font-size: 22px; font-weight: var(--font-bold); color: #1C1E21; }
.tr-ci-inline-stat__label { display: block; font-size: 12px; color: var(--color-text-tertiary); margin-top: var(--space-1); }

.tr-ci-inline-table {}
.tr-ci-inline-table__head { display: flex; gap: var(--space-2); padding: 8px 0; font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.3px; border-bottom: 1px solid var(--color-border-light); }
.tr-ci-inline-table__head span { flex: 1; }
.tr-ci-inline-table__row { display: flex; gap: var(--space-2); padding: 10px 0; font-size: 13px; border-bottom: 1px solid #f7f8fa; }
.tr-ci-inline-table__row span { flex: 1; }

/* Makro bar */
.tr-ci-macro-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--color-bg-tertiary); margin-bottom: var(--space-3); }
.tr-ci-macro-bar > div { height: 100%; transition: width 0.3s; }
.tr-ci-macro-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.tr-ci-macro-legend span { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--color-text-secondary); }
.tr-ci-macro-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* ═══ PHOTOS TOP BAR (filter + sammenlign flugtende) ═══ */
.tr-ci-photos-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.tr-ci-photos-filter { display: flex; gap: 0; border: 1px solid var(--color-border-input); border-radius: var(--radius-md); overflow: hidden; }
.tr-ci-photos-sidebar { border-right: 1px solid #e4e6eb; }
.tr-ci-photos-main__toolbar { display: none; }

/* ═══ PROGRAM CARD ═══ */
.tr-ci-program-card { background: #f9fafb; border: 1px solid var(--color-border-input); border-radius: var(--radius-lg); padding: var(--space-4); }
.tr-ci-program-card__name { font-size: 16px; font-weight: 700; color: #1C1E21; margin-bottom: var(--space-2); }
.tr-ci-program-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-3); font-size: 13px; color: var(--color-text-secondary); }
.tr-ci-program-card__compliance { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border-input); }
.tr-ci-compliance-bar { height: 8px; background: var(--color-bg-tertiary); border-radius: 4px; overflow: hidden; margin: var(--space-2) 0; }
.tr-ci-compliance-bar > div { height: 100%; border-radius: 4px; transition: width 0.3s; }

.tr-ci-empty-program { text-align: center; padding: var(--space-6) var(--space-4); }
.tr-ci-empty-program p { font-size: 14px; color: var(--color-text-tertiary); margin: var(--space-2) 0 var(--space-3); }

/* ═══ WEEK GRID (Træning) ═══ */
.tr-ci-week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-2); }
.tr-ci-week-day { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: var(--space-3) var(--space-1); border-radius: var(--radius-md); background: #f9fafb; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.tr-ci-week-day.is-done { background: var(--color-success-bg-muted); }
.tr-ci-week-day.is-today { box-shadow: 0 0 0 2px #3B82F6; }
.tr-ci-week-day__label { font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; }
.tr-ci-week-day__icon { font-size: 18px; }
.tr-ci-week-day__date { font-size: 11px; color: #bbb; }

/* ═══ AUTOFLOW KALENDER ═══ */
.tr-ci-autoflow {}
.tr-ci-autoflow__toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.tr-ci-autoflow__nav { display: flex; align-items: center; gap: var(--space-2); }
.tr-ci-autoflow__arrow { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text); font-size: 18px; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.tr-ci-autoflow__arrow:hover { background: var(--color-bg-tertiary); }
.tr-ci-autoflow__month { font-size: 16px; font-weight: 700; color: #1C1E21; min-width: 160px; text-align: center; }

.tr-ci-autoflow__calendar { background: var(--color-bg); border: 1px solid var(--color-border-input); border-radius: var(--radius-lg); overflow: hidden; }
.tr-ci-autoflow__head { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--color-border-input); }
.tr-ci-autoflow__head span { text-align: center; padding: 10px 0; font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; }
.tr-ci-autoflow__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.tr-ci-autoflow__cell { min-height: 90px; border-right: 1px solid #f0f2f5; border-bottom: 1px solid var(--color-border-light); padding: var(--space-2); position: relative; }
.tr-ci-autoflow__cell:nth-child(7n) { border-right: none; }
.tr-ci-autoflow__cell--empty { background: #fafafa; }
.tr-ci-autoflow__cell.is-today { background: #EBF5FF; }
.tr-ci-autoflow__day { font-size: 13px; color: var(--color-text-secondary); font-weight: 500; }
.tr-ci-autoflow__day.is-today { background: #3B82F6; color: var(--color-text-inverse); width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.tr-ci-autoflow__event { font-size: 11px; font-weight: 600; padding: 3px var(--space-2); border-radius: 4px; margin-top: var(--space-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }

/* Autoflow event type grid */
.tr-ci-af-event-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-4); }
.tr-ci-af-event-btn { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border-input); border-radius: var(--radius-lg); background: var(--color-bg); cursor: pointer; text-align: left; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); }
.tr-ci-af-event-btn:hover { border-color: #3B82F6; }
.tr-ci-af-event-btn.is-active { border-color: #3B82F6; background: #EBF5FF; box-shadow: 0 0 0 2px rgba(59,130,246,0.15); }
.tr-ci-af-event-btn__icon { width: 40px; height: 40px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.tr-ci-af-event-btn strong { font-size: 14px; display: block; color: #1C1E21; }
.tr-ci-af-event-btn small { font-size: 12px; color: var(--color-text-tertiary); display: block; margin-top: 2px; }

/* Autoflow upcoming events */
.tr-ci-af-upcoming { display: flex; align-items: flex-start; gap: var(--space-3); padding: 12px 0; border-bottom: 1px solid #f7f8fa; }
.tr-ci-af-upcoming:last-child { border-bottom: none; }
.tr-ci-af-upcoming__dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.tr-ci-af-upcoming__info { flex: 1; }
.tr-ci-af-upcoming__info strong { font-size: 14px; display: block; color: #1C1E21; }
.tr-ci-af-upcoming__info span { font-size: 12px; color: var(--color-text-tertiary); }

/* Extra fields toggle */
.tr-af-extra { margin-top: var(--space-3); }

/* ═══ MEAL PLAN DISPLAY ═══ */
.tr-ci-meal-section { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border-light); }
.tr-ci-meal-section__title { font-size: 13px; font-weight: 600; color: var(--color-text-secondary); margin: 0 0 8px; }
.tr-ci-meal-item { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) var(--space-3); background: #f9fafb; border-radius: var(--radius-sm); margin-bottom: var(--space-2); }
.tr-ci-meal-item__name { font-size: 14px; font-weight: 500; color: #1C1E21; }
.tr-ci-meal-item__macros { display: flex; gap: var(--space-3); font-size: 12px; color: var(--color-text-secondary); }
.tr-ci-meal-item__macro { font-weight: 600; }

/* Nutrition grid */
.tr-ci-nt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-4); }

/* ═══ NUTRITION DAGSOVERSIGT (kompakt) ═══ */
.tr-ci-nt-donut-row { display: flex; gap: var(--space-5); align-items: center; }
.tr-ci-nt-donut { position: relative; flex-shrink: 0; width: 100px; height: 100px; }
.tr-ci-nt-donut svg { display: block; }
.tr-ci-nt-donut__text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; }
.tr-ci-nt-donut__val { font-size: 22px; font-weight: var(--font-bold); color: #1C1E21; display: block; line-height: 1; }
.tr-ci-nt-donut__sub { font-size: 10px; color: var(--color-text-tertiary); }
.tr-ci-nt-macro-col { flex: 1; display: flex; flex-direction: column; gap: var(--space-3); }
.tr-ci-nt-macro-sm {}
.tr-ci-nt-macro-sm__head { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.tr-ci-nt-macro-sm__head span:last-child { color: var(--color-text-tertiary); font-weight: 500; }

.tr-ci-nt-week-remain { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--color-border-light); }
.tr-ci-nt-weekdots { display: flex; justify-content: center; gap: var(--space-2); }
.tr-ci-nt-weekdot { display: flex; flex-direction: column; align-items: center; }
.tr-ci-nt-weekdot__day { font-size: 11px; font-weight: 600; color: var(--color-text-disabled); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-bg-tertiary); }

/* Water dots */
.tr-ci-nt-water-dots { display: flex; gap: var(--space-1); }
.tr-ci-nt-water-dot { font-size: 12px; opacity: 0.2; }
.tr-ci-nt-water-dot.is-filled { opacity: 1; }
.tr-ci-nt-weekdot__day.is-logged { background: #3B82F6; color: var(--color-text-inverse); }

.tr-ci-nt-remaining { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-warning-bg-muted); border-radius: var(--radius-sm); text-align: center; }

/* ═══ UDVIKLING TAB ═══ */
.tr-ci-ud-trends { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.tr-ci-ud-trend-card { flex: 1; min-width: 110px; background: var(--color-bg); border: 1px solid var(--color-border-input); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; align-items: center; gap: var(--space-3); position: relative; }
.tr-ci-ud-trend-card__icon { font-size: 24px; }
.tr-ci-ud-trend-card__data { flex: 1; }
.tr-ci-ud-trend-card__val { font-size: 20px; font-weight: var(--font-bold); color: #1C1E21; display: block; line-height: 1.1; }
.tr-ci-ud-trend-card__val small { font-size: 12px; font-weight: 500; color: var(--color-text-tertiary); }
.tr-ci-ud-trend-card__label { font-size: 11px; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.3px; }
.tr-ci-ud-trend-card__delta { font-size: 12px; font-weight: 700; position: absolute; top: 10px; right: 12px; }

/* KPI row */
.tr-ci-ud-kpi-row { display: flex; gap: var(--space-2); }
.tr-ci-ud-kpi { flex: 1; text-align: center; background: #f9fafb; border-radius: var(--radius-md); padding: var(--space-3) var(--space-2); }
.tr-ci-ud-kpi__val { display: block; font-size: 18px; font-weight: var(--font-bold); color: #1C1E21; }
.tr-ci-ud-kpi__label { font-size: 11px; color: var(--color-text-tertiary); }

/* Resume list */
.tr-ci-ud-resume {}
.tr-ci-ud-resume__item { display: flex; align-items: center; gap: var(--space-3); padding: 10px 0; border-bottom: 1px solid #f7f8fa; }
.tr-ci-ud-resume__item:last-child { border-bottom: none; }
.tr-ci-ud-resume__icon { font-size: 20px; flex-shrink: 0; }
.tr-ci-ud-resume__item strong { font-size: 14px; display: block; color: #1C1E21; }
.tr-ci-ud-resume__item span { font-size: 12px; color: var(--color-text-tertiary); }

/* ═══ DASHBOARD 2.0 ═══ */

/* Alerts */
.tr-dashboard__alerts { margin-bottom: var(--space-5); }
.tr-dashboard__alert { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); margin-bottom: var(--space-2); }
.tr-dashboard__alert--warning { background: #FEF3C7; border-left: 3px solid #F59E0B; }
.tr-dashboard__alert--info { background: #DBEAFE; border-left: 3px solid #3B82F6; }
.tr-dashboard__alert--success { background: #D1FAE5; border-left: 3px solid #10B981; }
.tr-dashboard__alert-icon { font-size: 18px; flex-shrink: 0; }
.tr-dashboard__alert-text { flex: 1; font-size: 14px; color: var(--color-text); font-weight: 500; }

/* Today status cards */
.tr-dashboard__today { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
.tr-dashboard__today-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); background: var(--color-bg); border: 2px solid #E5E7EB; border-radius: var(--radius-lg); padding: var(--space-5) var(--space-3); text-decoration: none; color: inherit; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); text-align: center; }
.tr-dashboard__today-card:hover { border-color: #3B82F6; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.tr-dashboard__today-card--done { border-color: #10B981; background: #F0FDF4; }
.tr-dashboard__today-icon { font-size: 26px; }
.tr-dashboard__today-label { font-size: 12px; color: #6B7280; text-transform: uppercase; letter-spacing: 0.3px; font-weight: 600; }
.tr-dashboard__today-status { font-size: 14px; font-weight: 700; color: #1C1E21; }
.tr-dashboard__today-card--done .tr-dashboard__today-status { color: #10B981; }

/* Compliance + Streak row */
.tr-dashboard__compliance-row { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); margin-bottom: var(--space-5); }
.tr-dashboard__compliance-card { background: var(--color-bg); border: 1px solid #E5E7EB; border-radius: var(--radius-lg); padding: var(--space-5); }
.tr-dashboard__streak-num { font-size: 42px; font-weight: var(--font-bold); color: #1C1E21; line-height: 1; }
.tr-dashboard__streak-label { font-size: 14px; color: #6B7280; margin-top: var(--space-1); }
.tr-dashboard__compliance-dots { display: flex; gap: var(--space-2); justify-content: center; }
.tr-dashboard__compliance-col { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.tr-dashboard__compliance-dot { width: 14px; height: 14px; border-radius: 50%; background: #E5E7EB; }
.tr-dashboard__compliance-dot--done { background: #10B981; }
.tr-dashboard__compliance-day { font-size: 11px; color: var(--color-text-tertiary); font-weight: 600; }

/* Pending actions (trainer) */
.tr-dashboard__pending { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
.tr-dashboard__pending-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); background: var(--color-bg); border: 2px solid #E5E7EB; border-radius: var(--radius-lg); padding: var(--space-5) var(--space-3); text-decoration: none; color: inherit; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); text-align: center; }
.tr-dashboard__pending-item:hover { border-color: #3B82F6; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.tr-dashboard__pending-item--active { border-color: #F59E0B; background: #FFFBEB; }
.tr-dashboard__pending-count { font-size: 28px; font-weight: var(--font-bold); color: #1C1E21; }
.tr-dashboard__pending-item--active .tr-dashboard__pending-count { color: #F59E0B; }
.tr-dashboard__pending-label { font-size: 12px; color: #6B7280; font-weight: 500; }

/* Schedule (trainer today) */
.tr-dashboard__schedule {}
.tr-dashboard__schedule-item { display: flex; align-items: center; gap: var(--space-4); padding: 12px 0; border-bottom: 1px solid #F3F4F6; }
.tr-dashboard__schedule-item:last-child { border-bottom: none; }
.tr-dashboard__schedule-time { font-size: 15px; font-weight: 700; color: #3B82F6; min-width: 50px; }
.tr-dashboard__schedule-info { display: flex; align-items: center; gap: var(--space-3); }
.tr-dashboard__schedule-info strong { font-size: 14px; color: #1C1E21; }

/* Section badge */
.tr-dashboard__section-badge { font-size: 12px; font-weight: 600; color: #3B82F6; background: #EBF5FF; padding: var(--space-1) var(--space-3); border-radius: var(--radius-xl); }

/* Goals */
.tr-dashboard__goals { display: flex; flex-direction: column; gap: var(--space-4); }
.tr-dashboard__goal-row { display: flex; align-items: center; gap: var(--space-3); }
.tr-dashboard__goal-label { font-size: 13px; font-weight: 600; color: var(--color-text); min-width: 90px; }
.tr-dashboard__goal-bar { flex: 1; height: 8px; background: #E5E7EB; border-radius: 4px; overflow: hidden; }
.tr-dashboard__goal-fill { height: 100%; background: #3B82F6; border-radius: 4px; transition: width 0.3s; }
.tr-dashboard__goal-target { font-size: 12px; color: #6B7280; min-width: 100px; text-align: right; }

/* Feedback items */
.tr-dashboard__feedback-item { background: #F9FAFB; border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-2); }

/* Responsive */
@media (max-width: 640px) {
    .tr-dashboard__today { grid-template-columns: 1fr; }
    .tr-dashboard__pending { grid-template-columns: repeat(2, 1fr); }
    .tr-dashboard__compliance-row { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   BOOKING PAGE — /bookinger/
   ══════════════════════════════════════════════════════════ */
.tr-bookings { max-width: 960px; margin: 0 auto; padding: var(--space-6) var(--space-4); }

/* Tab navigation */
.tr-bookings__nav { display: flex; gap: 0; border-bottom: 2px solid #e4ebe7; margin-bottom: var(--space-6); }
.tr-bookings__nav-item { padding: var(--space-3) var(--space-5); font-size: 14px; font-weight: 600; color: var(--color-text-secondary); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .15s; }
.tr-bookings__nav-item:hover { color: var(--color-primary); }
.tr-bookings__nav-item.is-active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

/* Stats kort */
.tr-bookings__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-6); }
.tr-bookings__stat { display: flex; align-items: center; gap: var(--space-3); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-4); }
.tr-bookings__stat-icon { font-size: 24px; }
.tr-bookings__stat-val { display: block; font-size: 24px; font-weight: 700; color: #1a1a1a; line-height: 1.2; }
.tr-bookings__stat-label { display: block; font-size: 12px; color: var(--color-text-secondary); }
.tr-bookings__stat--warning { border-left: 3px solid #f59e0b; }
.tr-bookings__stat--success { border-left: 3px solid #10b981; }

/* Sections */
.tr-bookings__section { margin-bottom: var(--space-8); }
.tr-bookings__section-title { font-size: 16px; font-weight: 700; color: #1a1a1a; margin: 0 0 12px; }
.tr-bookings__list { display: flex; flex-direction: column; gap: var(--space-3); }
.tr-bookings__empty { text-align: center; padding: var(--space-8); background: var(--color-bg-secondary); border-radius: var(--radius-lg); color: var(--color-text-secondary); }
.tr-bookings__empty p { margin: 0 0 12px; }

/* Dagens bookinger — timeline */
.tr-bookings__today { display: flex; flex-direction: column; gap: 0; }
.tr-bookings__today-item { display: flex; align-items: center; gap: var(--space-4); padding: 14px 0; border-bottom: 1px solid #f0f2f0; }
.tr-bookings__today-item:last-child { border-bottom: none; }
.tr-bookings__today-time { display: flex; flex-direction: column; align-items: center; min-width: 50px; }
.tr-bookings__today-start { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.tr-bookings__today-end { font-size: 12px; color: var(--color-text-tertiary); }
.tr-bookings__today-line { width: 3px; height: 40px; background: var(--color-primary); border-radius: 2px; flex-shrink: 0; }
.tr-bookings__today-info { display: flex; align-items: center; gap: var(--space-3); flex: 1; }
.tr-bookings__today-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.tr-bookings__today-name { font-weight: 600; font-size: 14px; color: #1a1a1a; display: block; }
.tr-bookings__today-status--confirmed { font-size: 12px; color: #10b981; }
.tr-bookings__today-status--pending { font-size: 12px; color: #f59e0b; }
.tr-bookings__today-actions { display: flex; gap: var(--space-2); }

/* ── KALENDER ────────────────────────────────────────── */
.tr-bookings__cal-layout { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-6); }
.tr-bookings__calendar { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.tr-bookings__cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.tr-bookings__cal-title { font-size: 18px; font-weight: 700; margin: 0; }
.tr-bookings__cal-arrow { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #f0f2f0; text-decoration: none; color: var(--color-text); font-size: 18px; transition: background .15s; }
.tr-bookings__cal-arrow:hover { background: #e0e4e0; }
.tr-bookings__cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: 12px; font-weight: 600; color: var(--color-text-tertiary); text-transform: uppercase; margin-bottom: var(--space-2); }
.tr-bookings__cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--space-1); }
.tr-bookings__cal-day { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); font-size: 14px; position: relative; transition: background .15s; cursor: pointer; }
.tr-bookings__cal-day:hover { background: #f0f2f0; }
.tr-bookings__cal-day--empty { pointer-events: none; }
.tr-bookings__cal-day--past { opacity: 0.4; }
.tr-bookings__cal-day--today { background: var(--color-primary); color: var(--color-text-inverse); font-weight: 700; }
.tr-bookings__cal-day--today:hover { background: #3a4f43; }
.tr-bookings__cal-day--selected { outline: 2px solid #2C3D33; outline-offset: -2px; }
.tr-bookings__cal-day--has { font-weight: 600; }
.tr-bookings__cal-num { line-height: 1; }
.tr-bookings__cal-dots { display: flex; gap: 3px; align-items: center; margin-top: 3px; }
.tr-bookings__cal-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.tr-bookings__cal-dot--confirmed { background: #10b981; }
.tr-bookings__cal-dot--pending { background: #f59e0b; }
.tr-bookings__cal-count { font-size: 10px; color: var(--color-text-secondary); font-weight: 700; }
.tr-bookings__cal-legend { display: flex; gap: var(--space-4); margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid #f0f2f0; font-size: 12px; color: var(--color-text-secondary); }
.tr-bookings__cal-legend > span { display: flex; align-items: center; gap: var(--space-2); }

/* Dag detalje (sidebar) */
.tr-bookings__day-detail { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); min-height: 300px; }
.tr-bookings__day-title { font-size: 16px; font-weight: 700; margin: 0 0 16px; color: #1a1a1a; }
.tr-bookings__day-list { display: flex; flex-direction: column; gap: var(--space-3); }
.tr-bookings__day-placeholder { text-align: center; padding: var(--space-10) var(--space-4); color: var(--color-text-tertiary); }
.tr-bookings__day-placeholder span { font-size: 40px; display: block; margin-bottom: var(--space-3); }
.tr-bookings__day-placeholder p { margin: 0; font-size: 14px; }

/* ── HISTORIK ────────────────────────────────────────── */
.tr-bookings__historik-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.tr-bookings__filters { display: flex; gap: var(--space-1); }
.tr-bookings__filter { padding: var(--space-2) var(--space-4); border-radius: var(--radius-xl); font-size: 13px; font-weight: 600; color: var(--color-text-secondary); text-decoration: none; background: #f0f2f0; transition: all .15s; }
.tr-bookings__filter:hover { background: #e0e4e0; }
.tr-bookings__filter.is-active { background: var(--color-primary); color: var(--color-text-inverse); }
.tr-bookings__month-group { margin-bottom: var(--space-5); }
.tr-bookings__month-label { font-size: 13px; font-weight: 700; color: var(--color-text-tertiary); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 8px; padding-bottom: var(--space-2); border-bottom: 1px solid #f0f2f0; }

/* Historik booking-kort (kompakt) */
.tr-booking-hist { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-2); }
.tr-booking-hist--cancelled { opacity: 0.6; }
.tr-booking-hist__date { min-width: 80px; font-size: 13px; color: var(--color-text-secondary); }
.tr-booking-hist__time { font-size: 12px; color: var(--color-text-tertiary); margin-left: 6px; }
.tr-booking-hist__info { display: flex; align-items: center; gap: var(--space-2); flex: 1; }
.tr-booking-hist__avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.tr-booking-hist__name { font-size: 14px; font-weight: 600; color: #1a1a1a; }
.tr-booking-hist__badge { font-size: 11px; font-weight: 600; padding: 3px var(--space-3); border-radius: var(--radius-lg); white-space: nowrap; }
.tr-booking-hist__badge--confirmed { background: #d1fae5; color: #065f46; }
.tr-booking-hist__badge--cancelled { background: #fee2e2; color: #991b1b; }
.tr-booking-hist__badge--pending { background: #fef3c7; color: #92400e; }

/* Historik stats */
.tr-bookings__historik-stats { display: flex; gap: var(--space-6); padding: var(--space-5); background: var(--color-bg-secondary); border-radius: var(--radius-lg); margin-top: var(--space-6); justify-content: center; }
.tr-bookings__historik-stat { text-align: center; }
.tr-bookings__historik-stat-val { display: block; font-size: 28px; font-weight: 700; color: var(--color-primary); }
.tr-bookings__historik-stat-label { font-size: 12px; color: var(--color-text-secondary); }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 768px) {
    .tr-bookings__stats { grid-template-columns: repeat(2, 1fr); }
    .tr-bookings__cal-layout { grid-template-columns: 1fr; }
    .tr-bookings__historik-header { flex-direction: column; gap: var(--space-3); align-items: flex-start; }
}
@media (max-width: 480px) {
    .tr-bookings__stats { grid-template-columns: 1fr; }
    .tr-bookings__nav-item { padding: var(--space-2) var(--space-4); font-size: 13px; }
}

/* ===================================================================
   COMMUNITY PAGE — Feed, Leaderboard, Challenges, Badges
   =================================================================== */

/* ── Layout & nav ─────────────────────────────────────── */
.tr-community { max-width: 960px; margin: 0 auto; padding: 30px 20px 60px; }
.tr-community__nav { display: flex; gap: var(--space-1); background: #f0f2f0; border-radius: var(--radius-lg); padding: var(--space-1); margin-bottom: var(--space-8); }
.tr-community__nav-item { flex: 1; text-align: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: 14px; font-weight: 600; color: var(--color-text-secondary); text-decoration: none; transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); }
.tr-community__nav-item:hover { color: var(--color-primary); background: rgba(255,255,255,0.6); }
.tr-community__nav-item.is-active { background: var(--color-bg); color: var(--color-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.tr-community__title { font-size: 22px; font-weight: 700; color: #1a1a1a; margin: 0 0 4px; }
.tr-community__subtitle { font-size: 14px; color: var(--color-text-secondary); margin: 0 0 20px; }
.tr-community__section-title { font-size: 15px; font-weight: 700; color: var(--color-text-secondary); margin: 0 0 12px; }
.tr-community__empty { text-align: center; padding: var(--space-10) var(--space-5); color: var(--color-text-tertiary); background: var(--color-bg-secondary); border-radius: var(--radius-lg); }

/* ── Feed tab ─────────────────────────────────────────── */
.tr-community__feed-layout { display: grid; grid-template-columns: 1fr 260px; gap: var(--space-6); }
.tr-community__feed-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.tr-community__feed { display: flex; flex-direction: column; gap: var(--space-3); }

/* Respect items */
.tr-respect-item { display: flex; gap: var(--space-4); padding: var(--space-4) var(--space-4); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: box-shadow 0.2s; }
.tr-respect-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.tr-respect-item__avatars { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.tr-respect-item__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 0 0 1px #e4ebe7; }
.tr-respect-item__type { font-size: 20px; }
.tr-respect-item__body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.tr-respect-item__text { font-size: 14px; color: var(--color-text); line-height: 1.4; }
.tr-respect-item__msg { font-size: 13px; color: var(--color-text-secondary); font-style: italic; margin: 0; }
.tr-respect-item__time { font-size: 12px; color: var(--color-text-disabled); }

/* Respect type picker */
.tr-respect-types { display: flex; gap: var(--space-2); }
.tr-respect-type { width: 44px; height: 44px; border-radius: var(--radius-md); border: 2px solid var(--color-border); background: var(--color-bg); font-size: 22px; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); display: flex; align-items: center; justify-content: center; }
.tr-respect-type:hover { border-color: var(--color-primary); }
.tr-respect-type.is-selected { border-color: var(--color-primary); background: #f0f7f2; box-shadow: 0 0 0 2px rgba(44,61,51,0.15); }

/* Sidebar */
.tr-community__sidebar { display: flex; flex-direction: column; gap: var(--space-4); }
.tr-community__sidebar-stats { display: flex; gap: var(--space-4); padding: var(--space-4); background: var(--color-bg-secondary); border-radius: var(--radius-lg); text-align: center; }
.tr-community__sidebar-stats > div { flex: 1; }
.tr-community__sidebar-stats strong { display: block; font-size: 22px; font-weight: 700; color: var(--color-primary); }
.tr-community__sidebar-stats span { font-size: 12px; color: var(--color-text-secondary); }

/* ── Leaderboard tab ──────────────────────────────────── */
.tr-community__leaderboard { display: flex; flex-direction: column; gap: var(--space-2); }
.tr-lb-row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-decoration: none; color: inherit; transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); }
.tr-lb-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); transform: translateY(-1px); }
.tr-lb-row--me { border-color: var(--color-primary); background: #f0f7f2; }
.tr-lb-row--top { border-width: 2px; }
.tr-lb-row__rank { font-size: 20px; min-width: 32px; text-align: center; }
.tr-lb-row__user { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; }
.tr-lb-row__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.tr-lb-row__name { font-size: 14px; font-weight: 600; color: #1a1a1a; display: block; }
.tr-lb-row__level { font-size: 12px; color: var(--color-text-secondary); display: block; }
.tr-lb-row__stats { display: flex; gap: var(--space-4); align-items: center; flex-shrink: 0; }
.tr-lb-row__respect { font-size: 14px; font-weight: 600; color: var(--color-primary); }
.tr-lb-row__xp { font-size: 12px; color: var(--color-text-secondary); }
.tr-lb-row__badges { display: flex; gap: var(--space-1); font-size: 16px; flex-shrink: 0; }

/* ── Challenges tab ───────────────────────────────────── */
.tr-community__challenges-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-5); }
.tr-community__challenge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
.tr-challenge-card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); transition: box-shadow 0.2s; }
.tr-challenge-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.tr-challenge-card--ended { opacity: 0.7; }
.tr-challenge-card__header { display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-3); }
.tr-challenge-card__icon { font-size: 28px; flex-shrink: 0; }
.tr-challenge-card__title { font-size: 15px; font-weight: 700; color: #1a1a1a; margin: 0; }
.tr-challenge-card__type { font-size: 12px; color: var(--color-text-secondary); }
.tr-challenge-card__days { font-size: 13px; font-weight: 700; color: var(--color-primary); background: #e8f5e9; padding: 3px var(--space-3); border-radius: var(--radius-md); margin-left: auto; white-space: nowrap; flex-shrink: 0; }
.tr-challenge-card__desc { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 10px; line-height: 1.4; }
.tr-challenge-card__meta { display: flex; gap: var(--space-4); font-size: 12px; color: var(--color-text-secondary); margin-bottom: var(--space-3); }
.tr-challenge-card__progress { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.tr-challenge-card__bar { flex: 1; height: 8px; background: #f0f2f0; border-radius: 4px; overflow: hidden; }
.tr-challenge-card__fill { height: 100%; background: linear-gradient(90deg, #2C3D33, #4a7c5c); border-radius: 4px; transition: width 0.3s; }
.tr-challenge-card__pct { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; }
.tr-challenge-card__actions { display: flex; gap: var(--space-2); }
.tr-challenge-card__badge-done { font-size: 11px; font-weight: 600; padding: 3px var(--space-3); border-radius: var(--radius-md); background: #e4ebe7; color: var(--color-text-secondary); margin-left: auto; white-space: nowrap; flex-shrink: 0; }

/* ── Badges tab ───────────────────────────────────────── */
.tr-community__badges-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.tr-community__badges-level { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; }
.tr-community__badges-level span:first-child { font-size: 28px; }
.tr-community__badges-level strong { display: block; font-weight: 700; color: #1a1a1a; }
.tr-community__badges-level > div > span { display: block; font-size: 12px; color: var(--color-text-secondary); }

/* XP progress bar */
.tr-community__xp-bar { position: relative; height: 28px; background: #f0f2f0; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-8); }
.tr-community__xp-fill { height: 100%; background: linear-gradient(90deg, #2C3D33, #4a7c5c); border-radius: var(--radius-lg); transition: width 0.4s; }
.tr-community__xp-label { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--color-text-inverse); text-shadow: 0 1px 2px rgba(0,0,0,0.3); }

/* Badge groups */
.tr-community__badge-group { margin-bottom: var(--space-6); }
.tr-community__badge-group-title { font-size: 16px; font-weight: 700; color: var(--color-text); margin: 0 0 12px; }
.tr-community__badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); }
.tr-badge-card { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--space-5) var(--space-3); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-bg); transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base); }
.tr-badge-card--earned { border-color: var(--color-primary); background: #f0f7f2; }
.tr-badge-card--locked { opacity: 0.5; filter: grayscale(0.6); }
.tr-badge-card__icon { font-size: 36px; margin-bottom: var(--space-2); }
.tr-badge-card__name { font-size: 13px; font-weight: 700; color: #1a1a1a; margin-bottom: var(--space-1); }
.tr-badge-card__desc { font-size: 11px; color: var(--color-text-secondary); line-height: 1.3; }
.tr-badge-card__earned { font-size: 11px; font-weight: 600; color: var(--color-primary); margin-top: var(--space-2); }

/* ── Community responsive ─────────────────────────────── */
@media (max-width: 768px) {
    .tr-community__feed-layout { grid-template-columns: 1fr; }
    .tr-community__sidebar { order: -1; }
    .tr-community__challenge-grid { grid-template-columns: 1fr; }
    .tr-lb-row__badges { display: none; }
    .tr-community__challenges-header { flex-direction: column; gap: var(--space-3); }
    .tr-community__badges-header { flex-direction: column; gap: var(--space-3); align-items: flex-start; }
}
@media (max-width: 480px) {
    .tr-community__nav-item { padding: var(--space-2) var(--space-3); font-size: 12px; }
    .tr-community__badge-grid { grid-template-columns: repeat(2, 1fr); }
    .tr-lb-row__stats { flex-direction: column; gap: 2px; }
}