/*
 * App-wide design-system migration layer.
 * Loaded after page styles so UI Lab primitives remain the final visual authority.
 */

.ft-design-system {
    background: var(--ft-background);
    color: var(--ft-text-primary);
}

.ft-design-system :where(.ft-card, .ft-card-elevated, .ft-popover) {
    border-color: var(--ft-border-subtle) !important;
}

.ft-design-system :where(.ft-card) {
    background: rgb(var(--ft-surface-rgb) / 0.94) !important;
    box-shadow: var(--ft-shadow-sm);
}

.ft-design-system :where(.ft-card-elevated) {
    background:
        linear-gradient(180deg, rgb(var(--ft-surface-elevated-rgb) / 0.72), rgb(var(--ft-surface-rgb) / 0.98)),
        var(--ft-surface) !important;
    box-shadow: var(--ft-shadow-md);
}

.ft-design-system :where(.ft-popover) {
    background:
        linear-gradient(180deg, rgb(var(--ft-surface-elevated-rgb) / 0.82), rgb(var(--ft-surface-rgb) / 0.99)),
        var(--ft-surface) !important;
    box-shadow: var(--ft-shadow-md);
}

.ft-design-system :where(.ft-btn) {
    font-family: var(--ft-font-sans);
}

.ft-design-system :where(.ft-btn-primary) {
    border-color: rgb(var(--ft-primary-rgb) / 0.54) !important;
    background: var(--ft-primary-control-bg) !important;
    color: var(--ft-button-text) !important;
}

.ft-design-system :where(.ft-btn-secondary) {
    border-color: var(--ft-border-strong) !important;
    background: rgb(var(--ft-surface-elevated-rgb) / 0.58) !important;
    color: var(--ft-text-primary) !important;
}

.ft-design-system :where(.ft-btn-danger) {
    border-color: var(--ft-danger-border) !important;
    background: var(--ft-danger-surface) !important;
    color: var(--ft-error) !important;
}

.ft-design-system :where(.ft-control) {
    border-color: transparent;
    color: var(--ft-text-secondary);
    transition:
        border-color var(--ft-motion-fast) var(--ft-ease-standard),
        background var(--ft-motion-fast) var(--ft-ease-standard),
        color var(--ft-motion-fast) var(--ft-ease-standard);
}

.ft-design-system :where(.ft-control:hover, .ft-control.is-active, .ft-control[aria-selected="true"]) {
    border-color: rgb(var(--ft-primary-rgb) / 0.28);
    background: rgb(var(--ft-primary-rgb) / 0.09);
    color: var(--ft-primary);
}

.ft-design-system :where(.trainee-subtab-btn, #content-settings .settings-tab) {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.ft-design-system :where(.trainee-subtab-btn--active, #content-settings .settings-tab.is-active) {
    color: var(--ft-secondary) !important;
}

.ft-design-system :where(.ft-input, .ft-select, .ft-textarea) {
    border-color: var(--ft-border-strong) !important;
    background-color: rgb(var(--ft-surface-rgb) / 0.9) !important;
    color: var(--ft-text-primary) !important;
}

.ft-design-system :where(.ft-input, .ft-textarea)::placeholder {
    color: var(--ft-text-muted) !important;
}

.ft-design-system :where(.ft-input, .ft-select, .ft-textarea):focus {
    border-color: rgb(var(--ft-primary-rgb) / 0.72) !important;
    box-shadow: var(--ft-focus-ring) !important;
}

/*
 * Canonical UI Lab select chevron.
 * page-system applies this utility to static and dynamically rendered selects;
 * only the arrow and its inset are normalized so page-specific control sizing
 * remains intact.
 */
.ft-design-system :where(select.ft-select-chevron:not([multiple]):not([size])) {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-inline-end: 2.5rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.65rem center !important;
    background-size: 1rem !important;
}

html[data-theme="dark"] .ft-design-system :where(select.ft-select-chevron:not([multiple]):not([size])) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

.ft-searchable-select {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
}

.ft-searchable-select.is-hidden {
    display: none !important;
}

.ft-searchable-select-native {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.ft-design-system :where(.ft-searchable-select-trigger) {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    width: 100% !important;
    min-width: 0;
    min-height: var(--ft-control-md);
    padding: 0.6rem 2.5rem 0.6rem 0.9rem !important;
    border: 1px solid var(--ft-border-strong) !important;
    border-radius: var(--ft-radius-md);
    background-color: rgb(var(--ft-surface-rgb) / 0.9) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.65rem center !important;
    background-size: 1rem !important;
    color: var(--ft-text-primary) !important;
    font-size: 0.82rem;
    line-height: 1.35;
    text-align: left;
    cursor: pointer;
}

html[data-theme="dark"] .ft-design-system :where(.ft-searchable-select-trigger) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

.ft-design-system :where(.ft-searchable-select-trigger:hover) {
    border-color: rgb(var(--ft-primary-rgb) / 0.46) !important;
}

.ft-design-system :where(.ft-searchable-select-trigger:focus-visible),
.ft-design-system :where(.ft-searchable-select.is-open .ft-searchable-select-trigger) {
    border-color: rgb(var(--ft-primary-rgb) / 0.72) !important;
    box-shadow: var(--ft-focus-ring) !important;
    outline: none;
}

.ft-design-system :where(.ft-searchable-select.is-invalid .ft-searchable-select-trigger) {
    border-color: var(--ft-error) !important;
    box-shadow: 0 0 0 3px rgb(var(--ft-error-rgb) / 0.16) !important;
}

.ft-design-system :where(.ft-searchable-select-trigger:disabled) {
    cursor: not-allowed;
    opacity: 0.58;
}

.ft-searchable-select-value {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ft-searchable-select-panel {
    position: fixed;
    z-index: 2147483600;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-height: 0;
    padding: 0.5rem;
    border: 1px solid var(--ft-border-strong);
    border-radius: var(--ft-radius-md);
    background:
        linear-gradient(180deg, rgb(var(--ft-surface-elevated-rgb) / 0.9), rgb(var(--ft-surface-rgb) / 0.99)),
        var(--ft-surface);
    box-shadow: var(--ft-shadow-md);
    color: var(--ft-text-primary);
}

.ft-searchable-select-panel[hidden] {
    display: none !important;
}

.ft-searchable-select-search {
    flex: 0 0 auto;
    width: 100%;
    min-height: 2.5rem;
    padding: 0 0.8rem;
    border: 1px solid var(--ft-border-strong);
    border-radius: var(--ft-radius-sm);
    background: rgb(var(--ft-background-rgb) / 0.56);
    color: var(--ft-text-primary);
    font-size: 0.82rem;
    outline: none;
}

.ft-searchable-select-search[hidden] {
    display: none !important;
}

.ft-searchable-select-search::placeholder {
    color: var(--ft-text-muted);
}

.ft-searchable-select-search:focus {
    border-color: rgb(var(--ft-primary-rgb) / 0.72);
    box-shadow: 0 0 0 3px rgb(var(--ft-primary-rgb) / 0.14);
}

.ft-searchable-select-options {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.ft-searchable-select-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    min-height: 2.5rem;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: var(--ft-radius-sm);
    background: transparent;
    color: var(--ft-text-secondary);
    font-size: 0.82rem;
    text-align: left;
    cursor: pointer;
}

.ft-searchable-select-option:is(:hover, .is-active) {
    background: rgb(var(--ft-primary-rgb) / 0.1);
    color: var(--ft-text-primary);
}

.ft-searchable-select-option.is-selected {
    background: rgb(var(--ft-primary-rgb) / 0.14);
    color: var(--ft-primary);
    font-weight: 700;
}

.ft-searchable-select-option.is-selected::after {
    content: '\2713';
    flex: 0 0 auto;
    color: var(--ft-primary);
}

.ft-searchable-select-option:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.ft-searchable-select-option-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ft-searchable-select-option small {
    flex: 0 0 auto;
    color: var(--ft-text-muted);
    font-size: 0.72em;
}

.ft-searchable-select-empty {
    margin: 0;
    padding: 1rem 0.75rem;
    color: var(--ft-text-muted);
    text-align: center;
}

.ft-design-system :where(.ft-chip, .ft-badge) {
    border-color: var(--ft-border-subtle);
    background: rgb(var(--ft-surface-elevated-rgb) / 0.54);
    color: var(--ft-text-secondary);
}

.ft-design-system :where(.ft-chip.is-active, .ft-chip[aria-pressed="true"], .ft-badge-brand) {
    border-color: rgb(var(--ft-primary-rgb) / 0.42);
    background: rgb(var(--ft-primary-rgb) / 0.14);
    color: var(--ft-primary);
}

.ft-design-system :where(.ft-empty-compact) {
    border: 1px dashed var(--ft-border-strong);
    border-radius: var(--ft-radius-md);
    padding: var(--ft-space-5);
    background: rgb(var(--ft-surface-rgb) / 0.42);
    color: var(--ft-text-secondary);
    text-align: center;
}

.ft-design-system :where(.ft-bubble-own) {
    border-color: rgb(var(--ft-primary-rgb) / 0.38) !important;
    background: rgb(var(--ft-primary-rgb) / 0.16) !important;
    color: var(--ft-text-primary) !important;
}

html[data-theme="light"] .ft-design-system [data-message-bubble="own"] {
    color: var(--ft-text-primary) !important;
}

.ft-design-system :where(.ft-bubble) {
    border-color: var(--ft-border-subtle) !important;
    background: rgb(var(--ft-surface-elevated-rgb) / 0.72) !important;
    color: var(--ft-text-primary) !important;
}

.ft-design-system :where(.ft-bubble-own) {
    border-color: rgb(var(--ft-primary-rgb) / 0.38) !important;
    background: rgb(var(--ft-primary-rgb) / 0.16) !important;
}

.ft-design-system :where(.modal, [role="dialog"]) > :where(.absolute.inset-0, [data-backdrop]) {
    background: var(--ft-overlay);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.ft-design-system :where(.checkin-modal-backdrop, .clients-tag-manager-backdrop) {
    background: var(--ft-overlay) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

html[data-layout="workspace"] :where(
    #trainingModalContent,
    #trainingCoverPickerContent,
    #trainingPreviewDialogPanel,
    .removal-feedback-content,
    .checkin-modal-panel
) {
    border-color: var(--ft-border-strong) !important;
    background:
        linear-gradient(180deg, rgb(var(--ft-surface-elevated-rgb) / 0.72), rgb(var(--ft-surface-rgb) / 0.99)),
        var(--ft-surface) !important;
    color: var(--ft-text-primary);
    box-shadow: var(--ft-shadow-lg);
}

html[data-layout="workspace"] body.ft-design-system {
    background:
        radial-gradient(circle at 18% -12%, rgb(var(--ft-primary-rgb) / 0.08), transparent 34rem),
        var(--ft-background);
}

html[data-layout="workspace"] .trainer-sidebar,
html[data-layout="workspace"] body > nav {
    border-color: var(--ft-border-subtle);
    background: rgb(var(--ft-surface-rgb) / 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

html[data-layout="workspace"] .trainer-page-title,
html[data-layout="workspace"] .clients-list-title {
    color: var(--ft-text-primary);
}

html[data-layout="workspace"] :where(.dashboard-stat-icon, .notification-icon[data-tone="brand"]) {
    background: rgb(var(--ft-primary-rgb) / 0.13);
    color: var(--ft-primary);
}

html[data-layout="workspace"] :where(
    .dashboard-link-btn,
    .clients-filter-reset,
    .schedule-inline-link,
    .education-link
) {
    color: var(--ft-primary) !important;
}

html[data-layout="workspace"] :where(
    .text-blue-300,
    .text-blue-400,
    .text-indigo-300,
    .text-indigo-400,
    .text-cyan-300,
    .text-cyan-400
) {
    color: var(--ft-primary) !important;
}

html[data-layout="workspace"] :where(
    .border-blue-400,
    .border-blue-500,
    .border-indigo-400,
    .border-indigo-500
) {
    border-color: rgb(var(--ft-primary-rgb) / 0.5) !important;
}

html[data-layout="workspace"] :where(
    .clients-list-row,
    .schedule-month-day,
    .schedule-week-column,
    .schedule-session-card,
    .active-program-slot-row,
    .active-program-history-card
) {
    border-color: var(--ft-border-subtle);
}

html[data-layout="workspace"] :where(
    .clients-list-row:hover,
    .schedule-month-day:hover,
    .schedule-session-card:hover
) {
    background: rgb(var(--ft-primary-rgb) / 0.055);
}

html[data-layout="workspace"] :where(
    .training-toggle-active,
    .dashboard-toggle-btn.is-active,
    .library-tab-btn.is-active,
    .library-subtab-btn.is-active
) {
    border-color: rgb(var(--ft-primary-rgb) / 0.38) !important;
    background: rgb(var(--ft-primary-rgb) / 0.12) !important;
    color: var(--ft-primary) !important;
}

html[data-layout="workspace"] :where(.messages-panel, .checkin-detail-panel) {
    border-radius: 0 !important;
    box-shadow: none !important;
}

html[data-layout="workspace"] .messages-panel {
    background: var(--checkin-surface-elevated) !important;
}

html[data-layout="workspace"] .checkin-detail-panel {
    border: 0 !important;
    background: transparent !important;
}

html[data-layout="workspace"] .client-settings-feature-panel {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.training-library-count-badge,
.training-library-custom-badge,
.training-library-assigned-badge {
    border-color: rgb(var(--ft-primary-rgb) / 0.38) !important;
    background: rgb(var(--ft-primary-rgb) / 0.13) !important;
    color: var(--ft-primary) !important;
    box-shadow: none !important;
}

.trainer-getting-started-help-icons span {
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgb(var(--ft-primary-rgb) / 0.28);
    background: rgb(var(--ft-primary-rgb) / 0.13);
    color: var(--ft-primary);
    transform: none;
}

.trainer-getting-started-help-icons .ft-icon {
    width: 1.1rem;
    height: 1.1rem;
    stroke-width: 2.25;
}

@media (min-width: 1281px) {
    .schedule-calendar-header,
    .schedule-toolbar {
        flex-wrap: nowrap;
    }

    .schedule-toolbar {
        flex: 0 1 auto;
        min-width: 0;
    }

    .schedule-toolbar .schedule-filter-control {
        width: auto;
    }
}

@media (min-width: 1024px) {
    .lab-results-toolbar,
    .lab-results-controls,
    .lab-results-date-range {
        flex-wrap: nowrap;
    }

    .lab-results-controls {
        width: auto;
    }

    .lab-results-date-range,
    .lab-results-date-range input {
        flex: 0 0 auto;
    }

    .lab-results-category {
        width: auto;
        min-width: 12rem;
    }
}

html[data-layout="workspace"] :where(
    .training-card,
    .program-card,
    .nutrition-library-card,
    .questionnaire-library-card,
    .video-library-card
) {
    overflow: hidden;
    border-radius: var(--ft-radius-lg);
}

html[data-layout="workspace"] :where(
    .training-card,
    .program-card,
    .nutrition-library-card,
    .questionnaire-library-card,
    .video-library-card
):hover {
    border-color: rgb(var(--ft-primary-rgb) / 0.35) !important;
    box-shadow: var(--ft-shadow-md);
}

body[data-ft-document="index"] :where(.feature-card, .pricing-card, .mission-card),
body[data-ft-document="login"] :where(.login-card),
body[data-ft-document="trainer-pricing"] :where(.pricing-card, .billing-card, .modal-card),
body[data-ft-document="pending-approval"] :where(.login-card),
body[data-ft-document="skafoskafnak-index"] :where(.admin-section, #authCard) {
    border-color: var(--ft-border-subtle) !important;
    background: rgb(var(--ft-surface-rgb) / 0.92) !important;
    box-shadow: var(--ft-shadow-sm);
}

body[data-ft-document="index"] :where(.premium-btn-primary, .premium-btn-small),
body[data-ft-document="login"] :where(.role-btn.is-selected),
body[data-ft-document="skafoskafnak-index"] :where(#loginBtn) {
    border-color: rgb(var(--ft-primary-rgb) / 0.54) !important;
    background: var(--ft-primary-control-bg) !important;
    color: var(--ft-button-text) !important;
}

body[data-ft-document="index"] :where(.premium-btn-secondary),
body[data-ft-document="trainer-pricing"] :where(#signOutBtn),
body[data-ft-document="skafoskafnak-index"] :where(#refreshBtn) {
    border-color: var(--ft-border-strong) !important;
    background: rgb(var(--ft-surface-elevated-rgb) / 0.58) !important;
    color: var(--ft-text-primary) !important;
}

body[data-ft-document="skafoskafnak-index"] :where(#logoutBtn) {
    border-color: var(--ft-danger-border) !important;
    background: var(--ft-danger-surface) !important;
    color: var(--ft-error) !important;
}

body[data-ft-document="skafoskafnak-index"]:not(.admin-landing) #adminHeader {
    border-color: var(--ft-border-subtle);
    background: rgb(var(--ft-surface-rgb) / 0.9);
}

@media (max-width: 640px) {
    .ft-design-system :where(.ft-popover) {
        max-width: calc(100vw - 1rem);
    }
}