/*
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 — Design tokens v5 (tabs) */
    --g900:#122b1a;--g800:#1a3824;--g700:#244a30;--g600:#2d6a3f;--g500:#3a8a52;--g400:#4CAF50;--g300:#81c784;--g200:#a5d6a7;--g100:#c8e6c9;--g50:#e8f5e9;
    --b100:#f5f0e8;--b200:#ece5d8;--b300:#e2ddd4;--b50:#faf8f4;
    --o600:#c47a2e;--o500:#e8913a;--o100:#fef3e0;--o50:#fffbf2;
    --r500:#d45050;--r100:#fce8e8;--r50:#fef5f5;
    --p500:#7c5cfc;--p50:#f4f0ff;--p100:#ece6ff;
    --blue:#3b82f6;--blue50:#eff6ff;--teal:#0d9488;--teal50:#f0fdfa;
    --bl500:#3b82f6;--bl100:#dbeafe;--bl50:#eff6ff;
    --o400:#f0a050;--r400:#e07070;
    --pink:#ec4899;--pink50:#fdf2f8;
    --t1:#1a2e22;--t2:#4a5e50;--t3:#7a8e80;--t4:#a0b0a4;
    --card:#fff;--cb:rgba(0,0,0,.05);

    /* 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);
}

/* =============================================================
   SIDEBAR LAYOUT — Global layout when logged in
   ============================================================= */

/* Hide old header when sidebar is active */
body.tr-has-sidebar .tr-header { display: none !important; }

/* Push page content to the right */
body.tr-has-sidebar #page {
    padding-left: 258px;
    padding-top: 0;
    min-height: 100vh;
}

/* Hide per-page sidebars — global sidebar replaces them */
body.tr-has-sidebar .tr-training__sidebar { display: none !important; }
body.tr-has-sidebar .tr-training { display: block; }
body.tr-has-sidebar .tr-training__main { width: 100%; max-width: 100%; flex: none; }
body.tr-has-sidebar .tr-training { min-height: auto; }

/* Adjust footer inside sidebar layout */
body.tr-has-sidebar .tr-footer { margin-left: 0; }

/* =============================================================
   SIDEBAR COMPONENT
   ============================================================= */
.tr-sb {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 258px;
    background: #122b1a;
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
}
.tr-sb::-webkit-scrollbar { display: none; }

/* Logo */
.tr-sb__logo { padding: 20px 18px 14px; }
.tr-sb__logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #fff;
}
.tr-sb__logo span {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
}
.tr-sb__logo em {
    font-style: normal;
    color: var(--color-accent);
}

/* Role toggle */
.tr-sb__toggle {
    margin: 0 12px 10px;
    background: #0a1f12;
    border-radius: 10px;
    padding: 4px;
    display: flex;
    position: relative;
}
.tr-sb__toggle-bg {
    position: absolute;
    top: 4px; left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: #244a30;
    border-radius: 7px;
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    z-index: 0;
}
.tr-sb__toggle-bg.right { transform: translateX(100%); }
.tr-sb__toggle-btn {
    flex: 1;
    padding: 7px 0;
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(255,255,255,.35);
    cursor: pointer;
    transition: color .25s;
    position: relative;
    z-index: 1;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    font-family: inherit;
}
.tr-sb__toggle-btn.active { color: #fff; }
.tr-sb__toggle-btn svg { opacity: .7; }
.tr-sb__toggle-btn.active svg { opacity: 1; }

/* Sections & labels */
.tr-sb__section { padding: 4px 10px 2px; }
.tr-sb__label {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: rgba(255,255,255,.18);
    padding: 10px 12px 5px;
}

/* Nav items */
.tr-sb__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border-radius: 9px;
    color: rgba(255,255,255,.5);
    cursor: pointer;
    transition: all .15s;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 1px;
}
.tr-sb__item:hover {
    background: rgba(255,255,255,.06);
    color: rgba(255,255,255,.85);
    text-decoration: none;
}
.tr-sb__item.act {
    background: #244a30;
    color: #fff;
    font-weight: 600;
}
.tr-sb__item svg {
    width: 18px; height: 18px;
    flex-shrink: 0;
    stroke-width: 1.7;
}

/* Badges */
.tr-sb__badge {
    margin-left: auto;
    min-width: 19px; height: 19px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    font-size: 10.5px;
    font-weight: 700;
}
.tr-sb__badge.or { background: #e8913a; color: #fff; }
.tr-sb__badge.gr { background: #3a8a52; color: #fff; }

/* Divider & spacer */
.tr-sb__divider {
    height: 1px;
    background: rgba(255,255,255,.06);
    margin: 6px 14px;
}
.tr-sb__spacer { flex: 1; }

/* Quick action */
.tr-sb__quick {
    margin: 6px 12px 8px;
    padding: 9px 12px;
    border: 1.5px dashed rgba(255,255,255,.1);
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255,255,255,.35);
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
}
.tr-sb__quick:hover {
    border-color: var(--color-accent);
    color: #81c784;
    background: rgba(76,175,80,.05);
    text-decoration: none;
}

/* Mobile hamburger button */
.tr-sb-mobile-btn {
    display: none;
    position: fixed;
    top: 14px;
    left: 14px;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 150;
}
.tr-sb-mobile-btn.is-hidden { display: none !important; }

@media (max-width: 768px) {
    .tr-sb-mobile-btn { display: flex; }
}

/* Top section (search + notifications) */
.tr-sb__section--top {
    padding-bottom: 2px;
}
.tr-sb__item--search {
    cursor: text;
    opacity: 0.6;
}
.tr-sb__item--search:hover {
    opacity: 1;
}

/* User section */
.tr-sb__user {
    padding: 12px 14px;
    border-top: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    gap: 9px;
}
.tr-sb__avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.tr-sb__avatar-placeholder {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #2d6a3f, #4CAF50);
    flex-shrink: 0;
}
.tr-sb__username {
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
}
.tr-sb__userrole {
    color: rgba(255,255,255,.35);
    font-size: 10.5px;
    margin-top: 1px;
}
.tr-sb__logout {
    margin-left: auto;
    color: rgba(255,255,255,.25);
    transition: color .2s;
    display: flex;
}
.tr-sb__logout:hover { color: rgba(255,255,255,.6); }

/* Mobile overlay */
.tr-sb-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 99;
}
.tr-sb-overlay.is-open { display: block; }

/* =============================================================
   TOPBAR COMPONENT
   ============================================================= */
.tr-tb {
    display: none !important; /* Topbar fjernet — søg/notif er nu i sidebar */
}
.tr-tb__hamburger {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}
.tr-tb__hamburger span {
    width: 20px; height: 2px;
    background: var(--color-text);
    border-radius: 2px;
}
.tr-tb__search {
    display: flex;
    align-items: center;
    gap: 7px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    width: 280px;
    font-size: 12.5px;
    color: var(--color-text-tertiary);
    cursor: pointer;
}
.tr-tb__search svg { opacity: .4; flex-shrink: 0; }
.tr-tb__actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 3px;
}
.tr-tb__icon {
    width: 36px; height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s;
    color: var(--color-text-tertiary);
    position: relative;
    text-decoration: none;
}
.tr-tb__icon:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text);
    text-decoration: none;
}
.tr-tb__dot {
    position: absolute;
    top: 7px; right: 7px;
    width: 7px; height: 7px;
    background: #dc2626;
    border-radius: 50%;
    border: 2px solid #fff;
}

/* =============================================================
   SIDEBAR RESPONSIVE
   ============================================================= */
@media (max-width: 768px) {
    body.tr-has-sidebar #page {
        padding-left: 0;
        padding-top: 0;
    }
    .tr-sb {
        transform: translateX(-258px);
        transition: transform .3s cubic-bezier(.4,0,.2,1);
        z-index: 200;
    }
    .tr-sb.is-open { transform: translateX(0); }
}

/* =============================================================
   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: none;
    outline-offset: 0;
}

/* 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;
}

.tr-header__logo-accent {
    color: var(--color-accent);
}

/* 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)
   ============================================================ */

/* Beige baggrund på alle Trainrr-sider (logget ind) */
body.tr-beige-bg,
body.tr-beige-bg .site-content,
body.tr-beige-bg .content-area,
body.tr-beige-bg #content {
    background: #f5f0e8;
}

.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);
    }
}

/* ── Coach Dashboard v5 (.trd) — Distinct section styles ── */
.trd {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    padding: 24px 28px 80px;
}

/* ================================================
   1. HERO — gradient med glass-morphism stat-kort
   ================================================ */
.trd-hero {
    background: linear-gradient(135deg, #122b1a 0%, #244a30 60%, #3a8a52 100%);
    border-radius: 20px;
    padding: 28px 32px;
    color: #fff;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.trd-hero::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -30px;
    width: 180px;
    height: 180px;
    background: rgba(255,255,255,0.04);
    border-radius: 50%;
    pointer-events: none;
}
.trd-hero::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: 120px;
    width: 140px;
    height: 140px;
    background: rgba(255,255,255,0.02);
    border-radius: 50%;
    pointer-events: none;
}
.trd-hero__title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #fff;
    margin: 0;
    position: relative;
    z-index: 1;
}
.trd-hero__sub {
    font-size: 13px;
    opacity: 0.55;
    margin-top: 3px;
    position: relative;
    z-index: 1;
}
.trd-hero__glass {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    position: relative;
    z-index: 1;
}
.trd-hero__gcard {
    flex: 1;
    background: rgba(255,255,255,0.08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 14px 16px;
    text-decoration: none;
    color: #fff;
    display: block;
    transition: all 0.2s;
    cursor: pointer;
}
.trd-hero__gcard:hover {
    background: rgba(255,255,255,0.12);
    transform: translateY(-2px);
    color: #fff;
}
.trd-hero__gcard-icon {
    float: right;
    font-size: 20px;
    opacity: 0.5;
    margin-top: -2px;
}
.trd-hero__gcard-val {
    display: block;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: rgba(255,255,255,0.35);
}
.trd-hero__gcard-val--orange { color: #f0a050; }
.trd-hero__gcard-val--green  { color: #81c784; }
.trd-hero__gcard-val--muted  { color: rgba(255,255,255,0.35); }
.trd-hero__gcard-label {
    display: block;
    font-size: 11px;
    opacity: 0.5;
    font-weight: 500;
    margin-top: 3px;
}

/* ================================================
   PROFILE WARNING BANNER
   ================================================ */
.trd-banner {
    background: #FEF3C7;
    border-left: 3px solid #F59E0B;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #1a2e22;
    margin-bottom: 16px;
}
.trd-banner__icon { font-size: 20px; flex-shrink: 0; line-height: 1; }
.trd-banner__text { flex: 1; font-size: 13.5px; font-weight: 500; }
.trd-banner__text strong { font-weight: 700; }
.trd-banner__btn {
    padding: 7px 18px;
    background: #2d6a3f;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: background 0.15s;
}
.trd-banner__btn:hover { background: #244a30; color: #fff; }

/* ================================================
   2. KRÆVER DIN OPMÆRKSOMHED — pulsing urgency
   ================================================ */
.trd-attention { margin-bottom: 16px; }
.trd-attention__title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #c47a2e;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.trd-attention__title::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #e8913a;
    border-radius: 50%;
    animation: trd-pulse 2s ease-in-out infinite;
}
@keyframes trd-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.8); }
}
.trd-attention__item {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 5px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    color: #1a2e22;
}
.trd-attention__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}
.trd-attention__item--urgent::before { background: #e8913a; }
.trd-attention__item--info::before { background: #3a8a52; }
.trd-attention__item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    color: #1a2e22;
}
.trd-attention__icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.trd-attention__icon--o { background: linear-gradient(135deg, #fef3e0, #fffbf2); }
.trd-attention__icon--g { background: linear-gradient(135deg, #e8f5e9, #f0faf2); }
.trd-attention__body { flex: 1; }
.trd-attention__item-title { font-size: 14px; font-weight: 700; display: block; }
.trd-attention__sub { font-size: 12px; color: #7a8e80; margin-top: 2px; display: block; }
.trd-attention__btn {
    padding: 8px 18px;
    background: #2d6a3f;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    text-decoration: none;
}
.trd-attention__btn:hover {
    background: #244a30;
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(45,106,63,0.2);
    color: #fff;
}

/* ================================================
   3. UGENS OVERBLIK — week strip
   ================================================ */
.trd-week {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.trd-week__label {
    font-size: 13px;
    font-weight: 700;
    color: #4a5e50;
    min-width: 90px;
}
.trd-week__days {
    display: flex;
    gap: 8px;
    flex: 1;
}
.trd-week__day {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #7a8e80;
    transition: all 0.15s;
    cursor: pointer;
    position: relative;
    text-decoration: none;
}
.trd-week__day:hover {
    background: #f0f8f2;
    color: #2d6a3f;
}
.trd-week__day--today {
    background: #2d6a3f;
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(45,106,63,0.2);
}
.trd-week__day--today:hover {
    background: #244a30;
    color: #fff;
}
.trd-week__day-name {
    display: block;
    margin-bottom: 1px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.trd-week__day-num {
    font-size: 15px;
    font-weight: 800;
    display: block;
}
.trd-week__day--event::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 5px;
    height: 5px;
    background: #4CAF50;
    border-radius: 50%;
}
.trd-week__day--today.trd-week__day--event::after {
    background: #fff;
}
.trd-week__summary {
    min-width: 100px;
    text-align: right;
}
.trd-week__summary-val {
    font-size: 22px;
    font-weight: 800;
    color: #2d6a3f;
    display: block;
}
.trd-week__summary-label {
    font-size: 11px;
    color: #7a8e80;
    margin-top: 2px;
    display: block;
}

/* ================================================
   4. DAGENS PROGRAM — timeline style
   ================================================ */
.trd-schedule-section { margin-bottom: 28px; }
.trd-schedule-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.trd-schedule-header h2 {
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1a2e22;
    margin: 0;
}
.trd-cal-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2d6a3f, #4CAF50);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    line-height: 1;
    flex-shrink: 0;
}
.trd-cal-icon__day {
    font-size: 14px;
    font-weight: 800;
}
.trd-cal-icon__month {
    font-size: 7px;
    font-weight: 600;
    text-transform: uppercase;
    opacity: 0.7;
}
.trd-schedule-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}
.trd-session-length {
    padding: 5px 10px;
    border: 1px solid #e2ddd4;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: #4a5e50;
    background: #faf8f4;
    cursor: pointer;
    font-family: inherit;
}
/* Timeline */
.trd-timeline {
    position: relative;
    padding-left: 28px;
}
.trd-timeline::before {
    content: '';
    position: absolute;
    left: 11px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(to bottom, #4CAF50, #e2ddd4);
    border-radius: 1px;
}
.trd-timeline__item {
    position: relative;
    margin-bottom: 10px;
    display: flex;
    align-items: stretch;
    gap: 14px;
}
.trd-timeline__dot {
    position: absolute;
    left: -28px;
    top: 18px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2.5px solid #4CAF50;
    background: #f5f0e8;
    z-index: 1;
}
.trd-timeline__item--pending .trd-timeline__dot {
    border-color: #e8913a;
    background: #fffbf2;
}
.trd-timeline__item--confirmed .trd-timeline__dot {
    background: #4CAF50;
    border-color: #4CAF50;
}
.trd-timeline__time {
    min-width: 52px;
    font-size: 14px;
    font-weight: 800;
    color: #2d6a3f;
    padding-top: 14px;
}
.trd-timeline__item--pending .trd-timeline__time { color: #e8913a; }
.trd-timeline__card {
    flex: 1;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: #1a2e22;
}
.trd-timeline__card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.06);
    transform: translateX(3px);
    color: #1a2e22;
}
.trd-timeline__avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2d6a3f, #4CAF50);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.trd-timeline__info { flex: 1; min-width: 0; }
.trd-timeline__name { display: block; font-size: 13.5px; font-weight: 700; }
.trd-timeline__detail { display: block; font-size: 11.5px; color: #7a8e80; margin-top: 1px; }
.trd-timeline__tag {
    margin-left: auto;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.trd-timeline__tag--pending {
    background: #fffbf2;
    color: #c47a2e;
    border: 1px solid rgba(232,145,58,0.12);
}
.trd-timeline__tag--confirmed {
    background: #e8f5e9;
    color: #2d6a3f;
    border: 1px solid rgba(58,138,82,0.12);
}
.trd-timeline__tag--cancelled {
    background: #fce8e8;
    color: #d45050;
    border: 1px solid rgba(212,80,80,0.12);
}
/* Timeline "now" indicator */
.trd-timeline__now {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0;
    padding-left: 0;
}
.trd-timeline__now-dot {
    position: absolute;
    left: -32px;
    width: 14px;
    height: 14px;
    background: #d45050;
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 0 3px rgba(212,80,80,0.2);
}
.trd-timeline__now-label {
    font-size: 11px;
    font-weight: 700;
    color: #d45050;
    white-space: nowrap;
}
.trd-timeline__now-line {
    flex: 1;
    height: 1.5px;
    background: #d45050;
    opacity: 0.4;
}
/* Timeline completed */
.trd-timeline__item--completed .trd-timeline__dot {
    background: #7a8e80;
    border-color: #7a8e80;
}
.trd-timeline__item--completed .trd-timeline__time { color: #7a8e80; }
.trd-timeline__item--completed .trd-timeline__card { opacity: 0.7; }
/* Timeline blocked slot */
.trd-timeline__blocked {
    flex: 1;
    background: repeating-linear-gradient(135deg, #faf8f4, #faf8f4 8px, #f3efe6 8px, #f3efe6 16px);
    border: 1px solid #e2ddd4;
    border-radius: 14px;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #7a8e80;
    font-size: 13px;
    font-weight: 500;
}
.trd-timeline__item--blocked .trd-timeline__dot {
    background: #e2ddd4;
    border-color: #e2ddd4;
}
.trd-timeline__item--blocked .trd-timeline__time { color: #7a8e80; }
.trd-timeline__unblock {
    background: none;
    border: none;
    font-size: 20px;
    color: #a0b0a4;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: color 0.15s;
}
.trd-timeline__unblock:hover { color: #d45050; }
/* Timeline empty slot */
.trd-timeline__empty {
    flex: 1;
    background: #faf8f4;
    border: 1.5px dashed #e2ddd4;
    border-radius: 14px;
    padding: 14px 18px;
    text-align: center;
    color: #a0b0a4;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.trd-timeline__empty:hover {
    border-color: #4CAF50;
    color: #2d6a3f;
    background: #e8f5e9;
}
/* Timeline accept/reject buttons */
.trd-timeline__actions {
    display: flex;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}
.trd-timeline__action-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    border: none;
    transition: all 0.15s;
}
.trd-timeline__action-btn--accept {
    background: #2d6a3f;
    color: #fff;
}
.trd-timeline__action-btn--accept:hover {
    background: #244a30;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(45,106,63,0.2);
}
.trd-timeline__action-btn--reject {
    background: transparent;
    color: #d45050;
    border: 1px solid rgba(212,80,80,0.2);
}
.trd-timeline__action-btn--reject:hover {
    background: #fce8e8;
    border-color: #d45050;
}

/* ================================================
   5. KLIENT-OVERBLIK — rich client cards (dashboard)
   ================================================ */
.trd-clients-section { margin-bottom: 28px; }
.trd-clients-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.trd-clients-header h2 {
    font-size: 16px;
    font-weight: 800;
    color: #1a2e22;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.trd-clients-count {
    background: #e8f5e9;
    color: #2d6a3f;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 700;
}
.trd-cc {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
    color: #1a2e22;
    margin-bottom: 10px;
}
.trd-cc__top {
    display: flex;
    align-items: center;
    gap: 14px;
}
.trd-cc__header {
    flex: 1;
    min-width: 0;
}
.trd-cc:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.06);
    transform: translateY(-2px);
    color: #1a2e22;
}
.trd-cc__avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #2d6a3f, #4CAF50);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    flex-shrink: 0;
}
.trd-cc__name {
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.trd-cc__status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    background: #e8f5e9;
    color: #2d6a3f;
    border: 1px solid rgba(58,138,82,0.12);
}
.trd-cc__status::before {
    content: '';
    width: 5px;
    height: 5px;
    background: #4CAF50;
    border-radius: 50%;
}
.trd-cc__meta {
    font-size: 11.5px;
    color: #7a8e80;
    margin-top: 2px;
    display: block;
}
.trd-cc__stats {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}
.trd-cc__stat {
    flex: 1;
    background: #faf8f4;
    border-radius: 10px;
    padding: 8px 10px;
    text-align: center;
}
.trd-cc__stat-val {
    font-size: 19px;
    font-weight: 800;
    display: block;
    color: #1a2e22;
}
.trd-cc__stat-val--g { color: #2d6a3f; }
.trd-cc__stat-val--o { color: #e8913a; }
.trd-cc__stat-val--r { color: #d45050; }
.trd-cc__stat-label {
    font-size: 9.5px;
    color: #7a8e80;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
    display: block;
}

/* ================================================
   5b. KLIENT-LISTE v4 — /checkin/?tab=klienter
   ================================================ */
.cl-section { margin-bottom: 28px; }

/* Hero */
.cl-hero {
    background: linear-gradient(135deg, #122b1a, #244a30 70%, #2d6a3f);
    border-radius: 20px; padding: 24px 28px; color: #fff; margin-bottom: 24px;
    position: relative; overflow: hidden;
}
.cl-hero::before { content:''; position:absolute; top:-40px; right:-20px; width:140px; height:140px; background:rgba(255,255,255,.03); border-radius:50%; }
.cl-hero-top { display:flex; align-items:center; gap:14px; position:relative; z-index:1; }
.cl-hero-ic { width:42px; height:42px; border-radius:12px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; font-size:18px; }
.cl-hero-title { font-size:20px; font-weight:800; letter-spacing:-.2px; }
.cl-hero-title span { font-weight:400; opacity:.5; font-size:15px; margin-left:4px; }
.cl-hero-p { font-size:12px; opacity:.4; margin-top:1px; }
.cl-hero-acts { margin-left:auto; display:flex; gap:6px; }
.cl-hero-btn { padding:8px 18px; border-radius:10px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; border:none; background:#fff; color:#244a30; transition:all .15s; text-decoration:none; }
.cl-hero-btn:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(0,0,0,.15); color:#244a30; }
.cl-hero-btn-o { padding:8px 16px; border-radius:10px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); color:rgba(255,255,255,.8); transition:all .15s; }
.cl-hero-btn-o:hover { background:rgba(255,255,255,.15); }

/* Hero stats */
.cl-hero-stats { display:flex; gap:6px; margin-top:16px; position:relative; z-index:1; }
.cl-hs { flex:1; padding:10px 14px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.06); text-align:center; transition:all .15s; }
.cl-hs-v { font-size:20px; font-weight:800; }
.cl-hs-l { font-size:9px; opacity:.4; font-weight:600; margin-top:1px; text-transform:uppercase; letter-spacing:.5px; }
.cl-hs-dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:3px; vertical-align:middle; }
.cl-hs-dot--g { background:#81c784; }
.cl-hs-dot--o { background:#f0a050; }
.cl-hs-dot--r { background:#ef8888; }
.cl-hs-dot--b { background:#93bbfc; }

/* Search bar */
.cl-bar { display:flex; gap:6px; margin-bottom:20px; }
.cl-search { flex:1; display:flex; align-items:center; gap:7px; padding:9px 14px; background:#fff; border:1px solid rgba(0,0,0,.05); border-radius:10px; transition:border-color .15s; }
.cl-search:focus-within { border-color:#4CAF50; }
.cl-search svg { width:15px; height:15px; color:#a0b0a4; }
.cl-search input { border:none; outline:none; font-family:inherit; font-size:12.5px; flex:1; color:#1a2e22; background:transparent; }
.cl-search input::placeholder { color:#a0b0a4; }
.cl-fil { padding:9px 13px; background:#fff; border:1px solid rgba(0,0,0,.05); border-radius:10px; font-size:11px; font-weight:600; color:#7a8e80; cursor:pointer; font-family:inherit; transition:all .15s; display:flex; align-items:center; gap:4px; white-space:nowrap; }
.cl-fil:hover { border-color:#e2ddd4; color:#4a5e50; }
.cl-fil--active { border-color:#4CAF50; background:#e8f5e9; color:#2d6a3f; }
.cl-fil-dot { width:5px; height:5px; border-radius:50%; }

/* Section labels */
.cl-sec { margin-bottom:24px; }
.cl-sec-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:#a0b0a4; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.cl-sec-label::after { content:''; flex:1; height:1px; background:#ece5d8; }
.cl-sec-count { padding:2px 8px; border-radius:6px; font-size:9px; background:#ece5d8; }
.cl-sec--urgent .cl-sec-label { color:#c47a2e; }
.cl-sec--urgent .cl-sec-label::before { content:''; display:inline-block; width:7px; height:7px; background:#e8913a; border-radius:50%; animation:cl-pulse 2s ease-in-out infinite; }
@keyframes cl-pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.4;transform:scale(.7)} }

/* Spotlight grid (urgent cards) */
.cl-spot-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cl-spot { background:#fff; border:1px solid rgba(0,0,0,.05); border-radius:16px; padding:20px; cursor:pointer; transition:all .2s; position:relative; overflow:hidden; text-decoration:none; color:#1a2e22; display:block; }
.cl-spot:hover { box-shadow:0 8px 28px rgba(0,0,0,.06); transform:translateY(-2px); color:#1a2e22; }
.cl-spot::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; }
.cl-spot--crit::after { background:linear-gradient(90deg,#d45050,transparent 80%); }
.cl-spot--warn::after { background:linear-gradient(90deg,#e8913a,transparent 80%); }
.cl-spot-top { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.cl-spot-av { width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; flex-shrink:0; }
.cl-spot-av.c1 { background:linear-gradient(135deg,#2d6a3f,#4CAF50); }
.cl-spot-av.c2 { background:linear-gradient(135deg,#6366f1,#a78bfa); }
.cl-spot-av.c3 { background:linear-gradient(135deg,#e8913a,#f0c050); }
.cl-spot-av.c4 { background:linear-gradient(135deg,#ec4899,#f472b6); }
.cl-spot-nm { font-size:14px; font-weight:700; }
.cl-spot-sub { font-size:11px; color:#7a8e80; margin-top:1px; }
.cl-spot-tag { margin-left:auto; padding:4px 10px; border-radius:20px; font-size:9.5px; font-weight:700; letter-spacing:.2px; }
.cl-spot-tag--crit { background:#fef5f5; color:#d45050; border:1px solid rgba(212,80,80,.1); }
.cl-spot-tag--warn { background:#fffbf2; color:#c47a2e; border:1px solid rgba(232,145,58,.1); }

/* Progress bars */
.cl-spot-bars { display:flex; flex-direction:column; gap:10px; }
.cl-sbar { display:flex; align-items:center; gap:10px; }
.cl-sbar-label { font-size:10px; font-weight:700; color:#7a8e80; width:52px; text-transform:uppercase; letter-spacing:.3px; }
.cl-sbar-track { flex:1; height:6px; background:#ece5d8; border-radius:3px; overflow:hidden; }
.cl-sbar-fill { height:100%; border-radius:3px; transition:width .8s cubic-bezier(.16,1,.3,1); }
.cl-sbar-fill.g { background:#4CAF50; } .cl-sbar-fill.o { background:#e8913a; } .cl-sbar-fill.r { background:#d45050; }
.cl-sbar-val { font-size:12px; font-weight:800; width:40px; text-align:right; }
.cl-sbar-val.g { color:#2d6a3f; } .cl-sbar-val.o { color:#e8913a; } .cl-sbar-val.r { color:#d45050; }

/* Spot footer */
.cl-spot-footer { display:flex; align-items:center; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid #f5f0e8; }
.cl-spot-ci { font-size:11px; font-weight:600; display:flex; align-items:center; gap:4px; }
.cl-ci-dot { width:6px; height:6px; border-radius:50%; }
.cl-ci-dot--old { background:#d45050; } .cl-ci-dot--stale { background:#e8913a; } .cl-ci-dot--fresh { background:#4CAF50; }
.cl-spot-action { margin-left:auto; padding:6px 14px; border-radius:8px; font-size:11px; font-weight:700; background:#2d6a3f; color:#fff; transition:all .15s; }
.cl-spot:hover .cl-spot-action { background:#244a30; transform:translateY(-1px); }

/* Compact rows (on track) */
.cl-row { display:flex; align-items:center; gap:14px; padding:12px 18px; background:#fff; border:1px solid rgba(0,0,0,.05); border-radius:12px; margin-bottom:4px; cursor:pointer; transition:all .15s; text-decoration:none; color:#1a2e22; }
.cl-row:hover { box-shadow:0 4px 14px rgba(0,0,0,.05); transform:translateY(-1px); color:#1a2e22; }
.cl-row-av { width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; flex-shrink:0; }
.cl-row-av.c1 { background:linear-gradient(135deg,#2d6a3f,#4CAF50); }
.cl-row-av.c2 { background:linear-gradient(135deg,#6366f1,#a78bfa); }
.cl-row-av.c3 { background:linear-gradient(135deg,#e8913a,#f0c050); }
.cl-row-av.c4 { background:linear-gradient(135deg,#ec4899,#f472b6); }
.cl-row-nm { font-size:13px; font-weight:700; min-width:110px; }
.cl-row-sub { font-size:10.5px; color:#7a8e80; margin-top:1px; }
.cl-row-metric { display:flex; align-items:center; gap:6px; min-width:100px; }
.cl-rm-track { width:50px; height:4px; background:#ece5d8; border-radius:2px; overflow:hidden; }
.cl-rm-fill { height:100%; border-radius:2px; }
.cl-rm-fill.g { background:#4CAF50; } .cl-rm-fill.o { background:#e8913a; } .cl-rm-fill.r { background:#d45050; }
.cl-rm-val { font-size:12px; font-weight:700; min-width:32px; }
.cl-rm-val.g { color:#2d6a3f; } .cl-rm-val.o { color:#e8913a; } .cl-rm-val.r { color:#d45050; }
.cl-rm-label { font-size:8px; color:#a0b0a4; font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.cl-row-ci { font-size:11.5px; font-weight:700; min-width:60px; text-align:center; color:#2d6a3f; }
.cl-row-st { padding:4px 10px; border-radius:20px; font-size:9.5px; font-weight:700; background:#e8f5e9; color:#2d6a3f; border:1px solid rgba(58,138,82,.1); display:flex; align-items:center; gap:4px; margin-left:auto; }
.cl-row-st::before { content:''; width:5px; height:5px; border-radius:50%; background:#4CAF50; }
.cl-row-ch { color:#a0b0a4; font-size:15px; transition:all .15s; margin-left:4px; }
.cl-row:hover .cl-row-ch { color:#4a5e50; transform:translateX(2px); }

/* Onboarding cards (new) */
.cl-onboard { background:#fff; border:1px solid rgba(0,0,0,.05); border-radius:14px; padding:18px 22px; display:flex; align-items:center; gap:14px; cursor:pointer; transition:all .2s; position:relative; overflow:hidden; text-decoration:none; color:#1a2e22; margin-bottom:4px; }
.cl-onboard:hover { box-shadow:0 6px 20px rgba(0,0,0,.05); transform:translateY(-1px); color:#1a2e22; }
.cl-onboard::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#3b82f6,transparent 80%); }
.cl-ob-av { width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; flex-shrink:0; background:linear-gradient(135deg,#3b82f6,#60a5fa); }
.cl-ob-nm { font-size:14px; font-weight:700; }
.cl-ob-sub { font-size:11px; color:#7a8e80; margin-top:1px; }
.cl-ob-tag { padding:4px 10px; border-radius:20px; font-size:9.5px; font-weight:700; background:#eff6ff; color:#3b82f6; border:1px solid rgba(59,130,246,.1); }
.cl-ob-steps { display:flex; gap:6px; margin-left:auto; }
.cl-ob-step { display:flex; align-items:center; gap:4px; padding:6px 10px; border-radius:8px; font-size:10px; font-weight:600; background:#faf8f4; color:#7a8e80; border:1px solid rgba(0,0,0,.05); }
.cl-ob-step--done { background:#e8f5e9; color:#2d6a3f; border-color:rgba(58,138,82,.1); text-decoration:line-through; opacity:.6; }
.cl-ob-step--next { background:#eff6ff; color:#3b82f6; border-color:rgba(59,130,246,.15); }

/* Responsive */
@media(max-width:768px){
    .cl-spot-grid { grid-template-columns:1fr; }
    .cl-bar { flex-wrap:wrap; }
    .cl-row { flex-wrap:wrap; gap:8px; }
    .cl-row-metric { min-width:auto; }
    .cl-onboard { flex-wrap:wrap; }
    .cl-ob-steps { margin-left:0; width:100%; flex-wrap:wrap; }
    .cl-hero-stats { flex-wrap:wrap; }
    .cl-hs { min-width:calc(50% - 4px); }
}

/* ================================================
   6. FORLØB — magazine grid
   ================================================ */
.trd-forloeb-section { margin-bottom: 24px; }
.trd-forloeb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.trd-forloeb-header h2 {
    font-size: 16px;
    font-weight: 800;
    color: #1a2e22;
    margin: 0;
}
.trd-forloeb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.trd-forloeb-card {
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.25s;
    cursor: pointer;
    position: relative;
}
.trd-forloeb-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
.trd-forloeb-card__visual {
    height: 110px;
    position: relative;
    overflow: hidden;
}
.trd-forloeb-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.trd-forloeb-card__swatch {
    width: 100%;
    height: 100%;
}
.trd-swatch--1 { background: linear-gradient(135deg, #1a3824, #2d6a3f); }
.trd-swatch--2 { background: linear-gradient(135deg, #2c3e50, #4ca1af); }
.trd-swatch--3 { background: linear-gradient(135deg, #3d2c2c, #c0392b); }
.trd-forloeb-card__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,0.5));
    pointer-events: none;
}
.trd-forloeb-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255,255,255,0.9);
    color: #2d6a3f;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: 1;
}
.trd-forloeb-card__body {
    padding: 14px 16px;
}
.trd-forloeb-card__title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1a2e22;
    margin-bottom: 3px;
}
.trd-forloeb-card__desc {
    display: block;
    font-size: 11.5px;
    color: #7a8e80;
    line-height: 1.5;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.trd-forloeb-card__price {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #2d6a3f;
}
.trd-forloeb-card__btns {
    display: flex;
    gap: 6px;
    margin-top: 10px;
}
.trd-forloeb-btn {
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.trd-forloeb-btn--primary {
    background: #2d6a3f;
    color: #fff;
}
.trd-forloeb-btn--primary:hover { background: #244a30; color: #fff; }
.trd-forloeb-btn--secondary {
    background: transparent;
    color: #4a5e50;
    border: 1px solid #e2ddd4;
}
.trd-forloeb-btn--secondary:hover { background: #faf8f4; color: #1a2e22; }

/* ================================================
   GENERIC SECTION (bookinger, tilgængelighed, opslag)
   ================================================ */
.trd-section { margin-bottom: 24px; }
.trd-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.trd-section__title {
    font-size: 16px;
    font-weight: 700;
    color: #1a2e22;
    margin: 0;
}
.trd-link {
    font-size: 12.5px;
    color: #2d6a3f;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.trd-link:hover { color: #244a30; text-decoration: underline; }

/* Card wrapper */
.trd-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 16px;
    padding: 20px;
}

/* Schedule items (kommende bookinger) */
.trd-schedule {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 7px;
    text-decoration: none;
    color: #1a2e22;
    transition: box-shadow 0.15s;
    cursor: pointer;
}
.trd-schedule:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.04); color: #1a2e22; }
.trd-schedule__time { font-size: 13.5px; font-weight: 700; color: #2d6a3f; min-width: 46px; }
.trd-schedule__avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: #ece5d8; display: flex; align-items: center; justify-content: center;
    font-size: 10.5px; font-weight: 700; color: #4a5e50; flex-shrink: 0;
}
.trd-schedule__info { flex: 1; min-width: 0; }
.trd-schedule__name { display: block; font-size: 13.5px; font-weight: 600; color: #1a2e22; }
.trd-schedule__meta { display: block; font-size: 11.5px; color: #7a8e80; margin-top: 1px; }

/* Tags */
.trd-tag {
    margin-left: auto;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.trd-tag--pending   { background: #fef3e0; color: #e8913a; }
.trd-tag--confirmed { background: #e8f5e9; color: #2d6a3f; }

/* Buttons */
.trd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 18px;
    background: #2d6a3f;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-decoration: none;
    transition: all 0.15s;
}
.trd-btn:hover { background: #244a30; color: #fff; transform: translateY(-1px); }

/* Empty state */
.trd-empty {
    text-align: center;
    padding: 40px 20px;
    background: #faf8f4;
    border: 2px dashed rgba(0,0,0,0.06);
    border-radius: 16px;
    color: #7a8e80;
}
.trd-empty p { font-size: 14px; margin-bottom: 14px; }

/* ================================================
   8. TILGÆNGELIGHED — inline editable card grid
   ================================================ */
.trd-avail-section { margin-bottom: 28px; }
.av-header { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.av-header-icon {
    width: 40px; height: 40px; border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 18px;
}
.av-header h2 { font-size: 17px; font-weight: 800; margin: 0; color: #1a2e22; }
.av-header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.av-saved { font-size: 11.5px; color: #2d6a3f; font-weight: 600; opacity: 0; transition: opacity .3s; }
.av-saved.show { opacity: 1; }
.av-save-btn {
    padding: 8px 20px; border-radius: 10px; font-size: 12.5px; font-weight: 700;
    cursor: pointer; font-family: inherit; border: none; transition: all .15s;
    background: #2d6a3f; color: #fff;
}
.av-save-btn:hover { background: #244a30; transform: translateY(-1px); box-shadow: 0 3px 12px rgba(45,106,63,.2); }

/* Grid */
.av-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
}

/* Day card */
.av-card {
    background: #e8f5e9;
    border: 1px solid rgba(58,138,82,.08);
    border-radius: 16px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all .25s;
    position: relative;
    min-height: 240px;
}
.av-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.05); transform: translateY(-2px); }

/* Today */
.av-card.today {
    background: linear-gradient(to bottom, #2d6a3f, #244a30);
    border-color: #2d6a3f;
    box-shadow: 0 4px 20px rgba(45,106,63,.2);
}
.av-card.today .av-day-name { color: #fff; }
.av-card.today .av-status { color: rgba(255,255,255,.7); }
.av-card.today .av-time-input { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.2); color: #fff; }
.av-card.today .av-time-input:focus { border-color: rgba(255,255,255,.5); }
.av-card.today .av-sep { color: rgba(255,255,255,.3); }
.av-card.today .av-toggle-track { background: rgba(255,255,255,.2); }
.av-card.today .av-toggle-track.on { background: #81c784; }
.av-card.today .av-add-break { color: rgba(255,255,255,.5); border-color: rgba(255,255,255,.15); }
.av-card.today .av-add-break:hover { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.1); }
.av-card.today .av-add-slot { color: rgba(255,255,255,.5); border-color: rgba(255,255,255,.15); }
.av-card.today .av-add-slot:hover { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.1); }
.av-card.today .av-today-badge {
    position: absolute; top: -8px; left: 50%; transform: translateX(-50%);
    background: #4CAF50; color: #fff; font-size: 9px; font-weight: 800;
    padding: 2px 10px; border-radius: 10px; letter-spacing: .5px;
    text-transform: uppercase; box-shadow: 0 2px 8px rgba(76,175,80,.3);
}

/* Off */
.av-card.off {
    background: #faf8f4;
    border-color: rgba(0,0,0,.05);
    opacity: .65;
}
.av-card.off:hover { opacity: .85; }
.av-card.off .av-day-name { color: #7a8e80; }
.av-card.off .av-status { color: #a0b0a4; }

/* Day name */
.av-day-name {
    font-size: 12px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1.5px; color: #244a30;
}

/* Toggle */
.av-toggle-track {
    width: 38px; height: 20px; border-radius: 10px;
    background: #e2ddd4; position: relative; cursor: pointer;
    transition: background .25s; flex-shrink: 0;
}
.av-toggle-track.on { background: #4CAF50; }
.av-toggle-track::after {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.15); transition: transform .25s;
}
.av-toggle-track.on::after { transform: translateX(18px); }

/* Time inputs */
.av-time-block {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    width: 100%; position: relative;
}
.av-work-x {
    position: absolute; top: -4px; right: -4px; width: 16px; height: 16px;
    border-radius: 4px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #2d6a3f; font-size: 10px; font-weight: 800;
    transition: all .15s; opacity: 0;
}
.av-time-block:hover .av-work-x { opacity: 1; }
.av-work-x:hover { background: rgba(45,106,63,.15); transform: scale(1.15); }
.av-card.today .av-work-x { color: rgba(255,255,255,.5); }
.av-card.today .av-work-x:hover { background: rgba(255,255,255,.15); color: #fff; }
.av-time-input {
    width: 100%; padding: 7px 4px;
    border: 1px solid rgba(58,138,82,.12); border-radius: 8px;
    font-family: inherit; font-size: 13px; font-weight: 700;
    text-align: center; background: rgba(255,255,255,.7);
    transition: all .15s; color: #1a2e22;
}
.av-time-input:focus { outline: none; border-color: #4CAF50; background: #fff; box-shadow: 0 0 0 3px rgba(76,175,80,.1); }
.av-sep { font-size: 11px; color: #a0b0a4; font-weight: 600; }

/* Break */
.av-break-block {
    width: 100%; display: flex; flex-direction: column; align-items: center; gap: 3px;
    position: relative; padding: 6px 4px;
    background: #fffbf2; border: 1px solid rgba(232,145,58,.1); border-radius: 10px;
}
.av-break-label { font-size: 9px; font-weight: 700; color: #c47a2e; text-transform: uppercase; letter-spacing: .8px; display: flex; align-items: center; gap: 3px; }
.av-break-input {
    width: 100%; padding: 5px 4px;
    border: 1px solid rgba(232,145,58,.15); border-radius: 6px;
    font-family: inherit; font-size: 12px; font-weight: 600;
    text-align: center; background: rgba(255,255,255,.6);
    color: #c47a2e; transition: all .15s;
}
.av-break-input:focus { outline: none; border-color: #e8913a; background: #fff; }
.av-break-x {
    position: absolute; top: 3px; right: 3px; width: 16px; height: 16px;
    border-radius: 4px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #e8913a; font-size: 10px; font-weight: 800;
    transition: all .15s;
}
.av-break-x:hover { background: rgba(232,145,58,.15); transform: scale(1.15); }

/* Add buttons */
.av-add-break {
    width: 100%; padding: 5px; border-radius: 8px;
    font-size: 10px; font-weight: 700; color: #e8913a;
    border: 1.5px dashed rgba(232,145,58,.2);
    cursor: pointer; transition: all .15s; text-align: center;
    background: transparent; font-family: inherit;
}
.av-add-break:hover { background: #fffbf2; border-color: #e8913a; }
.av-add-slot {
    width: 100%; padding: 5px; border-radius: 8px;
    font-size: 10px; font-weight: 700; color: #2d6a3f;
    border: 1.5px dashed rgba(58,138,82,.15);
    cursor: pointer; transition: all .15s; text-align: center;
    background: transparent; font-family: inherit;
}
.av-add-slot:hover { background: #e8f5e9; border-color: #4CAF50; }

/* Status */
.av-status {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .8px; color: #2d6a3f; margin-top: auto;
}

/* Off msg */
.av-off-msg {
    flex: 1; display: flex; align-items: center; justify-content: center;
    font-size: 11px; color: #a0b0a4; font-style: italic; text-align: center;
    line-height: 1.5; padding: 8px 0;
}

/* ================================================
   9. OPSLAG — social feed style
   ================================================ */
.trd-opslag-section { margin-bottom: 28px; }
.trd-opslag-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.trd-opslag-header h2 {
    font-size: 16px;
    font-weight: 800;
    color: #1a2e22;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.trd-opslag-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #fef3e0, #fde8c8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
/* Write post CTA */
.trd-post-cta {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    transition: all 0.2s;
    cursor: pointer;
}
.trd-post-cta:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.04); }
.trd-post-cta__avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2d6a3f, #4CAF50);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.trd-post-cta__input {
    flex: 1;
    padding: 10px 16px;
    background: #faf8f4;
    border: 1px solid #ece5d8;
    border-radius: 10px;
    font-size: 13px;
    color: #a0b0a4;
    font-family: inherit;
}
.trd-post-cta__actions {
    display: flex;
    gap: 8px;
}
.trd-post-cta__btn {
    padding: 8px 12px;
    border-radius: 8px;
    background: #faf8f4;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #7a8e80;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.15s;
    cursor: pointer;
}
.trd-post-cta__btn:hover {
    background: #e8f5e9;
    color: #2d6a3f;
}
/* Posts container */
.trd-opslag-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ═══════════════════════════════════════════════════
   CUSTOM POST CARDS (tr_post — replaces UM Activity)
   ═══════════════════════════════════════════════════ */
.post-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 18px;
    overflow: hidden;
    transition: all 0.25s;
    cursor: pointer;
    display: grid;
    grid-template-columns: 1fr 340px;
    max-height: 420px;
}
.post-card:hover {
    box-shadow: 0 12px 36px rgba(0,0,0,0.08);
    transform: translateY(-3px);
}
.post-card--no-img {
    display: block;
}

/* Image section (left column) */
.post-img {
    position: relative;
    overflow: hidden;
    min-height: 220px;
    background: linear-gradient(135deg, #3a3a2a, #5a5a4a);
}
.post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.post-img-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, transparent 60%, rgba(0,0,0,0.4));
    pointer-events: none;
}

/* Badge (top-left on image) */
.post-img-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(255,255,255,0.9);
    color: #1a2e22;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 2;
}

/* Reaction pills (bottom-left on image) */
.post-reactions {
    position: absolute;
    bottom: 14px;
    left: 14px;
    display: flex;
    gap: 6px;
    z-index: 2;
}
.post-react {
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    font-size: 11px;
    font-weight: 600;
    color: #1a2e22;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
}
.post-react:hover {
    background: #fff;
    transform: scale(1.05);
}
.post-react.is-liked {
    background: #e8f5e9;
    color: #2d6a3f;
}

/* Body section (right column) */
.post-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
}

/* Author */
.post-author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.post-author-av {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #2d6a3f;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.post-author-name {
    font-size: 14px;
    font-weight: 700;
    color: #1a2e22;
}
.post-author-time {
    font-size: 11px;
    color: #a0b0a4;
}

/* Post 3-dot menu */
.post-menu {
    margin-left: auto;
    position: relative;
}
.post-menu-btn {
    background: none;
    border: none;
    font-size: 20px;
    color: #7a8a7e;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    line-height: 1;
    transition: background .15s;
}
.post-menu-btn:hover {
    background: rgba(0,0,0,.06);
    color: #1a2e22;
}
.post-menu-drop {
    position: absolute;
    right: 0;
    top: 100%;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
    min-width: 150px;
    padding: 6px;
    z-index: 50;
    display: none;
}
.post-menu-drop.is-open {
    display: block;
}
.post-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #1a2e22;
    cursor: pointer;
    border-radius: 8px;
    transition: background .12s;
}
.post-menu-item:hover {
    background: #f0f4f1;
}
.post-menu-item--danger {
    color: #d45050;
}
.post-menu-item--danger:hover {
    background: #fdf0f0;
}

/* Highlight title */
.post-highlight {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #2d6a3f;
    line-height: 1.2;
    margin-bottom: 6px;
}

/* Subtitle */
.post-text {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 14px;
    color: #1a2e22;
}

/* Description */
.post-desc {
    font-size: 13px;
    color: #7a8e80;
    line-height: 1.6;
}

/* Engagement stats */
.post-stats {
    display: flex;
    gap: 14px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #ece5d8;
}
.post-stat {
    font-size: 12px;
    color: #7a8e80;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
}

/* No-image layout: inline actions */
.post-card--no-img .post-body { padding: 20px 24px; }
.post-badge-inline {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #e8f5e9;
    color: #2d6a3f;
    margin-bottom: 8px;
}
.post-actions-inline {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #ece5d8;
}

/* Load more button */
.tr-load-more-posts {
    display: block;
    width: 100%;
    padding: 12px;
    background: transparent;
    border: 1.5px solid #e2ddd4;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #4a5e50;
    cursor: pointer;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    transition: all 0.15s;
}
.tr-load-more-posts:hover {
    border-color: #2d6a3f;
    color: #2d6a3f;
    background: #e8f5e9;
}

/* Empty state */
.post-empty {
    text-align: center;
    padding: 40px;
    color: #a0b0a4;
    font-size: 14px;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
}

/* Comment in modal */
.post-comment {
    display: flex;
    gap: 10px;
    padding: 10px 16px;
}
.post-comment-av {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #2d6a3f;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}
.post-comment-body {
    font-size: 13px;
    line-height: 1.5;
    color: #4a5e50;
    background: #faf8f4;
    border-radius: 12px;
    padding: 8px 12px;
}
.post-comment-name {
    font-weight: 700;
    color: #1a2e22;
}

/* Comment modal input area */
.tr-detail-modal__input {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid rgba(0,0,0,0.05);
}
.tr-detail-modal__input textarea {
    flex: 1;
    border: 1px solid #e2ddd4;
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    resize: none;
    outline: none;
}
.tr-detail-modal__input textarea:focus {
    border-color: #2d6a3f;
}
.tr-detail-modal__send {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: #2d6a3f;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.15s;
}
.tr-detail-modal__send:hover {
    background: #244a30;
}
.tr-detail-modal__comments {
    max-height: 400px;
    overflow-y: auto;
}

/* Modal textarea */
.tr-post-modal__textarea {
    width: calc(100% - 36px);
    margin: 0 18px;
    min-height: 100px;
    border: none;
    outline: none;
    font-size: 15px;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    color: #1a2e22;
    resize: none;
    line-height: 1.5;
}
.tr-post-modal__textarea::placeholder {
    color: #b0bab3;
}

/* Modal image preview */
.tr-post-modal__preview {
    margin: 8px 18px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}
.tr-post-modal__preview img {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}
.tr-post-modal__preview-remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive */
@media (max-width: 768px) {
    .post-card {
        grid-template-columns: 1fr !important;
    }
    .post-img {
        min-height: 180px;
    }
}

/* ================================================
   RESPONSIVE
   ================================================ */
@media (max-width: 768px) {
    .trd-hero__glass {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .trd-week {
        flex-wrap: wrap;
        gap: 12px;
    }
    .trd-week__label { width: 100%; }
    .trd-week__summary { width: 100%; text-align: center; }
    .trd-forloeb-grid {
        grid-template-columns: 1fr;
    }
    .trd-cc__stats {
        flex-wrap: wrap;
    }
    .trd-cc__stat {
        min-width: calc(33% - 6px);
    }
    .trd-timeline { padding-left: 20px; }
    .trd-timeline::before { left: 7px; }
    .trd-timeline__dot { left: -20px; }
    .av-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .trd-post-cta__actions { display: none; }
}

@media (max-width: 480px) {
    .trd-stats {
        grid-template-columns: 1fr;
    }
    .trd-actions {
        grid-template-columns: 1fr;
    }
    .trd-hero {
        padding: 18px;
    }
    .trd-hero__avatar {
        width: 48px;
        height: 48px;
        font-size: 18px;
    }
    .trd-hero__title {
        font-size: 17px;
    }
    .trd-hero__stats {
        gap: 16px;
    }
    .av-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .av-card { min-height: 200px; padding: 12px 8px; }
    .av-header { flex-wrap: wrap; }
}

/* 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);
}

/* (old dashboard responsive removed — now in .trd block above) */


/* ----- 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;
    }
}

/* -------------------------------------------------------
   "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;
}

/* 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;
}

/* ── Modal: Type selector pills ── */
.tr-post-modal__type-select {
    padding: 0 18px 8px;
}
.tr-post-modal__field-label {
    display: block;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #7a8e80;
    margin-bottom: 8px;
}
.tr-post-type-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.tr-post-type-pill {
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1.5px solid rgba(0,0,0,0.1);
    background: #fff;
    color: #4a5e50;
    cursor: pointer;
    transition: all 0.15s;
}
.tr-post-type-pill:hover {
    border-color: #2d6a3f;
    color: #2d6a3f;
    background: #f0f8f2;
}
.tr-post-type-pill.is-selected {
    border-color: #2d6a3f;
    background: #2d6a3f;
    color: #fff;
}

/* ── Modal: Title & subtitle inputs ── */
.tr-post-modal__title-input,
.tr-post-modal__subtitle-input {
    display: block;
    width: calc(100% - 36px);
    margin: 0 18px 8px;
    padding: 10px 14px;
    border: 1.5px solid rgba(0,0,0,0.1);
    border-radius: 10px;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    font-size: 14px;
    color: #1a2e22;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}
.tr-post-modal__title-input:focus,
.tr-post-modal__subtitle-input:focus {
    border-color: #2d6a3f;
    box-shadow: 0 0 0 3px rgba(45,106,63,0.1);
}
.tr-post-modal__title-input::placeholder,
.tr-post-modal__subtitle-input::placeholder {
    color: #b0bab3;
}


/* -------------------------------------------------------
   OPRET OPSLAG v2 — Composer bar + PM modal
   ------------------------------------------------------- */
/* Composer bar */
.pm-composer-bar {
    background: #fff; border: 1px solid rgba(0,0,0,.05); border-radius: 14px;
    padding: 14px 18px; display: flex; align-items: center; gap: 12px;
    cursor: pointer; transition: all .2s; margin-bottom: 16px;
}
.pm-composer-bar:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); }
.pm-cb-av {
    width: 40px; height: 40px; border-radius: 12px;
    background: linear-gradient(135deg, #2d6a3f, #4CAF50);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 13px; font-weight: 700; flex-shrink: 0;
}
.pm-cb-input {
    flex: 1; padding: 10px 16px; border: 1px solid #e2ddd4; border-radius: 10px;
    font-size: 14px; color: #a0b0a4; background: #faf8f4; cursor: pointer;
}
.pm-cb-actions { display: flex; gap: 4px; }
.pm-cb-act {
    display: flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 8px;
    font-size: 12px; font-weight: 600; color: #7a8e80; border: 1px solid #ece5d8;
    cursor: pointer; background: #fff; font-family: inherit; transition: all .15s;
}
.pm-cb-act:hover { background: #faf8f4; color: #1a2e22; }

/* Modal dialog */
.pm {
    position: relative; z-index: 2; width: 600px; max-height: 92vh; background: #fff;
    border-radius: 20px; overflow-y: auto;
    box-shadow: 0 24px 80px rgba(0,0,0,.18);
    animation: pmUp .3s cubic-bezier(.16,1,.3,1);
}
.pm::-webkit-scrollbar { width: 6px; }
.pm::-webkit-scrollbar-thumb { background: #e2ddd4; border-radius: 3px; }
@keyframes pmUp { from { opacity:0; transform: translateY(20px) scale(.97); } to { opacity:1; transform: translateY(0) scale(1); } }

/* Header */
.pm-head { padding: 18px 24px; border-bottom: 1px solid #ece5d8; display: flex; align-items: center; }
.pm-head h3 { font-size: 17px; font-weight: 800; flex: 1; margin: 0; color: #1a2e22; }
.pm-x {
    width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center;
    justify-content: center; cursor: pointer; color: #7a8e80; font-size: 18px;
    border: none; background: transparent; transition: all .15s;
}
.pm-x:hover { background: #f5f0e8; color: #1a2e22; }

/* User */
.pm-user { padding: 16px 24px 0; display: flex; align-items: center; gap: 10px; }
.pm-av {
    width: 44px; height: 44px; border-radius: 14px;
    background: linear-gradient(135deg, #2d6a3f, #4CAF50);
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 14px; font-weight: 700; flex-shrink: 0;
}
.pm-name { font-size: 14px; font-weight: 700; color: #1a2e22; }
.pm-aud {
    display: flex; align-items: center; gap: 4px; margin-top: 3px;
    padding: 3px 10px; border-radius: 6px; font-size: 11px; font-weight: 600;
    color: #7a8e80; background: #faf8f4; border: 1px solid #ece5d8;
    cursor: pointer; width: fit-content; transition: all .15s;
}
.pm-aud:hover { border-color: #e2ddd4; color: #4a5e50; }

/* Type selector */
.pm-type { padding: 16px 24px 0; }
.pm-type-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: #7a8e80; margin-bottom: 8px; }
.pm-type-label .req, .pm-field-label .req, .pm-image-label .req { color: #d45050; font-size: 12px; }
.pm-types { display: flex; gap: 6px; flex-wrap: wrap; }
.pm-type-btn {
    display: flex; align-items: center; gap: 6px; padding: 8px 16px;
    border-radius: 10px; font-size: 12.5px; font-weight: 700;
    cursor: pointer; transition: all .2s; border: 2px solid #ece5d8;
    background: #fff; color: #4a5e50; font-family: inherit; position: relative;
}
.pm-type-btn:hover { border-color: #e2ddd4; transform: translateY(-1px); }
.pm-type-btn .tp-emoji { font-size: 15px; }
.pm-type-btn.sel-milestone { border-color: #d45050; background: #fce8e8; color: #d45050; }
.pm-type-btn.sel-fremskridt { border-color: #7c5cfc; background: #f4f0ff; color: #7c5cfc; }
.pm-type-btn.sel-tips { border-color: #e8913a; background: #fffbf2; color: #c47a2e; }
.pm-type-btn.sel-opdatering { border-color: #3a8a52; background: #e8f5e9; color: #2d6a3f; }
.pm-type-btn.selected::after {
    content: '\2713'; position: absolute; top: -6px; right: -6px;
    width: 18px; height: 18px; border-radius: 50%; font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.pm-type-btn.selected.sel-milestone::after { background: #d45050; }
.pm-type-btn.selected.sel-fremskridt::after { background: #7c5cfc; }
.pm-type-btn.selected.sel-tips::after { background: #e8913a; }
.pm-type-btn.selected.sel-opdatering::after { background: #3a8a52; }

/* Structured fields */
.pm-fields { padding: 16px 24px 0; }
.pm-field { margin-bottom: 12px; }
.pm-field-label {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: #a0b0a4; margin-bottom: 4px;
    display: flex; align-items: center; gap: 4px;
}
.pm-field-input {
    width: 100%; padding: 12px 16px; border: 1.5px solid #ece5d8;
    border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 700;
    color: #1a2e22; transition: all .15s; background: #faf8f4;
}
.pm-field-input:focus { outline: none; border-color: #4CAF50; background: #fff; box-shadow: 0 0 0 3px rgba(76,175,80,.08); }
.pm-field-input::placeholder { color: #a0b0a4; font-weight: 500; }
.pm-field-input.subtitle { font-size: 14px; font-weight: 600; }
.pm-field-textarea {
    width: 100%; padding: 14px 16px; border: 1.5px solid #ece5d8;
    border-radius: 12px; font-family: inherit; font-size: 14px;
    color: #1a2e22; transition: all .15s; background: #faf8f4;
    resize: none; min-height: 100px; line-height: 1.7;
}
.pm-field-textarea:focus { outline: none; border-color: #4CAF50; background: #fff; box-shadow: 0 0 0 3px rgba(76,175,80,.08); }
.pm-field-textarea::placeholder { color: #a0b0a4; }

/* Type-specific focus colors */
.pm.type-milestone .pm-field-input:focus, .pm.type-milestone .pm-field-textarea:focus { border-color: #d45050; box-shadow: 0 0 0 3px rgba(212,80,80,.08); }
.pm.type-fremskridt .pm-field-input:focus, .pm.type-fremskridt .pm-field-textarea:focus { border-color: #7c5cfc; box-shadow: 0 0 0 3px rgba(124,92,252,.08); }
.pm.type-tips .pm-field-input:focus, .pm.type-tips .pm-field-textarea:focus { border-color: #e8913a; box-shadow: 0 0 0 3px rgba(232,145,58,.08); }

/* Image upload */
.pm-image { padding: 0 24px; margin-bottom: 4px; }
.pm-image-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #a0b0a4; margin-bottom: 6px; display: flex; align-items: center; gap: 4px; }
.pm-img-upload {
    width: 100%; height: 180px; border: 2px dashed #e2ddd4; border-radius: 14px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; cursor: pointer; transition: all .2s; color: #a0b0a4; background: #faf8f4;
}
.pm-img-upload:hover { border-color: #4CAF50; background: #e8f5e9; color: #2d6a3f; }
.pm-img-upload svg { width: 36px; height: 36px; opacity: .5; }
.pm-img-upload span { font-size: 13px; font-weight: 600; }
.pm-img-upload small { font-size: 11px; color: #a0b0a4; }
.pm-img-preview { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid #ece5d8; display: none; }
.pm-img-preview.show { display: block; }
.pm-img-preview img { width: 100%; height: 200px; object-fit: cover; display: block; }
.pm-img-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; }
.pm-img-btn {
    width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center;
    justify-content: center; cursor: pointer; font-size: 14px; border: none;
    backdrop-filter: blur(8px); transition: all .15s;
}
.pm-img-btn.remove { background: rgba(212,80,80,.85); color: #fff; }
.pm-img-btn.remove:hover { background: rgba(212,80,80,1); transform: scale(1.05); }
.pm-img-btn.change { background: rgba(0,0,0,.5); color: #fff; }
.pm-img-btn.change:hover { background: rgba(0,0,0,.7); transform: scale(1.05); }

/* Bottom bar */
.pm-divider { height: 1px; background: #ece5d8; margin: 12px 24px 0; }
.pm-bottom { padding: 14px 24px; display: flex; align-items: center; gap: 6px; }
.pm-add-btn {
    display: flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px; cursor: pointer;
    border: none; background: transparent; color: #7a8e80; transition: all .15s; position: relative;
}
.pm-add-btn:hover { background: #f5f0e8; color: #1a2e22; }
.pm-add-btn svg { width: 20px; height: 20px; }
.pm-add-btn .tip {
    position: absolute; bottom: -26px; left: 50%; transform: translateX(-50%);
    padding: 3px 8px; border-radius: 5px; font-size: 9.5px; font-weight: 600;
    background: #122b1a; color: #fff; white-space: nowrap;
    opacity: 0; pointer-events: none; transition: opacity .15s;
}
.pm-add-btn:hover .tip { opacity: 1; }
.pm-emoji-row { display: flex; gap: 2px; margin-left: auto; }
.pm-emoji { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 17px; cursor: pointer; transition: all .15s; }
.pm-emoji:hover { background: #f5f0e8; transform: scale(1.15); }

/* Submit area */
.pm-submit { padding: 0 24px 20px; display: flex; align-items: center; gap: 8px; }
.pm-progress { flex: 1; display: flex; align-items: center; gap: 8px; }
.pm-progress-dots { display: flex; gap: 4px; }
.pm-dot { width: 8px; height: 8px; border-radius: 50%; background: #e2ddd4; transition: background .2s; }
.pm-dot.filled { background: #4CAF50; }
.pm-progress-text { font-size: 10.5px; color: #a0b0a4; font-weight: 600; }
.pm-draft-btn {
    padding: 9px 18px; border-radius: 10px; font-size: 12.5px; font-weight: 600;
    cursor: pointer; font-family: inherit; border: 1px solid #e2ddd4;
    background: transparent; color: #4a5e50; transition: all .15s;
}
.pm-draft-btn:hover { background: #faf8f4; border-color: #a0b0a4; }
.pm-post-btn {
    padding: 10px 28px; border-radius: 12px; font-size: 14px; font-weight: 700;
    cursor: pointer; font-family: inherit; border: none; transition: all .2s;
    background: #2d6a3f; color: #fff;
}
.pm-post-btn:hover:not(:disabled) { background: #244a30; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(45,106,63,.25); }
.pm-post-btn:disabled { background: #e2ddd4; color: #a0b0a4; cursor: default; }

/* Type-specific submit colors */
.pm.type-milestone .pm-post-btn:not(:disabled) { background: #d45050; }
.pm.type-milestone .pm-post-btn:hover:not(:disabled) { background: #c04040; box-shadow: 0 4px 16px rgba(212,80,80,.25); }
.pm.type-fremskridt .pm-post-btn:not(:disabled) { background: #7c5cfc; }
.pm.type-fremskridt .pm-post-btn:hover:not(:disabled) { background: #6a48e6; box-shadow: 0 4px 16px rgba(124,92,252,.25); }
.pm.type-tips .pm-post-btn:not(:disabled) { background: #e8913a; }
.pm.type-tips .pm-post-btn:hover:not(:disabled) { background: #c47a2e; box-shadow: 0 4px 16px rgba(232,145,58,.25); }

@media (max-width: 640px) {
    .pm { width: 95vw; }
    .pm-cb-actions { display: none; }
    .pm-bottom { flex-wrap: wrap; }
}


/* -------------------------------------------------------
   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;
}

/* 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;
}

/* 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: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}
.tr-ci-status--pending {
    background: linear-gradient(135deg, #FFF8E1, #FFF3E0);
    color: #E65100;
    box-shadow: 0 1px 3px rgba(230,81,0,0.08);
}
.tr-ci-status--reviewed {
    background: linear-gradient(135deg, #E8F5E9, #F1F8E9);
    color: #2E7D32;
    box-shadow: 0 1px 3px rgba(46,125,50,0.08);
}
.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; }


/* ═══════════════════════════════════════════════════
   OVERBLIK PAGE — Full Redesign (matches dashboard)
   ═══════════════════════════════════════════════════ */

/* ── 1. HERO — Dark green header with glass KPI cards ── */
.ob-hero {
    background: linear-gradient(135deg, #122b1a 0%, #244a30 60%, #3a8a52 100%);
    border-radius: 20px;
    padding: 28px 32px;
    color: #fff;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.ob-hero::before {
    content: '';
    position: absolute;
    top: -50px; right: -30px;
    width: 180px; height: 180px;
    background: rgba(255,255,255,0.04);
    border-radius: 50%;
    pointer-events: none;
}
.ob-hero::after {
    content: '';
    position: absolute;
    bottom: -60px; right: 120px;
    width: 140px; height: 140px;
    background: rgba(255,255,255,0.02);
    border-radius: 50%;
    pointer-events: none;
}
.ob-hero__title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: #fff;
    margin: 0;
    position: relative;
    z-index: 1;
}
.ob-hero__sub {
    font-size: 13px;
    opacity: 0.55;
    margin: 3px 0 0;
    position: relative;
    z-index: 1;
}
.ob-hero__cards {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    position: relative;
    z-index: 1;
}
.ob-hero__card {
    flex: 1;
    background: rgba(255,255,255,0.08);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 14px 16px;
    text-decoration: none;
    color: #fff;
    display: block;
    transition: all 0.2s;
    cursor: pointer;
}
.ob-hero__card:hover {
    background: rgba(255,255,255,0.13);
    transform: translateY(-2px);
    color: #fff;
}
.ob-hero__card-icon {
    float: right;
    font-size: 20px;
    opacity: 0.5;
    margin-top: -2px;
}
.ob-hero__card-val {
    display: block;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: rgba(255,255,255,0.35);
}
.ob-hero__card-val--orange { color: #f0a050; }
.ob-hero__card-val--green  { color: #81c784; }
.ob-hero__card-label {
    display: block;
    font-size: 11px;
    opacity: 0.5;
    font-weight: 500;
    margin-top: 3px;
}
@media (max-width: 768px) {
    .ob-hero__cards { flex-wrap: wrap; }
    .ob-hero__card { flex: 1 1 calc(50% - 5px); }
    .ob-hero { padding: 20px; }
}

/* ── 2. ATTENTION — Pulsing urgency section ── */
.ob-attention { margin-bottom: 20px; }
.ob-attention__title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #c47a2e;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.ob-attention__title::before {
    content: '';
    display: inline-block;
    width: 8px; height: 8px;
    background: #e8913a;
    border-radius: 50%;
    animation: trd-pulse 2s ease-in-out infinite;
}
.ob-attention__item {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 5px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    color: var(--t1);
}
.ob-attention__item::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
}
.ob-attention__item--urgent::before { background: #e8913a; }
.ob-attention__item--info::before { background: #3a8a52; }
.ob-attention__item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    color: var(--t1);
}
.ob-attention__icon {
    width: 42px; height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}
.ob-attention__icon--o { background: linear-gradient(135deg, #fef3e0, #fffbf2); }
.ob-attention__icon--g { background: linear-gradient(135deg, #e8f5e9, #f0faf2); }
.ob-attention__body { flex: 1; }
.ob-attention__item-title { font-size: 14px; font-weight: 700; display: block; }
.ob-attention__btn {
    padding: 8px 18px;
    background: #2d6a3f;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
    text-decoration: none;
}
.ob-attention__btn:hover {
    background: #244a30;
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(45,106,63,0.2);
    color: #fff;
}

/* ── 3. GRID LAYOUT ── */
.ob-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
}
.ob-grid__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ob-grid__side { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1024px) { .ob-grid { grid-template-columns: 1fr; } }

/* ── 4. CARDS — Base + color variants ── */
.ob-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
}
.ob-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(0,0,0,0.04);
}
.ob-card__icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}
.ob-card__icon--blue   { background: linear-gradient(135deg, #eff6ff, #dbeafe); }
.ob-card__icon--green  { background: linear-gradient(135deg, #e8f5e9, #c8e6c9); }
.ob-card__icon--orange { background: linear-gradient(135deg, #fef3e0, #ffe0b2); }
.ob-card__icon--teal   { background: linear-gradient(135deg, #e0f2f1, #b2dfdb); }
.ob-card__icon--purple { background: linear-gradient(135deg, #ece6ff, #d1c4e9); }
.ob-card__title {
    flex: 1;
    font-size: 15px;
    font-weight: 700;
    color: var(--t1);
    margin: 0;
}
.ob-card__link {
    font-size: 12px;
    font-weight: 600;
    color: var(--t3);
    text-decoration: none;
    transition: color 0.15s;
    white-space: nowrap;
}
.ob-card__link:hover { color: var(--g600); }

/* Card accent borders per type */
.ob-card--progress { border-left: 3px solid #3b82f6; }
.ob-card--clients  { border-left: 3px solid var(--g500); }
.ob-card--checkins { border-left: 3px solid var(--o500); }
.ob-card--messages { border-left: 3px solid var(--teal); }
.ob-card--tasks    { border-left: 3px solid var(--p500); }

/* ── 5. PROGRESS CARD — ring + stat boxes ── */
.ob-progress {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 4px 0;
}
.ob-progress__ring {
    position: relative;
    flex-shrink: 0;
}
.ob-progress__ring svg circle:first-child { stroke: rgba(59,130,246,0.1); }
.ob-progress__ring svg circle:last-child {
    filter: drop-shadow(0 2px 6px rgba(59,130,246,0.25));
    transition: stroke-dasharray 0.8s cubic-bezier(0.4,0,0.2,1);
}
.ob-progress__pct {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    font-size: 28px;
    font-weight: 800;
    color: #3b82f6;
    letter-spacing: -0.03em;
}
.ob-progress__stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.ob-progress__stat {
    background: rgba(0,0,0,0.02);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ob-progress__stat-val {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--t3);
}
.ob-progress__stat-val--orange { color: var(--o600); }
.ob-progress__stat-val--green  { color: var(--g500); }
.ob-progress__stat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--t3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── 6. CLIENT ROWS ── */
.ob-client {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    margin: 0 -8px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s;
    cursor: pointer;
}
.ob-client:hover {
    background: rgba(0,0,0,0.02);
    transform: translateX(3px);
}
.ob-client__avatar {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}
.ob-client__info { flex: 1; min-width: 0; }
.ob-client__name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
}
.ob-client__sub {
    display: block;
    font-size: 11px;
    font-weight: 500;
    margin-top: 1px;
}
.ob-client-status--ok   { color: var(--g500); }
.ob-client-status--warn { color: var(--o600); }
.ob-client-status--crit { color: var(--r500); }
.ob-client__bar {
    width: 64px; height: 5px;
    background: rgba(0,0,0,0.05);
    border-radius: 99px;
    overflow: hidden;
    flex-shrink: 0;
}
.ob-client__bar > div {
    height: 100%;
    border-radius: 99px;
    transition: width 0.6s ease;
}

/* ── 7. CHECK-IN ITEMS — timeline style ── */
.ob-ci-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    margin: 0 -8px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s;
    cursor: pointer;
    position: relative;
}
.ob-ci-item:hover {
    background: rgba(0,0,0,0.02);
    transform: translateX(3px);
}
.ob-ci-item--pending {
    background: rgba(232,145,58,0.04);
}
.ob-ci-item--pending:hover {
    background: rgba(232,145,58,0.08);
}
.ob-ci-item__dot {
    position: absolute;
    left: -2px; top: 50%;
    transform: translateY(-50%);
    width: 6px; height: 6px;
    background: var(--o500);
    border-radius: 50%;
    animation: trd-pulse 2s ease-in-out infinite;
}
.ob-ci-item__avatar {
    width: 34px; height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    flex-shrink: 0;
}
.ob-ci-item__body { flex: 1; min-width: 0; }
.ob-ci-item__name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--t1);
}
.ob-ci-item__meta {
    display: block;
    font-size: 11px;
    color: var(--t3);
    margin-top: 1px;
}
.ob-ci-item__btn {
    padding: 6px 14px;
    background: #2d6a3f;
    color: #fff;
    border-radius: 7px;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
    flex-shrink: 0;
}
.ob-ci-item:hover .ob-ci-item__btn {
    background: #244a30;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(45,106,63,0.2);
}
.ob-ci-item__badge {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
}
.ob-ci-item__badge--done {
    background: linear-gradient(135deg, #e8f5e9, #f0faf2);
    color: var(--g500);
    font-weight: 700;
}

/* ── 8. MESSAGES — sidebar card ── */
.ob-msg {
    display: flex;
    gap: 10px;
    padding: 10px 8px;
    margin: 0 -8px;
    border-radius: 10px;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s;
    cursor: pointer;
}
.ob-msg:hover {
    background: rgba(13,148,136,0.04);
}
.ob-msg__avatar {
    width: 34px; height: 34px;
    border-radius: 10px;
    background: var(--teal);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ob-msg__body { flex: 1; min-width: 0; }
.ob-msg__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
}
.ob-msg__top strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--t1);
}
.ob-msg__top span {
    font-size: 10px;
    color: var(--t4);
    font-weight: 500;
}
.ob-msg__body p {
    font-size: 12px;
    color: var(--t3);
    margin: 0;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── 9. TASKS — sidebar card (purple accent) ── */
.ob-tasks-scroll {
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.06) transparent;
}
.ob-task {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 6px;
    margin: 0 -6px;
    border-radius: 8px;
    transition: background 0.1s;
}
.ob-task:hover { background: rgba(124,92,252,0.03); }
.ob-task--done { opacity: 0.4; }
.ob-task__check { flex-shrink: 0; margin-top: 2px; cursor: pointer; }
.ob-task__check input {
    accent-color: var(--p500);
    width: 16px; height: 16px;
    cursor: pointer;
}
.ob-task__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ob-task__body span {
    font-size: 13px;
    font-weight: 500;
    color: var(--t1);
    line-height: 1.4;
}
.ob-task--done .ob-task__body s {
    font-size: 13px;
    color: var(--t4);
}
.ob-task__body small {
    font-size: 11px;
    color: var(--t4);
    font-weight: 500;
}
.ob-task--overdue {
    color: var(--r500) !important;
    font-weight: 600 !important;
    background: rgba(212,80,80,0.08);
    padding: 1px 6px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}
.ob-tasks-divider {
    font-size: 10px;
    font-weight: 700;
    color: var(--t4);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 10px 0 6px;
    margin-top: 4px;
    border-top: 1px solid rgba(0,0,0,0.04);
}
.ob-task-new {
    display: flex;
    gap: 0;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.04);
}
.ob-task-new input {
    flex: 1;
    border: 1px solid transparent;
    background: rgba(124,92,252,0.04);
    border-radius: 10px 0 0 10px;
    padding: 9px 12px;
    font-size: 13px;
    font-family: inherit;
    color: var(--t1);
    outline: none;
    transition: all 0.2s;
}
.ob-task-new input:focus {
    background: #fff;
    border-color: var(--p500);
    box-shadow: 0 0 0 3px rgba(124,92,252,0.08);
}
.ob-task-new input::placeholder { color: var(--t4); }
.ob-task-new button {
    background: var(--p500);
    color: #fff;
    border: none;
    border-radius: 0 10px 10px 0;
    padding: 9px 16px;
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}
.ob-task-new button:hover { background: #6a4ce0; }

/* ── 10. EMPTY STATES ── */
.ob-empty {
    text-align: center;
    padding: 20px 0 10px;
}
.ob-empty span {
    font-size: 28px;
    display: block;
    margin-bottom: 6px;
    opacity: 0.3;
}
.ob-empty p {
    font-size: 13px;
    color: var(--t4);
    margin: 0;
    font-weight: 500;
}

/* 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); }

/* ================================================
   KLIENT PROFIL v5 — header + quick status + tabs
   ================================================ */

/* Profile header — full dark gradient (matches dashboard hero) */
.cp-header {
    background:linear-gradient(135deg, #122b1a 0%, #244a30 60%, #3a8a52 100%);
    border-radius:20px;padding:28px 32px;color:#fff;margin-bottom:20px;
    position:relative;overflow:hidden;
}
.cp-header::before { content:'';position:absolute;top:-50px;right:-30px;width:180px;height:180px;background:rgba(255,255,255,.04);border-radius:50%;pointer-events:none; }
.cp-header::after { content:'';position:absolute;bottom:-60px;right:120px;width:140px;height:140px;background:rgba(255,255,255,.02);border-radius:50%;pointer-events:none; }
.cp-top { display:flex;align-items:center;gap:18px;position:relative;z-index:1; }
.cp-av {
    width:62px;height:62px;border-radius:16px;display:flex;align-items:center;justify-content:center;
    font-size:20px;font-weight:800;color:#fff;flex-shrink:0;
    background:linear-gradient(135deg,#3a8a52,#81c784);border:3px solid rgba(255,255,255,.15);
}
.cp-info { flex:1; }
.cp-name { font-size:20px;font-weight:800;color:#fff;display:flex;align-items:center;gap:8px; }
.cp-tag { display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15); }
.cp-tag::before { content:'';width:5px;height:5px;border-radius:50%;background:#81c784; }
.cp-meta-row { display:flex;gap:6px;margin-top:6px;flex-wrap:wrap; }
.cp-meta-pill { padding:3px 10px;border-radius:6px;font-size:10.5px;font-weight:600;background:rgba(255,255,255,.1);color:rgba(255,255,255,.7); }
.cp-actions { margin-left:auto;display:flex;gap:6px;position:relative;z-index:1; }
.cp-btn { padding:8px 18px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;border:none;transition:all .15s; }
.cp-btn.primary { background:#fff;color:#244a30; }
.cp-btn.primary:hover { transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.15); }
.cp-btn.secondary { padding:8px 16px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:rgba(255,255,255,.8); }
.cp-btn.secondary:hover { background:rgba(255,255,255,.15); }
.cp-back { display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;color:var(--t3);text-decoration:none;transition:color .15s;margin-bottom:10px; }
.cp-back:hover { color:var(--t1); }
/* Quick status strip inside header */
.cp-strip { display:flex;gap:6px;margin-top:16px;position:relative;z-index:1; }
.cp-qs { flex:1;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600; }
.cp-qs-dot { width:6px;height:6px;border-radius:50%;flex-shrink:0; }
.cp-qs-dot.g { background:#81c784; }
.cp-qs-dot.o { background:#f0a050; }
.cp-qs-dot.r { background:#ef8888; }
.cp-qs-dot.b { background:#93bbfc; }

/* Tabs (underline style) */
.tabs { display:flex;gap:0;margin-bottom:22px;border-bottom:1.5px solid var(--b200);overflow-x:auto; }
.tab { padding:10px 16px;font-size:12.5px;font-weight:500;color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap;position:relative;top:1.5px;text-decoration:none; }
.tab:hover { color:var(--t1); }
.tab.a { color:var(--g600);border-bottom-color:var(--g600);font-weight:700; }
.tab .tab-badge { margin-left:4px;padding:1px 6px;border-radius:4px;font-size:9px;font-weight:700;background:var(--o100);color:var(--o500); }

@media(max-width:768px) {
    .cp-top { flex-wrap:wrap; }
    .cp-actions { width:100%;margin-left:0;margin-top:8px; }
    .cp-strip { flex-wrap:wrap; }
    .cp-qs { min-width:calc(50% - 4px); }
    .tabs { overflow-x:auto;-webkit-overflow-scrolling:touch; }
    .tab { flex:none;min-width:auto; }
}

/* ================================================
   KLIENT PROFIL v5 — all tab components
   ================================================ */

/* --- OVERSIGT: Pulse wellness rings --- */
.pulse-row{display:flex;gap:10px;width:100%;margin-bottom:16px}
.pulse-item{flex:1;display:flex;flex-direction:column;align-items:center;padding:18px 8px;border-radius:16px;background:var(--card);border:1px solid var(--cb);transition:all .2s;cursor:default}
.pulse-item:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.06)}
.pulse-item.main{background:var(--g50);border-color:rgba(58,138,82,.12)}
.pulse-ring{width:64px;height:64px;position:relative;margin-bottom:8px}
.pulse-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.pulse-ring circle{fill:none;stroke-width:4;stroke-linecap:round}
.pulse-ring .bg{stroke:var(--b200)}
.pulse-ring .fg{transition:stroke-dashoffset .8s cubic-bezier(.16,1,.3,1)}
.pulse-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pulse-emoji{font-size:20px}
.pulse-val{font-size:16px;font-weight:800;color:var(--t1);margin-top:2px}
.pulse-val small{font-size:10px;font-weight:400;color:var(--t4)}
.pulse-name{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t4);margin-top:2px}
.pulse-trend{font-size:9px;font-weight:700;padding:2px 7px;border-radius:6px;margin-top:6px}
.pulse-trend.up{background:var(--g50);color:var(--g600)}
.pulse-trend.dn{background:var(--r50);color:var(--r500)}
.pulse-trend.na{background:var(--b50);color:var(--t4)}

/* --- OVERSIGT: Weight + check-in chart --- */
.wg{background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:20px 22px;margin-bottom:16px}
.wg-top{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.wg-icon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#0d9488,#2dd4bf);display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px}
.wg-title{font-size:13.5px;font-weight:700}
.wg-period{margin-left:auto;display:flex;gap:3px}
.wg-per{padding:5px 11px;border-radius:7px;font-size:10px;font-weight:700;cursor:pointer;border:1px solid var(--b200);background:transparent;color:var(--t3);font-family:inherit;transition:all .12s}
.wg-per:hover{border-color:var(--b300);color:var(--t2)}
.wg-per.a{background:var(--g600);color:#fff;border-color:var(--g600)}
.wg-legend{display:flex;gap:16px;margin:10px 0 14px;padding-left:42px}
.wg-leg{display:flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:var(--t3)}
.wg-leg-line{width:18px;height:3px;border-radius:2px}
.wg-leg-line.weight{background:linear-gradient(90deg,#0d9488,#2dd4bf)}
.wg-leg-dot{width:8px;height:8px;border-radius:50%;background:var(--p500)}
.wg-chart{position:relative;height:200px;margin-left:42px;margin-right:10px}
.wg-y{position:absolute;left:-42px;top:0;bottom:20px;display:flex;flex-direction:column;justify-content:space-between}
.wg-yl{font-size:9px;font-weight:600;color:var(--t4);text-align:right;width:34px}
.wg-grid{position:absolute;inset:0;bottom:20px;display:flex;flex-direction:column;justify-content:space-between}
.wg-gridline{height:1px;background:var(--b200)}
.wg-gridline.goal{background:var(--g400);opacity:.4;height:1.5px;background:repeating-linear-gradient(90deg,var(--g400) 0,var(--g400) 6px,transparent 6px,transparent 12px)}
.wg-svg{position:absolute;inset:0;bottom:20px}
.wg-x{position:absolute;bottom:0;left:0;right:0;height:20px;display:flex;justify-content:space-between;align-items:center}
.wg-xl{font-size:8px;font-weight:600;color:var(--t4);text-align:center;flex:1}
.wg-points{position:absolute;inset:0;bottom:20px}
.wg-point{position:absolute;width:10px;height:10px;border-radius:50%;background:#0d9488;border:2.5px solid var(--card);box-shadow:0 1px 4px rgba(0,0,0,.15);transform:translate(-50%,-50%);cursor:pointer;transition:all .15s;z-index:2}
.wg-point:hover{transform:translate(-50%,-50%) scale(1.4);box-shadow:0 2px 8px rgba(13,148,136,.3)}
.wg-point .wg-tip,.wg-ci .wg-tip{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:var(--g900);color:#fff;padding:5px 10px;border-radius:7px;font-size:10px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.wg-point:hover .wg-tip,.wg-ci:hover .wg-tip{opacity:1}
.wg-ci{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--p500);border:2px solid var(--card);box-shadow:0 1px 3px rgba(124,92,252,.2);transform:translate(-50%,-50%);z-index:3;cursor:pointer;transition:all .15s}
.wg-ci:hover{transform:translate(-50%,-50%) scale(1.4)}
.wg-ci .wg-tip{background:var(--p500)}
.wg-ci-line{position:absolute;width:1px;top:0;bottom:0;background:repeating-linear-gradient(to bottom,var(--p500) 0,var(--p500) 3px,transparent 3px,transparent 7px);opacity:.2;z-index:1}
.wg-stats{display:flex;gap:8px;margin-top:14px}
.wg-stat{flex:1;text-align:center;padding:10px;background:var(--b50);border-radius:10px}
.wg-stat-v{font-size:18px;font-weight:800}
.wg-stat-v.teal{color:#0d9488}.wg-stat-v.green{color:var(--g600)}.wg-stat-v.gray{color:var(--t4)}
.wg-stat-l{font-size:8.5px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.3px;margin-top:2px}

/* --- OVERSIGT: Training + Kost side-by-side --- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.train-card{background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:20px;position:relative;overflow:hidden}
.train-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--g400),var(--g300),transparent)}
.tc-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.tc-icon{width:30px;height:30px;border-radius:8px;background:var(--g50);display:flex;align-items:center;justify-content:center;font-size:14px}
.tc-title{font-size:13px;font-weight:700}
.tc-link{margin-left:auto;font-size:11px;color:var(--g600);font-weight:600;cursor:pointer}
.tc-big{display:flex;align-items:baseline;gap:4px;margin-bottom:12px}
.tc-big-v{font-size:36px;font-weight:800;color:var(--g600);line-height:1}
.tc-big-l{font-size:12px;color:var(--t3);font-weight:500}
.tc-week{display:flex;gap:4px;margin-bottom:14px}
.tc-day{flex:1;aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;background:var(--b50);color:var(--t4);border:1px solid var(--b200)}
.tc-day.done{background:var(--g50);color:var(--g600);border-color:rgba(58,138,82,.15)}
.tc-day.done::after{content:'\2713';font-size:11px}
.tc-day.today{background:var(--g600);color:#fff;border-color:var(--g600)}
.tc-row{display:flex;justify-content:space-between;font-size:11.5px;padding:4px 0}
.tc-row strong{font-weight:700}
.kost-card{background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:20px;position:relative;overflow:hidden}
.kost-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--o500),#f0c050,transparent)}
.kc-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.kc-icon{width:30px;height:30px;border-radius:8px;background:var(--o50);display:flex;align-items:center;justify-content:center;font-size:14px}
.kc-title{font-size:13px;font-weight:700}
.kc-link{margin-left:auto;font-size:11px;color:var(--g600);font-weight:600;cursor:pointer}
.kc-donut-area{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.kc-donut{width:72px;height:72px;position:relative;flex-shrink:0}
.kc-donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.kc-donut circle{fill:none;stroke-width:5;stroke-linecap:round}
.kc-donut .bg{stroke:var(--b200)}.kc-donut .fg{stroke:var(--o500)}
.kc-donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.kc-donut-val{font-size:16px;font-weight:800;color:var(--r500)}
.kc-donut-label{font-size:8px;color:var(--t4)}
.kc-macros{flex:1;display:flex;flex-direction:column;gap:6px}
.kc-macro{display:flex;align-items:center;gap:6px}
.kc-dot{width:6px;height:6px;border-radius:2px;flex-shrink:0}
.kc-dot.p{background:#ef4444}.kc-dot.c{background:var(--g700)}.kc-dot.f{background:var(--o500)}
.kc-macro-name{font-size:10px;font-weight:600;color:var(--t3);width:48px}
.kc-macro-track{flex:1;height:4px;background:var(--b200);border-radius:2px;overflow:hidden}
.kc-macro-fill{height:100%;border-radius:2px}
.kc-macro-fill.p{background:#ef4444}.kc-macro-fill.c{background:var(--g600)}.kc-macro-fill.f{background:var(--o500)}
.kc-macro-val{font-size:10px;font-weight:700;color:var(--t3);width:55px;text-align:right}
.kc-plan{background:var(--o50);border-radius:8px;padding:8px 12px;font-size:10.5px;color:var(--o600);font-weight:600;border:1px solid rgba(232,145,58,.08)}

/* --- OVERSIGT: Check-in svar --- */
.ci-section{margin-bottom:16px}
.ci-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--p500);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.ci-label::before{content:'';width:14px;height:2px;background:var(--p500);border-radius:1px}
.ci-cards{display:flex;flex-direction:column;gap:6px}
.ci-card{display:flex;gap:10px;padding:12px 16px;background:var(--card);border:1px solid var(--cb);border-radius:12px;transition:all .15s}
.ci-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.04);transform:translateX(2px)}
.ci-q-mark{width:28px;height:28px;border-radius:8px;background:var(--p50);color:var(--p500);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;flex-shrink:0}
.ci-q{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--p500);margin-bottom:2px}
.ci-a{font-size:12.5px;font-weight:600;line-height:1.5;color:var(--t1)}

/* --- OVERSIGT: Bottom info + activity --- */
.bottom-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.info-card{background:var(--card);border:1px solid var(--cb);border-radius:14px;padding:18px}
.info-head{font-size:12px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px;color:var(--t2)}
.info-rows{display:flex;flex-direction:column;gap:2px}
.info-r{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;font-size:12px;transition:background .1s}
.info-r:nth-child(odd){background:var(--b50)}
.info-r-icon{font-size:14px;width:20px;text-align:center}
.info-r-label{flex:1;color:var(--t2);font-weight:500}
.info-r-val{font-weight:700;text-align:right}
.info-r-val.g{color:var(--g600)}.info-r-val.r{color:var(--r500)}.info-r-val.o{color:var(--o500)}
.act-card{background:var(--card);border:1px solid var(--cb);border-radius:14px;padding:18px}
.act-head{font-size:12px;font-weight:700;margin-bottom:12px;display:flex;align-items:center;gap:6px;color:var(--t2)}
.act-timeline{position:relative;padding-left:20px}
.act-timeline::before{content:'';position:absolute;left:7px;top:4px;bottom:4px;width:2px;background:var(--b200);border-radius:1px}
.act-item{position:relative;padding:8px 0;padding-left:16px}
.act-item::before{content:'';position:absolute;left:-20px;top:12px;width:8px;height:8px;border-radius:50%;background:var(--b200);border:2px solid var(--b100);z-index:1}
.act-item:first-child::before{background:var(--o500)}
.act-item-t{font-size:12px;font-weight:600}
.act-item-d{font-size:10px;color:var(--t4);margin-top:1px}

/* --- CHECK-INS: Stats row --- */
.ci-stats{display:flex;gap:8px;margin-bottom:18px}
.ci-stat{flex:1;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--cb);display:flex;align-items:center;gap:12px;transition:all .2s}
.ci-stat:hover{box-shadow:0 4px 14px rgba(0,0,0,.04);transform:translateY(-1px)}
.ci-stat-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.ci-stat-icon.pending{background:var(--o50)}.ci-stat-icon.done{background:var(--g50)}.ci-stat-icon.rate{background:var(--b50)}.ci-stat-icon.total{background:var(--p50)}
.ci-stat-val{font-size:22px;font-weight:800}
.ci-stat-val.o{color:var(--o500)}.ci-stat-val.g{color:var(--g600)}.ci-stat-val.m{color:var(--t4)}.ci-stat-val.p{color:var(--p500)}
.ci-stat-label{font-size:10px;color:var(--t3);font-weight:600;margin-top:1px}

/* --- CHECK-INS: Sub-tabs --- */
.sub-tabs{display:flex;gap:4px;margin-bottom:18px}
.sub-tab{padding:9px 18px;border-radius:10px;font-size:12.5px;font-weight:700;cursor:pointer;font-family:inherit;border:1px solid var(--b200);background:var(--card);color:var(--t3);transition:all .15s;display:flex;align-items:center;gap:5px}
.sub-tab:hover{border-color:var(--b300);color:var(--t2)}
.sub-tab.a{background:var(--g600);color:#fff;border-color:var(--g600)}
.sub-tab .st-badge{padding:1px 6px;border-radius:4px;font-size:9px;font-weight:700;background:rgba(255,255,255,.25)}
.sub-tab .st-count{padding:1px 6px;border-radius:4px;font-size:9px;font-weight:700;background:var(--o500);color:#fff}

/* --- CHECK-INS: Split layout --- */
.split{display:grid;grid-template-columns:280px 1fr;gap:0;background:var(--card);border:1px solid var(--cb);border-radius:16px;overflow:hidden;min-height:420px}
.ci-list{border-right:1px solid var(--b200);display:flex;flex-direction:column}
.ci-list-head{padding:14px 16px;border-bottom:1px solid var(--b200);display:flex;align-items:center;gap:8px}
.ci-list-count{font-size:11px;font-weight:700;color:var(--t3)}
.ci-list-compare{margin-left:auto;padding:5px 10px;border-radius:6px;font-size:10px;font-weight:700;cursor:pointer;font-family:inherit;border:1px solid var(--b300);background:transparent;color:var(--t3);display:flex;align-items:center;gap:4px;transition:all .12s}
.ci-list-compare:hover{border-color:var(--p500);color:var(--p500);background:var(--p50)}
.ci-items{flex:1;overflow-y:auto}
.ci-item{padding:14px 16px;cursor:pointer;transition:all .12s;position:relative;border:none;outline:none;box-shadow:none;display:block}
.ci-item:hover{background:var(--b50)}
.ci-item.active{background:var(--b50)}
.ci-item.active::after{display:none}
.ci-item + .ci-item{border-top:1px solid var(--b100)}
.ci-item-name{font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:6px}
.ci-item-date{font-size:10.5px;color:var(--t4);margin-top:2px}
.ci-item-tag{padding:3px 8px;border-radius:6px;font-size:9px;font-weight:700}
.ci-item-tag.pe{background:var(--o50);color:var(--o600)}.ci-item-tag.done{background:var(--g50);color:var(--g600)}
.ci-item-summary{display:flex;gap:8px;margin-top:6px}
.ci-item-metric{display:flex;align-items:center;gap:3px;font-size:9px;font-weight:600;color:var(--t4)}

/* --- CHECK-INS: Detail panel --- */
.ci-detail{padding:22px 24px;display:flex;flex-direction:column}
.ci-detail-head{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.ci-detail-title{font-size:15px;font-weight:800}
.ci-detail-date{font-size:11px;color:var(--t4)}
.ci-detail-tag{margin-left:auto;padding:4px 12px;border-radius:20px;font-size:10px;font-weight:700;background:var(--o50);color:var(--o600);border:1px solid rgba(232,145,58,.1)}

/* --- CHECK-INS: Question cards --- */
.q-cards{flex:1;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.q-card{border-radius:12px;padding:14px 16px;transition:all .15s}
.q-card:hover{transform:translateX(2px)}
.q-card.mood{background:linear-gradient(135deg,#fef9ee,#fef3e0);border:1px solid rgba(232,195,58,.12)}
.q-card.sleep{background:linear-gradient(135deg,#f0f0ff,#e8e6ff);border:1px solid rgba(124,92,252,.1)}
.q-card.energy{background:linear-gradient(135deg,#fef5ee,#fef0e0);border:1px solid rgba(232,145,58,.1)}
.q-card.stress{background:linear-gradient(135deg,#fef5f5,#fce8e8);border:1px solid rgba(212,80,80,.1)}
.q-card.text{background:var(--b50);border:1px solid var(--cb)}
.q-num{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--t4);margin-bottom:4px}
.q-title{font-size:13px;font-weight:700;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.q-title .q-emoji{font-size:16px}
.q-emoji-scale{display:flex;gap:4px}
.q-emoji-opt{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;border:2px solid transparent;transition:all .15s;cursor:default;background:rgba(255,255,255,.6)}
.q-emoji-opt.selected{border-color:var(--o500);background:#fff;box-shadow:0 2px 8px rgba(232,145,58,.15);transform:scale(1.1)}
.q-num-scale{display:flex;gap:4px}
.q-num-opt{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;border:2px solid transparent;cursor:default;background:rgba(255,255,255,.6);color:var(--t3)}
.q-num-opt.selected{border-color:var(--g600);background:#fff;color:var(--g600);box-shadow:0 2px 8px rgba(45,106,63,.12);transform:scale(1.1)}
.q-sleep-val{display:flex;align-items:center;gap:10px}
.q-sleep-num{font-size:28px;font-weight:800;color:var(--p500)}
.q-sleep-unit{font-size:12px;color:var(--t3)}
.q-sleep-stars{display:flex;gap:2px;font-size:18px;margin-left:auto}
.q-scale-labels{display:flex;justify-content:space-between;font-size:9px;color:var(--t4);margin-top:4px;padding:0 2px}
.ci-review-btn{margin-top:16px;padding:14px;border-radius:12px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;border:none;background:var(--g600);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .2s;width:100%}
.ci-review-btn:hover{background:var(--g700);transform:translateY(-1px);box-shadow:0 4px 16px rgba(45,106,63,.2)}

/* --- CHECK-INS: Form panel --- */
.form-panel{background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:22px}
.form-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.form-title{font-size:15px;font-weight:800}
.form-add{margin-left:auto;padding:8px 18px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;border:none;background:var(--g600);color:#fff;transition:all .15s}
.form-add:hover{background:var(--g700)}
.form-table{width:100%}
.form-table-head{display:grid;grid-template-columns:1fr 100px 100px 80px;gap:8px;padding:8px 12px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t4);border-bottom:1px solid var(--b200)}
.form-row{display:grid;grid-template-columns:1fr 100px 100px 80px;gap:8px;padding:14px 12px;align-items:center;border-radius:10px;transition:all .12s;cursor:pointer}
.form-row:hover{background:var(--b50)}
.form-name{font-size:13px;font-weight:700;display:flex;align-items:center;gap:8px}
.form-name-icon{width:28px;height:28px;border-radius:8px;background:var(--g50);display:flex;align-items:center;justify-content:center;font-size:13px}
.form-cell{font-size:12px;color:var(--t3);font-weight:500;text-align:center}
.form-freq{padding:4px 10px;border-radius:6px;font-size:10px;font-weight:700;background:var(--b50);color:var(--t3);text-align:center;display:inline-block}
.form-actions{display:flex;gap:4px;justify-content:flex-end}
.form-act{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none;background:transparent;color:var(--t4);font-size:13px;transition:all .12s}
.form-act:hover{background:var(--b100);color:var(--t2)}

/* --- UDVIKLING: Gauge strip --- */
.gauge-strip{background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:20px 22px;margin-bottom:16px}
.gauge-strip-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--t4);margin-bottom:14px}
.gauges{display:flex;flex-direction:column;gap:10px}
.gauge{display:flex;align-items:center;gap:10px}
.gauge-emoji{font-size:20px;width:28px;text-align:center}
.gauge-info{width:60px}
.gauge-name{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.3px}
.gauge-track{flex:1;height:8px;background:var(--b200);border-radius:4px;overflow:hidden;position:relative}
.gauge-fill{height:100%;border-radius:4px;transition:width .8s cubic-bezier(.16,1,.3,1)}
.gauge-fill.mood{background:linear-gradient(90deg,#fbbf24,#f59e0b)}
.gauge-fill.energy{background:linear-gradient(90deg,#f97316,#fb923c)}
.gauge-fill.sleep{background:linear-gradient(90deg,var(--p500),#a78bfa)}
.gauge-fill.stress{background:linear-gradient(90deg,var(--r500),#fca5a5)}
.gauge-fill.streak{background:linear-gradient(90deg,var(--g500),var(--g300))}
.gauge-val{width:48px;text-align:right;font-size:14px;font-weight:800}
.gauge-val.has{color:var(--t1)}.gauge-val.na{color:var(--t4)}
.gauge-trend{width:40px;text-align:center}
.gauge-trend span{font-size:9px;font-weight:700;padding:2px 6px;border-radius:5px}
.gauge-trend .up{background:var(--g50);color:var(--g600)}
.gauge-trend .dn{background:var(--r50);color:var(--r500)}
.gauge-trend .flat{background:var(--b50);color:var(--t4)}

/* --- UDVIKLING: Dev chart --- */
.dev-chart{background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:20px 22px;margin-bottom:16px}
.dc-top{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.dc-title{font-size:14px;font-weight:800;display:flex;align-items:center;gap:6px}
.dc-period{margin-left:auto;display:flex;gap:3px}
.dc-per{padding:5px 11px;border-radius:7px;font-size:10px;font-weight:700;cursor:pointer;border:1px solid var(--b200);background:transparent;color:var(--t3);font-family:inherit;transition:all .12s}
.dc-per.a{background:var(--p500);color:#fff;border-color:var(--p500)}
.dc-per:hover:not(.a){border-color:var(--b300);color:var(--t2)}
.dc-toggles{display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap}
.dc-tog{padding:6px 14px;border-radius:20px;font-size:10.5px;font-weight:700;cursor:pointer;border:1.5px solid var(--b200);background:transparent;color:var(--t3);font-family:inherit;transition:all .15s;display:flex;align-items:center;gap:4px}
.dc-tog:hover{border-color:var(--b300);color:var(--t2)}
.dc-tog.a-mood{background:#fef9ee;border-color:#f59e0b;color:#b45309}
.dc-tog.a-energy{background:#fff7ed;border-color:#f97316;color:#c2410c}
.dc-tog.a-sleep{background:var(--p50);border-color:var(--p500);color:var(--p500)}
.dc-tog.a-stress{background:var(--r50);border-color:var(--r500);color:var(--r500)}
.dc-tog.a-weight{background:var(--teal50);border-color:var(--teal);color:var(--teal)}
.dc-tog .tog-dot{width:6px;height:6px;border-radius:50%}
.dc-tog .tog-dot.mood{background:#f59e0b}.dc-tog .tog-dot.energy{background:#f97316}
.dc-tog .tog-dot.sleep{background:var(--p500)}.dc-tog .tog-dot.stress{background:var(--r500)}
.dc-tog .tog-dot.weight{background:var(--teal)}
.dc-chart{position:relative;height:180px;margin-bottom:6px}
.dc-svg{width:100%;height:100%}
.dc-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--t4);font-weight:600;background:var(--b50);border-radius:10px}

/* --- UDVIKLING: Bottom duo (weight + resume) --- */
.dev-bottom{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.weight-card{background:var(--card);border:1px solid var(--cb);border-radius:14px;padding:18px;position:relative;overflow:hidden}
.weight-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),#2dd4bf,transparent)}
.wc-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.wc-icon{width:28px;height:28px;border-radius:8px;background:var(--teal50);display:flex;align-items:center;justify-content:center;font-size:13px}
.wc-title{font-size:13px;font-weight:700}
.wc-vals{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wc-v{text-align:center;padding:10px 8px;background:var(--b50);border-radius:10px}
.wc-v-num{font-size:20px;font-weight:800}
.wc-v-num.teal{color:var(--teal)}.wc-v-num.green{color:var(--g600)}.wc-v-num.na{color:var(--t4)}
.wc-v-label{font-size:8px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.3px;margin-top:2px}
.resume-card{background:var(--card);border:1px solid var(--cb);border-radius:14px;padding:18px;position:relative;overflow:hidden}
.resume-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--g400),var(--g300),transparent)}
.res-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.res-icon{width:28px;height:28px;border-radius:8px;background:var(--g50);display:flex;align-items:center;justify-content:center;font-size:13px}
.res-title{font-size:13px;font-weight:700}
.res-items{display:flex;flex-direction:column;gap:6px}
.res-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px}
.res-item:nth-child(odd){background:var(--b50)}
.res-item-icon{font-size:16px;width:24px;text-align:center}
.res-item-val{font-size:15px;font-weight:800;margin-left:auto}
.res-item-val.g{color:var(--g600)}.res-item-val.o{color:var(--o500)}.res-item-val.na{color:var(--t4)}
.res-item-info{flex:1}
.res-item-label{font-size:11.5px;font-weight:600}
.res-item-sub{font-size:9.5px;color:var(--t4)}

/* --- TRÆNING: Compliance hero ring --- */
.train-hero{background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:22px;margin-bottom:16px;display:flex;align-items:center;gap:24px}
.th-ring{width:90px;height:90px;position:relative;flex-shrink:0}
.th-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.th-ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.th-ring .bg{stroke:var(--b200)}.th-ring .fg{stroke:var(--g400);transition:stroke-dashoffset .8s cubic-bezier(.16,1,.3,1)}
.th-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.th-ring-val{font-size:24px;font-weight:800;color:var(--g600)}
.th-ring-label{font-size:8px;color:var(--t4);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.th-stats{display:flex;gap:16px;flex:1}
.th-stat{flex:1;text-align:center;padding:12px;border-radius:12px;background:var(--b50)}
.th-stat-v{font-size:24px;font-weight:800}
.th-stat-l{font-size:9px;color:var(--t4);font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin-top:2px}

/* --- TRÆNING: Week heatmap --- */
.week-heat{background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:20px 22px;margin-bottom:16px}
.wh-head{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.wh-icon{width:28px;height:28px;border-radius:8px;background:var(--blue50);display:flex;align-items:center;justify-content:center;font-size:13px}
.wh-title{font-size:13px;font-weight:700}
.wh-nav{margin-left:auto;display:flex;gap:4px}
.wh-nav-btn{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--b200);background:transparent;color:var(--t3);font-size:14px;font-family:inherit;transition:all .12s}
.wh-nav-btn:hover{border-color:var(--b300);color:var(--t2)}
.wh-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:14px}
.wh-label{font-size:9px;font-weight:700;color:var(--t4);text-align:center;text-transform:uppercase;letter-spacing:.5px;padding-bottom:4px}
.wh-day{aspect-ratio:1;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;font-weight:600;color:var(--t3);background:var(--b50);border:1.5px solid var(--b200);transition:all .15s;cursor:default;position:relative}
.wh-day.rest{background:var(--b50);color:var(--t4)}
.wh-day.done{background:var(--g50);border-color:rgba(58,138,82,.2);color:var(--g600)}
.wh-day.done .wh-check{color:var(--g500);font-size:16px}
.wh-day.today{border-color:var(--g600);box-shadow:0 0 0 2px rgba(45,106,63,.1)}
.wh-day.today.done{background:var(--g600);color:#fff;border-color:var(--g600)}
.wh-day.today.done .wh-check{color:#fff}
.wh-day-date{font-size:9px;color:var(--t4)}
.wh-day.today .wh-day-date{color:inherit;opacity:.6}
.wh-vol{width:70%;height:4px;border-radius:2px;background:var(--b200);margin-top:2px}
.wh-vol-fill{height:100%;border-radius:2px;background:var(--g400)}
.wh-day.today.done .wh-vol{background:rgba(255,255,255,.2)}
.wh-day.today.done .wh-vol-fill{background:#fff}
.wh-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wh-sum{text-align:center;padding:10px;background:var(--b50);border-radius:10px}
.wh-sum-v{font-size:18px;font-weight:800}
.wh-sum-v.g{color:var(--g600)}.wh-sum-v.o{color:var(--o500)}
.wh-sum-l{font-size:8px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.3px;margin-top:2px}

/* --- TRÆNING: Program + Sessions duo --- */
.train-duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.prog-card{background:var(--card);border:1px solid var(--cb);border-radius:14px;padding:18px;position:relative;overflow:hidden}
.prog-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--g400),var(--g300),transparent)}
.prog-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.prog-icon{width:28px;height:28px;border-radius:8px;background:var(--g50);display:flex;align-items:center;justify-content:center;font-size:13px}
.prog-title{font-size:13px;font-weight:700}
.prog-link{margin-left:auto;font-size:11px;color:var(--g600);font-weight:600;cursor:pointer}
.prog-empty{padding:24px;text-align:center}
.prog-empty-icon{font-size:36px;margin-bottom:8px}
.prog-empty-text{font-size:12px;color:var(--t4);font-weight:600;margin-bottom:12px}
.prog-assign{padding:9px 22px;border-radius:10px;font-size:12px;font-weight:700;border:none;background:var(--g600);color:#fff;cursor:pointer;font-family:inherit;transition:all .15s}
.prog-assign:hover{background:var(--g700)}
.sess-card{background:var(--card);border:1px solid var(--cb);border-radius:14px;padding:18px;position:relative;overflow:hidden}
.sess-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--o500),#f0c050,transparent)}
.sess-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.sess-icon{width:28px;height:28px;border-radius:8px;background:var(--o50);display:flex;align-items:center;justify-content:center;font-size:13px}
.sess-title{font-size:13px;font-weight:700}
.sess-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;margin-bottom:4px;transition:all .12s}
.sess-item:hover{background:var(--b50)}
.sess-date{width:70px;font-size:11px;font-weight:600;color:var(--t3)}
.sess-name{flex:1;font-size:12px;font-weight:600}
.sess-time{font-size:10px;color:var(--t4)}
.sess-tag{padding:3px 10px;border-radius:6px;font-size:9px;font-weight:700}
.sess-tag.done{background:var(--g50);color:var(--g600)}
.sess-tag.cancel{background:var(--r50);color:var(--r500)}

/* --- ERNÆRING: Calorie hero --- */
.cal-hero{background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:20px 24px;margin-bottom:14px;display:flex;align-items:center;gap:20px}
.cal-ring{width:90px;height:90px;position:relative;flex-shrink:0}
.cal-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.cal-ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.cal-ring .bg{stroke:var(--b200)}.cal-ring .fg{stroke:var(--o500)}
.cal-ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.cal-ring-v{font-size:22px;font-weight:800}
.cal-ring-l{font-size:8px;color:var(--t4)}
.cal-macros{flex:1;display:flex;flex-direction:column;gap:8px}
.cal-macro{display:flex;align-items:center;gap:8px}
.cal-m-dot{width:8px;height:8px;border-radius:3px;flex-shrink:0}
.cal-m-dot.p{background:#ef4444}.cal-m-dot.c{background:var(--g700)}.cal-m-dot.f{background:var(--o500)}.cal-m-dot.w{background:var(--blue)}
.cal-m-name{font-size:11px;font-weight:700;width:56px;color:var(--t3)}
.cal-m-track{flex:1;height:6px;background:var(--b200);border-radius:3px;overflow:hidden}
.cal-m-fill{height:100%;border-radius:3px}
.cal-m-fill.p{background:#ef4444}.cal-m-fill.c{background:var(--g700)}.cal-m-fill.f{background:var(--o500)}.cal-m-fill.w{background:var(--blue)}
.cal-m-val{font-size:11px;font-weight:700;width:65px;text-align:right;color:var(--t3)}
.cal-stats{display:flex;flex-direction:column;gap:4px;min-width:100px}
.cal-s{text-align:center;padding:8px 14px;border-radius:10px;background:var(--b50)}
.cal-s-v{font-size:16px;font-weight:800}
.cal-s-v.r{color:var(--r500)}.cal-s-v.g{color:var(--g600)}
.cal-s-l{font-size:8px;color:var(--t4);font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin-top:1px}

/* --- ERNÆRING: Split + Meals --- */
.ern-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.kost-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.kost-icon{width:28px;height:28px;border-radius:8px;background:var(--o50);display:flex;align-items:center;justify-content:center;font-size:13px}
.kost-title{font-size:13px;font-weight:700}
.kost-link{margin-left:auto;font-size:11px;color:var(--g600);font-weight:600;cursor:pointer}
.kost-plan-bar{background:var(--o50);border:1px solid rgba(232,145,58,.08);border-radius:10px;padding:10px 14px;margin-bottom:12px;font-size:11px;font-weight:600;color:var(--o600);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.meal{padding:10px 0;border-top:1px solid var(--b100)}
.meal:first-of-type{border-top:none}
.meal-label{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t4);display:flex;align-items:center;gap:4px;margin-bottom:4px}
.meal-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;background:var(--b50)}
.meal-name{font-size:12.5px;font-weight:600;flex:1}
.meal-kcal{font-size:11px;font-weight:700;color:var(--t2)}
.meal-macros{display:flex;gap:6px;font-size:9.5px;font-weight:700}
.meal-macros span.mp{color:#ef4444}.meal-macros span.mc{color:var(--g600)}.meal-macros span.mf{color:var(--o500)}
.ern-week{display:flex;gap:4px;margin-bottom:10px;padding:0 4px}
.ern-d{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;background:var(--b200);color:var(--t4)}
.ern-d.logged{background:var(--g50);color:var(--g600)}
.ern-d.today{background:var(--g600);color:#fff}
.ern-warn{background:var(--o50);border:1px solid rgba(232,145,58,.1);border-radius:10px;padding:10px 14px;font-size:11px;font-weight:600;color:var(--o600);display:flex;align-items:center;gap:6px}
.log-card{background:var(--card);border:1px solid var(--cb);border-radius:14px;padding:18px;position:relative;overflow:hidden}
.log-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),#2dd4bf,transparent)}
.log-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.log-icon{width:28px;height:28px;border-radius:8px;background:var(--teal50);display:flex;align-items:center;justify-content:center;font-size:13px}
.log-title{font-size:13px;font-weight:700}
.log-empty{padding:28px;text-align:center;color:var(--t4);font-size:12px;font-weight:600}

/* --- KALENDER --- */
.kal-card{background:var(--card);border:1px solid var(--cb);border-radius:16px;overflow:hidden}
.kal-head{padding:16px 20px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--b200)}
.kal-today{padding:6px 14px;border-radius:8px;font-size:11px;font-weight:700;border:1px solid var(--b300);background:transparent;color:var(--t2);cursor:pointer;font-family:inherit}
.kal-nav{display:flex;gap:3px}
.kal-nav-btn{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px solid var(--b200);background:transparent;color:var(--t3);font-size:14px;font-family:inherit;transition:all .12s;text-decoration:none}
.kal-nav-btn:hover{border-color:var(--b300);color:var(--t2)}
.kal-month{font-size:16px;font-weight:800;margin-left:6px}
.kal-add{margin-left:auto;padding:8px 18px;border-radius:10px;font-size:12px;font-weight:700;border:none;background:var(--g600);color:#fff;cursor:pointer;font-family:inherit;transition:all .15s}
.kal-add:hover{background:var(--g700)}
.kal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
.kal-dh{padding:10px;text-align:center;font-size:10px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.5px;background:var(--b50);border-bottom:1px solid var(--b200)}
.kal-cell{min-height:80px;padding:8px;border-right:1px solid var(--b100);border-bottom:1px solid var(--b100);font-size:12px;font-weight:600;color:var(--t3);cursor:pointer;transition:background .1s;position:relative}
.kal-cell:nth-child(7n){border-right:none}
.kal-cell:hover{background:var(--b50)}
.kal-cell.today{background:var(--g50)}
.kal-cell.today .kal-num{background:var(--g600);color:#fff;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.kal-num{font-size:12px;font-weight:700;margin-bottom:4px;color:var(--t2)}
.kal-cell.empty{background:var(--b50);opacity:.4}
.kal-cell.empty:hover{background:var(--b50)}
.kal-events{display:flex;flex-direction:column;gap:2px}
.kal-ev{padding:2px 6px;border-radius:4px;font-size:8px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kal-ev.train{background:var(--g50);color:var(--g600)}.kal-ev.check{background:var(--o50);color:var(--o600)}
.kal-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.3);backdrop-filter:blur(3px);z-index:100;display:none;align-items:center;justify-content:center}
.kal-modal-bg.show{display:flex}
.kal-modal{width:520px;max-height:85vh;background:var(--card);border-radius:20px;overflow-y:auto;box-shadow:0 24px 80px rgba(0,0,0,.18);animation:kmIn .25s ease}
@keyframes kmIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
.km-head{padding:18px 24px;border-bottom:1px solid var(--b200);display:flex;align-items:center}
.km-head h3{font-size:17px;font-weight:800;flex:1;display:flex;align-items:center;gap:6px}
.km-x{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--t3);font-size:18px;border:none;background:transparent}
.km-x:hover{background:var(--b100);color:var(--t1)}
.km-body{padding:20px 24px}
.km-sub{font-size:12px;color:var(--t3);margin-bottom:16px}
.km-types{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}
.km-type{padding:14px 16px;border-radius:12px;border:2px solid var(--b200);display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .15s}
.km-type:hover{border-color:var(--b300);background:var(--b50)}
.km-type.sel{border-color:var(--g400);background:var(--g50)}
.km-type-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.km-type-icon.train{background:var(--g50)}.km-type-icon.kost{background:var(--o50)}.km-type-icon.msg{background:var(--blue50)}.km-type-icon.res{background:var(--p50)}.km-type-icon.note{background:var(--pink50)}
.km-type-name{font-size:12px;font-weight:700}
.km-type-desc{font-size:10px;color:var(--t4);margin-top:1px}
.km-field{margin-bottom:14px}
.km-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--t4);margin-bottom:4px}
.km-input{width:100%;padding:10px 14px;border:1.5px solid var(--b200);border-radius:10px;font-family:inherit;font-size:13px;font-weight:600;transition:border-color .15s}
.km-input:focus{outline:none;border-color:var(--g400)}
.km-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.km-actions{display:flex;gap:8px;justify-content:flex-end;padding:0 24px 20px}
.km-cancel{padding:9px 18px;border-radius:10px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;border:1px solid var(--b300);background:transparent;color:var(--t2)}
.km-save{padding:9px 22px;border-radius:10px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;border:none;background:var(--g600);color:#fff}
.km-save:hover{background:var(--g700)}

/* --- FOTOS --- */
.foto-bar{display:flex;gap:4px;margin-bottom:16px;align-items:center}
.foto-f{padding:8px 16px;border-radius:8px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;border:1px solid var(--b200);background:var(--card);color:var(--t3);transition:all .12s}
.foto-f.a{background:var(--g600);color:#fff;border-color:var(--g600)}
.foto-f:hover:not(.a){border-color:var(--b300);color:var(--t2)}
.foto-compare{margin-left:auto;padding:8px 16px;border-radius:8px;font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;border:1px solid var(--b300);background:var(--card);color:var(--t2);display:flex;align-items:center;gap:5px}
.foto-compare:hover{border-color:var(--t4)}
.foto-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.foto-slot{aspect-ratio:.85;border-radius:16px;overflow:hidden;position:relative;background:var(--card);border:2px dashed var(--b300);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all .2s;color:var(--t4)}
.foto-slot:hover{border-color:var(--g400);background:var(--g50);color:var(--g600)}
.foto-slot svg{width:32px;height:32px;opacity:.4}
.foto-slot:hover svg{opacity:.7}
.foto-slot-label{font-size:12px;font-weight:700}
.foto-slot-sub{font-size:10px;color:var(--t4)}
.foto-slot.filled{border:none;background:none}
.foto-slot.filled img{width:100%;height:100%;object-fit:cover;display:block}
.foto-date{position:absolute;bottom:8px;left:8px;padding:3px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(0,0,0,.6);color:#fff}
.foto-angle{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:6px;font-size:9px;font-weight:700;background:rgba(255,255,255,.9);color:var(--t2);text-transform:uppercase;letter-spacing:.3px}
.foto-compare-area{margin-top:16px;background:var(--card);border:1px solid var(--cb);border-radius:14px;padding:18px;display:flex;align-items:center;justify-content:center;min-height:200px}
.foto-compare-hint{font-size:12px;color:var(--t4);font-weight:600;text-align:center}

/* --- NOTER --- */
.note-card{background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:20px;margin-bottom:14px;position:relative;overflow:hidden}
.note-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--p500),#a78bfa,transparent)}
.note-head{display:flex;align-items:center;gap:8px;margin-bottom:14px}
.note-icon{width:28px;height:28px;border-radius:8px;background:var(--p50);display:flex;align-items:center;justify-content:center;font-size:13px}
.note-title{font-size:13px;font-weight:700}
.note-area{width:100%;min-height:120px;padding:14px;border:1.5px solid var(--b200);border-radius:12px;font-family:inherit;font-size:13px;line-height:1.7;resize:vertical;color:var(--t1)}
.note-area:focus{outline:none;border-color:var(--p500);box-shadow:0 0 0 3px rgba(124,92,252,.08)}
.note-area::placeholder{color:var(--t4)}
.note-bottom{display:flex;align-items:center;gap:8px;margin-top:12px}
.note-cat{padding:8px 14px;border:1px solid var(--b300);border-radius:8px;font-family:inherit;font-size:12px;font-weight:600;color:var(--t2)}
.note-save{padding:8px 20px;border-radius:10px;font-size:12px;font-weight:700;border:none;background:var(--p500);color:#fff;cursor:pointer;font-family:inherit;transition:all .15s}
.note-save:hover{background:#6a48e6}
.note-item{background:var(--card);border:1px solid var(--cb);border-radius:12px;padding:14px 18px;margin-bottom:6px;transition:all .15s;cursor:pointer}
.note-item:hover{box-shadow:0 4px 12px rgba(0,0,0,.04)}
.note-item-head{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.note-item-cat{padding:3px 8px;border-radius:6px;font-size:9px;font-weight:700}
.note-item-cat.gen{background:var(--b50);color:var(--t3)}.note-item-cat.train{background:var(--g50);color:var(--g600)}.note-item-cat.kost{background:var(--o50);color:var(--o600)}.note-item-cat.checkin{background:var(--p50);color:var(--p500)}.note-item-cat.privat{background:var(--r50);color:var(--r500)}
.note-item-date{font-size:10px;color:var(--t4);margin-left:auto}
.note-item-text{font-size:12.5px;line-height:1.6;color:var(--t2)}

/* --- METRICS --- */
.met-split{display:grid;grid-template-columns:200px 1fr;gap:14px}
.met-list{display:flex;flex-direction:column;gap:4px}
.met-item{padding:12px 14px;border-radius:10px;cursor:pointer;transition:all .12s;background:var(--card);border:1px solid var(--cb);display:flex;align-items:center;gap:8px}
.met-item:hover{box-shadow:0 2px 8px rgba(0,0,0,.04)}
.met-item.a{background:var(--teal50);border-color:rgba(13,148,136,.15)}
.met-item-icon{font-size:16px}
.met-item-name{font-size:12px;font-weight:700}
.met-item-unit{font-size:10px;color:var(--t4);margin-left:auto}
.met-chart{background:var(--card);border:1px solid var(--cb);border-radius:14px;padding:20px;position:relative;overflow:hidden}
.met-chart::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),#2dd4bf,transparent)}
.met-chart-head{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.met-chart-icon{width:28px;height:28px;border-radius:8px;background:var(--teal50);display:flex;align-items:center;justify-content:center;font-size:13px}
.met-chart-title{font-size:14px;font-weight:800}
.met-chart-period{margin-left:auto;display:flex;gap:3px}
.met-per{padding:5px 11px;border-radius:7px;font-size:10px;font-weight:700;cursor:pointer;border:1px solid var(--b200);background:transparent;color:var(--t3);font-family:inherit}
.met-per.a{background:var(--teal);color:#fff;border-color:var(--teal)}
.met-chart-area{height:200px;position:relative}
.met-chart-svg{width:100%;height:100%}
.met-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--t4);background:var(--b50);border-radius:10px}
.met-empty-icon{font-size:28px;opacity:.4}
.met-empty-text{font-size:12px;font-weight:600}
.met-add{margin-top:8px;padding:10px 18px;border-radius:10px;font-size:12px;font-weight:700;border:1.5px dashed var(--b300);background:transparent;color:var(--t4);cursor:pointer;font-family:inherit;width:100%;text-align:center;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:5px}
.met-add:hover{border-color:var(--teal);color:var(--teal);background:var(--teal50)}

/* --- Responsive --- */
@media(max-width:768px){
    .pulse-row{flex-wrap:wrap}.pulse-item{min-width:calc(33%-8px)}
    .duo,.bottom-duo,.ern-split,.train-duo,.dev-bottom{grid-template-columns:1fr}
    .split{grid-template-columns:1fr;min-height:auto}
    .ci-list{border-right:none;border-bottom:1px solid var(--b200);max-height:200px}
    .met-split{grid-template-columns:1fr}
    .wg-chart{margin-left:30px}
    .km-types{grid-template-columns:1fr}
}

/* Legacy profile tabs (kept for compat) */
.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; } }


/* Legacy overblik layout (kept for backwards compat) */
.tr-ci-overblik-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; }
.tr-ci-overblik-main { min-width: 0; }
.tr-ci-overblik-sidebar { display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1024px) { .tr-ci-overblik-layout { grid-template-columns: 1fr; } }

/* Message items in sidebar */
.tr-ci-msg-item {
    display: flex;
    gap: var(--space-3);
    padding: 10px 0;
    border-bottom: 1px solid rgba(0,0,0,0.03);
}
.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;
    align-items: center;
    margin-bottom: 3px;
}
.tr-ci-msg-item__header strong {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.01em;
}
.tr-ci-msg-item__header span {
    font-size: 10px;
    font-weight: 500;
    color: var(--color-text-disabled);
    font-variant-numeric: tabular-nums;
}
.tr-ci-msg-item__content p {
    font-size: 13px;
    color: var(--color-text-tertiary);
    margin: 0;
    line-height: 1.45;
    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: var(--color-primary);
    width: 16px; height: 16px;
    border-radius: 4px;
    cursor: pointer;
}
.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 rgba(0,0,0,0.04);
}
.tr-ci-task-new .tr-ci-input {
    border-radius: 10px 0 0 10px !important;
    border-right: none !important;
    font-size: 13px !important;
    background: var(--color-bg-secondary) !important;
    border-color: transparent !important;
    transition: all 0.2s ease !important;
}
.tr-ci-task-new .tr-ci-input:focus {
    background: var(--color-bg) !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(44,61,51,0.08) !important;
}
.tr-ci-task-new .tr-btn {
    border-radius: 0 10px 10px 0 !important;
    padding: 8px 14px !important;
    min-width: 40px;
    font-size: 16px !important;
}


/* 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: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.08) transparent;
}
.tr-ci-ob-task {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: 10px 6px;
    border-radius: 8px;
    margin: 0 -6px;
    transition: background 0.15s ease;
}
.tr-ci-ob-task:hover { background: rgba(0,0,0,0.015); }
.tr-ci-ob-task--todo { }
.tr-ci-ob-task--done { opacity: 0.4; }
.tr-ci-ob-task--todo .tr-ci-ob-task__content span {
    color: var(--color-text);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.4;
}
.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: 3px;
}
.tr-ci-ob-task__content small {
    font-size: 11px;
    color: var(--color-text-disabled);
    font-weight: 500;
}
.tr-ci-ob-task__content small.tr-ci-task--overdue {
    color: #d45050;
    font-weight: 600;
    background: rgba(212,80,80,0.08);
    padding: 1px 6px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}
.tr-ci-ob-tasks-divider {
    font-size: 10px;
    font-weight: 700;
    color: var(--color-text-disabled);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 10px 0 6px;
    margin-top: var(--space-2);
    border-top: 1px solid rgba(0,0,0,0.04);
}
.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); }

/* (old Dashboard 2.0 styles removed — replaced by .trd block) */

/* ══════════════════════════════════════════════════════════
   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; }
}

/* =============================================================
   MEAL PLANNER — 2-grid Coachway-style kostplan builder
   ============================================================= */

/* ── Top bar ──────────────────────────────────────────── */
.mp-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.mp-topbar h2{font-size:20px;font-weight:800;color:var(--t1);display:flex;align-items:center;gap:10px;margin:0}
.mp-badge{font-size:10px;font-weight:700;padding:3px 10px;border-radius:20px;background:var(--g50);color:var(--g600);letter-spacing:.3px}
.mp-topbar-actions{display:flex;gap:6px;align-items:center}

/* Actions dropdown */
.mp-dd-wrap{position:relative}
.mp-dd{position:absolute;top:calc(100% + 6px);right:0;z-index:50;background:#fff;border:1.5px solid var(--b200);border-radius:12px;box-shadow:var(--shadow-lg);min-width:200px;padding:5px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:all .15s ease}
.mp-dd.open{opacity:1;visibility:visible;transform:translateY(0)}
.mp-dd button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:none;font-size:12px;font-weight:500;color:var(--t2);border-radius:6px;cursor:pointer;font-family:inherit;text-align:left;transition:background .1s}
.mp-dd button:hover{background:var(--b50)}
.mp-dd .sep{height:1px;background:var(--b200);margin:4px 8px}
.mp-dd .danger{color:var(--r500)}
.mp-dd .danger:hover{background:var(--r50)}

/* ── 2-grid layout ────────────────────────────────────── */
.mp-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}

/* ── Left panel: Recipe library ───────────────────────── */
.mp-lib{background:#fff;border-radius:14px;border:1.5px solid rgba(0,0,0,.06);box-shadow:var(--shadow-sm);overflow:hidden}
.mp-lib-head{padding:16px 18px 0;display:flex;align-items:center;justify-content:space-between}
.mp-lib-title{font-size:14px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:8px}
.mp-lib-count{font-size:10px;font-weight:600;background:var(--b100);color:var(--t3);padding:2px 8px;border-radius:20px}

/* Search */
.mp-search{padding:12px 18px 0}
.mp-search-box{display:flex;align-items:center;gap:8px;background:var(--b50);border:1.5px solid var(--b200);border-radius:8px;padding:0 12px;transition:border-color .15s,box-shadow .15s}
.mp-search-box:focus-within{border-color:var(--g300);box-shadow:0 0 0 3px rgba(45,106,63,.07)}
.mp-search-box svg{width:15px;height:15px;color:var(--t4);flex-shrink:0}
.mp-search-box input{flex:1;border:none;background:none;padding:8px 0;font-size:12.5px;font-family:inherit;color:var(--t1);outline:none}
.mp-search-box input::placeholder{color:var(--t4)}

/* Filter chips */
.mp-filters{padding:10px 18px 0;display:flex;gap:5px;flex-wrap:wrap}
.mp-chip{padding:4px 11px;border-radius:20px;font-size:10.5px;font-weight:600;border:1.5px solid var(--b200);background:#fff;color:var(--t3);cursor:pointer;transition:all .12s;user-select:none}
.mp-chip:hover{border-color:var(--b300);color:var(--t2)}
.mp-chip.active{background:var(--g700);color:#fff;border-color:var(--g700)}
.mp-active-tags{padding:6px 18px 0;display:flex;gap:4px;flex-wrap:wrap}
.mp-atag{display:inline-flex;align-items:center;gap:3px;padding:2px 8px 2px 10px;border-radius:20px;font-size:9.5px;font-weight:600;background:var(--g50);color:var(--g700);cursor:pointer;transition:background .1s}
.mp-atag:hover{background:var(--g100)}

/* Recipe cards grid */
.mp-recipes{padding:12px 14px 14px;display:grid;grid-template-columns:1fr 1fr;gap:10px;max-height:calc(100vh - 340px);overflow-y:auto}
.mp-recipes::-webkit-scrollbar{width:4px}
.mp-recipes::-webkit-scrollbar-thumb{background:var(--b200);border-radius:10px}

.mp-rcard{border-radius:10px;border:1.5px solid rgba(0,0,0,.05);overflow:hidden;cursor:pointer;transition:all .18s;background:#fff;position:relative}
.mp-rcard:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--g200)}
.mp-rcard-img{height:90px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.mp-rcard-img .mp-rcard-gradient{position:absolute;inset:0}
.mp-rcard-img .mp-rcard-emoji{font-size:32px;position:relative;z-index:1;filter:saturate(.85)}
.mp-rcard-time{position:absolute;top:6px;right:6px;z-index:2;padding:2px 7px;border-radius:5px;font-size:9.5px;font-weight:600;background:rgba(0,0,0,.45);color:#fff;backdrop-filter:blur(6px);display:flex;align-items:center;gap:3px}
.mp-rcard-diff{position:absolute;bottom:6px;left:6px;z-index:2;display:flex;gap:2px}
.mp-rcard-diff .dot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.3)}
.mp-rcard-diff .dot.on{background:#fff}
.mp-rcard-body{padding:8px 10px 10px}
.mp-rcard-name{font-size:11.5px;font-weight:700;color:var(--t1);margin-bottom:3px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-rcard-macros{display:flex;gap:6px;margin-bottom:6px}
.mp-rcard-macros span{font-size:9.5px;font-weight:600;color:var(--t3)}
.mp-rcard-macros span b{color:var(--t1);font-weight:700}
.mp-rcard-tags{display:flex;gap:3px;flex-wrap:wrap}
.mp-tag{font-size:8.5px;font-weight:600;padding:1.5px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.3px}
.mp-tag-protein{background:#e8f5e9;color:#2d6a3f}
.mp-tag-vegetarisk{background:#e8f5e9;color:#0d9488}
.mp-tag-vegan{background:#f0fdfa;color:#0d9488}
.mp-tag-glutenfri{background:#fef3e0;color:#c47a2e}
.mp-tag-laktosefri{background:#ece6ff;color:#7c5cfc}
.mp-tag-sukkerfri{background:#fce8e8;color:#d45050}
.mp-tag-high-protein{background:#e8f5e9;color:#2d6a3f}

.mp-rcard .mp-add-btn{position:absolute;bottom:8px;right:8px;width:26px;height:26px;border-radius:50%;background:var(--g600);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:15px;opacity:0;transform:scale(.7);transition:all .18s cubic-bezier(.34,1.56,.64,1);box-shadow:0 2px 6px rgba(45,106,63,.3)}
.mp-rcard:hover .mp-add-btn{opacity:1;transform:scale(1)}
.mp-rcard .mp-add-btn:hover{background:var(--g500);transform:scale(1.08)!important}

/* ── Right panel: Day planner ─────────────────────────── */
.mp-plan{background:#fff;border-radius:14px;border:1.5px solid rgba(0,0,0,.06);box-shadow:var(--shadow-sm);overflow:hidden}

/* Macro hero */
.mp-hero{padding:22px 24px;background:linear-gradient(135deg,var(--g900) 0%,var(--g700) 60%,var(--g500) 100%);color:#fff;position:relative;overflow:hidden}
.mp-hero::before{content:'';position:absolute;top:-40px;right:-20px;width:130px;height:130px;background:rgba(255,255,255,.04);border-radius:50%;pointer-events:none}
.mp-hero::after{content:'';position:absolute;bottom:-50px;right:100px;width:100px;height:100px;background:rgba(255,255,255,.025);border-radius:50%;pointer-events:none}
.mp-hero-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;margin-bottom:14px}
.mp-hero-label{font-size:13px;font-weight:600;opacity:.7}
.mp-hero-dist{padding:4px 10px;border-radius:6px;font-size:10px;font-weight:600;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.75);cursor:pointer;transition:background .12s;font-family:inherit}
.mp-hero-dist:hover{background:rgba(255,255,255,.18)}
.mp-hero-cal{text-align:center;position:relative;z-index:1;margin-bottom:16px}
.mp-hero-cal .big{font-size:34px;font-weight:800;letter-spacing:-1px;line-height:1}
.mp-hero-cal .of{font-size:13px;font-weight:400;opacity:.4;margin-left:2px}
.mp-hero-cal .unit{font-size:10.5px;opacity:.35;margin-top:2px;display:block}
.mp-hero-bars{display:flex;gap:16px;position:relative;z-index:1}
.mp-hero-bar{flex:1}
.mp-hero-bar-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.mp-hero-bar-label{font-size:10px;font-weight:600;opacity:.5;text-transform:uppercase;letter-spacing:.4px}
.mp-hero-bar-val{font-size:12px;font-weight:700}
.mp-hero-bar-track{height:6px;background:rgba(255,255,255,.12);border-radius:3px;overflow:hidden}
.mp-hero-bar-fill{height:100%;border-radius:3px;transition:width .5s ease}
.mp-hero-bar-fill.pro{background:#81c784}
.mp-hero-bar-fill.carb{background:#e8913a}
.mp-hero-bar-fill.fat{background:#d45050}

/* Meal sections */
.mp-meals{padding:4px 0;max-height:calc(100vh - 400px);overflow-y:auto}
.mp-meals::-webkit-scrollbar{width:4px}
.mp-meals::-webkit-scrollbar-thumb{background:var(--b200);border-radius:10px}
.mp-section{padding:0 16px;margin-bottom:2px}
.mp-section-head{display:flex;align-items:center;justify-content:space-between;padding:10px 0 6px;border-bottom:1px solid var(--b200);cursor:pointer;user-select:none}
.mp-section-name{font-size:13px;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:8px}
.mp-section-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px}
.mp-section-meta{display:flex;gap:10px;align-items:center;font-size:11px}
.mp-section-kcal{font-weight:700;color:var(--t2)}
.mp-section-macro{font-weight:600;color:var(--t4);font-size:10px}
.mp-section .mp-chevron{width:16px;height:16px;color:var(--t4);transition:transform .2s}
.mp-section.collapsed .mp-chevron{transform:rotate(-90deg)}
.mp-section.collapsed .mp-items{display:none}

/* Meal items */
.mp-items{padding:6px 0}
.mp-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;transition:background .12s;position:relative;margin-bottom:3px}
.mp-item:hover{background:var(--b50)}
.mp-item-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;border:1px solid rgba(0,0,0,.05)}
.mp-item-info{flex:1;min-width:0}
.mp-item-name{font-size:12px;font-weight:700;color:var(--t1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-item-cal{font-size:10.5px;font-weight:600;color:var(--t3)}
.mp-item-macros{display:flex;gap:7px;margin-top:1px}
.mp-item-macros span{font-size:9.5px;font-weight:600;color:var(--t4)}
.mp-item .mp-remove{width:24px;height:24px;border-radius:50%;border:none;background:transparent;color:var(--t4);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;transition:all .12s;font-size:14px}
.mp-item:hover .mp-remove{opacity:1}
.mp-item .mp-remove:hover{background:var(--r100);color:var(--r500)}

/* Check toggle on items */
.mp-item .mp-check{width:20px;height:20px;border-radius:50%;border:2px solid var(--b200);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;background:#fff}
.mp-item .mp-check.checked{background:var(--g600);border-color:var(--g600)}
.mp-item .mp-check.checked::after{content:'';display:block;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) translate(-1px,-1px)}
.mp-item.is-checked{opacity:.55}
.mp-item.is-checked .mp-item-name{text-decoration:line-through}

/* Add meal button */
.mp-add-meal{display:flex;align-items:center;justify-content:center;gap:4px;padding:7px;border-radius:7px;border:1.5px dashed var(--b200);background:transparent;color:var(--t4);font-size:10.5px;font-weight:600;cursor:pointer;width:100%;margin-top:3px;transition:all .12s;font-family:inherit}
.mp-add-meal:hover{border-color:var(--g300);color:var(--g600);background:var(--g50)}

/* Quick registration */
.mp-quick{margin:8px 16px;padding:14px;border:1.5px dashed var(--b200);border-radius:10px}
.mp-quick h4{font-size:12px;font-weight:700;color:var(--t2);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.mp-quick-grid{display:grid;grid-template-columns:auto 1fr 1fr 1fr 1fr auto;gap:5px;align-items:end}
.mp-quick-grid select,.mp-quick-grid input{padding:6px 8px;border:1.5px solid var(--b200);border-radius:7px;font-size:12px;font-family:inherit}
.mp-quick-grid label{font-size:10px;font-weight:600;color:var(--t3);display:block;margin-bottom:2px}

/* Notes */
.mp-notes{margin:8px 16px 14px;padding:14px;background:var(--b50);border-radius:10px}
.mp-notes h4{font-size:12px;font-weight:700;color:var(--t2);margin-bottom:8px}
.mp-notes textarea{width:100%;padding:8px 10px;border:1.5px solid var(--b200);border-radius:7px;font-size:12.5px;resize:vertical;font-family:inherit;min-height:60px}

/* Save plan */
.mp-save{margin:0 16px 14px;padding:14px;background:var(--b50);border-radius:10px}
.mp-save h4{font-size:12px;font-weight:700;color:var(--t2);margin-bottom:6px}
.mp-save-row{display:flex;gap:6px}
.mp-save-row input{flex:1;padding:7px 10px;border:1.5px solid var(--b200);border-radius:7px;font-size:12.5px;font-family:inherit}

/* Toast notification */
.mp-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--g800);color:#fff;padding:10px 20px;border-radius:8px;font-size:12px;font-weight:600;box-shadow:var(--shadow-lg);opacity:0;transition:all .22s cubic-bezier(.34,1.56,.64,1);z-index:200;pointer-events:none}
.mp-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Pulse animation on add */
@keyframes mpPulse{0%{box-shadow:0 0 0 0 rgba(45,106,63,.25)}70%{box-shadow:0 0 0 8px rgba(45,106,63,0)}100%{box-shadow:none}}
.mp-item.just-added{animation:mpPulse .5s ease}

/* ── Responsive ───────────────────────────────────────── */
@media(max-width:900px){
    .mp-grid{grid-template-columns:1fr}
    .mp-recipes{max-height:300px}
    .mp-meals{max-height:none}
}
@media(max-width:480px){
    .mp-recipes{grid-template-columns:1fr}
    .mp-quick-grid{grid-template-columns:1fr 1fr}
    .mp-hero-bars{flex-direction:column;gap:8px}
}

/* =============================================================
   MEAL PLANNER V2 — Coachway-inspired 2-panel layout
   ============================================================= */

/* ── Container ────────────────────────────────────────── */
.cw{max-width:1400px;margin:0 auto;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#1a1a1a}

/* ── Topbar ───────────────────────────────────────────── */
.cw-topbar{display:flex;align-items:center;justify-content:space-between;padding:14px 0 18px;border-bottom:1px solid #eee;margin-bottom:20px}
.cw-topbar-left{display:flex;align-items:center;gap:10px}
.cw-back{font-size:18px;text-decoration:none;color:#555;padding:4px 8px;border-radius:6px;transition:background .12s}
.cw-back:hover{background:#f5f0e8}
.cw-title{font-size:20px;font-weight:800;color:#1a1a1a;margin:0;letter-spacing:-.3px}
.cw-live-badge{background:#d4f5e2;color:#1a7a3a;font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:.2px}
.cw-topbar-right{display:flex;align-items:center;gap:8px}
.cw-select{padding:7px 12px;border:1.5px solid #e0ddd6;border-radius:8px;font-size:12px;font-family:inherit;background:#fff;color:#333;cursor:pointer}
.cw-btn{padding:8px 18px;border-radius:8px;font-size:12.5px;font-weight:600;border:none;cursor:pointer;font-family:inherit;transition:all .15s}
.cw-btn--outline{background:#fff;border:1.5px solid #ddd;color:#444}
.cw-btn--outline:hover{border-color:#bbb;background:#faf8f4}
.cw-btn--dark{background:#1a1a1a;color:#fff}
.cw-btn--dark:hover{background:#333}

/* ── Layout ───────────────────────────────────────────── */
.cw-layout{display:grid;grid-template-columns:320px 1fr;gap:24px;align-items:start}

/* ── Sidebar ──────────────────────────────────────────── */
.cw-sidebar{background:#fff;border:1px solid #eee;border-radius:14px;overflow:hidden;position:sticky;top:20px}
.cw-sidebar-head{padding:16px 18px 0;display:flex;align-items:center;justify-content:space-between}
.cw-sidebar-title{font-size:14px;font-weight:700;color:#1a1a1a}

/* Search */
.cw-search-row{display:flex;gap:6px;padding:12px 18px 0;align-items:center}
.cw-search{flex:1;display:flex;align-items:center;gap:8px;background:#f7f5f0;border:1.5px solid #e8e5de;border-radius:8px;padding:0 10px;transition:border-color .15s}
.cw-search:focus-within{border-color:#b0c8b8}
.cw-search svg{color:#aaa;flex-shrink:0}
.cw-search input{flex:1;border:none;background:none;padding:8px 0;font-size:13px;font-family:inherit;color:#1a1a1a;outline:none}
.cw-search input::placeholder{color:#aaa}
.cw-filter-btn{width:36px;height:36px;border-radius:8px;border:1.5px solid #e8e5de;background:#fff;color:#888;cursor:pointer;display:flex;align-items:center;justify-content:center;position:relative;transition:all .12s}
.cw-filter-btn:hover{border-color:#ccc;color:#555}
.cw-filter-count{position:absolute;top:-5px;right:-5px;background:#d45050;color:#fff;font-size:9px;font-weight:700;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center}

/* Filter panel */
.cw-filter-panel{max-height:0;overflow:hidden;transition:max-height .2s ease;padding:0 18px}
.cw-filter-panel.open{max-height:300px;padding:10px 18px}
.cw-filter-group{margin-bottom:8px}
.cw-filter-label{font-size:10.5px;font-weight:700;color:#888;text-transform:uppercase;letter-spacing:.4px;display:block;margin-bottom:5px}
.cw-filter-chips{display:flex;gap:4px;flex-wrap:wrap}
.cw-chip{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:600;border:1.5px solid #e8e5de;background:#fff;color:#666;cursor:pointer;transition:all .12s;user-select:none}
.cw-chip:hover{border-color:#ccc;color:#444}
.cw-chip.active{background:#1a1a1a;color:#fff;border-color:#1a1a1a}

/* Active filter chips */
.cw-active-filters{padding:4px 18px;display:flex;gap:5px;flex-wrap:wrap}
.cw-active-chip{display:inline-flex;align-items:center;gap:3px;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;background:#f7f5f0;color:#555;cursor:pointer;transition:background .1s}
.cw-active-chip:hover{background:#ede8df}

/* Recipe list */
.cw-recipe-list{max-height:calc(100vh - 260px);overflow-y:auto;padding:8px 12px 12px}
.cw-recipe-list::-webkit-scrollbar{width:4px}
.cw-recipe-list::-webkit-scrollbar-thumb{background:#ddd;border-radius:10px}

.cw-rcp{display:flex;align-items:flex-start;gap:12px;padding:12px;border-radius:10px;border:1.5px solid #f0ede8;margin-bottom:8px;transition:all .15s;position:relative;background:#fff}
.cw-rcp:hover{border-color:#d8d4cc;box-shadow:0 2px 8px rgba(0,0,0,.04)}
.cw-rcp-thumb{width:52px;height:52px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;background:#f7f5f0;border:1px solid #ede8df}
.cw-rcp-info{flex:1;min-width:0}
.cw-rcp-name{font-size:13px;font-weight:700;color:#1a1a1a;margin-bottom:3px;line-height:1.3}
.cw-rcp-meta{display:flex;gap:6px;align-items:center;margin-bottom:4px}
.cw-diff{font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px}
.cw-diff--easy{background:#d4f5e2;color:#1a7a3a}
.cw-diff--medium{background:#fef3e0;color:#c47a2e}
.cw-diff--hard{background:#fce8e8;color:#c44040}
.cw-time{font-size:11px;color:#999}
.cw-rcp-macros{display:flex;gap:8px;font-size:10.5px;font-weight:500;color:#888}
.cw-m-cal{font-weight:700;color:#555}
.cw-rcp-tags{display:flex;gap:3px;margin-top:4px;flex-wrap:wrap}
.cw-tag{font-size:9px;font-weight:600;padding:2px 7px;border-radius:4px;text-transform:capitalize}
.cw-tag--vegetarisk,.cw-tag--vegan{background:#d4f5e2;color:#1a7a3a}
.cw-tag--glutenfri{background:#fef3e0;color:#c47a2e}
.cw-tag--laktosefri{background:#ece6ff;color:#7c5cfc}
.cw-tag--sukkerfri{background:#fce8e8;color:#c44040}
.cw-tag--high-protein{background:#e0f0e8;color:#2d6a3f}
.cw-rcp-add{position:absolute;top:50%;right:12px;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:#2d6a3f;color:#fff;border:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .15s;box-shadow:0 2px 6px rgba(45,106,63,.25)}
.cw-rcp-add:hover{background:#3a8a52;transform:translateY(-50%) scale(1.08)}

/* ── Main ─────────────────────────────────────────────── */
.cw-main{min-width:0}

/* Macro overview bar */
.cw-macro-bar{display:flex;align-items:center;gap:24px;background:#fff;border:1px solid #eee;border-radius:14px;padding:20px 28px;margin-bottom:20px}
.cw-donut-wrap{position:relative;width:80px;height:80px;flex-shrink:0}
.cw-donut{width:80px;height:80px}
.cw-donut-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.cw-donut-val{font-size:16px;font-weight:800;color:#1a1a1a;display:block;line-height:1}
.cw-donut-label{font-size:10px;color:#999;display:block;margin-top:1px}
.cw-donut-target{font-size:11px;color:#999;font-weight:500;white-space:nowrap;margin-right:8px}
.cw-macro-bars{flex:1;display:flex;gap:20px}
.cw-mbar{flex:1}
.cw-mbar-head{display:flex;align-items:center;gap:6px;margin-bottom:5px}
.cw-mbar-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cw-mbar-label{font-size:12px;font-weight:600;color:#555}
.cw-mbar-val{margin-left:auto;font-size:12px;font-weight:700;color:#333}
.cw-mbar-pct{font-weight:500;color:#999;margin-left:3px}
.cw-mbar-track{height:6px;background:#f0ede8;border-radius:3px;overflow:hidden}
.cw-mbar-fill{height:100%;border-radius:3px;transition:width .4s ease}

/* ── Meal sections ────────────────────────────────────── */
.cw-section{background:#fff;border:1px solid #eee;border-radius:14px;padding:20px 24px;margin-bottom:16px}
.cw-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cw-section-left{display:flex;align-items:baseline;gap:10px}
.cw-section-title{font-size:16px;font-weight:800;color:#1a1a1a;margin:0}
.cw-section-kcal{font-size:13px;font-weight:500;color:#999}
.cw-section-add{background:none;border:none;font-size:12.5px;font-weight:600;color:#2d6a3f;cursor:pointer;padding:4px 8px;border-radius:6px;transition:background .12s;font-family:inherit}
.cw-section-add:hover{background:#e8f5e9}

/* Section macros */
.cw-section-macros{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr;gap:6px 10px;align-items:center;margin-bottom:14px}
.cw-sm{display:contents}
.cw-sm-dot{width:7px;height:7px;border-radius:50%}
.cw-sm-label{font-size:11px;font-weight:600;color:#555}
.cw-sm-val{font-size:11px;font-weight:700;color:#333}
.cw-sm-pct{font-size:11px;font-weight:500;color:#999}
.cw-sm-bar{grid-column:span 2;height:5px;background:#f0ede8;border-radius:3px;overflow:hidden}
.cw-sm-fill{height:100%;border-radius:3px;transition:width .3s}

/* Meal card grid */
.cw-meal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px}
.cw-meal-card{border-radius:12px;border:1.5px solid #f0ede8;overflow:hidden;position:relative;background:#fff;transition:all .15s}
.cw-meal-card:hover{border-color:#ddd;box-shadow:0 3px 12px rgba(0,0,0,.05)}
.cw-meal-remove{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.9);border:1px solid #eee;color:#999;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;z-index:2;transition:all .12s}
.cw-meal-remove:hover{background:#fce8e8;color:#d45050;border-color:#f5c4c4}
.cw-meal-badges{position:absolute;top:8px;left:8px;z-index:2;display:flex;gap:4px}
.cw-meal-badge{padding:3px 8px;border-radius:5px;font-size:9.5px;font-weight:700;background:rgba(255,255,255,.92);border:1px solid #eee;color:#555}
.cw-meal-img{height:120px;display:flex;align-items:center;justify-content:center;font-size:40px;background:#f9f7f3}
.cw-meal-body{padding:12px 14px 14px}
.cw-meal-name{font-size:13px;font-weight:700;color:#1a1a1a;margin-bottom:2px;line-height:1.3}
.cw-meal-cal{font-size:12px;font-weight:500;color:#999;margin-bottom:6px}
.cw-meal-macros{display:flex;gap:8px;font-size:10.5px;font-weight:600}

/* Empty section */
.cw-section-empty{padding:20px;text-align:center;border:2px dashed #e8e5de;border-radius:10px;margin-top:4px}
.cw-section-empty p{font-size:12.5px;color:#aaa;margin:0}

/* ── Responsive ───────────────────────────────────────── */
@media(max-width:960px){
    .cw-layout{grid-template-columns:1fr}
    .cw-sidebar{position:static;order:2}
    .cw-recipe-list{max-height:350px}
}
@media(max-width:600px){
    .cw-topbar{flex-direction:column;gap:10px;align-items:flex-start}
    .cw-macro-bar{flex-direction:column;gap:14px;padding:16px}
    .cw-macro-bars{flex-direction:column;gap:10px;width:100%}
    .cw-meal-grid{grid-template-columns:1fr 1fr}
    .cw-section-macros{grid-template-columns:auto 1fr}
}

/* ==========================================
   CHECK-IN V2 — Overblik timeline design
   ========================================== */

/* --- COMPACT HERO --- */
.ci-hero{
  background:linear-gradient(135deg,var(--g900) 0%,var(--g700) 60%,var(--g500) 100%);
  border-radius:18px;padding:22px 28px;color:#fff;margin-bottom:22px;
  display:flex;align-items:center;gap:18px;position:relative;overflow:hidden;
}
.ci-hero::before{content:'';position:absolute;top:-40px;right:-20px;width:140px;height:140px;background:rgba(255,255,255,.04);border-radius:50%}
.ci-hero-icon{
  width:48px;height:48px;border-radius:14px;
  background:rgba(255,255,255,.1);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;font-size:22px;
  flex-shrink:0;position:relative;z-index:1;
}
.ci-hero-text{position:relative;z-index:1}
.ci-hero-text h1{font-size:20px;font-weight:800;letter-spacing:-.2px;color:inherit}
.ci-hero-text p{font-size:12px;opacity:.5;margin-top:2px}
.ci-hero-stats{margin-left:auto;display:flex;gap:24px;position:relative;z-index:1}
.ci-hs{text-align:center}
.ci-hs-v{font-size:24px;font-weight:800;display:block}
.ci-hs-v.o{color:var(--o400)}.ci-hs-v.g{color:var(--g300)}.ci-hs-v.r{color:var(--r400)}.ci-hs-v.w{color:rgba(255,255,255,.3)}
.ci-hs-l{font-size:10px;opacity:.45;margin-top:2px;display:block}

/* --- SEARCH BAR WITH FILTER SQUARES --- */
.ci-search-bar{
  display:flex;align-items:center;background:var(--card);
  border:1px solid var(--cb);border-radius:14px;padding:6px 6px 6px 16px;
  margin-bottom:20px;gap:10px;transition:box-shadow .2s;
}
.ci-search-bar:focus-within{box-shadow:0 0 0 3px rgba(76,175,80,.1);border-color:var(--g300)}
.ci-search-bar svg{width:16px;height:16px;color:var(--t4);flex-shrink:0}
.ci-search-bar input{
  flex:1;border:none;outline:none;font-family:inherit;font-size:13px;
  font-weight:500;color:var(--t1);background:transparent;
}
.ci-search-bar input::placeholder{color:var(--t4)}
.ci-filter-squares{display:flex;gap:4px;flex-shrink:0}
.ci-fsq{
  padding:7px 14px;border-radius:8px;font-size:11px;font-weight:700;
  cursor:pointer;transition:all .15s;user-select:none;
  border:1.5px solid var(--b200);background:var(--b50);color:var(--t3);
  display:flex;align-items:center;gap:5px;white-space:nowrap;
}
.ci-fsq:hover{border-color:var(--g300);color:var(--t1);background:var(--card)}
.ci-fsq.a{border-color:var(--g500);background:var(--g50);color:var(--g600)}
.ci-fsq.a-orange{border-color:var(--o500);background:var(--o50);color:var(--o600)}
.ci-fsq.a-red{border-color:var(--r500);background:var(--r50);color:var(--r500)}
.ci-fsq .ci-fsq-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ci-fsq .ci-fsq-count{
  min-width:16px;height:16px;border-radius:4px;display:flex;align-items:center;
  justify-content:center;font-size:9.5px;font-weight:800;
  background:rgba(0,0,0,.06);
}
.ci-fsq.a .ci-fsq-count{background:rgba(45,106,63,.12)}
.ci-fsq.a-orange .ci-fsq-count{background:rgba(232,145,58,.15)}
.ci-fsq.a-red .ci-fsq-count{background:rgba(212,80,80,.12)}

/* --- UNIFIED TIMELINE --- */
.ci-timeline{position:relative;padding-left:32px}
.tr-checkin .ci-timeline::before{
  content:'';display:block;position:absolute;left:13px;top:6px;bottom:6px;width:2.5px;
  background:linear-gradient(to bottom,#4CAF50 0%,#81c784 30%,#e2ddd4 60%,#e07070 100%);
  border-radius:2px;z-index:1;
}

/* Date separator */
.ci-tl-date{
  position:relative;margin-bottom:14px;margin-top:6px;
  display:flex;align-items:center;gap:10px;
}
.ci-tl-date:first-child{margin-top:0}
.ci-tl-date-dot{
  position:absolute;left:-32px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:50%;
  background:var(--card);border:2.5px solid var(--b300);z-index:2;
  display:flex;align-items:center;justify-content:center;
}
.ci-tl-date-dot .inner{width:6px;height:6px;border-radius:50%;background:var(--t4)}
.ci-tl-date-label{
  font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;
  letter-spacing:1px;background:var(--b100);padding:0 10px 0 0;
}
.ci-tl-date-line{flex:1;height:1px;background:var(--b200)}

/* Timeline item base */
.ci-tl-item{position:relative;margin-bottom:12px}
.ci-tl-dot{
  position:absolute;left:-32px;top:20px;width:12px;height:12px;
  border-radius:50%;z-index:2;border:2.5px solid;
}

/* --- GENNEMGÅET (completed) --- */
.ci-tl-item.completed .ci-tl-dot{background:var(--g400);border-color:var(--g400);box-shadow:0 0 0 3px rgba(76,175,80,.12)}
.ci-tl-completed{
  background:var(--card);border:1px solid var(--cb);border-radius:16px;
  padding:18px 22px;transition:all .2s;cursor:pointer;
}
.ci-tl-completed:hover{box-shadow:0 6px 24px rgba(0,0,0,.06);transform:translateX(4px)}

.ci-tc-top{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.ci-tc-av{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#fff;flex-shrink:0;
  background:linear-gradient(135deg,var(--g600),var(--g400));
}
.ci-tc-name{font-size:14px;font-weight:700}
.ci-tc-meta{font-size:11.5px;color:var(--t3);margin-top:1px;display:flex;align-items:center;gap:6px}
.ci-tc-type-badge{
  display:inline-flex;padding:2px 7px;border-radius:5px;
  font-size:9.5px;font-weight:700;background:var(--g50);color:var(--g600);
  border:1px solid rgba(58,138,82,.1);
}
.ci-tc-tag{
  margin-left:auto;padding:4px 12px;border-radius:20px;font-size:10px;font-weight:700;
  display:flex;align-items:center;gap:4px;
}
.ci-tc-tag.done{background:var(--g50);color:var(--g600);border:1px solid rgba(58,138,82,.12)}
.ci-tc-tag.done::before{content:'\2713';font-weight:800}
.ci-tc-tag.pending{background:var(--o50);color:var(--o600);border:1px solid rgba(232,145,58,.12)}
.ci-tc-tag.pending::before{content:'';width:6px;height:6px;background:var(--o500);border-radius:50%;animation:ci-pulse 2s ease-in-out infinite}
.ci-tc-tag.missed{background:var(--r100);color:var(--r500);border:1px solid rgba(212,80,80,.12)}
.ci-tc-tag.missed::before{content:'\2717';font-weight:800}
@keyframes ci-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

/* Ratings row */
.ci-tc-ratings{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.ci-tc-r{
  display:flex;align-items:center;gap:4px;padding:5px 10px;
  background:var(--b50);border-radius:8px;font-size:12px;font-weight:600;
}
.ci-tc-r .emoji{font-size:15px}
.ci-tc-r .val{font-weight:800;color:var(--t1)}
.ci-tc-r .lbl{font-size:10px;color:var(--t3);margin-left:2px}

/* Answer previews */
.ci-tc-answers{display:flex;gap:8px;flex-wrap:wrap}
.ci-tc-a{
  flex:1;min-width:140px;background:var(--b50);border-radius:8px;padding:8px 10px;
  border-left:3px solid var(--g200);
}
.ci-tc-a-q{font-size:9.5px;color:var(--t4);font-weight:600;text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px}
.ci-tc-a-v{font-size:12px;font-weight:600;line-height:1.4}

/* Coach response */
.ci-tc-response{
  margin-top:12px;padding:12px 14px;border-radius:10px;
  background:linear-gradient(135deg,var(--g50),#f0faf2);
  border:1px solid rgba(58,138,82,.08);
  display:flex;gap:10px;align-items:flex-start;
}
.ci-tc-response-icon{font-size:14px;flex-shrink:0;margin-top:1px}
.ci-tc-response-text{font-size:12px;line-height:1.6;color:var(--t2)}
.ci-tc-response-label{font-size:9.5px;font-weight:700;color:var(--g600);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}

/* Review CTA inside completed card */
.ci-tc-cta{
  margin-top:12px;padding:12px 14px;border-radius:10px;
  background:var(--o50);border:1px solid rgba(232,145,58,.1);
  display:flex;align-items:center;gap:10px;
}
.ci-tc-cta-text{flex:1;font-size:12px;color:var(--o600);font-weight:600}
.ci-tc-cta-btn{
  padding:8px 18px;background:var(--g600);color:#fff;border:none;border-radius:8px;
  font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;
  transition:all .15s;white-space:nowrap;text-decoration:none;display:inline-block;
}
.ci-tc-cta-btn:hover{background:var(--g700);transform:translateY(-1px);box-shadow:0 4px 14px rgba(45,106,63,.2);color:#fff}

/* --- MANGLER (missing) --- */
.ci-tl-item.missing .ci-tl-dot{background:var(--r100);border-color:var(--r500);box-shadow:0 0 0 3px rgba(212,80,80,.1)}
.ci-tl-missing{
  background:var(--card);border:1px solid rgba(212,80,80,.1);border-radius:16px;
  padding:16px 22px;transition:all .2s;cursor:pointer;
  position:relative;overflow:hidden;
}
.ci-tl-missing::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(to bottom,var(--r500),var(--r400));border-radius:16px 0 0 16px;
}
.ci-tl-missing:hover{box-shadow:0 6px 24px rgba(212,80,80,.08);transform:translateX(4px)}
.ci-tm-body{display:flex;align-items:center;gap:14px}
.ci-tm-av{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;flex-shrink:0;
  background:var(--r100);color:var(--r500);border:1.5px dashed var(--r500);
}
.ci-tm-info{flex:1}
.ci-tm-name{font-size:14px;font-weight:700}
.ci-tm-detail{font-size:12px;color:var(--t3);margin-top:2px;line-height:1.5}
.ci-tm-detail strong{color:var(--r500);font-weight:700}
.ci-tm-actions{display:flex;gap:8px;align-items:center}
.ci-tm-btn{
  padding:8px 16px;border-radius:8px;font-size:11.5px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:all .15s;border:none;
}
.ci-tm-btn.primary{background:var(--g600);color:#fff}
.ci-tm-btn.primary:hover{background:var(--g700);transform:translateY(-1px)}
.ci-tm-btn.secondary{background:transparent;color:var(--t2);border:1px solid var(--b300)}
.ci-tm-btn.secondary:hover{background:var(--b50)}

/* --- PENDING (awaiting review) --- */
.ci-tl-item.pending .ci-tl-dot{background:var(--o100);border-color:var(--o500);box-shadow:0 0 0 3px rgba(232,145,58,.1)}

/* --- HEATMAP SECTION --- */
.ci-section-header{display:flex;align-items:center;gap:8px;margin:28px 0 14px}
.ci-section-header h2{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
.ci-section-header a{margin-left:auto;font-size:12px;color:var(--g600);font-weight:600;cursor:pointer;text-decoration:none}

.ci-heatmap-card{
  background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:22px 24px;margin-bottom:24px;
}
.ci-hm-stats{display:flex;gap:10px;margin-bottom:18px}
.ci-hm-stat{flex:1;text-align:center;padding:12px;border-radius:12px;background:var(--b50)}
.ci-hm-stat-v{font-size:22px;font-weight:800;letter-spacing:-.3px}
.ci-hm-stat-v.g{color:var(--g600)}.ci-hm-stat-v.o{color:var(--o500)}.ci-hm-stat-v.r{color:var(--r500)}
.ci-hm-stat-l{font-size:10px;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.3px;margin-top:3px}

.ci-hm-row{display:grid;grid-template-columns:40px repeat(7,1fr);gap:4px;align-items:center;margin-bottom:4px}
.ci-hm-row-label{font-size:9px;font-weight:600;color:var(--t4);text-align:right;padding-right:6px}
.ci-hm-day{aspect-ratio:1;border-radius:6px;transition:all .2s;cursor:default}
.ci-hm-day.empty{background:var(--b100);border:1px solid var(--b200)}
.ci-hm-day.submitted{background:var(--g100);border:1px solid var(--g200)}
.ci-hm-day.reviewed{background:var(--g400);border:1px solid var(--g500)}
.ci-hm-day.missed{background:var(--r100);border:1px solid rgba(212,80,80,.15)}
.ci-hm-day.pe{background:var(--o100);border:1px solid rgba(232,145,58,.2)}
.ci-hm-day.today{box-shadow:0 0 0 2px var(--g600);z-index:1}
.ci-hm-day:hover{transform:scale(1.15);z-index:2}

.ci-hm-legend{display:flex;gap:14px;justify-content:center;padding-top:14px;border-top:1px solid var(--b100)}
.ci-hm-leg{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:600;color:var(--t3)}
.ci-hm-leg-dot{width:12px;height:12px;border-radius:4px}
.ci-hm-leg-dot.re{background:var(--g400)}.ci-hm-leg-dot.su{background:var(--g100)}.ci-hm-leg-dot.pend{background:var(--o100);border:1px solid rgba(232,145,58,.2)}.ci-hm-leg-dot.mi{background:var(--r100);border:1px solid rgba(212,80,80,.15)}.ci-hm-leg-dot.em{background:var(--b100);border:1px solid var(--b200)}

/* --- TEMPLATES --- */
.ci-tpl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ci-tpl-card{
  background:var(--card);border:1px solid var(--cb);border-radius:16px;
  overflow:hidden;transition:all .25s;cursor:pointer;position:relative;text-decoration:none;color:inherit;display:block;
}
.ci-tpl-card:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,.07)}
.ci-tpl-top{padding:20px 18px 16px;position:relative}
.ci-tpl-card.active .ci-tpl-top{background:linear-gradient(135deg,var(--g50),#f0faf2)}
.ci-tpl-card.draft .ci-tpl-top{background:var(--b50)}
.ci-tpl-emoji{font-size:28px;margin-bottom:8px;display:block}
.ci-tpl-name{font-size:14px;font-weight:700;margin-bottom:3px}
.ci-tpl-desc{font-size:11.5px;color:var(--t3);line-height:1.5}
.ci-tpl-bottom{padding:12px 18px;border-top:1px solid var(--b100);display:flex;align-items:center;gap:8px}
.ci-tpl-meta{font-size:10.5px;color:var(--t3);display:flex;align-items:center;gap:4px}
.ci-tpl-meta b{color:var(--t2);font-weight:600}
.ci-tpl-status{margin-left:auto;padding:3px 10px;border-radius:20px;font-size:10px;font-weight:700}
.ci-tpl-status.active{background:var(--g50);color:var(--g600);border:1px solid rgba(58,138,82,.12)}
.ci-tpl-status.draft{background:var(--b100);color:var(--t3);border:1px solid var(--b300)}
.ci-tpl-assigned{position:absolute;top:12px;right:12px;display:flex}
.ci-tpl-assigned-av{
  width:24px;height:24px;border-radius:50%;border:2px solid var(--card);
  display:flex;align-items:center;justify-content:center;
  font-size:8px;font-weight:700;color:#fff;margin-left:-6px;
  background:linear-gradient(135deg,var(--g600),var(--g400));
}
.ci-tpl-assigned-av:first-child{margin-left:0}
.ci-tpl-add{
  border:2px dashed var(--b300);background:transparent;border-radius:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:32px;cursor:pointer;transition:all .2s;min-height:180px;
}
.ci-tpl-add:hover{border-color:var(--g400);background:var(--g50)}
.ci-tpl-add-icon{
  width:44px;height:44px;border-radius:12px;background:var(--b100);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--t4);margin-bottom:8px;transition:all .2s;
}
.ci-tpl-add:hover .ci-tpl-add-icon{background:var(--g100);color:var(--g600)}
.ci-tpl-add-text{font-size:12.5px;font-weight:600;color:var(--t3)}
.ci-tpl-add:hover .ci-tpl-add-text{color:var(--g600)}

/* ==========================================
   BOOKING V2 — Timeline + Calendar design
   ========================================== */
.bk2-hero{background:linear-gradient(135deg,var(--g900) 0%,var(--g700) 60%,var(--g500) 100%);border-radius:18px;padding:22px 28px;color:#fff;margin-bottom:22px;display:flex;align-items:center;gap:18px;position:relative;overflow:hidden}
.bk2-hero::before{content:'';position:absolute;top:-40px;right:-20px;width:140px;height:140px;background:rgba(255,255,255,.04);border-radius:50%}
.bk2-hero-icon{width:48px;height:48px;border-radius:14px;background:rgba(255,255,255,.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;position:relative;z-index:1}
.bk2-hero-text{position:relative;z-index:1}
.bk2-hero-text h1{font-size:20px;font-weight:800;letter-spacing:-.2px;color:inherit}
.bk2-hero-text p{font-size:12px;opacity:.5;margin-top:2px}
.bk2-hero-stats{margin-left:auto;display:flex;gap:24px;position:relative;z-index:1}
.bk2-hs{text-align:center}.bk2-hs-v{font-size:24px;font-weight:800;display:block}
.bk2-hs-v.o{color:var(--o400)}.bk2-hs-v.g{color:var(--g300)}.bk2-hs-v.b{color:#93c5fd}.bk2-hs-v.w{color:rgba(255,255,255,.3)}
.bk2-hs-l{font-size:10px;opacity:.45;margin-top:2px;display:block}
.bk2-search{display:flex;align-items:center;background:var(--card);border:1px solid var(--cb);border-radius:14px;padding:6px 6px 6px 16px;margin-bottom:20px;gap:10px;transition:box-shadow .2s}
.bk2-search:focus-within{box-shadow:0 0 0 3px rgba(76,175,80,.1);border-color:var(--g300)}
.bk2-search svg{width:16px;height:16px;color:var(--t4);flex-shrink:0}
.bk2-search input{flex:1;border:none;outline:none;font-family:inherit;font-size:13px;font-weight:500;color:var(--t1);background:transparent;min-width:0}
.bk2-search input::placeholder{color:var(--t4)}
.bk2-filters{display:flex;gap:4px;flex-shrink:0}
.bk2-fsq{padding:7px 14px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;transition:all .15s;user-select:none;border:1.5px solid var(--b200);background:var(--b50);color:var(--t3);display:flex;align-items:center;gap:5px;white-space:nowrap}
.bk2-fsq:hover{border-color:var(--g300);color:var(--t1);background:var(--card)}
.bk2-fsq.a{border-color:var(--g500);background:var(--g50);color:var(--g600)}
.bk2-fsq.a-orange{border-color:var(--o500);background:var(--o50);color:var(--o600)}
.bk2-fsq.a-blue{border-color:var(--bl500);background:var(--bl50);color:var(--bl500)}
.bk2-fsq.a-green{border-color:var(--g500);background:var(--g50);color:var(--g600)}
.bk2-fsq .bk2-fsq-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.bk2-fsq .bk2-fsq-count{min-width:16px;height:16px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9.5px;font-weight:800;background:rgba(0,0,0,.06)}
.bk2-vsep{width:1px;height:24px;background:var(--b200);flex-shrink:0;margin:0 2px}
.bk2-vtog{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;flex-shrink:0;border:1.5px solid var(--b200);background:var(--b50);color:var(--t4)}
.bk2-vtog:hover{border-color:var(--g300);color:var(--t1)}
.bk2-vtog.a{border-color:var(--g500);background:var(--g50);color:var(--g600)}
.bk2-vtog svg{width:16px;height:16px}
.bk2-tl{position:relative;padding-left:32px}
.tr-bookings .bk2-tl::before{content:'';display:block;position:absolute;left:13px;top:6px;bottom:6px;width:2.5px;background:linear-gradient(to bottom,#4CAF50 0%,#e2ddd4 50%,#ece5d8 100%);border-radius:2px;z-index:1}
.bk2-tl-date{position:relative;margin-bottom:14px;margin-top:6px;display:flex;align-items:center;gap:10px}
.bk2-tl-date:first-child{margin-top:0}
.bk2-tl-date-dot{position:absolute;left:-32px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;background:var(--card);border:2.5px solid var(--b300);z-index:2;display:flex;align-items:center;justify-content:center}
.bk2-tl-date-dot .inner{width:6px;height:6px;border-radius:50%;background:var(--t4)}
.bk2-tl-date-label{font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1px;background:var(--b100);padding:0 10px 0 0}
.bk2-tl-date-line{flex:1;height:1px;background:var(--b200)}
.bk2-tl-item{position:relative;margin-bottom:12px}
.bk2-tl-dot{position:absolute;left:-32px;top:20px;width:12px;height:12px;border-radius:50%;z-index:2;border:2.5px solid}
.bk2-tl-item.pending .bk2-tl-dot{background:var(--o100);border-color:var(--o500);box-shadow:0 0 0 3px rgba(232,145,58,.1)}
.bk2-tl-item.confirmed .bk2-tl-dot{background:var(--bl100);border-color:var(--bl500);box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.bk2-tl-item.done .bk2-tl-dot{background:var(--g400);border-color:var(--g400);box-shadow:0 0 0 3px rgba(76,175,80,.12)}
.bk2-tl-item.cancelled .bk2-tl-dot{background:var(--r100);border-color:var(--r500);box-shadow:0 0 0 3px rgba(212,80,80,.1)}
.bk2-card{background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:18px 22px;transition:all .2s;cursor:pointer;position:relative;overflow:hidden}
.bk2-card:hover{box-shadow:0 6px 24px rgba(0,0,0,.06);transform:translateX(4px)}
.bk2-card.has-accent::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:16px 0 0 16px}
.bk2-tl-item.pending .bk2-card::before{background:linear-gradient(to bottom,var(--o500),var(--o400))}
.bk2-tl-item.cancelled .bk2-card::before{background:linear-gradient(to bottom,var(--r500),var(--r400))}
.bk2-top{display:flex;align-items:center;gap:14px}
.bk2-time-block{min-width:56px;text-align:center;padding:8px 10px;border-radius:12px;background:var(--b50);flex-shrink:0}
.bk2-time-h{font-size:16px;font-weight:800;letter-spacing:-.3px}
.bk2-time-range{font-size:9.5px;color:var(--t3);font-weight:600;margin-top:1px}
.bk2-av{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:800;color:#fff;flex-shrink:0}
.bk2-av.green{background:linear-gradient(135deg,var(--g600),var(--g400))}
.bk2-name{font-size:14px;font-weight:700}
.bk2-meta{font-size:11.5px;color:var(--t3);margin-top:1px;display:flex;align-items:center;gap:6px}
.bk2-type-badge{display:inline-flex;padding:2px 7px;border-radius:5px;font-size:9.5px;font-weight:700}
.bk2-type-badge.pt{background:var(--g50);color:var(--g600);border:1px solid rgba(58,138,82,.1)}
.bk2-type-badge.online{background:var(--bl50);color:var(--bl500);border:1px solid rgba(59,130,246,.1)}
.bk2-tag{margin-left:auto;padding:5px 14px;border-radius:20px;font-size:10.5px;font-weight:700;display:flex;align-items:center;gap:5px}
.bk2-tag.pending{background:var(--o50);color:var(--o600);border:1px solid rgba(232,145,58,.12)}
.bk2-tag.pending::before{content:'';width:6px;height:6px;background:var(--o500);border-radius:50%;animation:ci-pulse 2s ease-in-out infinite}
.bk2-tag.confirmed{background:var(--bl50);color:var(--bl500);border:1px solid rgba(59,130,246,.12)}
.bk2-tag.confirmed::before{content:'\2713';font-weight:800}
.bk2-tag.done{background:var(--g50);color:var(--g600);border:1px solid rgba(58,138,82,.12)}
.bk2-tag.done::before{content:'\2713';font-weight:800}
.bk2-tag.cancelled{background:var(--r100);color:var(--r500);border:1px solid rgba(212,80,80,.12);text-decoration:line-through}
.bk2-cta{margin-top:14px;padding:12px 14px;border-radius:10px;display:flex;align-items:center;gap:10px}
.bk2-cta.orange{background:var(--o50);border:1px solid rgba(232,145,58,.1)}
.bk2-cta-text{flex:1;font-size:12px;font-weight:600}
.bk2-cta.orange .bk2-cta-text{color:var(--o600)}
.bk2-btn{padding:8px 18px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;border:none;text-decoration:none;display:inline-block}
.bk2-btn.primary{background:var(--g600);color:#fff}
.bk2-btn.primary:hover{background:var(--g700);transform:translateY(-1px);box-shadow:0 4px 14px rgba(45,106,63,.2)}
.bk2-btn.danger{background:transparent;color:var(--r500);border:1px solid rgba(212,80,80,.2)}
.bk2-btn.danger:hover{background:var(--r50)}
.bk2-details{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.bk2-detail{flex:1;min-width:100px;background:var(--b50);border-radius:8px;padding:8px 10px;text-align:center}
.bk2-detail-v{font-size:14px;font-weight:800}
.bk2-detail-l{font-size:9.5px;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.3px;margin-top:2px}
.bk2-notes{margin-top:12px;padding:12px 14px;border-radius:10px;background:linear-gradient(135deg,var(--g50),#f0faf2);border:1px solid rgba(58,138,82,.08);display:flex;gap:10px;align-items:flex-start}
.bk2-notes-icon{font-size:14px;flex-shrink:0;margin-top:1px}
.bk2-notes-text{font-size:12px;line-height:1.6;color:var(--t2)}
.bk2-notes-label{font-size:9.5px;font-weight:700;color:var(--g600);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.bk2-cal-layout{display:grid;grid-template-columns:1fr 320px;gap:18px}
.bk2-cal-header{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.bk2-cal-header h3{font-size:16px;font-weight:800;min-width:160px}
.bk2-cal-nav{width:32px;height:32px;border-radius:8px;border:1px solid var(--b300);display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--card);color:var(--t3);transition:all .15s;font-size:14px;text-decoration:none}
.bk2-cal-nav:hover{border-color:var(--g400);color:var(--g600);background:var(--g50)}
.bk2-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:16px}
.bk2-cal-dh{text-align:center;font-size:10px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.5px;padding:8px 0}
.bk2-cal-cell{min-height:80px;border-radius:10px;padding:6px 8px;position:relative;cursor:pointer;transition:all .15s;border:1.5px solid transparent;text-decoration:none;color:inherit;display:block}
.bk2-cal-cell:hover{background:var(--b50);border-color:var(--b300)}
.bk2-cal-cell.today{background:var(--g50);border-color:rgba(58,138,82,.15)}
.bk2-cal-cell.selected{border-color:var(--g500);background:var(--g50);box-shadow:0 0 0 3px rgba(76,175,80,.1)}
.bk2-cal-cell.empty{opacity:.3;cursor:default}
.bk2-cal-cell.empty:hover{background:transparent;border-color:transparent}
.bk2-cal-num{font-size:11px;font-weight:700;color:var(--t2);margin-bottom:4px}
.bk2-cal-cell.today .bk2-cal-num{display:inline-flex;width:22px;height:22px;border-radius:50%;background:var(--g600);color:#fff;align-items:center;justify-content:center}
.bk2-cal-ev{padding:3px 6px;border-radius:5px;font-size:9px;font-weight:700;margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk2-cal-ev.ev-pending{background:var(--o50);color:var(--o600);border-left:2px solid var(--o500)}
.bk2-cal-ev.ev-confirmed{background:var(--bl50);color:var(--bl500);border-left:2px solid var(--bl500)}
.bk2-cal-ev.ev-done{background:var(--g50);color:var(--g600);border-left:2px solid var(--g400)}
.bk2-dp{background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:22px;align-self:start;position:sticky;top:0}
.bk2-dp-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 10px;text-align:center;color:var(--t4)}
.bk2-dp-empty-icon{font-size:36px;margin-bottom:10px;opacity:.4}
.bk2-dp-empty-text{font-size:13px;font-weight:600}
.bk2-dp-empty-sub{font-size:11px;color:var(--t4);margin-top:4px}
.bk2-dp-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.bk2-dp-badge{width:48px;height:52px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;flex-shrink:0;background:linear-gradient(135deg,var(--g600),var(--g400));color:#fff}
.bk2-dp-badge-day{font-size:20px;font-weight:800;line-height:1}
.bk2-dp-badge-month{font-size:9px;font-weight:700;text-transform:uppercase;opacity:.7;margin-top:1px}
.bk2-dp-label{font-size:15px;font-weight:800}
.bk2-dp-sub{font-size:11px;color:var(--t3);margin-top:1px}
.bk2-dp-count{margin-left:auto;padding:3px 10px;border-radius:20px;font-size:10.5px;font-weight:700;background:var(--g50);color:var(--g600);border:1px solid rgba(58,138,82,.12)}
.bk2-dp-divider{height:1px;background:var(--b200);margin:0 0 14px}
.bk2-dp-booking{padding:14px;border-radius:12px;margin-bottom:8px;border:1px solid var(--cb);transition:all .2s;cursor:pointer}
.bk2-dp-booking:hover{box-shadow:0 4px 16px rgba(0,0,0,.05);transform:translateX(3px)}
.bk2-dp-bk-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bk2-dp-bk-time{font-size:14px;font-weight:800;color:var(--g600);min-width:44px}
.bk2-dp-bk-av{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;background:linear-gradient(135deg,var(--g600),var(--g400))}
.bk2-dp-bk-name{font-size:13px;font-weight:700}
.bk2-dp-bk-type{font-size:10.5px;color:var(--t3);margin-top:1px}
.bk2-dp-bk-tag{margin-left:auto;padding:3px 10px;border-radius:20px;font-size:9.5px;font-weight:700;display:flex;align-items:center;gap:4px}
.bk2-dp-bk-tag.pending{background:var(--o50);color:var(--o600);border:1px solid rgba(232,145,58,.12)}
.bk2-dp-bk-tag.confirmed{background:var(--bl50);color:var(--bl500);border:1px solid rgba(59,130,246,.12)}
.bk2-dp-bk-tag.done{background:var(--g50);color:var(--g600);border:1px solid rgba(58,138,82,.12)}
.bk2-dp-bk-actions{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--b100)}
.bk2-dp-bk-btn{padding:6px 14px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;border:none}
.bk2-dp-bk-btn.primary{background:var(--g600);color:#fff}
.bk2-dp-bk-btn.primary:hover{background:var(--g700)}
.bk2-dp-bk-btn.danger{background:transparent;color:var(--r500);border:1px solid rgba(212,80,80,.2)}
.bk2-dp-bk-note{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--b50);border-left:3px solid var(--g200);font-size:11px;color:var(--t2);line-height:1.5}
.bk2-sec-header{display:flex;align-items:center;gap:8px;margin:28px 0 14px}
.bk2-sec-header h2{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
.bk2-sec-header a{margin-left:auto;font-size:12px;color:var(--g600);font-weight:600;cursor:pointer;text-decoration:none}
.bk2-avail{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.bk2-avail-day{background:var(--card);border:1px solid var(--cb);border-radius:14px;padding:14px 10px;text-align:center;transition:all .2s;cursor:pointer}
.bk2-avail-day:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.05)}
.bk2-avail-day.today{border-color:rgba(58,138,82,.2);background:var(--g50)}
.bk2-avail-day.off{opacity:.4}
.bk2-avail-day-name{font-size:9px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.5px}
.bk2-avail-day-num{font-size:18px;font-weight:800;margin:4px 0}
.bk2-avail-day.today .bk2-avail-day-num{color:var(--g600)}
.bk2-avail-slots{font-size:10px;color:var(--t3);font-weight:600}
.bk2-avail-slots.has{color:var(--g600)}
.bk2-avail-bar{height:4px;border-radius:2px;background:var(--b200);margin-top:8px;overflow:hidden}
.bk2-avail-bar-fill{height:100%;border-radius:2px;background:var(--g400)}
.bk2-stats{background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:22px 24px}
.bk2-stats-row{display:flex;gap:10px}
.bk2-stat{flex:1;text-align:center;padding:14px;border-radius:12px;background:var(--b50)}
.bk2-stat-v{font-size:24px;font-weight:800;letter-spacing:-.3px}
.bk2-stat-v.g{color:var(--g600)}.bk2-stat-v.o{color:var(--o500)}.bk2-stat-v.b{color:var(--bl500)}.bk2-stat-v.r{color:var(--r500)}
.bk2-stat-l{font-size:10px;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.3px;margin-top:3px}
@media(max-width:768px){.bk2-hero{flex-direction:column;align-items:flex-start;gap:12px}.bk2-hero-stats{margin-left:0;gap:16px}.bk2-search{flex-direction:column;align-items:stretch;padding:10px}.bk2-filters{justify-content:center;flex-wrap:wrap}.bk2-cal-layout{grid-template-columns:1fr}.bk2-avail{grid-template-columns:repeat(4,1fr)}.bk2-stats-row{flex-wrap:wrap}.bk2-stat{min-width:calc(50% - 5px)}.bk2-top{flex-wrap:wrap}}

/* Inline review form */
.ci-review-form{margin-top:12px;display:none}
.ci-review-form.open{display:block}
.ci-review-form textarea{
  width:100%;border:1px solid var(--b300);border-radius:10px;padding:10px 12px;
  font-family:inherit;font-size:12px;resize:vertical;min-height:60px;
  background:var(--b50);color:var(--t1);outline:none;
}
.ci-review-form textarea:focus{border-color:var(--g400);box-shadow:0 0 0 3px rgba(76,175,80,.1)}
.ci-review-form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:8px}

/* Responsive */
@media(max-width:768px){
  .ci-hero{flex-direction:column;align-items:flex-start;gap:12px}
  .ci-hero-stats{margin-left:0;gap:16px}
  .ci-search-bar{flex-direction:column;align-items:stretch;padding:10px}
  .ci-filter-squares{justify-content:center}
  .ci-tm-body{flex-direction:column;align-items:flex-start;gap:10px}
  .ci-tm-actions{width:100%}
  .ci-hm-stats{flex-wrap:wrap}
  .ci-hm-stat{min-width:calc(50% - 5px)}
  .ci-tpl-grid{grid-template-columns:1fr}
  .ci-tc-top{flex-wrap:wrap}
}

/* ==========================================
   BOOKING V2 — Timeline + Calendar design
   ========================================== */

/* --- Hero --- */
.bk2-hero{
  background:linear-gradient(135deg,var(--g900) 0%,var(--g700) 60%,var(--g500) 100%);
  border-radius:18px;padding:22px 28px;color:#fff;margin-bottom:22px;
  display:flex;align-items:center;gap:18px;position:relative;overflow:hidden;
}
.bk2-hero::before{content:'';position:absolute;top:-40px;right:-20px;width:140px;height:140px;background:rgba(255,255,255,.04);border-radius:50%}
.bk2-hero-icon{
  width:48px;height:48px;border-radius:14px;
  background:rgba(255,255,255,.1);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;font-size:22px;
  flex-shrink:0;position:relative;z-index:1;
}
.bk2-hero-text{position:relative;z-index:1}
.bk2-hero-text h1{font-size:20px;font-weight:800;letter-spacing:-.2px;color:inherit}
.bk2-hero-text p{font-size:12px;opacity:.5;margin-top:2px}
.bk2-hero-stats{margin-left:auto;display:flex;gap:24px;position:relative;z-index:1}
.bk2-hs{text-align:center}
.bk2-hs-v{font-size:24px;font-weight:800;display:block}
.bk2-hs-v.o{color:var(--o400)}.bk2-hs-v.g{color:var(--g300)}.bk2-hs-v.b{color:#93c5fd}.bk2-hs-v.w{color:rgba(255,255,255,.3)}
.bk2-hs-l{font-size:10px;opacity:.45;margin-top:2px;display:block}

/* --- Search + filters + view toggle --- */
.bk2-search{
  display:flex;align-items:center;background:var(--card);
  border:1px solid var(--cb);border-radius:14px;padding:6px 6px 6px 16px;
  margin-bottom:20px;gap:10px;transition:box-shadow .2s;
}
.bk2-search:focus-within{box-shadow:0 0 0 3px rgba(76,175,80,.1);border-color:var(--g300)}
.bk2-search svg.bk2-s-icon{width:16px;height:16px;color:var(--t4);flex-shrink:0}
.bk2-search input{
  flex:1;border:none;outline:none;font-family:inherit;font-size:13px;
  font-weight:500;color:var(--t1);background:transparent;min-width:0;
}
.bk2-search input::placeholder{color:var(--t4)}
.bk2-filters{display:flex;gap:4px;flex-shrink:0}
.bk2-fsq{
  padding:7px 14px;border-radius:8px;font-size:11px;font-weight:700;
  cursor:pointer;transition:all .15s;user-select:none;
  border:1.5px solid var(--b200);background:var(--b50);color:var(--t3);
  display:flex;align-items:center;gap:5px;white-space:nowrap;
}
.bk2-fsq:hover{border-color:var(--g300);color:var(--t1);background:var(--card)}
.bk2-fsq.a{border-color:var(--g500);background:var(--g50);color:var(--g600)}
.bk2-fsq.a-orange{border-color:var(--o500);background:var(--o50);color:var(--o600)}
.bk2-fsq.a-blue{border-color:var(--bl500);background:var(--bl50);color:var(--bl500)}
.bk2-fsq.a-green{border-color:var(--g500);background:var(--g50);color:var(--g600)}
.bk2-fsq .bk2-fsq-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.bk2-fsq .bk2-fsq-count{
  min-width:16px;height:16px;border-radius:4px;display:flex;align-items:center;
  justify-content:center;font-size:9.5px;font-weight:800;background:rgba(0,0,0,.06);
}
.bk2-vsep{width:1px;height:24px;background:var(--b200);flex-shrink:0;margin:0 2px}
.bk2-vtog{
  width:34px;height:34px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;transition:all .15s;flex-shrink:0;
  border:1.5px solid var(--b200);background:var(--b50);color:var(--t4);
}
.bk2-vtog:hover{border-color:var(--g300);color:var(--t1)}
.bk2-vtog.a{border-color:var(--g500);background:var(--g50);color:var(--g600)}
.bk2-vtog svg{width:16px;height:16px}

/* --- Timeline --- */
.bk2-tl{position:relative;padding-left:32px}
.tr-bookings .bk2-tl::before{
  content:'';display:block;position:absolute;left:13px;top:6px;bottom:6px;width:2.5px;
  background:linear-gradient(to bottom,#4CAF50 0%,#e2ddd4 50%,#ece5d8 100%);
  border-radius:2px;z-index:1;
}
.bk2-tl-date{position:relative;margin-bottom:14px;margin-top:6px;display:flex;align-items:center;gap:10px}
.bk2-tl-date:first-child{margin-top:0}
.bk2-tl-date-dot{
  position:absolute;left:-32px;top:50%;transform:translateY(-50%);
  width:14px;height:14px;border-radius:50%;
  background:var(--card);border:2.5px solid var(--b300);z-index:2;
  display:flex;align-items:center;justify-content:center;
}
.bk2-tl-date-dot .inner{width:6px;height:6px;border-radius:50%;background:var(--t4)}
.bk2-tl-date-label{
  font-size:11px;font-weight:700;color:var(--t3);text-transform:uppercase;
  letter-spacing:1px;padding:0 10px 0 0;
}
.bk2-tl-date-line{flex:1;height:1px;background:var(--b200)}
.bk2-tl-item{position:relative;margin-bottom:12px}
.bk2-tl-dot{
  position:absolute;left:-32px;top:20px;width:12px;height:12px;
  border-radius:50%;z-index:2;border:2.5px solid;
}
.bk2-tl-item.pending .bk2-tl-dot{background:var(--o100);border-color:var(--o500);box-shadow:0 0 0 3px rgba(232,145,58,.1)}
.bk2-tl-item.confirmed .bk2-tl-dot{background:var(--bl100);border-color:var(--bl500);box-shadow:0 0 0 3px rgba(59,130,246,.1)}
.bk2-tl-item.done .bk2-tl-dot{background:var(--g400);border-color:var(--g400);box-shadow:0 0 0 3px rgba(76,175,80,.12)}
.bk2-tl-item.cancelled .bk2-tl-dot{background:var(--r100);border-color:var(--r500);box-shadow:0 0 0 3px rgba(212,80,80,.1)}

/* --- Booking card --- */
.bk2-card{
  background:var(--card);border:1px solid var(--cb);border-radius:16px;
  padding:18px 22px;transition:all .2s;cursor:pointer;position:relative;overflow:hidden;
}
.bk2-card:hover{box-shadow:0 6px 24px rgba(0,0,0,.06);transform:translateX(4px)}
.bk2-card.has-accent::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:16px 0 0 16px}
.bk2-tl-item.pending .bk2-card::before{background:linear-gradient(to bottom,var(--o500),var(--o400))}
.bk2-tl-item.cancelled .bk2-card::before{background:linear-gradient(to bottom,var(--r500),var(--r400))}

.bk2-top{display:flex;align-items:center;gap:14px}
.bk2-time-block{
  min-width:56px;text-align:center;padding:8px 10px;border-radius:12px;
  background:var(--b50);flex-shrink:0;
}
.bk2-time-h{font-size:16px;font-weight:800;letter-spacing:-.3px}
.bk2-time-range{font-size:9.5px;color:var(--t3);font-weight:600;margin-top:1px}
.bk2-av{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#fff;flex-shrink:0;
}
.bk2-av.green{background:linear-gradient(135deg,var(--g600),var(--g400))}
.bk2-name{font-size:14px;font-weight:700}
.bk2-meta{font-size:11.5px;color:var(--t3);margin-top:1px;display:flex;align-items:center;gap:6px}
.bk2-type-badge{display:inline-flex;padding:2px 7px;border-radius:5px;font-size:9.5px;font-weight:700}
.bk2-type-badge.pt{background:var(--g50);color:var(--g600);border:1px solid rgba(58,138,82,.1)}
.bk2-type-badge.online{background:var(--bl50);color:var(--bl500);border:1px solid rgba(59,130,246,.1)}
.bk2-tag{
  margin-left:auto;padding:5px 14px;border-radius:20px;font-size:10.5px;font-weight:700;
  display:flex;align-items:center;gap:5px;
}
.bk2-tag.pending{background:var(--o50);color:var(--o600);border:1px solid rgba(232,145,58,.12)}
.bk2-tag.pending::before{content:'';width:6px;height:6px;background:var(--o500);border-radius:50%;animation:ci-pulse 2s ease-in-out infinite}
.bk2-tag.confirmed{background:var(--bl50);color:var(--bl500);border:1px solid rgba(59,130,246,.12)}
.bk2-tag.confirmed::before{content:'\2713';font-weight:800}
.bk2-tag.done{background:var(--g50);color:var(--g600);border:1px solid rgba(58,138,82,.12)}
.bk2-tag.done::before{content:'\2713';font-weight:800}
.bk2-tag.cancelled{background:var(--r100);color:var(--r500);border:1px solid rgba(212,80,80,.12);text-decoration:line-through}

.bk2-actions{display:flex;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--b100)}
.bk2-btn{
  padding:8px 18px;border-radius:8px;font-size:12px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:all .15s;border:none;text-decoration:none;display:inline-block;
}
.bk2-btn.primary{background:var(--g600);color:#fff}
.bk2-btn.primary:hover{background:var(--g700);transform:translateY(-1px);box-shadow:0 4px 14px rgba(45,106,63,.2)}
.bk2-btn.danger{background:transparent;color:var(--r500);border:1px solid rgba(212,80,80,.2)}
.bk2-btn.danger:hover{background:var(--r50)}
.bk2-btn.secondary{background:transparent;color:var(--t2);border:1px solid var(--b300)}
.bk2-btn.secondary:hover{background:var(--b50)}

.bk2-cta{margin-top:14px;padding:12px 14px;border-radius:10px;display:flex;align-items:center;gap:10px}
.bk2-cta.orange{background:var(--o50);border:1px solid rgba(232,145,58,.1)}
.bk2-cta-text{flex:1;font-size:12px;font-weight:600}
.bk2-cta.orange .bk2-cta-text{color:var(--o600)}

.bk2-details{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.bk2-detail{flex:1;min-width:100px;background:var(--b50);border-radius:8px;padding:8px 10px;text-align:center}
.bk2-detail-v{font-size:14px;font-weight:800}
.bk2-detail-l{font-size:9.5px;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.3px;margin-top:2px}

.bk2-notes{
  margin-top:12px;padding:12px 14px;border-radius:10px;
  background:linear-gradient(135deg,var(--g50),#f0faf2);
  border:1px solid rgba(58,138,82,.08);display:flex;gap:10px;align-items:flex-start;
}
.bk2-notes-icon{font-size:14px;flex-shrink:0;margin-top:1px}
.bk2-notes-text{font-size:12px;line-height:1.6;color:var(--t2)}
.bk2-notes-label{font-size:9.5px;font-weight:700;color:var(--g600);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}

/* --- Calendar view --- */
.bk2-cal-layout{display:grid;grid-template-columns:1fr 320px;gap:18px}
.bk2-cal-header{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.bk2-cal-header h3{font-size:16px;font-weight:800;min-width:160px}
.bk2-cal-nav{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--b300);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:var(--card);color:var(--t3);transition:all .15s;font-size:14px;text-decoration:none;
}
.bk2-cal-nav:hover{border-color:var(--g400);color:var(--g600);background:var(--g50)}
.bk2-cal-grid{
  display:grid;grid-template-columns:repeat(7,1fr);gap:4px;
  background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:16px;
}
.bk2-cal-dh{text-align:center;font-size:10px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.5px;padding:8px 0}
.bk2-cal-cell{
  min-height:80px;border-radius:10px;padding:6px 8px;
  position:relative;cursor:pointer;transition:all .15s;border:1.5px solid transparent;
}
.bk2-cal-cell:hover{background:var(--b50);border-color:var(--b300)}
.bk2-cal-cell.today{background:var(--g50);border-color:rgba(58,138,82,.15)}
.bk2-cal-cell.selected{border-color:var(--g500);background:var(--g50);box-shadow:0 0 0 3px rgba(76,175,80,.1)}
.bk2-cal-cell.empty{opacity:.3;cursor:default}
.bk2-cal-cell.empty:hover{background:transparent;border-color:transparent}
.bk2-cal-num{font-size:11px;font-weight:700;color:var(--t2);margin-bottom:4px}
.bk2-cal-cell.today .bk2-cal-num{
  display:inline-flex;width:22px;height:22px;border-radius:50%;
  background:var(--g600);color:#fff;align-items:center;justify-content:center;
}
.bk2-cal-ev{
  padding:3px 6px;border-radius:5px;font-size:9px;font-weight:700;
  margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bk2-cal-ev.ev-pending{background:var(--o50);color:var(--o600);border-left:2px solid var(--o500)}
.bk2-cal-ev.ev-confirmed{background:var(--bl50);color:var(--bl500);border-left:2px solid var(--bl500)}
.bk2-cal-ev.ev-done{background:var(--g50);color:var(--g600);border-left:2px solid var(--g400)}

/* Day detail panel */
.bk2-dp{
  background:var(--card);border:1px solid var(--cb);border-radius:16px;
  padding:22px;align-self:start;position:sticky;top:0;
}
.bk2-dp-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 10px;text-align:center;color:var(--t4)}
.bk2-dp-empty-icon{font-size:36px;margin-bottom:10px;opacity:.4}
.bk2-dp-empty-text{font-size:13px;font-weight:600}
.bk2-dp-empty-sub{font-size:11px;color:var(--t4);margin-top:4px}
.bk2-dp-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.bk2-dp-date-badge{
  width:48px;height:52px;border-radius:12px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;flex-shrink:0;
  background:linear-gradient(135deg,var(--g600),var(--g400));color:#fff;
}
.bk2-dp-date-day{font-size:20px;font-weight:800;line-height:1}
.bk2-dp-date-month{font-size:9px;font-weight:700;text-transform:uppercase;opacity:.7;margin-top:1px}
.bk2-dp-date-label{font-size:15px;font-weight:800}
.bk2-dp-date-sub{font-size:11px;color:var(--t3);margin-top:1px}
.bk2-dp-count{margin-left:auto;padding:3px 10px;border-radius:20px;font-size:10.5px;font-weight:700;background:var(--g50);color:var(--g600);border:1px solid rgba(58,138,82,.12)}
.bk2-dp-divider{height:1px;background:var(--b200);margin:0 0 14px}
.bk2-dp-booking{padding:14px;border-radius:12px;margin-bottom:8px;border:1px solid var(--cb);transition:all .2s;cursor:pointer}
.bk2-dp-booking:hover{box-shadow:0 4px 16px rgba(0,0,0,.05);transform:translateX(3px)}
.bk2-dp-booking:last-child{margin-bottom:0}
.bk2-dp-bk-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bk2-dp-bk-time{font-size:14px;font-weight:800;color:var(--g600);min-width:44px}
.bk2-dp-bk-av{
  width:34px;height:34px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;
  background:linear-gradient(135deg,var(--g600),var(--g400));
}
.bk2-dp-bk-name{font-size:13px;font-weight:700}
.bk2-dp-bk-type{font-size:10.5px;color:var(--t3);margin-top:1px}
.bk2-dp-bk-tag{margin-left:auto;padding:3px 10px;border-radius:20px;font-size:9.5px;font-weight:700;display:flex;align-items:center;gap:4px}
.bk2-dp-bk-tag.pending{background:var(--o50);color:var(--o600);border:1px solid rgba(232,145,58,.12)}
.bk2-dp-bk-tag.confirmed{background:var(--bl50);color:var(--bl500);border:1px solid rgba(59,130,246,.12)}
.bk2-dp-bk-tag.done{background:var(--g50);color:var(--g600);border:1px solid rgba(58,138,82,.12)}
.bk2-dp-bk-actions{display:flex;gap:6px;margin-top:8px;padding-top:8px;border-top:1px solid var(--b100)}
.bk2-dp-bk-btn{
  padding:6px 14px;border-radius:8px;font-size:11px;font-weight:700;
  cursor:pointer;font-family:inherit;transition:all .15s;border:none;
}
.bk2-dp-bk-btn.primary{background:var(--g600);color:#fff}
.bk2-dp-bk-btn.primary:hover{background:var(--g700)}
.bk2-dp-bk-btn.danger{background:transparent;color:var(--r500);border:1px solid rgba(212,80,80,.2)}
.bk2-dp-bk-note{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--b50);border-left:3px solid var(--g200);font-size:11px;color:var(--t2);line-height:1.5}

/* --- Availability week --- */
.bk2-sec-header{display:flex;align-items:center;gap:8px;margin:28px 0 14px}
.bk2-sec-header h2{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
.bk2-sec-header a{margin-left:auto;font-size:12px;color:var(--g600);font-weight:600;cursor:pointer;text-decoration:none}
.bk2-avail{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.bk2-avail-day{
  background:var(--card);border:1px solid var(--cb);border-radius:14px;
  padding:14px 10px;text-align:center;transition:all .2s;cursor:pointer;
}
.bk2-avail-day:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.05)}
.bk2-avail-day.today{border-color:rgba(58,138,82,.2);background:var(--g50)}
.bk2-avail-day.off{opacity:.4}
.bk2-avail-day-name{font-size:9px;font-weight:700;color:var(--t4);text-transform:uppercase;letter-spacing:.5px}
.bk2-avail-day-num{font-size:18px;font-weight:800;margin:4px 0}
.bk2-avail-day.today .bk2-avail-day-num{color:var(--g600)}
.bk2-avail-slots{font-size:10px;color:var(--t3);font-weight:600}
.bk2-avail-slots.has{color:var(--g600)}
.bk2-avail-bar{height:4px;border-radius:2px;background:var(--b200);margin-top:8px;overflow:hidden}
.bk2-avail-bar-fill{height:100%;border-radius:2px;background:var(--g400)}

/* --- Stats --- */
.bk2-stats{background:var(--card);border:1px solid var(--cb);border-radius:16px;padding:22px 24px}
.bk2-stats-row{display:flex;gap:10px}
.bk2-stat{flex:1;text-align:center;padding:14px;border-radius:12px;background:var(--b50)}
.bk2-stat-v{font-size:24px;font-weight:800;letter-spacing:-.3px}
.bk2-stat-v.g{color:var(--g600)}.bk2-stat-v.o{color:var(--o500)}.bk2-stat-v.b{color:var(--bl500)}.bk2-stat-v.r{color:var(--r500)}
.bk2-stat-l{font-size:10px;color:var(--t3);font-weight:600;text-transform:uppercase;letter-spacing:.3px;margin-top:3px}

/* Responsive */
@media(max-width:768px){
  .bk2-hero{flex-direction:column;align-items:flex-start;gap:12px}
  .bk2-hero-stats{margin-left:0;gap:16px}
  .bk2-search{flex-direction:column;align-items:stretch;padding:10px}
  .bk2-filters{justify-content:center;flex-wrap:wrap}
  .bk2-cal-layout{grid-template-columns:1fr}
  .bk2-avail{grid-template-columns:repeat(4,1fr)}
  .bk2-stats-row{flex-wrap:wrap}
  .bk2-stat{min-width:calc(50% - 5px)}
  .bk2-top{flex-wrap:wrap}
}

/* ══════════════════════════════════════════════════════════
   MESSAGES PAGE v2 (msg2-*)
   Matching Beskeder.html reference design
   ══════════════════════════════════════════════════════════ */

/* --- 1. HERO --- */
.msg2-hero{
  background:linear-gradient(135deg,var(--g900) 0%,var(--g700) 60%,var(--g500) 100%);
  border-radius:18px;padding:22px 28px;color:#fff;margin-bottom:22px;
  display:flex;align-items:center;gap:18px;position:relative;overflow:hidden;
}
.msg2-hero::before{content:'';position:absolute;top:-40px;right:-20px;width:140px;height:140px;background:rgba(255,255,255,.04);border-radius:50%}
.msg2-hero::after{content:'';position:absolute;bottom:-50px;right:100px;width:100px;height:100px;background:rgba(255,255,255,.02);border-radius:50%}
.msg2-hero-icon{
  width:48px;height:48px;border-radius:14px;
  background:rgba(255,255,255,.1);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  display:flex;align-items:center;justify-content:center;font-size:22px;
  flex-shrink:0;position:relative;z-index:1;
}
.msg2-hero-text{position:relative;z-index:1}
.msg2-hero-text h1{font-size:20px;font-weight:800;letter-spacing:-.2px;color:inherit}
.msg2-hero-text p{font-size:12px;opacity:.5;margin-top:2px}
.msg2-hero-stats{margin-left:auto;display:flex;gap:24px;position:relative;z-index:1}
.msg2-hs{text-align:center}
.msg2-hs-v{font-size:24px;font-weight:800;display:block}
.msg2-hs-v.o{color:var(--o400)}.msg2-hs-v.g{color:var(--g300)}.msg2-hs-v.w{color:rgba(255,255,255,.3)}
.msg2-hs-l{font-size:10px;opacity:.45;margin-top:2px;display:block}

/* --- 2. SEARCH + FILTERS --- */
.msg2-search-bar{
  display:flex;align-items:center;background:var(--card);
  border:1px solid var(--cb);border-radius:14px;padding:6px 6px 6px 16px;
  margin-bottom:20px;gap:10px;transition:box-shadow .2s;
}
.msg2-search-bar:focus-within{box-shadow:0 0 0 3px rgba(76,175,80,.1);border-color:var(--g300)}
.msg2-search-bar>svg{width:16px;height:16px;color:var(--t4);flex-shrink:0}
.msg2-search-bar input{
  flex:1;border:none;outline:none;font-family:inherit;font-size:13px;
  font-weight:500;color:var(--t1);background:transparent;min-width:0;
}
.msg2-search-bar input::placeholder{color:var(--t4)}
.msg2-filter-group{display:flex;gap:4px;flex-shrink:0}
.msg2-fsq{
  padding:7px 14px;border-radius:8px;font-size:11px;font-weight:700;
  cursor:pointer;transition:all .15s;user-select:none;
  border:1.5px solid var(--b200);background:var(--b50);color:var(--t3);
  display:flex;align-items:center;gap:5px;white-space:nowrap;
}
.msg2-fsq:hover{border-color:var(--g300);color:var(--t1);background:var(--card)}
.msg2-fsq.a{border-color:var(--g500);background:var(--g50);color:var(--g600)}
.msg2-fsq.a-orange{border-color:var(--o500);background:var(--o50);color:var(--o600)}
.msg2-fsq .msg2-fsq-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.msg2-fsq .msg2-fsq-count{
  min-width:16px;height:16px;border-radius:4px;display:flex;align-items:center;
  justify-content:center;font-size:9.5px;font-weight:800;background:rgba(0,0,0,.06);
}
.msg2-fsq.a .msg2-fsq-count,.msg2-fsq.a-orange .msg2-fsq-count{background:rgba(0,0,0,.08)}

/* --- 3. CHAT LAYOUT --- */
.msg2-chat-layout{display:grid;grid-template-columns:340px 1fr;gap:0;min-height:500px;max-height:calc(100vh - 260px)}

/* Conversation list */
.msg2-conv-list{
  background:var(--card);border:1px solid var(--cb);border-radius:16px 0 0 16px;
  overflow-y:auto;scrollbar-width:thin;
}
.msg2-conv-list::-webkit-scrollbar{width:4px}
.msg2-conv-list::-webkit-scrollbar-thumb{background:var(--b300);border-radius:2px}
.msg2-conv-item{
  padding:16px 18px;display:flex;gap:12px;cursor:pointer;
  transition:all .12s;position:relative;border-bottom:1px solid var(--b100);
  text-decoration:none;color:inherit;
}
.msg2-conv-item:hover{background:var(--b50)}
.msg2-conv-item.active{background:var(--g50);border-right:3px solid var(--g500)}
.msg2-conv-item.unread .msg2-conv-name{font-weight:800}
.msg2-conv-item.unread::after{
  content:'';position:absolute;top:20px;right:16px;
  width:8px;height:8px;background:var(--g400);border-radius:50%;
}
.msg2-conv-av{
  width:44px;height:44px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;color:#fff;flex-shrink:0;
  position:relative;
}
.msg2-conv-av.green{background:linear-gradient(135deg,var(--g600),var(--g400))}
.msg2-conv-av.orange{background:linear-gradient(135deg,var(--o500),#f0c050)}
.msg2-conv-av.purple{background:linear-gradient(135deg,#6366f1,#a78bfa)}
.msg2-conv-av.blue{background:linear-gradient(135deg,var(--bl500),#60a5fa)}
.msg2-conv-online{
  position:absolute;bottom:-1px;right:-1px;width:12px;height:12px;
  background:var(--g400);border-radius:50%;border:2.5px solid var(--card);
}
.msg2-conv-body{flex:1;min-width:0}
.msg2-conv-top{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.msg2-conv-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg2-conv-time{margin-left:auto;font-size:10px;color:var(--t4);font-weight:500;white-space:nowrap;flex-shrink:0}
.msg2-conv-preview{font-size:11.5px;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}
.msg2-conv-item.unread .msg2-conv-preview{color:var(--t2)}

/* Active chat panel */
.msg2-chat-panel{
  background:var(--card);border:1px solid var(--cb);border-left:none;
  border-radius:0 16px 16px 0;display:flex;flex-direction:column;overflow:hidden;
}

/* Chat header */
.msg2-chat-header{
  padding:16px 22px;border-bottom:1px solid var(--b100);
  display:flex;align-items:center;gap:14px;flex-shrink:0;
}
.msg2-chat-h-av{
  width:38px;height:38px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:#fff;flex-shrink:0;
  background:linear-gradient(135deg,var(--g600),var(--g400));
}
.msg2-chat-h-name{font-size:14px;font-weight:700}
.msg2-chat-h-status{font-size:11px;color:var(--t3);margin-top:1px}
.msg2-chat-h-actions{margin-left:auto;display:flex;gap:4px}
.msg2-chat-h-btn{
  width:32px;height:32px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;color:var(--t4);
  border:1px solid var(--b200);background:var(--b50);transition:all .15s;
  text-decoration:none;
}
.msg2-chat-h-btn:hover{border-color:var(--g300);color:var(--g600);background:var(--g50)}
.msg2-chat-h-btn svg{width:15px;height:15px}

/* Messages area */
.msg2-chat-messages{flex:1;overflow-y:auto;padding:20px 22px;scrollbar-width:thin;display:flex;flex-direction:column;gap:4px}
.msg2-chat-messages::-webkit-scrollbar{width:4px}
.msg2-chat-messages::-webkit-scrollbar-thumb{background:var(--b300);border-radius:2px}

/* Date separator */
.msg2-msg-date{
  text-align:center;padding:12px 0 8px;font-size:10px;font-weight:700;
  color:var(--t4);text-transform:uppercase;letter-spacing:1px;
  display:flex;align-items:center;gap:10px;
}
.msg2-msg-date::before,.msg2-msg-date::after{content:'';flex:1;height:1px;background:var(--b200)}

/* Message bubbles */
.msg2-msg{display:flex;gap:8px;max-width:80%;margin-bottom:2px}
.msg2-msg.them{align-self:flex-start}
.msg2-msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg2-msg-av{
  width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:700;color:#fff;flex-shrink:0;align-self:flex-end;
  background:linear-gradient(135deg,var(--g600),var(--g400));
}
.msg2-msg.me .msg2-msg-av{background:linear-gradient(135deg,var(--g700),var(--g500))}
.msg2-msg-content{display:flex;flex-direction:column;gap:1px}
.msg2-msg-bubble{
  padding:10px 14px;border-radius:14px;font-size:13px;line-height:1.55;
  max-width:100%;word-wrap:break-word;
}
.msg2-msg.them .msg2-msg-bubble{
  background:var(--b50);border:1px solid var(--b200);
  border-bottom-left-radius:4px;color:var(--t1);
}
.msg2-msg.me .msg2-msg-bubble{
  background:var(--g600);color:#fff;
  border-bottom-right-radius:4px;
}
.msg2-msg-time{font-size:9.5px;color:var(--t4);padding:0 4px}
.msg2-msg.me .msg2-msg-time{text-align:right}
.msg2-msg-read{font-size:9px;color:var(--g400);text-align:right;padding:0 4px}

/* System messages */
.msg2-msg-system{align-self:center;max-width:90%;margin:6px 0}
.msg2-msg-sys-card{
  background:var(--b50);border:1px solid var(--b200);border-radius:12px;
  padding:12px 16px;text-align:center;
}
.msg2-msg-sys-icon{font-size:18px;margin-bottom:4px}
.msg2-msg-sys-text{font-size:11.5px;color:var(--t2);font-weight:600}
.msg2-msg-sys-sub{font-size:10px;color:var(--t4);margin-top:2px}

/* Quick replies */
.msg2-msg-quick{
  display:flex;gap:6px;flex-wrap:wrap;justify-content:center;
  padding:8px 18px;border-top:1px solid var(--b100);flex-shrink:0;
}
.msg2-msg-qr{
  padding:6px 14px;border-radius:20px;font-size:11px;font-weight:600;
  cursor:pointer;transition:all .15s;
  border:1.5px solid var(--b300);background:var(--card);color:var(--t2);
}
.msg2-msg-qr:hover{border-color:var(--g400);color:var(--g600);background:var(--g50)}

/* Chat input */
.msg2-chat-input{
  padding:14px 18px;border-top:1px solid var(--b100);
  display:flex;align-items:flex-end;gap:10px;flex-shrink:0;
}
.msg2-chat-input-tools{display:flex;gap:2px;flex-shrink:0;align-self:center}
.msg2-chat-tool{
  width:32px;height:32px;border-radius:8px;display:flex;align-items:center;
  justify-content:center;cursor:pointer;color:var(--t4);transition:all .12s;
}
.msg2-chat-tool:hover{background:var(--b50);color:var(--t2)}
.msg2-chat-tool svg{width:16px;height:16px}
.msg2-chat-field{
  flex:1;padding:10px 16px;border:1.5px solid var(--b200);border-radius:12px;
  font-family:inherit;font-size:13px;color:var(--t1);resize:none;
  min-height:42px;max-height:120px;outline:none;transition:border-color .2s;
  line-height:1.5;background:var(--b50);
}
.msg2-chat-field:focus{border-color:var(--g400);background:var(--card)}
.msg2-chat-field::placeholder{color:var(--t4)}
.msg2-chat-send{
  width:42px;height:42px;border-radius:12px;background:var(--g600);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:all .15s;border:none;flex-shrink:0;align-self:center;
}
.msg2-chat-send:hover{background:var(--g700);transform:translateY(-1px);box-shadow:0 4px 14px rgba(45,106,63,.2)}
.msg2-chat-send svg{width:18px;height:18px;color:#fff}

/* Empty chat state */
.msg2-chat-empty{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--t4);text-align:center;padding:40px;
}
.msg2-chat-empty-icon{font-size:48px;opacity:.3;margin-bottom:12px}
.msg2-chat-empty-text{font-size:15px;font-weight:700;color:var(--t3)}
.msg2-chat-empty-sub{font-size:12px;margin-top:4px}

/* --- MSG2 Responsive --- */
@media(max-width:768px){
  .msg2-hero{flex-direction:column;align-items:flex-start;gap:12px}
  .msg2-hero-stats{margin-left:0;gap:16px}
  .msg2-search-bar{flex-direction:column;align-items:stretch;padding:10px}
  .msg2-filter-group{justify-content:center;flex-wrap:wrap}
  .msg2-chat-layout{grid-template-columns:1fr;max-height:none}
  .msg2-conv-list{border-radius:16px;max-height:300px}
  .msg2-chat-panel{border-radius:16px;border:1px solid var(--cb);margin-top:12px;min-height:400px}
  .msg2-msg{max-width:90%}
}

/* ── Hero h1 override (Astra dynamic CSS sets heading color) ── */
.ci-hero-text h1,
.bk2-hero-text h1,
.msg2-hero-text h1,
.mp-hero h1,
[class*="-hero"] h1{color:#fff !important}