/* Shared TeMS components. Existing class names remain JavaScript hooks.
   Page styles keep grids, widths, positioning and visibility; these screen-only
   rules standardize component surfaces, controls and interaction states. */
body.tems-components [hidden] {
    display: none !important;
}

@media screen {

/* Identical legacy role controls share their base, with role overrides kept local. */
body.tems-student-theme :is(.pdf-link-btn,.history-link,.certificate-link,.belt-action-form button,.belt-delete-form button),
body.tems-instructor-theme :is(.pdf-link-btn,.result-btn,.upload-btn,.event-confirm-cancel,.event-confirm-delete,.btn.close) {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tems-space-2);
    min-height: var(--tems-control-height);
    max-width: 100%;
    padding: var(--tems-control-padding-y) var(--tems-control-padding-x);
    border: 1px solid var(--tems-border-strong);
    border-radius: var(--tems-radius-sm);
    background: var(--tems-surface);
    color: var(--tems-color-blue);
    font: 700 var(--tems-font-size-sm)/1.25 var(--tems-font-body);
    text-decoration: none;
    overflow-wrap: anywhere;
    cursor: pointer;
}

/* Opt-in action rows keep a real gap when controls wrap onto another line. */
body.tems-components .tems-action-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tems-action-gap);
    min-width: 0;
    max-width: 100%;
}

/* Opt-in flows separate painted controls and surfaces, not just their contents. */
body.tems-components .tems-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--tems-action-gap);
    margin-block: 0 var(--tems-section-gap);
    padding: 0;
    min-width: 0;
}
body.tems-components .tems-page-actions > form { margin: 0; }
body.tems-components :is(.tems-section-stack, .tems-content-stack) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--tems-section-gap);
    min-width: 0;
}
body.tems-components .tems-content-stack { gap: var(--tems-content-gap); }
body.tems-components :is(.tems-section-stack, .tems-content-stack) > * {
    margin-block: 0;
    min-width: 0;
}
body.tems-components .tems-content-stack > [data-tems-control="action"] { justify-self: start; }
@media (max-width: 768px) {
    body.tems-components { --tems-section-gap: var(--tems-space-5); }
}

/* Opt in only major surfaces that do not already own a brand accent. */
body.tems-components .tems-brand-accent {
    position: relative;
}

body.tems-components .tems-brand-accent::before {
    content: "";
    position: absolute;
    top: -1px;
    inset-inline: -1px;
    width: auto;
    height: var(--tems-radius-lg);
    z-index: 1;
    border-radius: inherit;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    background: linear-gradient(90deg, var(--tems-color-red), var(--tems-color-blue));
    clip-path: inset(0 0 calc(100% - 5px) 0);
    pointer-events: none;
}

body.tems-components :where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--tems-color-blue);
    outline-offset: 3px;
}

body.tems-components :is(a,button,input):is(.btn,.action-btn,.primary-btn,.secondary-btn,.primary-action-btn,.secondary-action-btn,.save-btn,.register-btn,.login-btn,.delete-btn,.delete-profile-btn,.delete-btn-secondary,.delete-btn-danger,.approve-btn,.reject-btn,.deregister-btn,.back-btn,.copy-btn,.compact-copy-btn,.edit-btn,.view-btn,.print-btn,.extend-btn,.ready-btn,.class-submit-btn,.setting-action-btn,.edit-action,.delete-action,.activate-action,.generate-action,.status-action,.same-day-btn,.select-options-btn,.add-to-cart-btn,.event-action,.event-hub-action,.action-button,.proof-action,.primary-link,.membership-form-btn,.table-btn,.clear-btn,.option-chip,.variant-chip,.payment-type-tab,.tab-btn,.log-tab-btn,.certificate-tab,.training-cycle-tab,.ann-primary,.announcement-action,.bank-qr-button,.qr-modal-close):not(:where(.sidebar *, .student-bottom-nav *, .topbar *, .portal-topbar *)),
body.tems-components .announcement-page button:not(:where(.ann-tabs *, .topbar *)) {
    --tems-button-bg: var(--tems-surface);
    --tems-button-text: var(--tems-color-blue);
    --tems-button-border: var(--tems-border-strong);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tems-space-2);
    min-height: var(--tems-control-height);
    max-width: 100%;
    padding: var(--tems-control-padding-y) var(--tems-control-padding-x);
    border: 1px solid var(--tems-button-border);
    border-radius: var(--tems-radius-sm);
    background: var(--tems-button-bg);
    color: var(--tems-button-text);
    box-shadow: none;
    font-family: var(--tems-font-body);
    font-size: var(--tems-font-size-sm);
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: background-color var(--tems-duration-fast) ease, border-color var(--tems-duration-fast) ease, box-shadow var(--tems-duration-fast) ease;
}

body.tems-components :is(a,button,input):is(.btn-primary,.btn-filter,.btn-add-user,.btn-membership,.btn-stu-category,.btn-belt-verification,.primary-btn,.primary-action-btn,.save-btn,.register-btn,.login-btn,.class-submit-btn,.generate-action,.add-to-cart-btn,.ready-btn,.event-hub-action,.action-button,.proof-action,.primary-link,.ann-primary,.announcement-action):not(:where(.sidebar *, .student-bottom-nav *, .topbar *, .portal-topbar *)) {
    --tems-button-bg: var(--tems-color-blue);
    --tems-button-border: var(--tems-color-blue);
    --tems-button-text: var(--tems-color-on-brand);
}

body.tems-components :is(a,button,input):is(.btn-danger,.btn-reject,.reject-btn,.delete-btn,.delete-profile-btn,.delete-btn-danger,.delete-action,.deregister-btn):not(:where(.sidebar *, .student-bottom-nav *, .topbar *, .portal-topbar *)) {
    --tems-button-bg: var(--tems-danger-text);
    --tems-button-border: var(--tems-danger-text);
    --tems-button-text: var(--tems-color-on-brand);
}

body.tems-components :is(a,button,input):is(.btn-approve,.btn-receive,.approve-btn,.activate-action):not(:where(.sidebar *, .student-bottom-nav *, .topbar *, .portal-topbar *)) {
    --tems-button-bg: var(--tems-success-text);
    --tems-button-border: var(--tems-success-text);
    --tems-button-text: var(--tems-color-on-brand);
}

body.tems-components :is(a,button,input):is(.btn-dark):not(:where(.sidebar *, .student-bottom-nav *, .topbar *, .portal-topbar *)) {
    --tems-button-bg: var(--tems-color-heading);
    --tems-button-border: var(--tems-color-heading);
    --tems-button-text: var(--tems-color-on-brand);
}

body.tems-components :is(a,button,input):is(.btn-link):not(:where(.sidebar *, .student-bottom-nav *, .topbar *, .portal-topbar *)) {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--tems-color-blue);
}

body.tems-components :is(a,button,input):is(.btn,.action-btn,.primary-btn,.secondary-btn,.primary-action-btn,.secondary-action-btn,.save-btn,.register-btn,.login-btn,.delete-btn,.delete-profile-btn,.delete-btn-secondary,.delete-btn-danger,.approve-btn,.reject-btn,.deregister-btn,.back-btn,.copy-btn,.compact-copy-btn,.edit-btn,.view-btn,.print-btn,.extend-btn,.ready-btn,.class-submit-btn,.setting-action-btn,.edit-action,.delete-action,.activate-action,.generate-action,.status-action,.same-day-btn,.select-options-btn,.add-to-cart-btn,.event-action,.event-hub-action,.action-button,.proof-action,.primary-link,.membership-form-btn,.table-btn,.clear-btn,.option-chip,.variant-chip,.payment-type-tab,.tab-btn,.log-tab-btn,.certificate-tab,.training-cycle-tab,.ann-primary,.announcement-action,.bank-qr-button,.qr-modal-close):not(:where(.sidebar *, .student-bottom-nav *, .topbar *, .portal-topbar *)):hover:not(:disabled):not([aria-disabled="true"]):not(.disabled) {
    filter: brightness(0.97);
    transform: none;
    box-shadow: var(--tems-focus-ring);
}

body.tems-components :is(a,button,input):is(.btn,.action-btn,.primary-btn,.secondary-btn,.primary-action-btn,.secondary-action-btn,.save-btn,.register-btn,.login-btn,.delete-btn,.delete-profile-btn,.delete-btn-secondary,.delete-btn-danger,.approve-btn,.reject-btn,.deregister-btn,.back-btn,.copy-btn,.compact-copy-btn,.edit-btn,.view-btn,.print-btn,.extend-btn,.ready-btn,.class-submit-btn,.setting-action-btn,.edit-action,.delete-action,.activate-action,.generate-action,.status-action,.same-day-btn,.select-options-btn,.add-to-cart-btn,.event-action,.event-hub-action,.action-button,.proof-action,.primary-link,.membership-form-btn,.table-btn,.clear-btn,.option-chip,.variant-chip,.payment-type-tab,.tab-btn,.log-tab-btn,.certificate-tab,.training-cycle-tab,.ann-primary,.announcement-action,.bank-qr-button,.qr-modal-close):not(:where(.sidebar *, .student-bottom-nav *, .topbar *, .portal-topbar *)):active:not(:disabled):not([aria-disabled="true"]):not(.disabled) {
    filter: brightness(0.93);
    transform: none;
}

body.tems-components :is(a,button,input):is(.btn,.action-btn,.primary-btn,.secondary-btn,.primary-action-btn,.secondary-action-btn,.save-btn,.register-btn,.login-btn,.delete-btn,.delete-profile-btn,.delete-btn-secondary,.delete-btn-danger,.approve-btn,.reject-btn,.deregister-btn,.back-btn,.copy-btn,.compact-copy-btn,.edit-btn,.view-btn,.print-btn,.extend-btn,.ready-btn,.class-submit-btn,.setting-action-btn,.edit-action,.delete-action,.activate-action,.generate-action,.status-action,.same-day-btn,.select-options-btn,.add-to-cart-btn,.event-action,.event-hub-action,.action-button,.proof-action,.primary-link,.membership-form-btn,.table-btn,.clear-btn,.option-chip,.variant-chip,.payment-type-tab,.tab-btn,.log-tab-btn,.certificate-tab,.training-cycle-tab,.ann-primary,.announcement-action,.bank-qr-button,.qr-modal-close):not(:where(.sidebar *, .student-bottom-nav *, .topbar *, .portal-topbar *)):is(:disabled,[aria-disabled="true"],.disabled) {
    --tems-button-bg: var(--tems-disabled-bg);
    --tems-button-border: var(--tems-border);
    --tems-button-text: var(--tems-color-muted);
    opacity: 0.6;
    cursor: not-allowed;
    filter: none;
    transform: none;
    box-shadow: none;
}

body.tems-components :is(a,button,input):is(.btn,.action-btn,.primary-btn,.secondary-btn,.primary-action-btn,.secondary-action-btn,.save-btn,.register-btn,.login-btn,.delete-btn,.delete-profile-btn,.delete-btn-secondary,.delete-btn-danger,.approve-btn,.reject-btn,.deregister-btn,.back-btn,.copy-btn,.compact-copy-btn,.edit-btn,.view-btn,.print-btn,.extend-btn,.ready-btn,.class-submit-btn,.setting-action-btn,.edit-action,.delete-action,.activate-action,.generate-action,.status-action,.same-day-btn,.select-options-btn,.add-to-cart-btn,.event-action,.event-hub-action,.action-button,.proof-action,.primary-link,.membership-form-btn,.table-btn,.clear-btn,.option-chip,.variant-chip,.payment-type-tab,.tab-btn,.log-tab-btn,.certificate-tab,.training-cycle-tab,.ann-primary,.announcement-action,.bank-qr-button,.qr-modal-close):not(:where(.sidebar *, .student-bottom-nav *, .topbar *, .portal-topbar *))[aria-busy="true"] {
    cursor: progress;
}

body.tems-components :is(a,button,input):is(.qr-modal-close,.icon-only-action):not(:where(.sidebar *, .student-bottom-nav *, .topbar *, .portal-topbar *)) {
    min-width: var(--tems-control-height);
    width: var(--tems-control-height);
    height: var(--tems-control-height);
    font-size: 24px;
    padding: 0;
    border-radius: var(--tems-radius-pill);
}

body.tems-components :is(a,button,input):is(.payment-type-tab,.tab-btn,.log-tab-btn,.certificate-tab,.training-cycle-tab,.option-chip,.variant-chip):not(:where(.sidebar *, .student-bottom-nav *, .topbar *, .portal-topbar *)),
body.tems-components :is(.event-hub-filters,.category-filters) a,
body.tems-components .ann-tabs button {
    box-sizing: border-box;
    min-height: var(--tems-control-height);
    padding: var(--tems-control-padding-y) var(--tems-control-padding-x);
    border: 1px solid var(--tems-border-strong);
    border-radius: var(--tems-radius-pill);
    background: var(--tems-surface);
    color: var(--tems-color-blue);
    font-family: var(--tems-font-body);
    font-size: var(--tems-font-size-sm);
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    box-shadow: none;
}

body.tems-components :is(a,button,input):is(.payment-type-tab,.tab-btn,.log-tab-btn,.certificate-tab,.training-cycle-tab,.option-chip,.variant-chip):not(:where(.sidebar *, .student-bottom-nav *, .topbar *, .portal-topbar *)):is(.active,.selected,[aria-selected="true"],[aria-pressed="true"]),
body.tems-components :is(.event-hub-filters,.category-filters) a:is(.active,[aria-current]),
body.tems-components .ann-tabs button[aria-selected="true"] {
    background: var(--tems-color-blue);
    color: var(--tems-color-on-brand);
    border-color: var(--tems-color-blue);
}

body.tems-components :is(a,button,input):is(.payment-type-tab,.tab-btn,.log-tab-btn,.certificate-tab,.training-cycle-tab,.option-chip,.variant-chip):not(:where(.sidebar *, .student-bottom-nav *, .topbar *, .portal-topbar *)):is(:disabled,[aria-disabled="true"],.disabled) {
    background: var(--tems-disabled-bg);
    color: var(--tems-color-muted);
    border-color: var(--tems-border);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

body.tems-components :is(input:not(:is([type="hidden"],[type="checkbox"],[type="radio"],[type="file"],[type="button"],[type="submit"],[type="image"],[type="range"],[type="color"])), select, textarea) {
    box-sizing: border-box;
    min-width: 0;
    min-height: var(--tems-field-min-height, var(--tems-control-height));
    max-width: 100%;
    padding: var(--tems-control-padding-y) var(--tems-space-3);
    border: 1px solid var(--tems-border-strong);
    border-radius: var(--tems-radius-sm);
    background-color: var(--tems-surface);
    color: var(--tems-color-text);
    font-family: var(--tems-font-body);
    font-size: var(--tems-font-size-sm);
    line-height: var(--tems-line-height-body);
}

body.tems-components textarea {
    --tems-field-min-height: 110px;
    resize: vertical;
}

body.tems-components :is(input:not(:is([type="hidden"],[type="checkbox"],[type="radio"],[type="file"],[type="button"],[type="submit"],[type="image"],[type="range"],[type="color"])), select, textarea):is([readonly],:disabled) {
    background-color: var(--tems-surface-subtle);
    color: var(--tems-color-muted);
}

body.tems-components :is(input:not(:is([type="hidden"],[type="checkbox"],[type="radio"],[type="file"],[type="button"],[type="submit"],[type="image"],[type="range"],[type="color"])), select, textarea):disabled {
    cursor: not-allowed;
}

body.tems-components :is(input:not(:is([type="hidden"],[type="checkbox"],[type="radio"],[type="file"],[type="button"],[type="submit"],[type="image"],[type="range"],[type="color"])), select, textarea):focus-visible {
    border-color: var(--tems-color-blue);
    box-shadow: var(--tems-focus-ring);
}

body.tems-components :is(input:not(:is([type="hidden"],[type="checkbox"],[type="radio"],[type="file"],[type="button"],[type="submit"],[type="image"],[type="range"],[type="color"])), select, textarea)[aria-invalid="true"] {
    border-color: var(--tems-danger-text);
}

body.tems-components :is(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--tems-color-blue);
}

body.tems-components input[type="file"] {
    max-width: 100%;
    font-family: var(--tems-font-body);
    font-size: var(--tems-font-size-sm);
    color: var(--tems-color-text);
}

body.tems-components input[type="file"]::file-selector-button {
    min-height: var(--tems-control-height);
    padding: var(--tems-control-padding-y) var(--tems-space-3);
    margin-right: var(--tems-space-3);
    border: 1px solid var(--tems-border-strong);
    border-radius: var(--tems-radius-sm);
    background: var(--tems-surface-blue);
    color: var(--tems-color-blue);
    font: inherit;
    cursor: pointer;
}

body.tems-components :is(.card,.content-card,.info-card,.table-card,.panel,.filter-card,.filter-panel,.summary-card,.module-card,.ann-panel,.event-create-card,.verification-card,.status-panel,.history-panel,.certificate-table-card,.dashboard-training-card,.dashboard-stat,.dashboard-schedule,.dashboard-events,.club-tshirt-promo,.event-hub-card,.payment-entry,.transfer-receipt,.content-panel,.preview-card,.event-preview-card):not(:where(.sidebar *, .student-bottom-nav *, .topbar *, .portal-topbar *)) {
    border-color: var(--tems-border);
    border-style: solid;
    border-width: 1px;
    border-radius: var(--tems-radius-lg);
    background-color: var(--tems-surface);
    box-shadow: var(--tems-shadow-md);
}

body.tems-components .empty-state {
    border: 1px dashed var(--tems-border-strong);
    border-radius: var(--tems-radius-md);
    background: var(--tems-surface-subtle);
    color: var(--tems-color-muted);
    text-align: center;
}

body.tems-components table {
    font-family: var(--tems-font-body);
    font-size: var(--tems-font-size-sm);
    border-color: var(--tems-border);
}

body.tems-components table :is(th,td) {
    border-color: var(--tems-border);
}

body.tems-components table thead th {
    background-color: var(--tems-surface-blue);
    color: var(--tems-color-heading);
    font-weight: 700;
}

body.tems-components :is(.table-wrapper,.table-wrap,.history-table-wrapper,.ann-table-wrap,.attendance-table-wrap,.delete-request-table-wrapper,.table-responsive) {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

body.tems-components :is(.status-badge,.table-badge,.chip,.review-badge,.belt-status,.belt-verification-badge,.registration-status-badge,.fee-status-badge,.due-date-badge,.ann-badge,.badge):not(:where(.sidebar *, .student-bottom-nav *, .topbar *, .portal-topbar *)) {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 28px;
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid var(--tems-border);
    border-radius: var(--tems-radius-pill);
    font-size: var(--tems-font-size-xs);
    font-weight: 700;
    line-height: 1.25;
}

body.tems-components :is(.status-badge,.table-badge,.chip,.review-badge,.belt-status,.belt-verification-badge,.registration-status-badge,.fee-status-badge,.due-date-badge,.ann-badge,.badge):not(:where(.sidebar *, .student-bottom-nav *, .topbar *, .portal-topbar *)):is(.success,.paid,.approved,.verified,.active,.completed,.present,.received,.excused,.open,.ready,.status-open,.status-approved,.status-completed,.belt-verification-approved,.review-badge--success,.review-badge--verified,.belt-status-approved,.due-safe,.due-paid,.badge-approved,.badge-attended,.badge-paid,.badge-open,.badge-form-submitted,.status-attended,.status-paid,.status-verified) {
    background: var(--tems-success-bg);
    color: var(--tems-success-text);
    border-color: var(--tems-success-border);
}

body.tems-components :is(.status-badge,.table-badge,.chip,.review-badge,.belt-status,.belt-verification-badge,.registration-status-badge,.fee-status-badge,.due-date-badge,.ann-badge,.badge):not(:where(.sidebar *, .student-bottom-nav *, .topbar *, .portal-topbar *)):is(.warning,.pending,.submitted,.partial,.partial-paid,.requested,.walkover,.status-pending,.status-walkover,.belt-verification-pending,.review-badge--warning,.review-badge--pending,.belt-status-pending,.due-soon,.chip-warning,.no,.badge-pending,.badge-due-soon,.badge-due-warning,.badge-form-not-submitted,.status-submitted,.due-warning) {
    background: var(--tems-warning-bg);
    color: var(--tems-warning-text);
    border-color: var(--tems-warning-border);
}

body.tems-components :is(.status-badge,.table-badge,.chip,.review-badge,.belt-status,.belt-verification-badge,.registration-status-badge,.fee-status-badge,.due-date-badge,.ann-badge,.badge):not(:where(.sidebar *, .student-bottom-nav *, .topbar *, .portal-topbar *)):is(.danger,.error,.failed,.unpaid,.overdue,.rejected,.cancelled,.absent,.expired,.missing,.status-rejected,.belt-verification-rejected,.belt-verification-missing,.review-badge--danger,.review-badge--correction,.belt-status-rejected,.due-overdue,.due-urgent,.badge-absent,.badge-cancelled,.badge-overdue,.badge-rejected,.badge-due-urgent,.status-absent,.status-cancelled) {
    background: var(--tems-danger-bg);
    color: var(--tems-danger-text);
    border-color: var(--tems-danger-border);
}

body.tems-components :is(.status-badge,.table-badge,.chip,.review-badge,.belt-status,.belt-verification-badge,.registration-status-badge,.fee-status-badge,.due-date-badge,.ann-badge,.badge):not(:where(.sidebar *, .student-bottom-nav *, .topbar *, .portal-topbar *)):is(.info,.registered,.yes,.review-badge--info,.belt-status-not_required,.due-upcoming,.badge-registered,.status-registered,.status-special-case,.belt-verification-not_required) {
    background: var(--tems-info-bg);
    color: var(--tems-info-text);
    border-color: var(--tems-info-border);
}

body.tems-components :is(.status-badge,.table-badge,.chip,.review-badge,.belt-status,.belt-verification-badge,.registration-status-badge,.fee-status-badge,.due-date-badge,.ann-badge,.badge):not(:where(.sidebar *, .student-bottom-nav *, .topbar *, .portal-topbar *)):is(.neutral,.unknown,.inactive,.closed,.not-applicable,.status-closed,.belt-verification-unknown,.review-badge--neutral,.due-none,.badge-closed,.badge-withdrawn,.badge-no-due-date) {
    background: var(--tems-surface-subtle);
    color: var(--tems-color-muted);
    border-color: var(--tems-border);
}

body.tems-components :is(.alert,.alert-box,.alert-message,.ann-notice,.error-message,.success-message,.details-flash,.message),
body.tems-components #ann-status {
    padding: var(--tems-space-4) var(--tems-space-5);
    border: 1px solid var(--tems-info-border);
    border-radius: var(--tems-radius-sm);
    background: var(--tems-info-bg);
    color: var(--tems-info-text);
    font-size: var(--tems-font-size-sm);
    line-height: var(--tems-line-height-body);
    overflow-wrap: anywhere;
    box-shadow: none;
}

body.tems-components :is(.alert,.alert-box,.alert-message,.ann-notice,.error-message,.success-message,.details-flash,.message):is(.success,.alert-success),
body.tems-components .success-message,
body.tems-components .details-flash,
body.tems-components #ann-status.ann-success {
    background: var(--tems-success-bg);
    color: var(--tems-success-text);
    border-color: var(--tems-success-border);
}

body.tems-components :is(.alert,.alert-box,.alert-message,.ann-notice,.error-message,.success-message,.details-flash,.message):is(.warning,.alert-warning),
body.tems-components .ann-notice {
    background: var(--tems-warning-bg);
    color: var(--tems-warning-text);
    border-color: var(--tems-warning-border);
}

body.tems-components :is(.alert,.alert-box,.alert-message,.ann-notice,.error-message,.success-message,.details-flash,.message):is(.danger,.error,.alert-danger),
body.tems-components .error-message,
body.tems-components #ann-status.ann-error {
    background: var(--tems-danger-bg);
    color: var(--tems-danger-text);
    border-color: var(--tems-danger-border);
}

body.tems-components :is(dialog,.qr-modal-content,.result-card) {
    box-sizing: border-box;
    border: 1px solid var(--tems-border);
    border-radius: var(--tems-radius-lg);
    background-color: var(--tems-surface);
    color: var(--tems-color-text);
    box-shadow: var(--tems-shadow-lg);
}

body.tems-components dialog {
    max-width: calc(100vw - 32px);
    max-height: calc(100dvh - 48px);
}

body.tems-components dialog::backdrop,
body.tems-components .qr-modal-backdrop {
    background: var(--tems-dialog-backdrop);
}

}

/* Public/auth and shell buttons share the CRUD palette without changing layout. */
@media screen {
body.tems-components .sidebar [data-tems-crud="read"],
body.tems-public-theme :is(.cta-box,.visitor-note) [data-tems-crud="read"] {
    --tems-crud-read: #93c5fd;
}
body.tems-components :is(#studentSidebar,#instructorSidebar) button[data-tems-crud="read"] {
    background: transparent;
    border-color: var(--tems-crud-read);
    color: var(--tems-crud-read);
}
body.tems-components :is(#studentSidebar,#instructorSidebar) button[data-tems-crud="read"]:is(.active,:hover) {
    background: var(--tems-crud-read-fill);
    color: var(--tems-color-on-brand);
}
body:is(.tems-components.tems-auth-theme,.tems-components.tems-public-theme,.tems-components.tems-student-theme,.tems-components.tems-instructor-theme,.tems-components,.tems-print-actions) :is(a,button,input)[data-tems-crud][data-tems-crud]:not([data-tems-action])[data-tems-crud="create"] { --tems-crud-color: var(--tems-crud-create); --tems-crud-fill: var(--tems-crud-create-fill); }
body:is(.tems-components.tems-auth-theme,.tems-components.tems-public-theme,.tems-components.tems-student-theme,.tems-components.tems-instructor-theme,.tems-components,.tems-print-actions) :is(a,button,input)[data-tems-crud][data-tems-crud]:not([data-tems-action])[data-tems-crud="read"] { --tems-crud-color: var(--tems-crud-read); --tems-crud-fill: var(--tems-crud-read-fill); }
body:is(.tems-components.tems-auth-theme,.tems-components.tems-public-theme,.tems-components.tems-student-theme,.tems-components.tems-instructor-theme,.tems-components,.tems-print-actions) :is(a,button,input)[data-tems-crud][data-tems-crud]:not([data-tems-action])[data-tems-crud="update"] { --tems-crud-color: var(--tems-crud-update); --tems-crud-fill: var(--tems-crud-update-fill); }
body:is(.tems-components.tems-auth-theme,.tems-components.tems-public-theme,.tems-components.tems-student-theme,.tems-components.tems-instructor-theme,.tems-components,.tems-print-actions) :is(a,button,input)[data-tems-crud][data-tems-crud]:not([data-tems-action])[data-tems-crud="delete"] { --tems-crud-color: var(--tems-crud-delete); --tems-crud-fill: var(--tems-crud-delete-fill); }
body:is(.tems-components.tems-auth-theme,.tems-components.tems-public-theme,.tems-components.tems-student-theme,.tems-components.tems-instructor-theme,.tems-components,.tems-print-actions) :is(a,button,input)[data-tems-crud][data-tems-crud]:not([data-tems-action]) {
    background: var(--tems-crud-fill);
    border-color: var(--tems-crud-fill);
    color: var(--tems-color-on-brand);
}
body:is(.tems-components.tems-auth-theme,.tems-components.tems-public-theme,.tems-components.tems-student-theme,.tems-components.tems-instructor-theme,.tems-components,.tems-print-actions) :is(a,button,input)[data-tems-crud][data-tems-crud]:not([data-tems-action]):is(.btn-outline,.btn-link,.toggle-password,.menu-toggle,.dropdown-btn,.sidebar-toggle,.student-menu-toggle) {
    background: transparent;
    color: var(--tems-crud-color);
}
body:is(.tems-components.tems-auth-theme,.tems-components.tems-public-theme,.tems-components.tems-student-theme,.tems-components.tems-instructor-theme,.tems-components,.tems-print-actions) :is(a,button,input)[data-tems-crud][data-tems-crud]:not([data-tems-action]):hover:not(:disabled):not([aria-disabled="true"]):not(.disabled) {
    border-color: var(--tems-crud-fill);
    color: var(--tems-color-on-brand);
    background: var(--tems-crud-fill);
}
body:is(.tems-components.tems-auth-theme,.tems-components.tems-public-theme,.tems-components.tems-student-theme,.tems-components.tems-instructor-theme,.tems-components,.tems-print-actions) :is(a,button,input)[data-tems-crud][data-tems-crud]:not([data-tems-action]):is(:disabled,[aria-disabled="true"],.disabled) {
    background: var(--tems-disabled-bg);
    border-color: var(--tems-border);
    color: var(--tems-color-muted);
}
}

/* Compact policy information uses the existing portal surface/contrast tokens. */
.ktsdc-notice { margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid var(--tems-border); border-inline-start: 4px solid var(--tems-color-blue); border-radius: 12px; background: var(--tems-info-bg); color: var(--tems-color-text); overflow-wrap: anywhere; }
.ktsdc-notice p { margin: .3rem 0 0; font-size: .9rem; line-height: 1.5; }
.ktsdc-review-form, .ktsdc-history-entry { padding: 1rem 0; border-bottom: 1px solid var(--tems-border); }
.ktsdc-review-form { display: grid; gap: .75rem; }
.ktsdc-review-card { margin-top: 1.25rem; }
.ktsdc-review-card p, .ktsdc-history-entry p { line-height: 1.5; overflow-wrap: anywhere; }
.ktsdc-review-card > h2 { margin-bottom: .5rem; }
.ktsdc-review-form .form-group { margin: 0; }
.ktsdc-review-form .ktsdc-review-confirm { display: flex; align-items: flex-start; gap: .65rem; line-height: 1.5; cursor: pointer; }
.ktsdc-review-confirm input[type="checkbox"] { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin-top: .2rem; }
.ktsdc-review-form input:not([type="checkbox"]) { width: 100%; min-width: 0; }
.ktsdc-review-form button { justify-self: start; max-width: 100%; min-height: 44px; white-space: normal; }
.ktsdc-review-form:last-child, .ktsdc-history-entry:last-child { border-bottom: 0; padding-bottom: 0; }
.ktsdc-history-entry p + p { margin-top: .4rem; }
.ktsdc-history { margin-top: 1rem; }
.ktsdc-history summary { cursor: pointer; }