/* =====================================================================
   madbri-restaurant Component Library — Scoped CSS
   =====================================================================
   Alle componenten zijn ge-prefixed met `ds-` zodat ze niet botsen met
   bestaande v1-CSS. Tokens komen uit tokens.v2.css.
   ===================================================================== */

/* ===== BUTTONS ===== */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: var(--font-body-size);
    line-height: 1;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                transform 160ms var(--ease-out);
    white-space: nowrap;
    user-select: none;
}
.ds-btn:active:not(:disabled) { transform: scale(0.97); }
.ds-btn:focus-visible {
    outline: 2px solid var(--c-brand-accent);
    outline-offset: 2px;
}
.ds-btn:disabled, .ds-btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
}
.ds-btn--sm { padding: 6px 12px; font-size: var(--font-small-size); min-height: 32px; }
.ds-btn--md { padding: 10px 18px; min-height: 40px; }
.ds-btn--lg { padding: 13px 22px; font-size: 1rem; min-height: 48px; }
.ds-btn--block { width: 100%; }

.ds-btn--primary {
    background: var(--c-brand-accent);
    color: var(--c-brand-accent-fg);
    border-color: var(--c-brand-accent);
}
.ds-btn--primary:hover:not(:disabled) {
    background: var(--c-brand-accent-muted);
    border-color: var(--c-brand-accent-muted);
}

.ds-btn--secondary {
    background: var(--c-surface-raised);
    color: var(--c-fg-default);
    border-color: var(--c-border-default);
}
.ds-btn--secondary:hover:not(:disabled) {
    background: var(--c-surface-sunken);
    border-color: var(--c-border-strong);
}

.ds-btn--ghost {
    background: transparent;
    color: var(--c-fg-muted);
}
.ds-btn--ghost:hover:not(:disabled) {
    background: var(--c-surface-sunken);
    color: var(--c-fg-default);
}

.ds-btn--danger {
    background: var(--c-danger-soft);
    color: var(--c-danger);
    border-color: transparent;
}
.ds-btn--danger:hover:not(:disabled) {
    background: var(--c-danger);
    color: var(--c-surface-raised);
}

.ds-btn--link {
    background: transparent;
    color: var(--c-brand-accent);
    padding-left: 0;
    padding-right: 0;
    border: none;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    min-height: auto;
}

.ds-btn__spinner { display: inline-flex; animation: ds-spin 600ms linear infinite; }
.ds-btn.is-loading .ds-btn__icon, .ds-btn.is-loading .ds-btn__label { opacity: 0.6; }

@keyframes ds-spin { to { transform: rotate(360deg); } }

/* Icon-only button */
.ds-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    background: transparent;
    color: var(--c-fg-muted);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                transform 160ms var(--ease-out);
}
.ds-icon-btn:active:not(:disabled) { transform: scale(0.95); }
.ds-icon-btn:hover:not(:disabled) {
    background: var(--c-surface-sunken);
    color: var(--c-fg-default);
}
.ds-icon-btn:focus-visible {
    outline: 2px solid var(--c-brand-accent);
    outline-offset: 2px;
}
.ds-icon-btn--sm { width: 28px; height: 28px; }
.ds-icon-btn--md { width: 36px; height: 36px; }
.ds-icon-btn--lg { width: 44px; height: 44px; }
.ds-icon-btn--ghost { /* default styling */ }
.ds-icon-btn--solid {
    background: var(--c-surface-raised);
    border-color: var(--c-border-default);
}
.ds-icon-btn--primary {
    background: var(--c-brand-accent);
    color: var(--c-brand-accent-fg);
}
.ds-icon-btn--primary:hover:not(:disabled) {
    background: var(--c-brand-accent-muted);
    color: var(--c-brand-accent-fg);
}

/* ===== INPUTS / FIELDS ===== */
.ds-field { display: flex; flex-direction: column; gap: 6px; }
.ds-field__label {
    font-size: var(--font-small-size);
    font-weight: 600;
    color: var(--c-fg-default);
}
.ds-field__required {
    color: var(--c-danger);
    margin-left: 2px;
}
.ds-field__wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.ds-field__input {
    width: 100%;
    background: var(--c-surface-raised);
    color: var(--c-fg-default);
    border: 1px solid var(--c-border-default);
    border-radius: var(--radius-md);
    padding: 11px 13px;
    font-family: var(--font-sans);
    font-size: var(--font-body-size);
    line-height: var(--font-body-line-height);
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
    font-feature-settings: 'tnum' 1;
}
.ds-field--sm .ds-field__input { padding: 7px 11px; font-size: var(--font-small-size); }
.ds-field--lg .ds-field__input { padding: 14px 16px; font-size: 1rem; }
.ds-field__input:focus {
    outline: none;
    border-color: var(--c-brand-accent);
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}
.ds-field__input::placeholder { color: var(--c-fg-subtle); }
.ds-field__input:disabled {
    background: var(--c-surface-sunken);
    color: var(--c-fg-subtle);
    cursor: not-allowed;
}
.ds-field__textarea { resize: vertical; min-height: 88px; line-height: 1.55; }
.ds-field__icon {
    position: absolute;
    color: var(--c-fg-subtle);
    pointer-events: none;
    display: inline-flex;
}
.ds-field__icon--left { left: 12px; }
.ds-field__icon--right { right: 12px; }
.ds-field__input--has-icon-left { padding-left: 40px; }
.ds-field__input--has-icon-right { padding-right: 40px; }
.ds-field__select { appearance: none; padding-right: 40px; cursor: pointer; }
.ds-field__wrap--select .ds-field__icon--right { pointer-events: none; }
.ds-field.has-error .ds-field__input {
    border-color: var(--c-danger);
}
.ds-field.has-error .ds-field__input:focus {
    box-shadow: 0 0 0 3px var(--c-danger-soft);
}
.ds-field__error {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-small-size);
    color: var(--c-danger);
    margin: 0;
}
.ds-field__help {
    font-size: var(--font-small-size);
    color: var(--c-fg-muted);
    margin: 0;
}

/* ===== CHECKBOX ===== */
.ds-checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.ds-checkbox__input { position: absolute; opacity: 0; pointer-events: none; }
.ds-checkbox__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    background: var(--c-surface-raised);
    border: 1.5px solid var(--c-border-strong);
    border-radius: var(--radius-sm);
    color: transparent;
    transition: background-color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
.ds-checkbox__input:checked ~ .ds-checkbox__box {
    background: var(--c-brand-accent);
    border-color: var(--c-brand-accent);
    color: var(--c-brand-accent-fg);
}
.ds-checkbox__input:focus-visible ~ .ds-checkbox__box {
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}
.ds-checkbox__input:disabled ~ .ds-checkbox__box { opacity: 0.5; cursor: not-allowed; }
.ds-checkbox__label {
    font-size: var(--font-body-size);
    color: var(--c-fg-default);
}
.ds-checkbox__help {
    display: block;
    font-size: var(--font-small-size);
    color: var(--c-fg-muted);
    margin-top: 2px;
}

/* ===== RADIO ===== */
.ds-radio {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.ds-radio__input { position: absolute; opacity: 0; pointer-events: none; }
.ds-radio__circle {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    border: 1.5px solid var(--c-border-strong);
    border-radius: 50%;
    background: var(--c-surface-raised);
    position: relative;
    transition: border-color var(--dur-fast) var(--ease-out);
}
.ds-radio__input:checked ~ .ds-radio__circle::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 8px; height: 8px;
    background: var(--c-brand-accent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}
.ds-radio__input:checked ~ .ds-radio__circle {
    border-color: var(--c-brand-accent);
}
.ds-radio__input:focus-visible ~ .ds-radio__circle {
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}
.ds-radio__label {
    font-size: var(--font-body-size);
    color: var(--c-fg-default);
}
.ds-radio__help {
    display: block;
    font-size: var(--font-small-size);
    color: var(--c-fg-muted);
    margin-top: 2px;
}

/* ===== SWITCH ===== */
.ds-switch {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.ds-switch__input { position: absolute; opacity: 0; pointer-events: none; }
.ds-switch__track {
    position: relative;
    display: inline-flex;
    width: 36px;
    height: 20px;
    background: var(--c-border-strong);
    border-radius: 9999px;
    transition: background-color var(--dur-default) var(--ease-out);
    flex-shrink: 0;
}
.ds-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: var(--c-surface-raised);
    border-radius: 50%;
    transition: transform var(--dur-default) var(--ease-out);
    box-shadow: var(--shadow-xs);
}
.ds-switch__input:checked ~ .ds-switch__track {
    background: var(--c-brand-accent);
}
.ds-switch__input:checked ~ .ds-switch__track .ds-switch__thumb {
    transform: translateX(16px);
}
.ds-switch__input:focus-visible ~ .ds-switch__track {
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}
.ds-switch__label {
    font-size: var(--font-body-size);
    color: var(--c-fg-default);
}
.ds-switch__help {
    display: block;
    font-size: var(--font-small-size);
    color: var(--c-fg-muted);
}

/* ===== CARDS ===== */
.ds-card {
    display: block;
    background: var(--c-surface-raised);
    border: 1px solid var(--c-border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--c-fg-default);
}
.ds-card--interactive {
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out),
                transform var(--dur-fast) var(--ease-out);
}
.ds-card--interactive:hover {
    border-color: var(--c-border-strong);
    box-shadow: var(--shadow-xs);
}
.ds-card__header {
    padding: 18px 24px 0;
    margin-bottom: 12px;
}
.ds-card__title {
    margin: 0;
    font-size: var(--font-title-size);
    font-weight: var(--font-title-weight);
    color: var(--c-fg-default);
}
.ds-card__subtitle {
    margin: 4px 0 0;
    font-size: var(--font-small-size);
    color: var(--c-fg-muted);
}
.ds-card__body { padding: 0 24px 24px; }
.ds-card__header + .ds-card__body { padding-top: 12px; }

/* ===== PANEL ===== */
.ds-panel {
    display: block;
    background: var(--c-surface-base);
    padding: 32px 0;
}
.ds-panel__title {
    margin: 0 0 16px;
    font-size: var(--font-title-size);
    font-weight: var(--font-title-weight);
    color: var(--c-fg-default);
}

/* ===== EMPTY STATE ===== */
.ds-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--c-fg-muted);
}
.ds-empty__icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    background: var(--c-surface-sunken);
    border-radius: var(--radius-full);
    color: var(--c-fg-muted);
    margin-bottom: 12px;
}
.ds-empty__title {
    margin: 0 0 4px;
    font-size: var(--font-title-size);
    font-weight: var(--font-title-weight);
    color: var(--c-fg-default);
}
.ds-empty__description {
    margin: 0 0 16px;
    font-size: var(--font-body-size);
    color: var(--c-fg-muted);
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}
.ds-empty__actions {
    display: inline-flex;
    gap: 8px;
    justify-content: center;
}

/* ===== DIALOG ===== */
.ds-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: oklch(15% 0.01 285 / 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    z-index: 1000;
    backdrop-filter: blur(2px);
}
.ds-dialog {
    background: var(--c-surface-raised);
    color: var(--c-fg-default);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    width: 100%;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    transform-origin: center;
}
.ds-dialog--sm { max-width: 400px; }
.ds-dialog--md { max-width: 520px; }
.ds-dialog--lg { max-width: 720px; }
.ds-dialog--xl { max-width: 960px; }
.ds-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--c-border-subtle);
}
.ds-dialog__title {
    margin: 0;
    font-size: var(--font-title-size);
    font-weight: var(--font-title-weight);
}
.ds-dialog__body { padding: 24px; }
/* Enter/leave with Alpine transitions */
.ds-dialog--enter { transition: opacity var(--dur-default) var(--ease-out), transform var(--dur-default) var(--ease-out); }
.ds-dialog--enter-start { opacity: 0; transform: scale(0.97); }
.ds-dialog--enter-end { opacity: 1; transform: scale(1); }
.ds-dialog--leave { transition: opacity var(--dur-fast) var(--ease-out); }
.ds-dialog--leave-end { opacity: 0; }

/* ===== DRAWER ===== */
.ds-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: oklch(15% 0.01 285 / 0.5);
    display: flex;
    z-index: 1000;
}
.ds-drawer {
    background: var(--c-surface-raised);
    color: var(--c-fg-default);
    height: 100%;
    width: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-lg);
}
.ds-drawer--right { margin-left: auto; }
.ds-drawer--left { margin-right: auto; }
.ds-drawer--sm { max-width: 320px; }
.ds-drawer--md { max-width: 440px; }
.ds-drawer--lg { max-width: 600px; }
.ds-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--c-border-subtle);
}
.ds-drawer__title {
    margin: 0;
    font-size: var(--font-title-size);
    font-weight: var(--font-title-weight);
}
.ds-drawer__body { padding: 24px; flex: 1; }
.ds-drawer--enter, .ds-drawer--leave { transition: transform var(--dur-slow) var(--ease-drawer); }
.ds-drawer--enter-start-right { transform: translateX(100%); }
.ds-drawer--enter-start-left { transform: translateX(-100%); }
.ds-drawer--enter-end { transform: translateX(0); }

/* ===== POPOVER ===== */
.ds-popover-wrap { position: relative; display: inline-block; }
.ds-popover-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--c-border-default);
    color: var(--c-fg-default);
    border-radius: var(--radius-md);
    padding: 8px 12px;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--font-small-size);
}
.ds-popover-trigger:hover { background: var(--c-surface-sunken); }
.ds-popover-trigger:focus-visible {
    outline: 2px solid var(--c-brand-accent);
    outline-offset: 2px;
}
.ds-popover {
    position: absolute;
    z-index: 100;
    min-width: 200px;
    background: var(--c-surface-raised);
    border: 1px solid var(--c-border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 6px;
    margin-top: 6px;
    transform-origin: top left;
}
.ds-popover--bottom-start { left: 0; top: 100%; }
.ds-popover--bottom-end { right: 0; top: 100%; transform-origin: top right; }
.ds-popover--top-start { left: 0; bottom: 100%; transform-origin: bottom left; }
.ds-pop--enter { transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.ds-pop--enter-start { opacity: 0; transform: scale(0.97); }
.ds-pop--enter-end { opacity: 1; transform: scale(1); }

/* ===== TOOLTIP ===== */
.ds-tooltip-wrap {
    position: relative;
    display: inline-flex;
}
.ds-tooltip {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    background: var(--c-surface-overlay);
    color: var(--c-fg-on-overlay);
    padding: 5px 9px;
    border-radius: var(--radius-sm);
    font-size: var(--font-label-size);
    letter-spacing: 0.02em;
    white-space: nowrap;
    z-index: 200;
    transition: opacity var(--dur-fast) var(--ease-out), visibility 0s var(--dur-fast);
    pointer-events: none;
}
.ds-tooltip-wrap:hover .ds-tooltip,
.ds-tooltip-wrap:focus-visible .ds-tooltip,
.ds-tooltip-wrap:focus-within .ds-tooltip {
    opacity: 1;
    visibility: visible;
    transition-delay: 250ms, 250ms;
}
.ds-tooltip--top {
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
}
.ds-tooltip--bottom {
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
}
.ds-tooltip--left {
    right: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
}
.ds-tooltip--right {
    left: calc(100% + 4px);
    top: 50%;
    transform: translateY(-50%);
}

/* ===== ALERT ===== */
.ds-alert {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    align-items: flex-start;
}
.ds-alert__icon { flex-shrink: 0; line-height: 1; padding-top: 2px; }
.ds-alert__content { flex: 1; min-width: 0; }
.ds-alert__title {
    margin: 0 0 2px;
    font-size: var(--font-body-size);
    font-weight: 600;
}
.ds-alert__body { font-size: var(--font-small-size); }
.ds-alert__dismiss {
    background: transparent;
    border: none;
    cursor: pointer;
    color: currentColor;
    opacity: 0.6;
    padding: 2px;
    line-height: 1;
    border-radius: var(--radius-sm);
}
.ds-alert__dismiss:hover { opacity: 1; background: oklch(0% 0 0 / 0.05); }
.ds-alert--info { background: var(--c-info-soft); color: var(--c-info-fg); border-color: var(--c-info-soft); }
.ds-alert--success { background: var(--c-success-soft); color: var(--c-success-fg); border-color: var(--c-success-soft); }
.ds-alert--warning { background: var(--c-warning-soft); color: var(--c-warning-fg); border-color: var(--c-warning-soft); }
.ds-alert--danger { background: var(--c-danger-soft); color: var(--c-danger-fg); border-color: var(--c-danger-soft); }

/* ===== BANNER ===== */
.ds-banner {
    padding: 10px 16px;
    text-align: center;
    font-size: var(--font-small-size);
    font-weight: 500;
}
.ds-banner--info { background: var(--c-info-soft); color: var(--c-info-fg); }
.ds-banner--success { background: var(--c-success-soft); color: var(--c-success-fg); }
.ds-banner--warning { background: var(--c-warning-soft); color: var(--c-warning-fg); }
.ds-banner--danger { background: var(--c-danger-soft); color: var(--c-danger-fg); }

/* ===== BADGE ===== */
.ds-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-label-size);
    font-weight: var(--font-label-weight);
    letter-spacing: var(--font-label-letter-spacing);
    text-transform: uppercase;
    line-height: 1.3;
}
.ds-badge--neutral { background: var(--c-surface-sunken); color: var(--c-fg-muted); }
.ds-badge--success { background: var(--c-success-soft); color: var(--c-success-fg); }
.ds-badge--warning { background: var(--c-warning-soft); color: var(--c-warning-fg); }
.ds-badge--danger { background: var(--c-danger-soft); color: var(--c-danger-fg); }
.ds-badge--info { background: var(--c-info-soft); color: var(--c-info-fg); }
.ds-badge--brand { background: var(--c-brand-accent-soft); color: var(--c-brand-accent-fg); }
.ds-badge--outline {
    background: transparent;
    border: 1px solid var(--c-border-default);
    color: var(--c-fg-muted);
}

/* ===== AVATAR ===== */
.ds-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--c-surface-sunken);
    color: var(--c-fg-muted);
    border-radius: var(--radius-full);
    overflow: hidden;
    flex-shrink: 0;
    font-weight: 600;
    font-family: var(--font-sans);
}
.ds-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ds-avatar__initials {
    font-size: 0.4em;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.ds-avatar--xs { width: 24px; height: 24px; font-size: 0.65rem; }
.ds-avatar--sm { width: 32px; height: 32px; font-size: 0.8rem; }
.ds-avatar--md { width: 40px; height: 40px; font-size: 1rem; }
.ds-avatar--lg { width: 56px; height: 56px; font-size: 1.4rem; }
.ds-avatar--xl { width: 80px; height: 80px; font-size: 2rem; }

/* ===== STATUS DOT ===== */
.ds-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--font-small-size);
    color: var(--c-fg-default);
}
.ds-status__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c-fg-muted);
    flex-shrink: 0;
}
.ds-status--success .ds-status__dot { background: var(--c-success); }
.ds-status--warning .ds-status__dot { background: var(--c-warning); }
.ds-status--danger .ds-status__dot { background: var(--c-danger); }
.ds-status--info .ds-status__dot { background: var(--c-info); }
.ds-status--brand .ds-status__dot { background: var(--c-brand-accent); }
.ds-status--pulse .ds-status__dot {
    box-shadow: 0 0 0 0 currentColor;
    animation: ds-status-pulse 2s infinite;
}
@keyframes ds-status-pulse {
    0% { box-shadow: 0 0 0 0 oklch(62% 0.16 145 / 0.6); }
    70% { box-shadow: 0 0 0 8px oklch(62% 0.16 145 / 0); }
    100% { box-shadow: 0 0 0 0 oklch(62% 0.16 145 / 0); }
}

/* ===== SKELETON ===== */
.ds-skeleton {
    display: inline-block;
    background: linear-gradient(
        90deg,
        var(--c-surface-sunken) 0%,
        var(--c-border-subtle) 50%,
        var(--c-surface-sunken) 100%
    );
    background-size: 200% 100%;
    animation: ds-skel 1400ms linear infinite;
}
@keyframes ds-skel { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
    .ds-skeleton { animation: none; background: var(--c-surface-sunken); }
}

/* ===== SPINNER ===== */
.ds-spinner {
    display: inline-flex;
    color: currentColor;
}
.ds-spinner svg { animation: ds-spin 600ms linear infinite; }
@media (prefers-reduced-motion: reduce) { .ds-spinner svg { animation-duration: 2s; } }

/* ===== TABS ===== */
.ds-tabs {
    display: inline-flex;
    gap: 4px;
    border-bottom: 1px solid var(--c-border-default);
}
.ds-tab {
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: var(--c-fg-muted);
    font-family: var(--font-sans);
    font-size: var(--font-small-size);
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
    text-decoration: none;
}
.ds-tab:hover { color: var(--c-fg-default); }
.ds-tab.is-active {
    color: var(--c-fg-default);
    border-bottom-color: var(--c-brand-accent);
    font-weight: 600;
}
.ds-tab:focus-visible {
    outline: 2px solid var(--c-brand-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ===== BREADCRUMB ===== */
.ds-breadcrumb { font-size: var(--font-small-size); color: var(--c-fg-muted); }
.ds-breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.ds-breadcrumb__item { display: flex; align-items: center; gap: 6px; }
.ds-breadcrumb__link {
    color: var(--c-fg-muted);
    text-decoration: none;
}
.ds-breadcrumb__link:hover { color: var(--c-fg-default); text-decoration: underline; }
.ds-breadcrumb__current { color: var(--c-fg-default); font-weight: 500; }
.ds-breadcrumb__sep { display: inline-flex; color: var(--c-fg-subtle); }

/* ===== KEY-VALUE LIST ===== */
.ds-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 20px;
    margin: 0;
}
.ds-kv__key {
    color: var(--c-fg-muted);
    font-size: var(--font-small-size);
    font-weight: 500;
}
.ds-kv__value {
    margin: 0;
    color: var(--c-fg-default);
    font-size: var(--font-body-size);
}

/* ===== TABLE WRAP ===== */
.ds-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--c-border-default);
    border-radius: var(--radius-lg);
    background: var(--c-surface-raised);
}
.ds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-small-size);
}
.ds-table th, .ds-table td {
    text-align: left;
    padding: 11px 16px;
    border-bottom: 1px solid var(--c-border-subtle);
    vertical-align: middle;
}
.ds-table th {
    background: var(--c-surface-sunken);
    font-size: var(--font-label-size);
    font-weight: var(--font-label-weight);
    letter-spacing: var(--font-label-letter-spacing);
    text-transform: uppercase;
    color: var(--c-fg-muted);
    border-bottom-color: var(--c-border-default);
}
.ds-table tr:last-child td { border-bottom: none; }
.ds-table tr:hover td { background: var(--c-surface-sunken); }
.ds-table .num { text-align: right; font-feature-settings: 'tnum' 1; }

/* ===== ACCORDION ===== */
.ds-accordion__item {
    border-bottom: 1px solid var(--c-border-subtle);
}
.ds-accordion__item:last-child { border-bottom: none; }
.ds-accordion__trigger {
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 16px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-sans);
    font-size: var(--font-body-size);
    font-weight: 600;
    color: var(--c-fg-default);
    text-align: left;
}
.ds-accordion__trigger:focus-visible {
    outline: 2px solid var(--c-brand-accent);
    outline-offset: 2px;
}
.ds-accordion__chev {
    transition: transform var(--dur-fast) var(--ease-out);
    color: var(--c-fg-muted);
}
.ds-accordion__chev.is-open { transform: rotate(180deg); }
.ds-accordion__panel {
    padding-bottom: 16px;
    color: var(--c-fg-muted);
    font-size: var(--font-body-size);
}

/* ===== DIVIDER ===== */
.ds-divider {
    height: 1px;
    background: var(--c-border-subtle);
    margin: 24px 0;
}
.ds-divider--labeled {
    height: auto;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--font-label-size);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-fg-muted);
}
.ds-divider--labeled::before,
.ds-divider--labeled::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--c-border-subtle);
}

/* ===== PAGE HEADER ===== */
.ds-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}
.ds-page-header__main { flex: 1; min-width: 0; }
.ds-page-header__eyebrow {
    margin: 0 0 6px;
    font-size: var(--font-label-size);
    font-weight: var(--font-label-weight);
    letter-spacing: var(--font-label-letter-spacing);
    text-transform: uppercase;
    color: var(--c-fg-muted);
}
.ds-page-header__title {
    margin: 0;
    font-size: var(--font-headline-size);
    font-weight: var(--font-headline-weight);
    line-height: var(--font-headline-line-height);
    letter-spacing: var(--font-headline-letter-spacing);
    color: var(--c-fg-default);
}
.ds-page-header__subtitle {
    margin: 8px 0 0;
    font-size: var(--font-body-size);
    color: var(--c-fg-muted);
    max-width: 65ch;
}
.ds-page-header__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* ===== KPI ===== */
.ds-kpi {
    background: var(--c-surface-raised);
    border: 1px solid var(--c-border-default);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
}
.ds-kpi__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.ds-kpi__label {
    margin: 0;
    font-size: var(--font-label-size);
    font-weight: var(--font-label-weight);
    letter-spacing: var(--font-label-letter-spacing);
    text-transform: uppercase;
    color: var(--c-fg-muted);
}
.ds-kpi__icon { color: var(--c-fg-muted); }
.ds-kpi__value {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--c-fg-default);
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-feature-settings: 'tnum' 1;
}
.ds-kpi__delta {
    margin: 4px 0 0;
    font-size: var(--font-small-size);
    font-weight: 600;
    font-feature-settings: 'tnum' 1;
}
.ds-kpi__delta--success { color: var(--c-success); }
.ds-kpi__delta--danger { color: var(--c-danger); }
.ds-kpi__delta--neutral { color: var(--c-fg-muted); }
.ds-kpi__unit {
    font-size: 1rem;
    font-weight: 500;
    color: var(--c-fg-muted);
    margin-left: 2px;
}

/* Ruimte onderaan de content zodat de feedback-FAB nooit het laatste
   element afdekt (FAB is fixed rechtsonder). */
.ds-layout__main { padding-bottom: 96px; }

/* ===== GRID (layout-primitief; showcase heeft een eigen kopie) ===== */
.ds-grid { display: grid; gap: 16px; }
.ds-grid--2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.ds-grid--3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ds-grid--4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ===== HERO — brand-moment op rol-landingspagina's ===============
   Foto + scrim + begroeting + 2-3 meta-feiten. Geen KPI-vervanger
   (die staan eronder in ds-kpi); titel in Inter per DESIGN.md.
   Tekstkleuren zijn bewust vast (altijd licht-op-donkere-scrim),
   onafhankelijk van light/dark en thema. */
.ds-hero {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    min-height: clamp(160px, 28vw, 220px);
    display: flex;
    align-items: flex-end;
    background: var(--c-surface-sunken);
    box-shadow: var(--shadow-md);
}
.ds-hero__bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: brightness(0.6);
    transform: scale(1.01);
    transition: transform 0.6s var(--ease-out);
}
.ds-hero:hover .ds-hero__bg { transform: scale(1.04); }
.ds-hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--c-hero-overlay, linear-gradient(180deg, oklch(25% 0.01 285 / 0.15) 0%, oklch(20% 0.015 285 / 0.85) 100%));
}
.ds-hero__content {
    position: relative;
    z-index: 2;
    padding: 24px 28px;
    width: 100%;
    color: oklch(98% 0.005 90);
}
.ds-hero__eyebrow {
    margin: 0 0 6px;
    font-size: var(--font-label-size);
    font-weight: var(--font-label-weight);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: oklch(90% 0.055 95);
}
.ds-hero__title {
    margin: 0;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: inherit;
}
.ds-hero__subtitle {
    margin: 6px 0 0;
    font-size: var(--font-body-size);
    color: oklch(98% 0.005 90 / 0.82);
    max-width: 60ch;
}
.ds-hero__meta {
    display: flex;
    gap: 20px;
    margin-top: 16px;
    flex-wrap: wrap;
}
.ds-hero__meta-item {
    font-size: var(--font-small-size);
    color: oklch(98% 0.005 90 / 0.85);
}
.ds-hero__meta-item strong {
    font-weight: 700;
    margin-right: 4px;
    color: oklch(90% 0.055 95);
    font-feature-settings: 'tnum' 1;
}

/* ===========================================================
   V1 TOKEN-ALIASSES — legacy CSS-vars (--c-gold etc.) die in oude
   templates inline worden gebruikt, mappen we naar v2-tokens zodat
   migrerende templates kleur-consistent blijven.
   =========================================================== */
body.ui-v2 {
    --c-gold: var(--c-brand-accent);
    --c-gold-soft: var(--c-brand-accent-soft);
    --c-gold-deep: var(--c-brand-accent-muted);
    --c-gold-tint: var(--c-brand-accent-soft);
    --c-charcoal: var(--c-fg-default);
    --c-charcoal-2: var(--c-surface-overlay);
    --c-cream: var(--c-surface-sunken);
    --c-line: var(--c-border-subtle);
    --c-border: var(--c-border-default);
    --c-muted: var(--c-fg-muted);
    --c-text: var(--c-fg-default);
    --c-bg: var(--c-surface-base);
    --c-surface: var(--c-surface-raised);
    --c-ok: var(--c-success);
    --c-primary: var(--c-brand-accent);
    --f-display: var(--font-display);
    --f-sans: var(--font-sans);
    --f-body: var(--font-sans);
    --r-sm: var(--radius-sm);
    --r-md: var(--radius-md);
    --r-lg: var(--radius-lg);
    --gap: 16px;
    --gap-lg: 24px;
}

/* ===========================================================
   V1 COMPAT-LAAG — minimal styles voor legacy classes die door
   nog-niet-gemigreerde templates worden gebruikt onder base_v2.
   ===========================================================
   Doel: legacy templates (encuesta, owner, admin) kunnen geleidelijk
   migreren zonder dat ze instant breken onder v2-stylesheets. */
body.ui-v2 .card,
body.ui-v2 .section .card {
    background: var(--c-surface-raised);
    border: 1px solid var(--c-border-default);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
}
body.ui-v2 .card h3 { margin: 0 0 4px; font-size: 1rem; font-weight: 600; color: var(--c-fg-default); }
body.ui-v2 .card p { margin: 0; color: var(--c-fg-muted); font-size: var(--font-small-size); }
body.ui-v2 a.card {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
body.ui-v2 a.card:hover {
    border-color: var(--c-border-strong);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
body.ui-v2 .card-icon-row { display: flex; align-items: flex-start; gap: 14px; }
body.ui-v2 .card-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--c-brand-accent-soft);
    color: var(--c-brand-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body.ui-v2 .card-meta { font-size: 0.75rem; color: var(--c-fg-muted); margin-top: 8px; }
body.ui-v2 .card-highlight { border-color: var(--c-brand-accent-soft); }
body.ui-v2 .card-locked { opacity: 0.55; cursor: not-allowed; border-style: dashed; }
body.ui-v2 .card-locked:hover { transform: none; box-shadow: none; border-color: var(--c-border-default); }
body.ui-v2 .card-icon-locked { background: var(--c-surface-sunken); color: var(--c-fg-muted); }
body.ui-v2 .card-admin-off { opacity: 0.75; }
body.ui-v2 .muted { color: var(--c-fg-muted); }
body.ui-v2 .small { font-size: var(--font-small-size); }
body.ui-v2 .serif { font-family: var(--font-display); }
body.ui-v2 .section { margin-bottom: 24px; }
body.ui-v2 .section-title h2 {
    margin: 0 0 12px;
    font-size: var(--font-title-size);
    font-weight: var(--font-title-weight);
    color: var(--c-fg-default);
}
body.ui-v2 .page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
body.ui-v2 .page-header .actions { display: flex; gap: 8px; flex-wrap: wrap; }
body.ui-v2 .page-eyebrow {
    margin: 0 0 6px;
    font-size: var(--font-label-size);
    font-weight: var(--font-label-weight);
    letter-spacing: var(--font-label-letter-spacing);
    text-transform: uppercase;
    color: var(--c-fg-muted);
}
body.ui-v2 .alert {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    margin-bottom: 14px;
    font-size: var(--font-small-size);
}
body.ui-v2 .alert-ok { background: var(--c-success-soft); color: var(--c-success-fg); }
body.ui-v2 .alert-error, body.ui-v2 .alert-warning, body.ui-v2 .alert-warn { background: var(--c-warning-soft); color: var(--c-warning-fg); }
body.ui-v2 .alert-info { background: var(--c-info-soft); color: var(--c-info-fg); }
body.ui-v2 .alert-danger { background: var(--c-danger-soft); color: var(--c-danger-fg); }

body.ui-v2 .table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-small-size);
    background: var(--c-surface-raised);
}
body.ui-v2 .table th, body.ui-v2 .table td {
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--c-border-subtle);
}
body.ui-v2 .table th {
    background: var(--c-surface-sunken);
    font-size: var(--font-label-size);
    font-weight: var(--font-label-weight);
    letter-spacing: var(--font-label-letter-spacing);
    text-transform: uppercase;
    color: var(--c-fg-muted);
}
body.ui-v2 .table tr:last-child td { border-bottom: none; }
body.ui-v2 .table .num { text-align: right; font-feature-settings: 'tnum' 1; }
body.ui-v2 .table-wrap {
    overflow-x: auto;
    border: 1px solid var(--c-border-default);
    border-radius: var(--radius-lg);
}

body.ui-v2 .badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    font-size: var(--font-label-size);
    font-weight: var(--font-label-weight);
    letter-spacing: var(--font-label-letter-spacing);
    text-transform: uppercase;
}
body.ui-v2 .badge-gold, body.ui-v2 .badge-brand { background: var(--c-brand-accent-soft); color: var(--c-brand-accent-fg); }
body.ui-v2 .badge-success, body.ui-v2 .badge-done { background: var(--c-success-soft); color: var(--c-success-fg); }
body.ui-v2 .badge-warning, body.ui-v2 .badge-warn, body.ui-v2 .badge-building { background: var(--c-warning-soft); color: var(--c-warning-fg); }
body.ui-v2 .badge-danger, body.ui-v2 .badge-blocked { background: var(--c-danger-soft); color: var(--c-danger-fg); }
body.ui-v2 .badge-info, body.ui-v2 .badge-testing { background: var(--c-info-soft); color: var(--c-info-fg); }
body.ui-v2 .badge-neutral, body.ui-v2 .badge-planned { background: var(--c-surface-sunken); color: var(--c-fg-muted); }

body.ui-v2 .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 1px solid var(--c-border-default);
    background: var(--c-surface-raised);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: var(--font-small-size);
    font-family: var(--font-sans);
    color: var(--c-fg-default);
    text-decoration: none;
    font-weight: 600;
    transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
body.ui-v2 .btn:hover { background: var(--c-surface-sunken); }
body.ui-v2 .btn-primary { background: var(--c-brand-accent); color: var(--c-brand-accent-fg); border-color: var(--c-brand-accent); }
body.ui-v2 .btn-primary:hover { background: var(--c-brand-accent-muted); border-color: var(--c-brand-accent-muted); color: var(--c-brand-accent-fg); }
body.ui-v2 .btn-secondary { background: var(--c-surface-raised); color: var(--c-fg-default); }
body.ui-v2 .btn-danger { background: var(--c-danger); color: oklch(98% 0 0); border-color: var(--c-danger); }
body.ui-v2 .btn-warning { background: var(--c-warning); color: oklch(20% 0.01 285); border-color: var(--c-warning); }
body.ui-v2 .btn-sm { padding: 6px 12px; font-size: 0.8rem; }
body.ui-v2 .btn-mini { padding: 4px 8px; font-size: 0.75rem; }
body.ui-v2 .btn-link { background: transparent; color: var(--c-brand-accent); padding: 0; border: none; }

body.ui-v2 input[type=email], body.ui-v2 input[type=text], body.ui-v2 input[type=number],
body.ui-v2 input[type=password], body.ui-v2 input[type=tel], body.ui-v2 input[type=date],
body.ui-v2 input[type=datetime-local], body.ui-v2 input[type=time], body.ui-v2 input[type=url],
body.ui-v2 select, body.ui-v2 textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--c-border-default);
    border-radius: var(--radius-md);
    font-size: var(--font-body-size);
    font-family: var(--font-sans);
    background: var(--c-surface-raised);
    color: var(--c-fg-default);
    transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
body.ui-v2 input:focus, body.ui-v2 select:focus, body.ui-v2 textarea:focus {
    outline: none;
    border-color: var(--c-brand-accent);
    box-shadow: 0 0 0 3px var(--c-focus-ring);
}
body.ui-v2 form label > span {
    display: block;
    font-size: var(--font-small-size);
    color: var(--c-fg-default);
    margin-bottom: 5px;
    font-weight: 600;
}
body.ui-v2 form label { display: block; margin-bottom: 12px; }

body.ui-v2 .kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
body.ui-v2 .kv dt { color: var(--c-fg-muted); font-size: var(--font-small-size); font-weight: 600; }
body.ui-v2 .kv dd { margin: 0; color: var(--c-fg-default); }

body.ui-v2 .grid { display: grid; gap: 16px; margin-bottom: 24px; }
body.ui-v2 .grid-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
body.ui-v2 .grid-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
body.ui-v2 .grid-4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

body.ui-v2 .stat { display: flex; flex-direction: column; gap: 4px; padding: 14px; }
body.ui-v2 .stat-label { color: var(--c-fg-muted); font-size: var(--font-label-size); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
body.ui-v2 .stat-value { font-size: 1.5rem; font-weight: 600; color: var(--c-fg-default); font-feature-settings: 'tnum' 1; }

body.ui-v2 .portal-hero {
    margin-bottom: 24px;
}
body.ui-v2 .portal-hero h1 {
    margin: 0;
    font-size: var(--font-headline-size);
    font-weight: var(--font-headline-weight);
    color: var(--c-fg-default);
}
body.ui-v2 .portal-hero p { margin: 6px 0 0; color: var(--c-fg-muted); }

/* ===== SKIP LINK (a11y, WCAG 2.4.1) ===== */
.ds-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--c-brand-accent);
    color: var(--c-brand-accent-fg);
    padding: 12px 18px;
    z-index: 10000;
    font-weight: 600;
    text-decoration: none;
    border-bottom-right-radius: var(--radius-md);
    transition: top var(--dur-fast) var(--ease-out);
}
.ds-skip-link:focus {
    top: 0;
    outline: 2px solid var(--c-fg-default);
    outline-offset: 2px;
}

/* ===== ALPINE x-cloak helper ===== */
[x-cloak] { display: none !important; }

/* ===== PRINT STYLES (voor receipts, contracten) ===== */
@media print {
    body.ui-v2 { background: white !important; color: black !important; }
    .ds-topbar, .ds-sidebar, .ds-fb-widget, .ds-skip-link,
    [data-pana-clock], .ds-icon-btn[data-theme-toggle] {
        display: none !important;
    }
    body.ui-v2--authed {
        display: block !important;
        grid-template-columns: none !important;
    }
    .ds-layout__main {
        padding: 0 !important;
        max-width: 100% !important;
    }
    .ds-card, .ds-panel {
        page-break-inside: avoid;
        border-color: #ccc !important;
    }
    .ds-btn, .ds-icon-btn {
        display: none !important;
    }
    a { color: inherit !important; text-decoration: underline; }
    @page { margin: 1.5cm; }
}

/* ===========================================================
   RESPONSIVE TEKST-FIXES — voorkomt awkward line-breaks op kleine schermen
   =========================================================== */

/* Lange button-labels niet wrappen, ellipsis als nodig */
.ds-btn__label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.ds-btn { min-width: 0; }
.ds-btn--block .ds-btn__label { max-width: none; }

/* KPI-labels: text-balance voorkomt awkward breaks zoals "Open\nziekmeldingen" */
.ds-kpi__label {
    text-wrap: balance;
    word-spacing: -0.02em;
}

/* Sidebar-items: nooit wrappen, ellipsis als ze niet passen */
.ds-sidebar__item {
    min-width: 0;
}
.ds-sidebar__item > span:not([class]) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

/* Tile-labels: balance, geen mid-word-break */
.equipo-tile__label,
.module-tile__heading h3 {
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: break-word;
    hyphens: none;
}
.equipo-tile__desc,
.module-tile__description {
    text-wrap: pretty;
    overflow-wrap: break-word;
}

/* Topbar user-info wrappen voorkomen */
.ds-topbar__username,
.ds-topbar__userrole {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

/* Page-header titels balanceren */
.ds-page-header__title,
.ds-page-header__subtitle {
    text-wrap: balance;
}

/* iPad portrait: knoppen iets compacter */
@media (max-width: 1024px) {
    .ds-btn--md { padding: 9px 14px; }
    .ds-page-header__actions .ds-btn { font-size: var(--font-small-size); }
}

/* iPhone: KPI-grid wordt 2 kolommen i.p.v. 4, met kortere labels */
@media (max-width: 600px) {
    .ds-grid.ds-grid--4 { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ds-grid.ds-grid--3 { grid-template-columns: 1fr; gap: 12px; }
    .ds-kpi { padding: 14px 16px; }
    .ds-kpi__value { font-size: 1.45rem; }
    .ds-kpi__label { font-size: 0.625rem; }
    .ds-page-header { gap: 14px; }
    .ds-page-header__title { font-size: 1.4rem; }
    .ds-page-header__actions { width: 100%; }
    .ds-page-header__actions .ds-btn { flex: 1; justify-content: center; }
    .equipo-welcome { padding: 12px 14px; gap: 10px; }
    .equipo-welcome__greeting { font-size: 1rem; }
    .equipo-welcome__avatar { width: 40px; height: 40px; font-size: 0.9rem; }
    .ds-hero { min-height: 150px; margin-bottom: 18px; }
    .ds-hero__content { padding: 18px 20px; }
    .ds-hero__title { font-size: 1.35rem; }
    .ds-hero__meta { gap: 12px; margin-top: 12px; }
    /* Ruimte onderaan zodat de feedback-FAB nooit content afdekt */
    .ds-layout__main { padding-bottom: 88px; }
}

/* ===== TOUCH-TARGETS (WCAG 2.5.8 / Apple HIG 44pt) ===== */
@media (pointer: coarse) {
    .ds-btn, .ds-icon-btn, .ds-tab, .ds-sidebar__item, .ds-fb-fab {
        min-height: 44px;
    }
    .ds-btn--md { padding-top: 10px; padding-bottom: 10px; }
    body.ui-v2 .btn { min-height: 44px; }
}

/* Smallest iPhone (SE 375px): force 1 column KPI-grid */
@media (max-width: 380px) {
    .ds-grid.ds-grid--4 { grid-template-columns: 1fr; }
    .ds-page-header__title { font-size: 1.25rem; }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    .ds-btn, .ds-icon-btn, .ds-field__input, .ds-popover-trigger,
    .ds-tab, .ds-accordion__chev, .ds-switch__thumb, .ds-switch__track {
        transition-duration: 0.01ms !important;
    }
    .ds-dialog--enter, .ds-drawer--enter, .ds-pop--enter {
        transition-duration: 0.01ms !important;
    }
    .ds-hero__bg { transition: none; }
    .ds-hero:hover .ds-hero__bg { transform: scale(1.01); }
}