/* ==========================================================================
   EQUISENSUS — Luxury dark equestrian design system (mockup-aligned)
   Kleuren & logo behouden; fonts + layout-stijl naar premium mockups
   ========================================================================== */

:root {
    --bg-main: #010204;
    --bg-elevated: #0a0908;
    --bg-card: rgba(18, 14, 12, 0.88);
    --bg-glass: rgba(22, 18, 16, 0.72);
    --bg-glass-light: rgba(36, 28, 24, 0.55);
    --rose-gold: #cda79e;
    --rose-accent: #e3c5bb;
    --rose-deep: #8e6258;
    --rose-grad: linear-gradient(135deg, #e3c5bb 0%, #cda79e 48%, #8e6258 100%);
    --rose-border: rgba(205, 167, 158, 0.28);
    --rose-glow: 0 0 24px rgba(205, 167, 158, 0.12);
    --text-light: #fdfbf7;
    --text-muted: #9a8b82;
    --success: #38a169;
    --warning: #f6ad55;
    --danger: #e53e3e;
    --radius-xl: 22px;
    --radius-lg: 16px;
    --radius-md: 14px;
    --radius-sm: 10px;
    --radius-pill: 999px;
    --gap-page: 14px;
    --pad-page: 0 16px 14px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --fs-xs: 10px;
    --fs-sm: 11px;
    --fs-md: 13px;
    --fs-lg: 15px;
    --fs-xl: 18px;
    --fs-display: 20px;
    --font-serif: 'Playfair Display', Georgia, serif;
    --font-sans: 'Montserrat', system-ui, sans-serif;
    --touch-min: 44px;
    --shadow-card: var(--rose-glow), 0 8px 28px rgba(0, 0, 0, 0.32);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body, html {
    font-family: var(--font-sans);
    background-color: var(--bg-main) !important;
    color: var(--text-light);
    font-size: var(--fs-sm);
    font-weight: 400;
    letter-spacing: 0.01em;
    -webkit-font-smoothing: antialiased;
    height: 100dvh;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    overflow-x: clip;
}

.serif { font-family: var(--font-serif); font-weight: 600; }

/* --- Layout shell (used by base.html + all pages) --- */
.scr {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    position: relative;
}

.app-viewport {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    min-width: 0;
    padding: var(--pad-page);
    gap: var(--gap-page);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.content-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    gap: var(--gap-page);
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--rose-accent);
    font-family: var(--font-serif);
    font-weight: 600;
    margin: 0;
    letter-spacing: 0.01em;
}
p { color: var(--text-muted); margin: 0; }
.lbl {
    font-family: var(--font-sans);
    font-size: 9px; font-weight: 600; text-transform: uppercase;
    color: var(--text-muted); letter-spacing: 1.4px; margin-bottom: 6px; display: block;
}
.tit {
    font-family: var(--font-sans);
    font-size: var(--fs-sm); font-weight: 700; text-transform: uppercase;
    color: var(--text-light); letter-spacing: 0.8px;
}
.sec-title {
    font-family: var(--font-serif);
    font-size: 15px; font-weight: 600; color: var(--rose-accent);
    text-transform: none; letter-spacing: 0.02em;
    display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}
/* Compact page title: icon + label, left-aligned (app-wide) */
.page-title,
.page-heading,
.ls-page-title,
.cal-page-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-family: var(--font-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--rose-accent);
    line-height: 1.2;
    margin: 0;
    letter-spacing: 0.01em;
    flex-shrink: 0;
    text-align: left;
}
.page-title > i,
.page-heading > i,
.ls-page-title > i,
.cal-page-title > i {
    font-size: 12px;
    color: var(--rose-gold);
    opacity: 0.9;
    flex-shrink: 0;
    width: 1.1em;
    text-align: center;
}
.page-heading-rule {
    display: none !important;
}

/* --- Glass cards (mockup: soft charcoal + thin rose border + glow) --- */
.glass, .glass-card {
    background: var(--bg-glass);
    backdrop-filter: blur(18px) saturate(1.05);
    -webkit-backdrop-filter: blur(18px) saturate(1.05);
    border: 1px solid var(--rose-border);
    border-radius: var(--radius-lg);
    transition: transform 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
    box-shadow: var(--shadow-card);
}
.glass-card { padding: var(--space-4); }
.glass-light {
    background: var(--bg-glass-light);
    backdrop-filter: blur(20px) saturate(1.1);
    -webkit-backdrop-filter: blur(20px) saturate(1.1);
    border: 1px solid rgba(205,167,158,0.22);
}
.crd {
    background: var(--bg-glass);
    backdrop-filter: blur(16px);
    border: 1px solid var(--rose-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-card);
}

.row { display: flex; justify-content: space-between; align-items: center; }

/* --- Header button --- */
.hdr-back {
    color: var(--rose-gold);
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;
}
.hdr-back i { font-size: 17px; font-weight: 900; }
.hdr-btn {
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(22, 18, 16, 0.55);
    border-radius: 50%;
    border: 1px solid var(--rose-border);
    color: var(--rose-gold);
    font-size: 15px;
    box-shadow: var(--rose-glow);
}
.hdr-btn i { font-weight: 900; }

/* --- Tabs --- */
.tab-row {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.tab-row::-webkit-scrollbar { display: none; }
.tab-btn {
    flex: 1;
    min-width: 0;
    padding: 10px 6px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: 0.2s;
    text-align: center;
    white-space: nowrap;
}
.tab-btn i { display: block; font-size: 14px; margin-bottom: 3px; }
.tab-btn.active {
    background: var(--rose-grad);
    color: #010204;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(205,167,158,0.25);
}

.tab-panel {
    display: none;
    flex-direction: column;
    gap: var(--gap-page);
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.tab-panel.active { display: flex; }
.tab-panel::-webkit-scrollbar { display: none; }

/* --- Hero profile card --- */
.hero-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    flex-shrink: 0;
}
.hero-card.manege { border-color: rgba(246,173,85,0.3); background: rgba(246,173,85,0.04); }
.hero-photo { width: 64px; height: 64px; flex-shrink: 0; cursor: pointer; position: relative; }
.hero-photo .es-kader { width: 64px; height: 64px; }
.cam-badge {
    position: absolute; bottom: -2px; right: -2px;
    width: 22px; height: 22px; background: var(--rose-grad);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #010204; font-size: 9px; border: 2px solid #010204;
}
.hero-info { flex: 1; min-width: 0; }
.hero-name { font-family: 'Playfair Display', serif; font-size: var(--fs-xl); color: #fff; margin: 0; line-height: 1.1; }
.hero-meta { font-size: var(--fs-xs); color: var(--text-muted); margin: 3px 0 0; font-weight: 600; }
.hero-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.tag {
    font-size: 9px; font-weight: 800; padding: 3px 7px; border-radius: 6px;
    text-transform: uppercase; letter-spacing: 0.3px;
}
.tag.ok { background: rgba(56,161,105,0.12); color: var(--success); border: 1px solid rgba(56,161,105,0.2); }
.tag.warn { background: rgba(229,62,62,0.12); color: var(--danger); border: 1px solid rgba(229,62,62,0.2); }
.tag.manege { background: rgba(246,173,85,0.12); color: var(--warning); border: 1px solid rgba(246,173,85,0.25); }
.tag.rose { background: rgba(205,167,158,0.1); color: var(--rose-gold); border: 1px solid rgba(205,167,158,0.2); }
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    flex-shrink: 0;
}
.status-pill.ok { background: rgba(56, 161, 105, 0.12); color: var(--success); border: 1px solid rgba(56, 161, 105, 0.2); }
.status-pill.warn { background: rgba(229, 62, 62, 0.12); color: var(--danger); border: 1px solid rgba(229, 62, 62, 0.2); }

/* --- Stat tiles --- */
.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-page); flex-shrink: 0; }
.stat-tile { padding: 12px; display: flex; align-items: center; gap: 10px; }
.stat-icon {
    width: 36px; height: 36px; border-radius: 11px;
    background: rgba(205,167,158,0.1); border: 1px solid rgba(205,167,158,0.2);
    display: flex; align-items: center; justify-content: center; color: var(--rose-gold); font-size: 14px; flex-shrink: 0;
}
.stat-lbl { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 800; text-transform: uppercase; margin: 0; }
.stat-val { font-size: var(--fs-lg); color: #fff; font-weight: 700; margin: 0; }
.stat-unit { font-size: var(--fs-xs); color: var(--text-muted); font-weight: 600; }

/* Training top row: rusthartslag + snel loggen */
.train-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gap-page);
    margin-bottom: 10px;
    flex-shrink: 0;
}
.train-top-row--solo { grid-template-columns: 1fr; }
.train-top-row .hr-stat-click { margin: 0; min-width: 0; }
.train-quick-log {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 12px;
    margin: 0;
    text-align: left;
    cursor: pointer;
    border: 1px solid rgba(205, 167, 158, 0.4);
    background: linear-gradient(135deg, rgba(227, 197, 187, 0.14), rgba(18, 28, 43, 0.65));
    color: inherit;
    font: inherit;
    transition: border-color 0.2s, background 0.2s, transform 0.15s;
}
.train-quick-log:hover {
    border-color: rgba(227, 197, 187, 0.65);
    background: linear-gradient(135deg, rgba(227, 197, 187, 0.22), rgba(28, 40, 58, 0.8));
}
.train-quick-log:active { transform: scale(0.98); }
.train-quick-log:focus-visible {
    outline: 2px solid var(--rose-gold);
    outline-offset: 2px;
}
.train-quick-log__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rose-grad);
    color: #010204;
    font-size: 14px;
    font-weight: 800;
}
.train-quick-log__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.train-quick-log__val {
    font-size: 13px;
    color: #fff;
    font-weight: 700;
    line-height: 1.2;
}

/* --- Info rows --- */
.info-card { padding: 14px; flex-shrink: 0; }
.info-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.info-row:last-child { border-bottom: none; padding-bottom: 0; }
.info-lbl { font-size: var(--fs-sm); color: var(--text-muted); }
.info-val { font-size: var(--fs-sm); color: #fff; font-weight: 600; }

/* --- Timeline --- */
.timeline { display: flex; flex-direction: column; gap: 10px; }
.tl-item { display: flex; gap: 12px; }
.tl-dot {
    width: 34px; height: 34px; border-radius: 50%; background: #0b0f17; border: 2px solid;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 12px;
}
.tl-dot.ok { border-color: var(--success); color: var(--success); }
.tl-dot.warn { border-color: var(--danger); color: var(--danger); }
.tl-dot.rose { border-color: var(--rose-gold); color: var(--rose-gold); }
.tl-title { font-size: var(--fs-sm); color: #fff; font-weight: 700; margin: 0; }
.tl-date { font-size: var(--fs-xs); color: var(--text-muted); }
.tl-note { font-size: var(--fs-xs); color: var(--text-muted); margin: 3px 0 0; line-height: 1.45; }

/* --- Schedule items --- */
.sched-item {
    display: flex; align-items: center; gap: 10px; padding: 12px;
    border-radius: var(--radius-md); background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
}
.sched-icon {
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(205,167,158,0.1); display: flex; align-items: center; justify-content: center;
    color: var(--rose-gold); font-size: 13px; flex-shrink: 0;
}
.sched-time { font-size: var(--fs-xs); font-weight: 800; color: var(--rose-gold); }
.sched-title { font-size: var(--fs-sm); color: #fff; font-weight: 700; margin: 0; }
.sched-detail { font-size: var(--fs-xs); color: var(--text-muted); margin: 2px 0 0; }

.item-del {
    width: 28px; height: 28px; border-radius: 8px; border: 1px solid rgba(229,62,62,0.25);
    background: rgba(229,62,62,0.08); color: #fc8181; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.item-del:active { transform: scale(0.94); }

.train-week-chart { margin-bottom: 4px; }
.train-bars { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; height: 72px; padding-top: 4px; }
.train-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; justify-content: flex-end; }
.train-bar-col span { font-size: 8px; font-weight: 700; color: var(--text-muted); }
.train-bar {
    width: 100%; max-width: 22px; border-radius: 6px 6px 2px 2px;
    background: linear-gradient(to top, #8e6258, #cda79e); min-height: 4px;
}

/* --- Passport cards --- */
.fnrs-card { padding: 14px; cursor: pointer; }
.fnrs-card.ok { border-color: rgba(56,161,105,0.3); background: rgba(56,161,105,0.05); }
.fnrs-card.warn { border-color: rgba(229,62,62,0.3); background: rgba(229,62,62,0.05); }
.fnrs-card.none { border-color: rgba(255,255,255,0.06); }
.org-pill { font-size: 9px; font-weight: 800; padding: 3px 7px; border-radius: 5px; text-transform: uppercase; }
.org-pill.fnrs { background: rgba(246,173,85,0.15); color: var(--warning); }
.org-pill.knhs { background: rgba(99,179,237,0.15); color: #63b3ed; }

/* --- Lesson cards --- */
.lesson-card { padding: 12px 14px; border-left: 3px solid var(--rose-gold); }
.lesson-card.done { border-left-color: var(--text-muted); opacity: 0.88; }
.lesson-card .feedback { font-size: var(--fs-xs); color: var(--text-muted); margin: 5px 0 0; line-height: 1.5; font-style: italic; }

/* --- Action row --- */
.action-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-page); flex-shrink: 0; }
.action-btn {
    padding: 12px 6px; border-radius: var(--radius-md);
    background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06);
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    cursor: pointer; transition: 0.2s; text-decoration: none; color: inherit;
}
.action-btn:active { transform: scale(0.96); background: rgba(255,255,255,0.06); }
.action-btn i { font-size: 18px; color: var(--rose-gold); }
.action-btn span { font-size: var(--fs-xs); font-weight: 800; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }
.action-btn.disabled { opacity: 0.35; pointer-events: none; }

.add-btn {
    width: 28px; height: 28px; border-radius: 8px;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(205,167,158,0.25);
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--rose-gold); font-size: 11px;
}

/* --- Modals --- */
.sv-modal {
    display: none; position: fixed; inset: 0; background: rgba(1,2,4,0.96); z-index: 4000;
    align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.sv-modal-content {
    width: 100%; max-width: min(380px, calc(100vw - 32px)); background: #05080c;
    border: 1px solid rgba(205,167,158,0.25); border-radius: 24px; padding: 22px;
    display: flex; flex-direction: column; max-height: min(88vh, calc(100dvh - 40px));
    box-sizing: border-box; overflow-x: hidden; overflow-y: auto; min-width: 0;
}
.sv-modal-content > .btn-rose,
.sv-modal-content > .btn-ghost,
.sv-modal-content > button {
    flex-shrink: 0;
}
.modal-scroll { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; -ms-overflow-style: none; scrollbar-width: none; }
.modal-scroll::-webkit-scrollbar { display: none; }
.modal-hdr { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; flex-shrink: 0; }
.modal-close {
    width: 32px; height: 32px; background: rgba(255,255,255,0.06); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-muted);
}
.sv-input {
    width: 100%;
    min-height: var(--touch-min);
    padding: 12px 14px;
    background: rgba(18, 14, 12, 0.85);
    border: 1px solid rgba(205,167,158,0.22);
    border-radius: var(--radius-md);
    color: var(--text-light);
    font-family: var(--font-sans);
    box-sizing: border-box;
    font-size: var(--fs-sm);
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.sv-input:focus { border-color: var(--rose-gold); box-shadow: 0 0 0 3px rgba(205,167,158,0.15); }
.sv-input::placeholder { color: rgba(154, 139, 130, 0.75); }

/* Native selects — dark glass (niet wit/onleesbaar) */
select.sv-input,
select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-color: rgba(18, 14, 12, 0.92);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23cda79e' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    color: var(--text-light);
    cursor: pointer;
}
select.sv-input:hover,
select:hover { border-color: rgba(205,167,158,0.45); }
select option,
select.sv-input option {
    background: #0b121c;
    color: #fdfbf7;
    padding: 10px;
}
select option:checked,
select option:hover {
    background: #1a2433;
    color: #e3c5bb;
}
.btn-rose {
    width: 100%;
    min-height: var(--touch-min);
    padding: 12px 18px;
    background: var(--rose-grad);
    color: #010204;
    border: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 0.8px;
    box-shadow: 0 6px 20px rgba(205,167,158,0.28);
    transition: transform 0.15s, box-shadow 0.2s;
}
.btn-rose:active { transform: scale(0.98); }
.btn-ghost {
    min-height: var(--touch-min);
    padding: 10px 16px;
    background: rgba(22, 18, 16, 0.45);
    border: 1px solid var(--rose-border);
    color: var(--rose-accent);
    border-radius: var(--radius-pill);
    font-family: var(--font-sans);
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 0.6px;
    transition: border-color 0.2s, background 0.2s;
}
.btn-ghost:active { background: rgba(205,167,158,0.1); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.form-row > * { min-width: 0; }
.toggle-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px; background: rgba(246,173,85,0.06);
    border: 1px solid rgba(246,173,85,0.25); border-radius: 12px;
}
.toggle-row input { accent-color: var(--rose-gold); width: 18px; height: 18px; }
.upload-zone {
    border: 1px dashed rgba(205,167,158,0.4); border-radius: 14px; padding: 18px;
    text-align: center; cursor: pointer; background: rgba(205,167,158,0.03);
}

/* --- Toast --- */
.toast {
    position: fixed; bottom: calc(100px + env(safe-area-inset-bottom, 0px)); left: 50%;
    transform: translateX(-50%) translateY(16px); background: rgba(205,167,158,0.95);
    color: #010204; padding: 12px 20px; border-radius: 14px; font-size: var(--fs-sm);
    font-weight: 800; z-index: 5000; opacity: 0; transition: 0.3s; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.empty-msg { font-size: var(--fs-sm); color: var(--text-muted); text-align: center; padding: 20px; line-height: 1.55; }

/* --- Buttons (legacy + mockup pills) --- */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; padding: 14px 18px; border-radius: var(--radius-pill);
    font-weight: 700; font-size: var(--fs-sm); text-transform: uppercase;
    letter-spacing: 0.7px; cursor: pointer; transition: 0.3s; text-decoration: none;
    border: 1px solid var(--rose-border); color: var(--rose-gold);
    background: rgba(227,197,187,0.06);
}
.btn-fill { background: var(--rose-grad); color: #010204; border: none; box-shadow: 0 6px 20px rgba(205,167,158,0.28); }
.btn:active { transform: scale(0.97); }
.fab-rose {
    position: fixed;
    right: max(12px, env(safe-area-inset-right, 0px));
    bottom: calc(96px + env(safe-area-inset-bottom, 12px));
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--rose-grad); color: #010204; border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; cursor: pointer; z-index: 900;
    box-shadow: 0 8px 28px rgba(205,167,158,0.4), var(--rose-glow);
}
.fab-rose:active { transform: scale(0.94); }

/* --- Images --- */
.es-kader { position: relative; display: flex; align-items: center; justify-content: center; }
.es-kader .foto { width: 82%; height: 82%; object-fit: cover; border-radius: 50%; }
.es-kader .ring { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }

.icon-box { width: 40px; height: 40px; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 16px; }
.icon-box.rose { background: rgba(205,167,158,0.1); color: var(--rose-gold); border: 1px solid rgba(205,167,158,0.3); }
.icon-box.success { background: rgba(56,161,105,0.1); color: var(--success); border: 1px solid rgba(56,161,105,0.2); }

.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }
.hide-scroll::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
.hide-scroll::-webkit-scrollbar-button,
.hide-scroll::-webkit-scrollbar-button:horizontal:start:decrement,
.hide-scroll::-webkit-scrollbar-button:horizontal:end:increment {
    display: none !important; width: 0 !important; height: 0 !important;
}
.h-scroll { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 5px; }
.filter-pill {
    padding: 9px 16px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; font-size: var(--fs-xs); font-weight: 700; color: var(--text-muted);
    white-space: nowrap; cursor: pointer; text-transform: uppercase;
}
.filter-pill.active { background: var(--rose-grad); color: #010204; border-color: transparent; }

/* --- EquiDialog --- */
.equi-dialog-modal { z-index: 6000; }
.equi-dialog-box { text-align: center; max-width: 320px; }
.equi-dialog-icon { font-size: 28px; color: #cda79e; margin-bottom: 10px; }
.equi-dialog-icon.warn { color: #f6ad55; }
.equi-dialog-title { font-size: 18px; margin: 0 0 8px; color: #fff; }
.equi-dialog-msg { font-size: 12px; color: #7a8e9f; line-height: 1.5; margin: 0 0 16px; }
.equi-dialog-actions { display: flex; gap: 8px; }
.equi-dialog-actions .equi-dialog-btn { flex: 1; width: auto; }
.equi-dialog-btn { margin-top: 0; }

/* --- Dashboard rozet & horse strip --- */
.rozet-wrapper.dash-rozet { width: 28px; height: 28px; flex-shrink: 0; }
.rozet-wrapper.dash-rozet .rozet-ribbon-l,
.rozet-wrapper.dash-rozet .rozet-ribbon-r { top: 14px; width: 7px; height: 12px; }
.rozet-wrapper.dash-rozet .rozet-ribbon-l { left: 4px; }
.rozet-wrapper.dash-rozet .rozet-ribbon-r { right: 4px; }
.rozet-wrapper.dash-rozet .rozet-body { width: 28px; height: 28px; }
.rozet-wrapper.dash-rozet .rozet-center { width: 16px; height: 16px; font-size: 7px; }
.rozet-ribbon-l, .rozet-ribbon-r {
    position: absolute; z-index: 1; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;
    background: var(--r-dark);
}
.rozet-body {
    position: relative; border-radius: 50%; z-index: 2;
    background: repeating-conic-gradient(from 0deg, rgba(255,255,255,0.15) 0deg 15deg, rgba(0,0,0,0.1) 15deg 30deg),
        radial-gradient(circle, var(--r-light) 0%, var(--r-dark) 100%);
    display: flex; align-items: center; justify-content: center;
}
.rozet-center {
    border-radius: 50%; background: var(--r-dark); border: 1.5px solid rgba(255,255,255,0.9);
    display: flex; align-items: center; justify-content: center; color: #fff;
}
.horse-strip {
    display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory;
    flex-shrink: 1; min-height: 100px; -webkit-overflow-scrolling: touch;
    width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box;
}
.horse-strip .horse-img-card {
    flex: 0 0 calc(50% - 5px);
    width: calc(50% - 5px);
    max-width: calc(50% - 5px);
    min-width: calc(50% - 5px);
    scroll-snap-align: start;
    height: 100px;
    box-sizing: border-box;
}

/* Dashboard planning swipe — zelfde footprint als horse-strip */
.plan-carousel-wrap,
.swipe-carousel-wrap {
    position: relative;
    flex-shrink: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.plan-carousel,
.swipe-carousel {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0;
    min-height: 0;
    scrollbar-width: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.plan-carousel { min-height: 96px; }
.plan-carousel,
.swipe-carousel,
.horse-strip,
.dash-near-strip {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.plan-carousel::-webkit-scrollbar,
.swipe-carousel::-webkit-scrollbar,
.horse-strip::-webkit-scrollbar,
.dash-near-strip::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}
.plan-carousel::-webkit-scrollbar-button,
.swipe-carousel::-webkit-scrollbar-button,
.horse-strip::-webkit-scrollbar-button,
.dash-near-strip::-webkit-scrollbar-button,
.plan-carousel::-webkit-scrollbar-button:horizontal:start:decrement,
.swipe-carousel::-webkit-scrollbar-button:horizontal:start:decrement,
.horse-strip::-webkit-scrollbar-button:horizontal:start:decrement,
.dash-near-strip::-webkit-scrollbar-button:horizontal:start:decrement,
.plan-carousel::-webkit-scrollbar-button:horizontal:end:increment,
.swipe-carousel::-webkit-scrollbar-button:horizontal:end:increment,
.horse-strip::-webkit-scrollbar-button:horizontal:end:increment,
.dash-near-strip::-webkit-scrollbar-button:horizontal:end:increment {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.plan-slide {
    flex: 0 0 calc(50% - 5px);
    width: calc(50% - 5px);
    max-width: calc(50% - 5px);
    min-width: calc(50% - 5px);
    scroll-snap-align: start;
    height: 96px;
    min-height: 96px;
    max-height: 96px;
    padding: 8px;
    border-radius: 14px;
    background: var(--bg-glass-light);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2px;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}
.plan-slide.parent-task { border-color: rgba(205,167,158,0.35); }
.plan-slide .swipe-hint {
    font-size: 8px; color: var(--text-muted); font-weight: 700;
    display: flex; align-items: center; gap: 4px;
}
.plan-carousel-glow,
.swipe-carousel-glow {
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 44px;
    pointer-events: none;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 4px;
    background: linear-gradient(90deg, transparent 0%, rgba(1,2,4,0.55) 55%, rgba(1,2,4,0.85) 100%);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.plan-carousel-wrap.has-more .plan-carousel-glow,
.plan-carousel-wrap.has-more .swipe-carousel-glow,
.swipe-carousel-wrap.has-more .swipe-carousel-glow,
.swipe-carousel-wrap.has-more .plan-carousel-glow { opacity: 1; }
.plan-carousel-glow .glow-arrow,
.swipe-carousel-glow .glow-arrow {
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(205,167,158,0.18);
    border: 1px solid rgba(205,167,158,0.45);
    color: #e3c5bb;
    font-size: 12px;
    box-shadow: 0 0 14px rgba(205,167,158,0.45), 0 0 28px rgba(205,167,158,0.2);
    animation: planGlowPulse 1.8s ease-in-out infinite;
}
@keyframes planGlowPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(205,167,158,0.35), 0 0 18px rgba(205,167,158,0.12); transform: translateX(0); }
    50% { box-shadow: 0 0 16px rgba(205,167,158,0.65), 0 0 32px rgba(205,167,158,0.28); transform: translateX(2px); }
}
.plan-done-btn {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 0;
    width: 28px;
    height: 28px;
    min-height: 28px;
    min-width: 28px;
    border-radius: 50%;
    border: 1px solid rgba(205,167,158,0.45);
    background: rgba(205,167,158,0.12);
    color: #e3c5bb;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
}
.plan-done-btn i { font-size: 14px; line-height: 1; }
.plan-done-btn .plan-done-lbl { display: none; }
.plan-done-btn:active { transform: scale(0.96); }
.plan-done-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #68d391;
    background: rgba(104,211,145,0.12);
    border: 1px solid rgba(104,211,145,0.35);
}
.plan-done-state i { font-size: 15px; line-height: 1; }
.plan-done-state .plan-done-lbl { display: none; }
.pro-lock-overlay {
    position: absolute; inset: 0; z-index: 5; border-radius: inherit;
    background: rgba(1, 2, 4, 0.72); backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center; padding: 8px;
}
.pro-lock-inner { text-align: center; }
.pro-lock-inner i { font-size: 18px; color: #cda79e; display: block; margin-bottom: 4px; }
.pro-lock-lbl { font-size: 8px; font-weight: 800; color: #cda79e; text-transform: uppercase; letter-spacing: 0.5px; display: block; margin-bottom: 4px; }
.pro-lock-sub { font-size: 7px; color: #7a8e9f; display: block; margin-bottom: 6px; line-height: 1.35; max-width: 140px; margin-left: auto; margin-right: auto; }
.pro-lock-btn {
    padding: 6px 12px; border: none; border-radius: 8px; font-size: 8px; font-weight: 800;
    text-transform: uppercase; cursor: pointer; background: var(--rose-grad); color: #010204;
}
.pro-tier-badge {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 6px;
    font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
}
.pro-tier-badge.pro { background: var(--rose-grad); color: #010204; }
.pro-tier-badge.basic { background: rgba(255,255,255,0.08); color: #7a8e9f; border: 1px solid rgba(255,255,255,0.1); }
.pro-tier-badge.clickable { cursor: pointer; }
.pro-upgrade-banner {
    display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px;
    margin-bottom: 8px; flex-shrink: 0;
    background: rgba(205,167,158,0.08); border: 1px solid rgba(205,167,158,0.25);
}
.pro-upgrade-banner i.banner-icon { color: #cda79e; font-size: 16px; flex-shrink: 0; }
.pro-upgrade-banner .banner-text { flex: 1; min-width: 0; }
.pro-upgrade-banner .banner-text strong { display: block; font-size: 10px; color: #fff; margin-bottom: 2px; }
.pro-upgrade-banner .banner-text span { font-size: 8px; color: #7a8e9f; line-height: 1.35; }
.pro-upgrade-banner .banner-btn {
    flex-shrink: 0; padding: 8px 12px; border: none; border-radius: 10px; font-size: 8px;
    font-weight: 800; text-transform: uppercase; cursor: pointer; background: var(--rose-grad); color: #010204;
}

/* ==========================================================================
   FASE 1 — Gedeeld admin / collapse / profiel (referentie: stal_admin)
   ========================================================================== */

.page-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap-page);
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

.admin-tabs {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    flex-shrink: 0;
    padding: 2px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab {
    flex-shrink: 0;
    padding: 10px 12px;
    min-height: 44px;
    border-radius: var(--radius-sm);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    cursor: pointer;
    transition: 0.15s;
}
.admin-tab.active {
    background: var(--rose-grad);
    color: #010204;
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(205, 167, 158, 0.25);
}

.admin-panel {
    display: none;
    flex-direction: column;
    gap: var(--gap-page);
    flex: 1;
    min-height: 0;
}
.admin-panel.active { display: flex; }

.admin-stat-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    flex-shrink: 0;
}
.admin-stat {
    padding: 10px;
    border-radius: var(--radius-md);
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.admin-stat .val {
    font-size: 16px;
    font-weight: 800;
    color: #fff;
    font-family: 'Playfair Display', serif;
}
.admin-stat .lbl {
    font-size: 7px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-top: 2px;
}

.admin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 4px;
    min-height: 48px;
    border-radius: 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(205,167,158,0.12);
    cursor: pointer;
    transition: 0.15s;
}
.admin-row:active { background: rgba(205,167,158,0.06); }
.admin-row .ar-main { flex: 1; min-width: 0; }
.admin-row .ar-main strong {
    display: block; font-size: 13px; color: var(--rose-accent);
    font-family: var(--font-serif); font-weight: 600;
}
.admin-row .ar-main span { font-size: 10px; color: var(--text-muted); }
.admin-row > i { color: var(--rose-gold); font-size: 12px; flex-shrink: 0; opacity: 0.8; }

.section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    min-height: 44px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    cursor: pointer;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.section-toggle i.chev { transition: 0.2s; color: var(--text-muted); font-size: 10px; }
.section-toggle.open i.chev { transform: rotate(180deg); }
.section-body {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 0 4px 8px;
}
.section-body.open { display: flex; }

.collapse-section {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    flex-shrink: 0;
}
.collapse-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    min-height: 44px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.collapse-toggle i {
    color: var(--text-muted);
    font-size: 10px;
    transition: transform 0.2s;
}
.collapse-section.open .collapse-toggle i { transform: rotate(180deg); }
.collapse-body {
    display: none;
    padding: 0 12px 12px;
    flex-direction: column;
    gap: 8px;
}
.collapse-section.open .collapse-body { display: flex; }

.profile-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 14px 18px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}
.profile-avatar-wrap {
    position: relative;
    width: 110px;
    height: 110px;
    margin-bottom: 14px;
}
.profile-avatar-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    padding: 2px;
    background: var(--rose-grad);
    box-shadow: 0 0 28px rgba(205,167,158,0.35);
}
.profile-avatar-ring img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #010204;
}
.edit-pic-btn {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    color: var(--rose-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    border: 1px solid var(--rose-border);
    cursor: pointer;
    z-index: 5;
    background: #010204;
}
.profile-name {
    font-family: var(--font-serif);
    font-size: 26px;
    font-weight: 600;
    margin: 0;
    color: var(--rose-accent);
}
.profile-meta {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
    margin: 6px 0 0;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.profile-pro-btn {
    margin-top: 12px;
    background: var(--rose-grad);
    color: #010204;
    padding: 10px 18px;
    min-height: 40px;
    border-radius: var(--radius-pill);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    flex-shrink: 0;
}
.grid-btn {
    background: rgba(18, 28, 43, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-lg);
    padding: 14px 8px;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    cursor: pointer;
    transition: 0.2s;
}
.grid-btn:active { transform: scale(0.95); background: rgba(255, 255, 255, 0.05); }
.grid-btn h4 { font-size: 10px; color: #fff; margin: 0; }
.grid-btn.highlight {
    border-color: rgba(205, 167, 158, 0.3);
    background: rgba(205, 167, 158, 0.05);
}
.grid-btn.highlight h4 { color: var(--rose-gold); }

.btn-logout {
    margin-top: auto;
    padding: 14px;
    min-height: 44px;
    background: rgba(229, 62, 62, 0.05);
    border: 1px solid rgba(229, 62, 62, 0.2);
    color: var(--danger);
    border-radius: var(--radius-md);
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    width: 100%;
}

.scrollable-modal-body {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 4px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollable-modal-body::-webkit-scrollbar { display: none; }

/* --- Stable page (uniek) --- */
.stal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex-shrink: 0; }
.stal-tile {
    background: rgba(22, 18, 16, 0.7);
    border: 1px solid var(--rose-border);
    border-radius: var(--radius-md);
    padding: 12px 6px;
    min-height: 64px;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: 0.2s;
    text-align: center;
    position: relative;
    box-shadow: var(--rose-glow);
}
.stal-tile:active { transform: scale(0.95); background: rgba(205, 167, 158, 0.08); }
.stal-tile i { font-size: 18px; color: var(--rose-gold); font-weight: 900; }
.stal-tile span {
    font-size: 8px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block;
}
.view-panel { display: none; flex-direction: column; gap: 8px; flex: 1; min-height: 0; overflow: hidden; }
.view-panel.active { display: flex; }
.hero-stal {
    position: relative; height: 140px; border-radius: var(--radius-lg); overflow: hidden;
    flex-shrink: 0; border: 1px solid var(--rose-border); background: #010204;
    box-shadow: var(--rose-glow);
}
.hero-stal img { width: 100%; height: 100%; object-fit: contain; object-position: center; background: #010204; }
.hero-stal img { width: 100%; height: 100%; object-fit: contain; object-position: center; background: #010204; }
.hero-stal.hero-stal-photo img { object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, #010204 12%, rgba(1, 2, 4, 0.15) 45%, transparent 70%); display: flex; flex-direction: column; justify-content: flex-end; padding: 10px 12px; pointer-events: none; }
.koppel-box { background: rgba(205, 167, 158, 0.06); border: 1px solid rgba(205, 167, 158, 0.25); border-radius: var(--radius-md); padding: 10px; flex-shrink: 0; }
.koppel-row { display: flex; gap: 6px; margin-top: 6px; min-width: 0; align-items: stretch; }
.koppel-row .sv-input { flex: 1; min-width: 0; }
.koppel-row .btn-rose { width: auto; flex-shrink: 0; }
.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex-shrink: 0; }
.contact-card { background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: var(--radius-md); padding: 10px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; min-height: 44px; }
.status-pill.linked { background: rgba(56, 161, 105, 0.15); color: var(--success); border: 1px solid rgba(56, 161, 105, 0.3); }
.status-pill.manual { background: rgba(246, 173, 85, 0.12); color: var(--warning); border: 1px solid rgba(246, 173, 85, 0.25); }

/* --- Responsive / touch (iPhone & Android) --- */
.hdr-back, .hdr-btn, .add-btn, .nav-item, .admin-tab, .tab-btn, .grid-btn, .stal-tile, .nutri-open-cta {
    min-height: 44px;
}
@supports (padding: env(safe-area-inset-top)) {
    .top {
        padding-top: env(safe-area-inset-top, 0px);
        height: calc(72px + env(safe-area-inset-top, 0px));
    }
}
@media (max-width: 400px) {
    .admin-tab { padding: 8px 8px; font-size: 7px; }
    .settings-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 360px) {
    .admin-tab { padding: 8px 8px; font-size: 7px; }
    .settings-grid { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   PILOT — logo, slogan, planning carousel, horse grids, gangen, etc.
   ========================================================================== */

.brand-logo {
    height: 34px;
    width: auto;
    object-fit: contain;
    display: block;
}
.brand-slogan {
    font-size: 9px !important;
    color: #e3c5bb !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    text-transform: none !important;
    line-height: 1.25;
    max-width: 220px;
    white-space: normal;
    text-align: center;
    margin-top: 3px;
    opacity: 0.95;
}
@media (max-width: 380px) {
    .brand-logo { height: 28px; }
    .brand-slogan { font-size: 8px !important; max-width: 160px; }
}

.dash-quick-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.dash-quick-4 .cc-btn { padding: 12px 0; min-width: 0; }

/* Compact “bijna behaald” badge strip — keep short so fit-no-scroll holds */
.dash-near-badges { flex-shrink: 0; min-height: 0; min-width: 0; width: 100%; max-width: 100%; }
.dash-near-strip {
    min-height: 56px; width: 100%; max-width: 100%; min-width: 0;
    overflow: hidden;
}

/*
 * No native H-scroll UI (Windows Chrome/Edge classic blue ←/→ end-buttons
 * and Chrome ::scroll-button). overflow:hidden kills the OS scrollbar;
 * SwipeCarousel JS drag/wheel still drives scrollLeft. Clip keeps height tight.
 */
.scroll-clip {
    --clip-h: 56px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    position: relative;
    flex-shrink: 0;
    height: var(--clip-h);
    min-height: var(--clip-h);
    max-height: var(--clip-h);
}
.scroll-clip--near,
.scroll-clip:has(> .dash-near-strip) { --clip-h: 56px; }
.scroll-clip--horse,
.scroll-clip:has(> .horse-strip) { --clip-h: 100px; }
.scroll-clip--plan,
.scroll-clip:has(> .plan-carousel) { --clip-h: 96px; }
.scroll-clip--profile-badges,
.scroll-clip:has(> .profile-badge-strip) { --clip-h: 86px; }
.scroll-clip--profile-gallery,
.scroll-clip:has(> .profile-gallery) { --clip-h: 68px; }

.scroll-clip > .swipe-carousel,
.scroll-clip > .dash-near-strip,
.scroll-clip > .horse-strip,
.scroll-clip > .plan-carousel,
.scroll-clip > .profile-badge-strip,
.scroll-clip > .profile-gallery {
    height: var(--clip-h) !important;
    min-height: var(--clip-h) !important;
    max-height: var(--clip-h) !important;
    /* Native overflow scroll paints blue end-buttons — never use it here */
    overflow: hidden !important;
    align-items: flex-start;
    flex-wrap: nowrap !important;
    padding-bottom: 0;
    margin-bottom: 0;
    box-sizing: border-box;
    -ms-overflow-style: none;
    scrollbar-width: none;
    touch-action: pan-y;
    cursor: grab;
}
.scroll-clip > .profile-badge-strip,
.scroll-clip > .profile-gallery {
    touch-action: pan-x;
}
.scroll-clip > .swipe-carousel:active,
.scroll-clip > .dash-near-strip:active,
.scroll-clip > .horse-strip:active,
.scroll-clip > .plan-carousel:active,
.scroll-clip > .profile-badge-strip:active,
.scroll-clip > .profile-gallery:active {
    cursor: grabbing;
}
.scroll-clip > .swipe-carousel::-webkit-scrollbar,
.scroll-clip > .dash-near-strip::-webkit-scrollbar,
.scroll-clip > .horse-strip::-webkit-scrollbar,
.scroll-clip > .plan-carousel::-webkit-scrollbar,
.scroll-clip > .swipe-carousel::-webkit-scrollbar:horizontal,
.scroll-clip > .dash-near-strip::-webkit-scrollbar:horizontal,
.scroll-clip > .horse-strip::-webkit-scrollbar:horizontal,
.scroll-clip > .plan-carousel::-webkit-scrollbar:horizontal {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}
.scroll-clip > .swipe-carousel::-webkit-scrollbar-button,
.scroll-clip > .dash-near-strip::-webkit-scrollbar-button,
.scroll-clip > .horse-strip::-webkit-scrollbar-button,
.scroll-clip > .plan-carousel::-webkit-scrollbar-button,
.scroll-clip > .swipe-carousel::-webkit-scrollbar-button:horizontal:start:decrement,
.scroll-clip > .dash-near-strip::-webkit-scrollbar-button:horizontal:start:decrement,
.scroll-clip > .horse-strip::-webkit-scrollbar-button:horizontal:start:decrement,
.scroll-clip > .plan-carousel::-webkit-scrollbar-button:horizontal:start:decrement,
.scroll-clip > .swipe-carousel::-webkit-scrollbar-button:horizontal:end:increment,
.scroll-clip > .dash-near-strip::-webkit-scrollbar-button:horizontal:end:increment,
.scroll-clip > .horse-strip::-webkit-scrollbar-button:horizontal:end:increment,
.scroll-clip > .plan-carousel::-webkit-scrollbar-button:horizontal:end:increment,
.scroll-clip > .swipe-carousel::-webkit-scrollbar-track,
.scroll-clip > .dash-near-strip::-webkit-scrollbar-track,
.scroll-clip > .horse-strip::-webkit-scrollbar-track,
.scroll-clip > .plan-carousel::-webkit-scrollbar-track,
.scroll-clip > .swipe-carousel::-webkit-scrollbar-thumb,
.scroll-clip > .dash-near-strip::-webkit-scrollbar-thumb,
.scroll-clip > .horse-strip::-webkit-scrollbar-thumb,
.scroll-clip > .plan-carousel::-webkit-scrollbar-thumb,
.scroll-clip > .swipe-carousel::-webkit-scrollbar-corner,
.scroll-clip > .dash-near-strip::-webkit-scrollbar-corner,
.scroll-clip > .horse-strip::-webkit-scrollbar-corner,
.scroll-clip > .plan-carousel::-webkit-scrollbar-corner {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
}
/* Chrome overflow scroll buttons (often system-blue) */
.scroll-clip > .swipe-carousel::scroll-button(*),
.scroll-clip > .dash-near-strip::scroll-button(*),
.scroll-clip > .horse-strip::scroll-button(*),
.scroll-clip > .plan-carousel::scroll-button(*),
.scroll-clip > .swipe-carousel::scroll-button(left),
.scroll-clip > .dash-near-strip::scroll-button(left),
.scroll-clip > .horse-strip::scroll-button(left),
.scroll-clip > .plan-carousel::scroll-button(left),
.scroll-clip > .swipe-carousel::scroll-button(right),
.scroll-clip > .dash-near-strip::scroll-button(right),
.scroll-clip > .horse-strip::scroll-button(right),
.scroll-clip > .plan-carousel::scroll-button(right) {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

@media (max-width: 380px) {
    .app-viewport { padding-left: 12px; padding-right: 12px; gap: 8px; }
    .plan-slide { padding: 6px 7px; gap: 2px; }
    .horse-strip .horse-img-card { padding: 8px; }
}
@media (max-height: 780px) {
    .horse-strip { min-height: 88px; }
    .horse-strip .horse-img-card { height: 88px; }
    .scroll-clip--horse,
    .scroll-clip:has(> .horse-strip) { --clip-h: 88px; }
    .plan-carousel { min-height: 84px; }
    .plan-slide { height: 84px; min-height: 84px; max-height: 84px; padding: 6px 7px; }
    .scroll-clip--plan,
    .scroll-clip:has(> .plan-carousel) { --clip-h: 84px; }
    /* Match near-chip height (48px) — do not clip badges */
    .scroll-clip--near,
    .scroll-clip:has(> .dash-near-strip) { --clip-h: 48px; }
}
@media (max-height: 720px) {
    .horse-strip { min-height: 80px; }
    .horse-strip .horse-img-card { height: 80px; }
    .scroll-clip--horse,
    .scroll-clip:has(> .horse-strip) { --clip-h: 80px; }
    .plan-carousel { min-height: 76px; }
    .plan-slide { height: 76px; min-height: 76px; max-height: 76px; padding: 6px; }
    .scroll-clip--plan,
    .scroll-clip:has(> .plan-carousel) { --clip-h: 76px; }
    .app-viewport { gap: 6px; }
}
@media (max-height: 680px) {
    .horse-strip { min-height: 72px; }
    .horse-strip .horse-img-card { height: 72px; }
    .scroll-clip--horse,
    .scroll-clip:has(> .horse-strip) { --clip-h: 72px; }
    .plan-carousel { min-height: 70px; }
    .plan-slide { height: 70px; min-height: 70px; max-height: 70px; padding: 5px 6px; }
    .scroll-clip--plan,
    .scroll-clip:has(> .plan-carousel) { --clip-h: 70px; }
    /* Keep 48px — chips stay 48 from 780px breakpoint; avoid clipping */
    .scroll-clip--near,
    .scroll-clip:has(> .dash-near-strip) { --clip-h: 48px; }
}

.social-share-preview {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; border-radius: 14px;
    background: var(--bg-glass-light);
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer; flex-shrink: 0;
}
.social-share-preview img {
    width: 44px; height: 44px; border-radius: 10px; object-fit: cover;
}
.badge-promo {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; border-radius: 14px;
    background: rgba(205,167,158,0.1);
    border: 1px solid rgba(205,167,158,0.25);
    text-decoration: none; color: inherit; flex-shrink: 0;
}

/* Horse overview — vertical list (mockup: circular photo + serif name) */
.horse-overview-page {
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    align-self: center;
    box-sizing: border-box;
    min-height: 0;
}
.horse-overview-page .overview-head {
    width: 100%;
    flex-shrink: 0;
    padding-bottom: 4px;
}
.horse-overview-page .overview-head .page-title {
    margin: 0;
}
.horse-overview-page .overview-head .page-title-meta {
    margin: 2px 0 0;
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted, #7a8e9f);
    letter-spacing: 0.02em;
}
.horse-overview-wrap {
    position: relative;
    width: 100%;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.horse-overview-strip.swipe-carousel,
.horse-overview-strip {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-snap-type: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 2px 72px;
    scrollbar-width: none;
}
.horse-overview-strip > .horse-hero-card {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}
.horse-overview-strip::-webkit-scrollbar { display: none; }

.horse-overview-page-slide {
    display: contents;
}

.horse-hero-card,
button.horse-hero-card {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 118px;
    flex-shrink: 0; /* strip is a column flex — without this cards compress and content spills */
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--rose-border);
    background:
        linear-gradient(160deg, rgba(227, 197, 187, 0.05) 0%, transparent 40%),
        var(--bg-glass);
    box-shadow: var(--rose-glow), 0 6px 20px rgba(0, 0, 0, 0.28);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 12px;
    cursor: pointer;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    text-align: left;
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.horse-hero-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(ellipse 55% 80% at 6% 50%, rgba(205, 167, 158, 0.08) 0%, transparent 60%);
}
.horse-hero-card::after { display: none; }
.horse-hero-card > * { position: relative; z-index: 2; }
.horse-hero-card:active { transform: scale(0.985); }
.horse-overview-page .horse-hero-card:hover {
    border-color: rgba(205, 167, 158, 0.42);
    box-shadow: 0 0 22px rgba(205, 167, 158, 0.14), 0 8px 24px rgba(0, 0, 0, 0.32);
}
.horse-hero-card.manege {
    border-color: rgba(246, 173, 85, 0.4);
    box-shadow: 0 0 18px rgba(246, 173, 85, 0.1), 0 6px 20px rgba(0, 0, 0, 0.28);
}

.horse-hero-card .hh-bg {
    position: static;
    width: 98px;
    height: 98px;
    flex-shrink: 0;
    align-self: center;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--rose-gold);
    box-shadow: 0 0 0 2px rgba(205, 167, 158, 0.1), 0 0 12px rgba(205, 167, 158, 0.18);
}
.horse-hero-card .hh-grad { display: none; }
.horse-hero-card .hh-body {
    position: relative;
    z-index: 2;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 0;
    overflow: hidden;
}
.horse-hero-card .hh-tags {
    display: none;
}
.horse-hero-card .hh-name {
    position: static;
    font-family: var(--font-serif);
    font-size: 19px;
    font-weight: 600;
    margin: 0;
    color: #fdfbf7;
    line-height: 1.12;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.horse-hero-card .hh-name::after {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    margin-top: 3px;
    background: var(--rose-gold);
    opacity: 0.5;
}
.horse-hero-card .hh-sub {
    position: static;
    font-family: var(--font-sans);
    font-size: 10px;
    color: var(--text-muted);
    margin: 0;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.3;
    overflow: hidden;
}
.horse-hero-card .hh-chevron {
    color: var(--rose-gold);
    font-size: 14px;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    opacity: 0.9;
    margin-left: 0;
    align-self: center;
}

.horse-hero-card.slot-empty {
    border-style: dashed;
    border-color: rgba(205,167,158,0.4);
    background: rgba(205,167,158,0.04);
    box-shadow: none;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-height: 80px;
    flex-shrink: 0;
}
.horse-hero-card.slot-empty::before,
.horse-hero-card.slot-empty::after { display: none; }
.horse-hero-card.slot-empty i {
    font-size: 18px; color: var(--rose-gold);
}
.horse-hero-card.slot-empty span {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.8px; color: var(--text-muted);
}

.horse-overview-page .hh-task {
    display: flex; align-items: center; gap: 7px;
    margin-top: 2px; padding: 6px 9px;
    border-radius: var(--radius-sm);
    background: rgba(0,0,0,0.32);
    border: 1px solid rgba(205,167,158,0.2);
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.horse-overview-page .hh-task.done {
    opacity: 0.65;
    border-color: rgba(104,211,145,0.35);
}
.horse-overview-page .hh-task-check {
    width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid rgba(205,167,158,0.45);
    background: rgba(205,167,158,0.12);
    color: #e3c5bb; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; padding: 0;
}
.horse-overview-page .hh-task.done .hh-task-check {
    background: rgba(104,211,145,0.2);
    border-color: rgba(104,211,145,0.45);
    color: #68d391;
}
.horse-overview-page .hh-task-lbl {
    min-width: 0; flex: 1;
    font-size: 9px; font-weight: 700; color: #fdfbf7;
    text-transform: uppercase; letter-spacing: 0.35px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.2;
}
.horse-overview-page .hh-task.done .hh-task-lbl { text-decoration: line-through; color: var(--text-muted); }

/* Icon rail: bolt + weide/stal + tackroom — tappable, inside card */
.horse-overview-page .horse-card-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    max-width: 38px;
}
.horse-overview-page .horse-card-actions .icon-rail-btn {
    width: 36px; height: 36px; border-radius: 50%;
    flex-shrink: 0;
    background: rgba(205, 167, 158, 0.08);
    border: 1px solid rgba(205, 167, 158, 0.32);
    color: var(--rose-accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; cursor: pointer;
    padding: 0;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.horse-overview-page .horse-card-actions .icon-rail-btn:hover,
.horse-overview-page .horse-card-actions .icon-rail-btn:focus-visible {
    background: rgba(205, 167, 158, 0.16);
    border-color: rgba(227, 197, 187, 0.5);
    outline: none;
}
.horse-overview-page .horse-card-actions .icon-rail-btn .stirrup-ico {
    width: 16px; height: 16px; display: block;
    stroke: currentColor; fill: none; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
}
.horse-overview-page .horse-card-actions .icon-rail-btn[data-pasture]:hover,
.horse-overview-page .horse-card-actions .icon-rail-btn[data-pasture]:focus-visible {
    color: #b8e0c0;
    border-color: rgba(104, 211, 145, 0.5);
    background: rgba(104, 211, 145, 0.14);
}

.horse-overview-wrap > .swipe-carousel-glow {
    display: none !important;
}

@media (max-width: 520px) {
    .horse-overview-page { max-width: 100%; }
    .horse-hero-card { gap: 9px; padding: 9px 9px 9px 10px; min-height: 110px; }
    .horse-hero-card .hh-bg { width: 88px; height: 88px; }
    .horse-hero-card .hh-name { font-size: 18px; }
    .horse-overview-page .horse-card-actions { gap: 5px; max-width: 36px; }
    .horse-overview-page .horse-card-actions .icon-rail-btn {
        width: 34px; height: 34px; font-size: 12px;
    }
    .horse-overview-page .hh-task-check { width: 26px; height: 26px; }
}

@media (max-width: 360px) {
    .horse-hero-card { gap: 8px; padding: 8px; min-height: 100px; }
    .horse-hero-card .hh-bg { width: 76px; height: 76px; border-width: 1.5px; }
    .horse-hero-card .hh-name { font-size: 16px; }
    .horse-hero-card .hh-sub { font-size: 9px; }
    .horse-hero-card .hh-chevron { font-size: 12px; width: 12px; }
    .horse-overview-page .hh-task { padding: 5px 7px; }
    .horse-overview-page .hh-task-check { width: 26px; height: 26px; font-size: 10px; }
    .horse-overview-page .horse-card-actions { gap: 5px; max-width: 34px; }
    .horse-overview-page .horse-card-actions .icon-rail-btn {
        width: 32px; height: 32px; font-size: 11px;
    }
}

@media (min-width: 900px) {
    .horse-overview-page { max-width: 640px; }
}

/* Discipline chips */
.disc-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.disc-chip {
    padding: 10px 14px; min-height: 40px;
    border-radius: var(--radius-pill); border: 1px solid rgba(205,167,158,0.2);
    background: rgba(255,255,255,0.03); color: var(--text-muted);
    font-size: 10px; font-weight: 700; text-transform: uppercase; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0.5px;
}
.disc-chip.active {
    background: var(--rose-grad); color: #010204; border-color: transparent;
}

.mp-lock-banner {
    padding: 14px; border-radius: 16px; text-align: center;
    background: rgba(246,173,85,0.08); border: 1px solid rgba(246,173,85,0.3);
}
.mp-lock-banner h4 { color: #f6ad55; margin: 0 0 6px; font-size: 13px; }
.mp-lock-banner p { font-size: 10px; margin: 0; }

/* Gait readability */
.gait-legend {
    display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px;
}
.gait-legend-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; color: #fff;
}
.gait-legend-swatch {
    width: 14px; height: 14px; border-radius: 4px;
}
.gait-pct {
    font-size: 14px; font-weight: 800; color: #fff;
}
.gait-btn {
    font-size: 12px !important; font-weight: 800 !important;
    letter-spacing: 0.3px; padding: 10px 14px !important;
}

/* Stable chat dock */
.stal-chat-dock {
    flex-shrink: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(18,28,43,0.75);
    backdrop-filter: blur(16px);
}
.stal-chat-dock .chat-toggle {
    width: 100%; padding: 10px 14px; background: transparent; border: none;
    color: #cda79e; font-size: 10px; font-weight: 800; text-transform: uppercase;
    display: flex; align-items: center; justify-content: space-between; cursor: pointer;
}
.stal-chat-body { display: none; max-height: 180px; overflow-y: auto; padding: 0 12px 10px; }
.stal-chat-dock.open .stal-chat-body { display: block; }
.stal-member-row {
    display: flex; align-items: center; gap: 10px; padding: 8px;
    border-radius: 12px; cursor: pointer;
}
.stal-member-row.private { opacity: 0.55; cursor: default; }
.stal-avatar {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
    background: rgba(205,167,158,0.2);
}

/* Nutrimeter PRO */
.nutri-open-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 14px 14px 14px 12px;
    text-align: left;
    cursor: pointer;
    border-radius: 14px;
    border: 1px solid rgba(205, 167, 158, 0.45);
    background: linear-gradient(135deg, rgba(227, 197, 187, 0.16), rgba(18, 28, 43, 0.72));
    box-shadow: 0 0 0 1px rgba(205, 167, 158, 0.08), 0 8px 20px rgba(0, 0, 0, 0.25);
    color: inherit;
    font: inherit;
    transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
}
.nutri-open-cta:hover {
    border-color: rgba(227, 197, 187, 0.7);
    background: linear-gradient(135deg, rgba(227, 197, 187, 0.24), rgba(28, 40, 58, 0.85));
    box-shadow: 0 0 0 1px rgba(205, 167, 158, 0.18), 0 10px 24px rgba(0, 0, 0, 0.3);
}
.nutri-open-cta:active {
    transform: scale(0.98);
}
.nutri-open-cta:focus-visible {
    outline: 2px solid var(--rose-gold);
    outline-offset: 2px;
}
.nutri-open-cta__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rose-grad);
    color: #010204;
    font-size: 15px;
}
.nutri-open-cta__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.nutri-open-cta__title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.2px;
}
.nutri-open-cta__sub {
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.4;
}
.nutri-open-cta__chevron {
    flex-shrink: 0;
    color: var(--rose-gold);
    font-size: 12px;
    opacity: 0.9;
}
.nutri-pro-panel {
    border: 1px solid rgba(205,167,158,0.3);
    background: linear-gradient(160deg, rgba(205,167,158,0.08), rgba(18,28,43,0.5));
    border-radius: 16px; padding: 14px;
}
.nutri-metric-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px;
}
.nutri-metric {
    padding: 10px; border-radius: 12px; background: rgba(0,0,0,0.25);
}
.nutri-metric .nm-lbl { font-size: 8px; color: var(--text-muted); font-weight: 800; text-transform: uppercase; }
.nutri-metric .nm-val { font-size: 14px; color: #fff; font-weight: 800; margin-top: 2px; }
.nutri-metric .nm-status { font-size: 8px; margin-top: 2px; font-weight: 700; }

/* Superbadge / skins teaser */
.superbadge-row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; }
.superbadge-chip {
    flex-shrink: 0; padding: 8px 12px; border-radius: 12px;
    background: rgba(205,167,158,0.1); border: 1px solid rgba(205,167,158,0.25);
    font-size: 9px; font-weight: 800; color: #e3c5bb;
}

/* ==========================================================================
   LUXURY MOCKUP POLISH — global accents (EquiSensus colors retained)
   ========================================================================== */

.filter-pill {
    padding: 9px 16px; background: rgba(255,255,255,0.03);
    border: 1px solid rgba(205,167,158,0.2);
    border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 700;
    color: var(--text-muted); white-space: nowrap; cursor: pointer;
    text-transform: uppercase; letter-spacing: 0.5px;
}
.filter-pill.active { background: var(--rose-grad); color: #010204; border-color: transparent; }

.tab-btn,
.admin-tab {
    border-radius: var(--radius-pill) !important;
    border: 1px solid rgba(205,167,158,0.18) !important;
}

.plan-slide {
    border-radius: var(--radius-lg);
    background: var(--bg-glass);
    border: 1px solid var(--rose-border);
    box-shadow: var(--rose-glow);
}

.stat-val,
.admin-stat .val,
.gait-pct,
.nutri-metric .nm-val {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--rose-accent);
}

.sv-modal-content {
    background: #0a0908;
    border: 1px solid var(--rose-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--rose-glow), 0 20px 60px rgba(0,0,0,0.5);
}
.modal-hdr h3,
.equi-dialog-title {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--rose-accent);
}

.lesson-card {
    padding: 14px 16px;
    border: 1px solid var(--rose-border);
    border-left: 4px solid var(--rose-gold);
    border-radius: var(--radius-md);
    background: var(--bg-glass);
}

.avatar-img,
.avatar-ph {
    border: 1.5px solid var(--rose-gold) !important;
    box-shadow: 0 0 12px rgba(205,167,158,0.2);
}

.grid-btn {
    background: var(--bg-glass);
    border: 1px solid var(--rose-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--rose-glow);
}
.grid-btn h4 {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--rose-accent);
}

.sched-item {
    border-radius: var(--radius-md);
    background: var(--bg-glass);
    border: 1px solid var(--rose-border);
}
.sched-title {
    font-family: var(--font-serif);
    font-weight: 600;
    color: var(--rose-accent);
}

.cal-day.selected {
    border-radius: 50% !important;
    background: var(--rose-grad) !important;
    border-color: transparent !important;
    box-shadow: 0 0 16px rgba(205,167,158,0.35) !important;
}
.cal-day.selected .cal-day-num { color: #010204 !important; }
.cal-day.selected .cal-day-dots .cal-dot {
    background: #fff !important;
    box-shadow: 0 0 4px rgba(255,255,255,0.6);
}
.cal-day-head {
    display: flex;
    align-items: center !important;
    gap: 10px;
    flex-shrink: 0;
    margin-bottom: 6px;
}
.cal-day-head::before,
.cal-day-head::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(205,167,158,0.35), transparent);
}
.cal-day-head h3 {
    font-family: var(--font-serif);
    font-size: 12px;
    font-weight: 600;
    color: var(--rose-accent);
    margin: 0;
    white-space: nowrap;
    text-align: center;
    flex-shrink: 0;
    padding: 0 8px;
}

/* --- Calendar / Planning (compact no-scroll shell) --- */
.cal-shell {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    gap: 8px;
    overflow: hidden;
}
.cal-top {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
/* .cal-page-title styles live with .page-title */
.cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    gap: 6px;
    min-width: 0;
}
.cal-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    flex: 1 1 auto;
}
.cal-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(205,167,158,0.28);
    background: transparent;
    color: var(--rose-gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
    padding: 0;
}
.cal-nav-btn:active { transform: scale(0.94); background: rgba(205,167,158,0.12); }
.cal-month-label {
    font-family: var(--font-serif);
    font-size: 15px;
    color: var(--text-light);
    min-width: 0;
    max-width: 100%;
    flex: 1;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.cal-today-btn {
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid rgba(205,167,158,0.35);
    background: rgba(205,167,158,0.08);
    color: var(--rose-gold);
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.cal-view-toggle {
    display: flex;
    gap: 2px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    padding: 2px;
    border: 1px solid rgba(255,255,255,0.06);
}
.cal-view-btn {
    padding: 5px 7px;
    border: none;
    border-radius: 6px;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
    color: var(--text-muted);
    background: transparent;
    letter-spacing: 0.3px;
}
.cal-view-btn.active { background: var(--rose-grad); color: var(--bg-main); }
.cal-filters {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    flex-shrink: 0;
    padding-bottom: 1px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.cal-filters::-webkit-scrollbar { display: none; }
.cal-filter {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 9px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    font-size: 8px;
    font-weight: 800;
    color: var(--text-muted);
    cursor: pointer;
    text-transform: uppercase;
}
.cal-filter.active { border-color: rgba(205,167,158,0.45); background: rgba(205,167,158,0.12); color: var(--rose-gold); }
.cal-filter i { font-size: 10px; }
.cal-filter.all.active { background: var(--rose-grad); color: var(--bg-main); border-color: transparent; }
.cal-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
}
.cal-month-wrap {
    flex-shrink: 0;
    touch-action: pan-y;
}
.cal-year-wrap {
    display: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.cal-year-wrap.active { display: block; }
.cal-year-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding-bottom: 4px;
}
.cal-mini-month {
    background: var(--bg-glass);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 6px;
    cursor: pointer;
    transition: 0.2s;
}
.cal-mini-month:active,
.cal-mini-month.sel { border-color: var(--rose-gold); background: rgba(205,167,158,0.08); }
.cal-mini-title {
    font-size: 8px;
    font-weight: 800;
    color: var(--rose-gold);
    text-transform: uppercase;
    margin-bottom: 4px;
    text-align: center;
}
.cal-mini-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; }
.cal-mini-dot { width: 3px; height: 3px; border-radius: 50%; margin: 0 auto; }
.cal-mini-day {
    font-size: 6px;
    color: var(--text-muted);
    text-align: center;
    padding: 1px 0;
    line-height: 1;
}
.cal-mini-day.has { color: var(--text-light); font-weight: 700; }
.cal-mini-day.today { color: var(--bg-main); background: var(--rose-grad); border-radius: 3px; }
.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 2px;
    flex-shrink: 0;
}
.cal-weekday {
    text-align: center;
    font-size: 7px;
    font-weight: 800;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.2px;
}
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    flex-shrink: 0;
}
.cal-day {
    aspect-ratio: 1;
    width: 100%;
    max-width: 36px;
    max-height: 36px;
    margin: 0 auto;
    border-radius: 50%;
    border: 1px solid transparent;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: 0.15s;
    min-width: 0;
    padding: 0;
}
.cal-day.other { opacity: 0.28; }
.cal-day:active { transform: scale(0.92); }
.cal-day.today:not(.selected) .cal-day-num { color: var(--rose-gold); }
.cal-day-num {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-light);
    font-family: var(--font-serif);
    line-height: 1;
}
.cal-day-dots {
    display: flex;
    gap: 2px;
    margin-top: 2px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 90%;
}
.cal-dot { width: 3px; height: 3px; border-radius: 50%; flex-shrink: 0; }
.cal-day-section {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cal-events {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 1px 4px 0;
    -ms-overflow-style: none;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.cal-events::-webkit-scrollbar { display: none; }
.cal-event {
    padding: 10px 10px 10px 0;
    display: grid;
    grid-template-columns: minmax(48px, 54px) 1px minmax(38px, 42px) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0;
    cursor: pointer;
    position: relative;
    border-left: none;
    min-width: 0;
}
.cal-event.done { opacity: 0.65; }
.cal-event-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0 6px;
    flex-shrink: 0;
}
.cal-event-time-val {
    font-family: var(--font-serif);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-light);
    line-height: 1;
}
.cal-event-time-val.done-txt { text-decoration: line-through; }
.cal-event-dur {
    font-size: 8px;
    color: var(--text-muted);
    font-weight: 600;
}
.cal-event-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(205,167,158,0.18);
    min-height: 36px;
}
.cal-event-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    margin: 0 8px;
    border: 1px solid rgba(205,167,158,0.35);
    background: rgba(205,167,158,0.06);
    flex-shrink: 0;
}
.cal-event-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 8px;
    flex-shrink: 0;
}
.cal-type-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.cal-event-body {
    flex: 1;
    min-width: 0;
    padding-right: 6px;
}
.cal-event-body h4 {
    font-family: var(--font-serif);
    font-size: 13px;
    margin: 0;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.cal-event-body h4.done-txt { text-decoration: line-through; color: var(--text-muted); }
.cal-event-meta {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.cal-event-meta-row {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}
.cal-event-meta-row i {
    color: var(--rose-gold);
    font-size: 8px;
    width: 10px;
    flex-shrink: 0;
    text-align: center;
}
.cal-event-meta-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-event-meta .horse { color: var(--rose-gold); font-weight: 600; }
.cal-event-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding-right: 8px;
    flex-shrink: 0;
}
.cal-event-chevron {
    color: var(--rose-gold);
    font-size: 11px;
    opacity: 0.7;
}
.cal-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 5px;
    font-size: 7px;
    font-weight: 800;
    text-transform: uppercase;
}
.cal-badge-pill.parent { background: rgba(205,167,158,0.15); color: var(--rose-gold); border: 1px solid rgba(205,167,158,0.3); }
.cal-badge-pill.stable { background: rgba(56,161,105,0.12); color: var(--success); border: 1px solid rgba(56,161,105,0.25); }
.cal-badge-pill.rsvp-yes { background: rgba(56,161,105,0.15); color: var(--success); }
.cal-badge-pill.rsvp-no { background: rgba(255,255,255,0.05); color: var(--text-muted); }
.cal-progress-ring { position: relative; width: 38px; height: 38px; }
.cal-progress-ring svg { transform: rotate(-90deg); width: 38px; height: 38px; }
.cal-progress-ring .ring-bg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 3; }
.cal-progress-ring .ring-fg { fill: none; stroke: var(--warning); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 0.4s; }
.cal-progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: var(--warning);
}
.cal-check {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 9px;
    color: transparent;
}
.cal-check.on { background: rgba(56,161,105,0.2); border-color: var(--success); color: var(--success); }
.cal-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
    border: 1px dashed rgba(205,167,158,0.25);
    border-radius: var(--radius-lg);
    background: rgba(205,167,158,0.03);
    min-height: 80px;
}
.cal-empty i { font-size: 22px; color: var(--rose-gold); opacity: 0.5; margin-bottom: 6px; }
.cal-note-bar {
    flex-shrink: 0;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    background: rgba(205,167,158,0.06);
    border: 1px solid rgba(205,167,158,0.18);
    font-size: 9px;
    color: var(--text-muted);
    min-width: 0;
}
.cal-note-bar.visible { display: flex; }
.cal-note-bar i:first-child { color: var(--rose-gold); font-size: 12px; flex-shrink: 0; }
.cal-note-bar span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cal-note-bar i:last-child { color: var(--rose-gold); font-size: 11px; flex-shrink: 0; opacity: 0.7; }
@media (min-width: 400px) {
    .cal-day { max-width: 40px; max-height: 40px; }
    .cal-month-label { font-size: 16px; }
    .cal-day-head h3 { font-size: 13px; }
}
@media (max-width: 360px) {
    .cal-event {
        grid-template-columns: minmax(44px, 50px) 1px minmax(34px, 38px) minmax(0, 1fr) auto;
    }
    .cal-event-time-val { font-size: 14px; }
    .cal-event-body h4 { font-size: 12px; }
    .cal-today-btn { padding: 5px 6px; font-size: 7px; }
}

.badge-list-item {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--rose-border) !important;
    background: var(--bg-glass) !important;
}

.brand-slogan {
    letter-spacing: 1.4px !important;
    text-transform: uppercase;
    font-size: 8px !important;
    opacity: 0.8;
}

/* --- Overflow containment (mobile: knoppen/tekst binnen venster) --- */
.app-viewport,
.ls-viewport,
.cal-shell,
.social-root,
.content-main {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.page-scroll {
    overflow-x: hidden;
    overflow-y: auto;
    min-width: 0;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}
.dash-quick-4 .cc-label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 2px;
}
.admin-hero,
.admin-hero h4,
.admin-hero .meta {
    min-width: 0;
}
.admin-hero h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 380px) {
    .ls-card {
        grid-template-columns: 4px minmax(48px, 60px) minmax(0, 1fr) auto !important;
        padding-right: 8px !important;
    }
    .ls-card-time .ls-time { font-size: 15px !important; }
    .ls-meta-row { grid-template-columns: 1fr !important; }
    .form-row { grid-template-columns: 1fr; }
    .dash-quick-4 { gap: 4px; }
    .dash-quick-4 .cc-btn { padding: 8px 0; }
}
@media (max-height: 700px) {
    .ls-sec-lbl { font-size: 12px !important; }
    .ls-date-chip { padding: 6px 2px 8px; }
    .cal-day { max-width: 30px; max-height: 30px; }
    .cal-day-num { font-size: 9px; }
    .cal-dot { width: 2px; height: 2px; }
    .cal-day-dots { margin-top: 1px; }
    .cal-top { gap: 4px; }
    .cal-main { gap: 4px; }
    .cal-event { padding: 8px 8px 8px 0; }
    .cal-event-time-val { font-size: 14px; }
}