/* Publish-blocking visual regressions found in production QA on 2026-08-14.
   This layer is loaded only on the student surfaces shipping now. */

/* Every short sheet keeps the same rounded shell. */
.bottom-sheet,
.bottom-sheet-header {
    border-top-left-radius: var(--radius-card, 16px) !important;
    border-top-right-radius: var(--radius-card, 16px) !important;
}

.bottom-sheet {
    overflow: hidden !important;
}

/* One plain close control. No bordered/circular frames on white sheets. */
.bottom-sheet [data-bottom-sheet-close] {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    outline-offset: 2px;
}

#bottom_sheet_absence_makeup [data-bottom-sheet-close] {
    color: #ffffff !important;
}

/* Wallet/detail X floats over content. Never reserve a blank header strip for it. */
#payments-detail-sheet .bottom-sheet-header,
#payments-detail-sheet.has-deposit-banner .bottom-sheet-header,
#payments-detail-sheet.has-additional-deposit-parts .bottom-sheet-header,
#payments-detail-sheet.has-pass-pool-entrances .bottom-sheet-header {
    position: absolute !important;
    inset: 0 0 auto !important;
    min-height: 0 !important;
    height: 0 !important;
    background: transparent !important;
    pointer-events: none !important;
    overflow: visible !important;
    z-index: 30 !important;
}

#payments-detail-sheet .bottom-sheet-header > .px-6,
#payments-detail-sheet.has-deposit-banner .bottom-sheet-header > .px-6,
#payments-detail-sheet.has-additional-deposit-parts .bottom-sheet-header > .px-6,
#payments-detail-sheet.has-pass-pool-entrances .bottom-sheet-header > .px-6 {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    padding: 0 !important;
    pointer-events: auto !important;
}

#payments-detail-sheet .bottom-sheet-header > .px-6 > .flex {
    display: block !important;
}

#payments-detail-sheet .bottom-sheet-header .flex-1 {
    display: none !important;
}

#payments-detail-sheet .bottom-sheet-header button,
#payments-detail-sheet.has-deposit-banner .bottom-sheet-header button,
#payments-detail-sheet.has-additional-deposit-parts .bottom-sheet-header button,
#payments-detail-sheet.has-pass-pool-entrances .bottom-sheet-header button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    background: transparent !important;
    color: var(--ui-text-secondary, #636363) !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* X sits directly on coloured deposit banners/details; pass-pool circles stay dark. */
#payments-detail-sheet.has-deposit-banner .bottom-sheet-header button,
body:has(#view-list) #payments-detail-sheet .bottom-sheet-header button {
    color: #ffffff !important;
}

#payments-detail-sheet.has-additional-deposit-parts .bottom-sheet-header button,
#payments-detail-sheet.has-pass-pool-entrances .bottom-sheet-header button {
    color: var(--ui-text-secondary, #636363) !important;
}

/* Expanded pending payment: cancel and pay are one equal action row. */
.p-mypayments-process-card .p-mypayments-card-body:has(.p-mypayments-pending-details:not(.is-hidden)) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 10px !important;
}

.p-mypayments-process-card .p-mypayments-card-body:has(.p-mypayments-pending-details:not(.is-hidden)) .p-mypayments-pending-card-head {
    grid-column: 1 / -1 !important;
}

.p-mypayments-process-card .p-mypayments-pending-details:not(.is-hidden) {
    display: contents !important;
}

.p-mypayments-process-card .p-mypayments-pending-details:not(.is-hidden) > :not(.p-mypayments-pending-cancel) {
    grid-column: 1 / -1 !important;
}

.p-mypayments-pending-cancel,
.p-mypayments-pending-pay-button {
    min-height: 48px !important;
    margin-top: 10px !important;
    padding: 0 12px !important;
    border-radius: var(--radius-control, 12px) !important;
    font-size: var(--type-button-size, 16px) !important;
    line-height: var(--type-button-line-height, 1.2) !important;
    font-weight: var(--type-button-weight, 700) !important;
}

.p-mypayments-process-card .p-mypayments-pending-details:not(.is-hidden) .p-mypayments-pending-cancel {
    grid-column: 1 !important;
    width: 100% !important;
}

.p-mypayments-process-card .p-mypayments-card-body:has(.p-mypayments-pending-details:not(.is-hidden)) > .p-mypayments-pending-pay-button {
    grid-column: 2 !important;
    width: 100% !important;
    align-self: end !important;
}

/* Do odrobienia: retire the old three coloured square question tiles. */
#bottom_sheet_absence_makeup .grid.grid-cols-3.gap-2:has(.absence-makeup-question-card) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 8px !important;
}

#bottom_sheet_absence_makeup .absence-makeup-question-card {
    aspect-ratio: auto !important;
    width: 100% !important;
    min-height: 48px !important;
    padding: 11px 14px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: var(--radius-control, 12px) !important;
    background: #ffffff !important;
    color: var(--ui-text, #333333) !important;
    box-shadow: none !important;
    text-align: left !important;
}

#bottom_sheet_absence_makeup .absence-makeup-question-card > span:first-child {
    display: none !important;
}

#bottom_sheet_absence_makeup .absence-makeup-question-card.is-active {
    border-color: rgba(37, 133, 104, 0.42) !important;
    background: var(--ui-selected-soft, #edf7f4) !important;
    color: var(--ui-selected-dark, #1d6b55) !important;
}

#bottom_sheet_absence_makeup .absence-makeup-question-title {
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 700 !important;
}

#bottom_sheet_absence_makeup .absence-makeup-question-details {
    margin-top: 8px !important;
    padding: 12px 14px !important;
    border: 0 !important;
    border-radius: var(--radius-control, 12px) !important;
    background: #f6f6f6 !important;
    box-shadow: none !important;
}

#bottom_sheet_activity_detail:has([data-activity-detail-view="form"]:not(.hidden)) .bottom-sheet-content,
#bottom_sheet_activity_detail:has([data-activity-detail-view="payment"]:not(.hidden)) .bottom-sheet-content,
#bottom_sheet_activity_detail:has([data-activity-detail-view="success"]:not(.hidden)) .bottom-sheet-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* Cancelled makeup detail already contains the full status. Hide the duplicate ODWOŁANE pill. */
#bottom_sheet_makeup_info_content .space-y-4 > .inline-flex.items-center.rounded-lg.border.border-slate-200.bg-slate-50 {
    display: none !important;
}

/* Activity-origin deposit details use the same banner language as Wallet and no legacy status dot. */
body:has(#view-list) #payments-detail-sheet .p-mypayments-sheet-header:has(.p-mypayments-status-tag) {
    margin: 0 -1.25rem 16px !important;
    padding: 20px 20px 18px !important;
    background: linear-gradient(135deg, #d1d5db 0%, #6b7280 100%) !important;
}

body:has(#view-list) #payments-detail-sheet .p-mypayments-sheet-header:has(.p-mypayments-status-tag.is-success) {
    background: linear-gradient(135deg, #b8edd3 0%, #58c9a0 100%) !important;
}

body:has(#view-list) #payments-detail-sheet .p-mypayments-sheet-header:has(.p-mypayments-status-tag.is-warning) {
    background: linear-gradient(135deg, #d8eee6 0%, #79bda5 100%) !important;
}

body:has(#view-list) #payments-detail-sheet .p-mypayments-sheet-header .p-mypayments-status-tag::before,
body:has(#view-list) #payments-detail-sheet .p-mypayments-sheet-header .p-mypayments-status-tag::after {
    display: none !important;
    content: none !important;
}

body:has(#view-list) #payments-detail-sheet .p-mypayments-sheet-header:has(.p-mypayments-status-tag) .p-mypayments-status-tag,
body:has(#view-list) #payments-detail-sheet .p-mypayments-sheet-header:has(.p-mypayments-status-tag) .p-mypayments-sheet-title,
body:has(#view-list) #payments-detail-sheet .p-mypayments-sheet-header:has(.p-mypayments-status-tag) .p-mypayments-sheet-meta {
    color: #ffffff !important;
}


/* Wallet pending application mirrors the canonical Zajęcia → Kursy → Zgłoszenia card.
   Details are no longer a second visual mode; cancel is above and Opłać is below. */
.p-mypayments-process-card.status-payment {
    border: 0 !important;
    border-radius: var(--radius-card, 16px) !important;
    background: var(--ui-surface, #ffffff) !important;
    box-shadow: var(--shadow-card) !important;
}

.p-mypayments-process-card.status-payment .p-mypayments-card-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 12px !important;
    row-gap: 6px !important;
    padding: 16px !important;
}

.p-mypayments-process-card.status-payment .p-mypayments-pending-card-head {
    grid-column: 1 !important;
    grid-row: 1 !important;
    display: block !important;
    min-width: 0;
}

.p-mypayments-process-card.status-payment .p-mypayments-pending-details-toggle {
    display: none !important;
}

.p-mypayments-process-card.status-payment .p-mypayments-pending-details,
.p-mypayments-process-card.status-payment .p-mypayments-pending-details.is-hidden {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.p-mypayments-process-card.status-payment .p-mypayments-card-title {
    font-size: 14px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: var(--ui-text, #333333) !important;
}

.p-mypayments-process-card.status-payment .p-mypayments-card-meta {
    margin-top: 2px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
    color: var(--ui-text-secondary, #636363) !important;
}

.p-mypayments-process-card.status-payment .p-mypayments-obligation-date {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: start;
}

.p-mypayments-process-card.status-payment .p-mypayments-pending-description {
    grid-column: 1 !important;
    grid-row: 3 !important;
    align-self: start;
    margin: 0 !important;
}

.p-mypayments-process-card.status-payment .p-mypayments-pending-cancel,
.p-mypayments-process-card.status-payment .p-mypayments-pending-pay-button {
    grid-column: 2 !important;
    width: 100% !important;
    min-width: 112px !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 16px !important;
    border-radius: var(--radius-control, 12px) !important;
    box-shadow: none !important;
    font-size: var(--type-button-size, 16px) !important;
    line-height: var(--type-button-line-height, 1.2) !important;
    font-weight: var(--type-button-weight, 700) !important;
}

.p-mypayments-process-card.status-payment .p-mypayments-pending-cancel {
    grid-row: 1 !important;
    align-self: start !important;
    border: 1px solid var(--ui-line, #ececec) !important;
    background: var(--ui-surface, #ffffff) !important;
    color: var(--ui-text, #333333) !important;
}

.p-mypayments-process-card.status-payment .p-mypayments-pending-pay-button {
    grid-row: 2 !important;
    align-self: start !important;
    border: 1px solid var(--ui-brand-action, #d7181c) !important;
    background: var(--ui-brand-action, #d7181c) !important;
    color: #ffffff !important;
}

.p-mypayments-process-card.status-payment .p-mypayments-pending-pay-button:hover {
    border-color: var(--ui-brand-action-hover, #950c0f) !important;
    background: var(--ui-brand-action-hover, #950c0f) !important;
}

/* Compact text-button contract: 12px type on a 44px control. Form controls remain 48px. */
:root {
    --type-button-size: 12px !important;
}

.c-button,
.c-primary-action,
button.application-action-button,
.p-mypayments-pending-cancel,
.p-mypayments-pending-pay-button,
.p-mypayments-process-card.status-payment .p-mypayments-pending-cancel,
.p-mypayments-process-card.status-payment .p-mypayments-pending-pay-button {
    min-height: 44px !important;
    font-size: var(--type-button-size, 12px) !important;
}

/* Historical passes use exactly the same typography roles as active pass cards. */
#payments-history-section .p-mypayments-instrument-card.is-pass .p-mypayments-card-title {
    font-size: var(--type-activity-title-size, 13px) !important;
    font-weight: var(--type-activity-title-weight, 700) !important;
    line-height: var(--type-activity-title-line-height, 1.2) !important;
}

#payments-history-section .p-mypayments-instrument-card.is-pass .p-mypayments-card-meta,
#payments-history-section .p-mypayments-instrument-card.is-pass .p-mypayments-card-footer-value {
    font-size: var(--type-activity-meta-size, 11px) !important;
    font-weight: var(--type-activity-meta-weight, 500) !important;
    line-height: var(--type-activity-meta-line-height, 1.25) !important;
}

#payments-history-section .p-mypayments-instrument-card.is-pass .p-mypayments-card-footer-label {
    font-size: var(--type-micro-supporting-size, 10px) !important;
    font-weight: var(--type-micro-supporting-weight, 500) !important;
    line-height: var(--type-micro-supporting-line-height, 1.25) !important;
}

#payments-history-section .p-mypayments-instrument-card.is-pass .p-mypayments-remaining-amount {
    font-size: var(--type-activity-value-size, 13px) !important;
    font-weight: var(--type-activity-value-weight, 800) !important;
    line-height: var(--type-activity-value-line-height, 1.2) !important;
}

#payments-history-section .p-mypayments-instrument-card.is-pass .p-mypayments-usage-text {
    font-size: var(--type-micro-status-size, 10px) !important;
    font-weight: var(--type-micro-status-weight, 700) !important;
    line-height: var(--type-micro-status-line-height, 1.2) !important;
}

/* Compact application actions: same small rounded variant used by compact Wallet actions. */
#active-applications-list button.application-action-button,
.p-mypayments-process-card.status-payment .p-mypayments-pending-cancel,
.p-mypayments-process-card.status-payment .p-mypayments-pending-pay-button {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    white-space: nowrap;
}

#active-applications-list .process-card h3 + span:has(button.application-action-button) {
    align-items: flex-end !important;
}

#active-applications-list .process-card h3 + span:has(button.application-action-button) > button.application-action-button,
.p-mypayments-process-card.status-payment .p-mypayments-pending-cancel,
.p-mypayments-process-card.status-payment .p-mypayments-pending-pay-button {
    justify-self: end !important;
    align-self: end !important;
}