/* Stage 11: final compatibility layer for approved DESIGN.md contracts.
   Keep this file narrow: bridge active legacy markup to shared tokens/components
   without changing screen structure, Wallet finance artwork or attendance visuals. */

:root {
    /* Retire active legacy aliases on migrated student routes. */
    --ui-text-subtle: var(--color-text-subtle);
    --ui-record-radius: var(--radius-card);
    --ui-badge-radius: var(--radius-pill);
    --ui-action-radius: var(--radius-control);
    --ui-section-title-line-height: var(--type-section-title-line-height);
    --ui-section-title-weight: var(--type-section-title-weight);
    --ui-card-title-line-height: var(--type-activity-title-line-height);
    --ui-card-meta-size: var(--type-activity-meta-size);
    --ui-card-meta-line-height: var(--type-activity-meta-line-height);
    --ui-card-meta-weight: var(--type-activity-meta-weight);
    --ui-card-badge-size: var(--type-micro-status-size);
    --ui-card-badge-line-height: var(--type-micro-status-line-height);
    --ui-card-badge-weight: var(--type-micro-status-weight);
    --ui-card-value-line-height: var(--type-activity-value-line-height);
    --ui-motion-layout-duration: var(--motion-small);
    --ui-motion-layout-easing: var(--motion-ease);
    --ui-motion-control-duration: var(--motion-micro);
}

/* Generic migrated micro labels. Attendance labels are deliberately excluded. */
.badge-base,
.c-badge-base {
    border-radius: var(--radius-pill) !important;
    font-size: var(--type-micro-status-size) !important;
    font-weight: var(--type-micro-status-weight) !important;
    line-height: var(--type-micro-status-line-height) !important;
}

.c-date-label,
.list-date-label,
.list-c-date-label {
    color: var(--color-text-subtle) !important;
    font-size: var(--type-micro-supporting-size) !important;
    font-weight: var(--type-micro-supporting-weight) !important;
    line-height: var(--type-micro-supporting-line-height) !important;
}

/* ============================================
   ZAJĘCIA — legacy markup adapters
   ============================================ */

/* Readable loading/supporting copy must not use slate-400 on white. */
.list-view-container p.text-slate-400,
.list-view-container span.text-slate-400 {
    color: var(--color-text-subtle) !important;
}

/* Loading indicators use the brand language instead of random indigo. */
#active-applications-list .border-indigo-600,
#bottom_sheet_applications_history_content .border-indigo-600,
#bottom_sheet_activity_history_content .border-indigo-600 {
    border-color: var(--ui-brand-action) !important;
}

/* Shared SVG chevron shape while preserving existing DOM/business hooks. */
.myactivities-section-disclosure-icon,
.makeups-history-title-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background-color: currentColor;
    font-size: 0 !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5 5 5-5'/%3E%3C/svg%3E");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 9 5 5 5-5'/%3E%3C/svg%3E");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    transition: transform var(--motion-small) var(--motion-ease) !important;
}

/* Custom sheet closes: 44px target. No close X has a permanent frame/circle/background. */
#bottom_sheet_absence_makeup [data-bottom-sheet-close],
#bottom_sheet_applications_history [data-bottom-sheet-close],
#bottom_sheet_activity_history [data-bottom-sheet-close],
#bottom_sheet_timeline_dot [data-bottom-sheet-close] {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 0 !important;
    box-shadow: none !important;
}

#bottom_sheet_applications_history [data-bottom-sheet-close],
#bottom_sheet_activity_history [data-bottom-sheet-close],
#bottom_sheet_timeline_dot [data-bottom-sheet-close] {
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ui-text-secondary) !important;
}

#bottom_sheet_absence_makeup [data-bottom-sheet-close] {
    border-radius: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
}

#bottom_sheet_absence_makeup [data-bottom-sheet-close] > i,
#bottom_sheet_applications_history [data-bottom-sheet-close] > i,
#bottom_sheet_activity_history [data-bottom-sheet-close] > i,
#bottom_sheet_timeline_dot [data-bottom-sheet-close] > i {
    display: none !important;
}

#bottom_sheet_absence_makeup [data-bottom-sheet-close]::before,
#bottom_sheet_applications_history [data-bottom-sheet-close]::before,
#bottom_sheet_activity_history [data-bottom-sheet-close]::before,
#bottom_sheet_timeline_dot [data-bottom-sheet-close]::before {
    content: '';
    width: 18px;
    height: 18px;
    background-color: currentColor;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

/* TimelineDot is an operational Type 2-like action: no black/indigo CTA. */
#bottom_sheet_timeline_dot_content button[onclick*="TimelineDot.runAction"] {
    min-height: 48px !important;
    border: 0 !important;
    border-radius: var(--radius-control) !important;
    padding: 0 16px !important;
    background: var(--ui-brand-action) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-size: var(--type-button-size) !important;
    font-weight: var(--type-button-weight) !important;
    line-height: var(--type-button-line-height) !important;
}

#bottom_sheet_timeline_dot_content button[onclick*="TimelineDot.runAction"]:hover {
    background: var(--ui-brand-action-hover) !important;
}

/* Normalize active list motion without touching the frozen course-signup flow. */
.list-course-card {
    transition:
        transform var(--motion-micro) var(--motion-ease),
        height var(--motion-small) var(--motion-ease),
        opacity var(--motion-small) var(--motion-ease) !important;
}

.list-payment-status-container,
.list-payment-type,
.list-timeline-container {
    transition-duration: var(--motion-small) !important;
    transition-timing-function: var(--motion-ease) !important;
}

.list-pass-status,
.list-deposit-status,
.list-timeline-dot {
    transition-timing-function: var(--motion-ease) !important;
}

.myactivities-history-badge,
.makeup-unreported-strip {
    font-size: var(--type-micro-status-size) !important;
    font-weight: var(--type-micro-status-weight) !important;
    line-height: var(--type-micro-status-line-height) !important;
}

.makeup-row-time-label {
    font-size: var(--type-micro-supporting-size) !important;
    font-weight: var(--type-micro-supporting-weight) !important;
    line-height: var(--type-micro-supporting-line-height) !important;
}

.makeup-unreported-strip button {
    font-size: var(--type-micro-status-size) !important;
    font-weight: var(--type-micro-status-weight) !important;
    line-height: var(--type-micro-status-line-height) !important;
}

/* ============================================
   SCHEDULE FILTERS — preserve structure, align selection language
   ============================================ */

.p-schedule-format-filter {
    font-size: var(--type-filter-size) !important;
    font-weight: var(--type-filter-weight) !important;
    line-height: var(--type-filter-line-height) !important;
}

.p-schedule-format-filter.active {
    border-color: rgba(37, 133, 104, 0.22) !important;
    background: var(--ui-selected-soft) !important;
    color: var(--ui-selected-dark) !important;
}

.p-schedule-recurrence-filter {
    border-radius: var(--radius-card) !important;
    transition:
        border-color var(--motion-micro) var(--motion-ease),
        background-color var(--motion-micro) var(--motion-ease),
        color var(--motion-micro) var(--motion-ease),
        box-shadow var(--motion-micro) var(--motion-ease) !important;
}

.p-schedule-recurrence-filter strong {
    font-size: var(--type-filter-size) !important;
    font-weight: var(--type-filter-weight) !important;
    line-height: var(--type-filter-line-height) !important;
}

.p-schedule-recurrence-filter small {
    color: var(--ui-text-secondary) !important;
    font-size: var(--type-micro-supporting-size) !important;
    font-weight: var(--type-micro-supporting-weight) !important;
    line-height: var(--type-micro-supporting-line-height) !important;
}

.p-schedule-recurrence-option input:checked + .p-schedule-recurrence-filter {
    border-color: rgba(37, 133, 104, 0.34) !important;
    background: var(--ui-selected-soft) !important;
    color: var(--ui-selected-dark) !important;
    box-shadow: none !important;
}

.p-schedule-recurrence-option input:checked + .p-schedule-recurrence-filter small {
    color: var(--ui-selected-dark) !important;
}

/* ============================================
   WALLET — remaining detail/history cleanup
   ============================================ */

.p-mypayments-placeholder,
.p-mypayments-empty-text,
.p-mypayments-empty-card p,
.p-mypayments-error-card p,
.p-mypayments-history-description,
.p-mypayments-history-empty {
    color: var(--color-text-subtle) !important;
}

body:has(.p-mypayments-view) .end-of-list {
    color: var(--color-text-subtle) !important;
}

.p-mypayments-badge-main,
.p-mypayments-tag {
    font-size: var(--type-micro-status-size) !important;
    font-weight: var(--type-micro-status-weight) !important;
    line-height: var(--type-micro-status-line-height) !important;
}

.p-mypayments-sheet-title {
    color: var(--ui-text) !important;
    font-size: var(--type-section-title-size) !important;
    font-weight: var(--type-section-title-weight) !important;
    line-height: var(--type-section-title-line-height) !important;
}

.p-mypayments-sheet-meta {
    color: var(--ui-text-secondary) !important;
    font-size: var(--type-activity-meta-size) !important;
    font-weight: var(--type-activity-meta-weight) !important;
    line-height: var(--type-activity-meta-line-height) !important;
}

.p-mypayments-history-title span,
.p-mypayments-history-range-note {
    color: var(--color-text-subtle) !important;
    font-size: var(--type-micro-supporting-size) !important;
    font-weight: var(--type-micro-supporting-weight) !important;
    line-height: var(--type-micro-supporting-line-height) !important;
    letter-spacing: 0 !important;
}

.p-mypayments-history-status {
    font-size: var(--type-micro-status-size) !important;
    font-weight: var(--type-micro-status-weight) !important;
    line-height: var(--type-micro-status-line-height) !important;
}

.p-mypayments-history-date,
.p-mypayments-history-date-line,
.p-mypayments-history-description {
    font-size: var(--type-activity-meta-size) !important;
    font-weight: var(--type-activity-meta-weight) !important;
    line-height: var(--type-activity-meta-line-height) !important;
}

.p-mypayments-history-activity {
    color: var(--ui-text) !important;
    font-size: var(--type-activity-title-size) !important;
    font-weight: var(--type-activity-title-weight) !important;
    line-height: var(--type-activity-title-line-height) !important;
}

.p-mypayments-history-amount-marker,
.p-mypayments-history-transaction {
    font-size: var(--type-activity-value-size) !important;
    font-weight: var(--type-activity-value-weight) !important;
    line-height: var(--type-activity-value-line-height) !important;
}

.p-mypayments-pending-pay-button {
    width: 100%;
    min-height: 48px !important;
    border: 0 !important;
    border-radius: var(--radius-control) !important;
    padding: 0 16px !important;
    background: var(--ui-brand-action) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    font-size: var(--type-button-size) !important;
    font-weight: var(--type-button-weight) !important;
    line-height: var(--type-button-line-height) !important;
}

.p-mypayments-pending-pay-button:hover {
    background: var(--ui-brand-action-hover) !important;
}

/* Sticky close inside payment-style detail sheets is a secondary action, not a black CTA. */
.p-mypayments-sheet-close {
    min-height: 48px !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: var(--radius-control) !important;
    padding: 0 16px !important;
    background: var(--ui-surface) !important;
    color: var(--ui-text) !important;
    box-shadow: none !important;
    font-size: var(--type-button-size) !important;
    font-weight: var(--type-button-weight) !important;
    line-height: var(--type-button-line-height) !important;
}

/* ============================================
   PROFILE — fit the existing structure to shared control/text contracts
   ============================================ */

.profile-edit-button,
.profile-cancel,
.profile-save,
.profile-logout {
    min-height: 48px !important;
    border-radius: var(--radius-control) !important;
    font-size: var(--type-button-size) !important;
    font-weight: var(--type-button-weight) !important;
    line-height: var(--type-button-line-height) !important;
}

.profile-field > span {
    color: var(--ui-text-secondary) !important;
    font-size: var(--type-form-size) !important;
    font-weight: var(--type-form-weight) !important;
    line-height: var(--type-form-line-height) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Read mode remains compact; only editable controls switch to the form-label rhythm. */
.profile-form:not(.is-editing) .profile-field > span {
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
}

.profile-form.is-editing .profile-field:has(input[data-profile-editable]) {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 6px !important;
}

.profile-form.is-editing .profile-field:has(input[data-profile-editable]) > span,
.profile-form.is-editing .profile-field:has(input[data-profile-editable]) input,
.profile-form.is-editing .profile-field:has(input[data-profile-editable]) small {
    grid-column: 1 !important;
}

.profile-form.is-editing .profile-field input[data-profile-editable] {
    min-height: 48px !important;
    border-radius: var(--radius-control) !important;
    padding: 0 13px !important;
    font-size: var(--type-body-size) !important;
    font-weight: var(--type-body-weight) !important;
    line-height: var(--type-body-line-height) !important;
}

.profile-field small,
.profile-agreement-row p,
.profile-agreement-link {
    color: var(--ui-text-secondary) !important;
    font-size: var(--type-helper-size) !important;
    font-weight: var(--type-helper-weight) !important;
    line-height: var(--type-helper-line-height) !important;
}

.profile-status:not(.profile-status--icon) {
    min-height: 20px;
    padding: 2px 8px;
    border-radius: var(--radius-pill) !important;
    background: var(--ui-status-quiet-bg) !important;
    color: var(--ui-status-quiet-text) !important;
    font-size: var(--type-micro-status-size) !important;
    font-weight: var(--type-micro-status-weight) !important;
    line-height: var(--type-micro-status-line-height) !important;
}

/* Bottom-nav palette remains frozen; only unreadable 9px typography is lifted to the micro role. */
.bottom-nav-fab-label {
    font-size: var(--type-micro-supporting-size) !important;
    font-weight: var(--type-micro-supporting-weight) !important;
    line-height: var(--type-micro-supporting-line-height) !important;
}

.bottom-nav-fab-label.is-active {
    font-weight: var(--type-micro-status-weight) !important;
}

@media (prefers-reduced-motion: reduce) {
    .myactivities-section-disclosure-icon,
    .makeups-history-title-icon,
    .list-course-card,
    .list-payment-status-container,
    .list-payment-type,
    .list-timeline-container,
    .list-pass-status,
    .list-deposit-status,
    .list-timeline-dot,
    .p-schedule-recurrence-filter,
    .p-mypayments-pending-pay-button {
        transition: none !important;
    }
}