/* ============================================
   PANELKURSANTA2 - GLOBAL STYLES
   Version: 1.0
   ============================================
   TABLE OF CONTENTS:
   1. CSS Variables
   2. Reset & Base  
   3. Layout (l-* and legacy)
   4. Components (c-*)
   5. Utilities (u-* and legacy)
   ============================================ */

/* ============================================
   1. CSS VARIABLES
   ============================================ */
:root {
    /* Design foundations - canonical tokens */
    --font-family-ui: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Color primitives */
    --color-brand-main: #d7181c;
    --color-brand-dark: #950c0f;
    --color-brand-soft: #fceded;
    --color-selected-main: #258568;
    --color-selected-dark: #1f765e;
    --color-selected-soft: #eaf6f2;
    --color-success-main: #2ca67f;
    --color-success-dark: #1f765e;
    --color-success-soft: #eaf6f2;
    --color-success-border: #6cd4aa;
    --color-warning-main: #f59e0b;
    --color-warning-dark: #92400e;
    --color-warning-soft: #fffbeb;
    --color-warning-border: #fde68a;
    --color-info-main: #3b82f6;
    --color-info-dark: #1d4ed8;
    --color-info-soft: #eff6ff;
    --color-info-border: #93c5fd;
    --color-text-primary: #333333;
    --color-text-secondary: #636363;
    --color-text-subtle: #707070;
    --color-line: #ececec;
    --color-surface: #ffffff;
    --color-page: #f6f6f6;

    /* Quiet status semantics */
    --status-quiet-bg: #f2f0ed;
    --status-quiet-text: #57534e;
    --status-attention-bg: #fff1dc;
    --status-attention-text: #8a4f08;

    /* Radius */
    --radius-small: 8px;
    --radius-control: 12px;
    --radius-card: 16px;
    --radius-pill: 999px;

    /* Spacing */
    --space-4: 4px;
    --space-8: 8px;
    --space-12: 12px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;

    /* Typography roles */
    --type-detail-title-size: 22px;
    --type-detail-title-weight: 700;
    --type-detail-title-line-height: 1.15;
    --type-page-title-size: 18px;
    --type-page-title-weight: 800;
    --type-page-title-line-height: 1.2;
    --type-section-title-size: 16px;
    --type-section-title-weight: 700;
    --type-section-title-line-height: 1.35;
    --type-body-size: 14px;
    --type-body-weight: 400;
    --type-body-line-height: 1.45;
    --type-form-size: 14px;
    --type-form-weight: 600;
    --type-form-line-height: 1.35;
    --type-button-size: 14px;
    --type-button-weight: 700;
    --type-button-line-height: 1.2;
    --type-helper-size: 12px;
    --type-helper-weight: 500;
    --type-helper-line-height: 1.4;
    --type-filter-size: 12px;
    --type-filter-weight: 600;
    --type-filter-line-height: 1.2;
    --type-micro-status-size: 10px;
    --type-micro-status-weight: 700;
    --type-micro-status-line-height: 1.2;
    --type-micro-supporting-size: 10px;
    --type-micro-supporting-weight: 500;
    --type-micro-supporting-line-height: 1.25;
    --type-activity-title-size: 13px;
    --type-activity-title-weight: 700;
    --type-activity-title-line-height: 1.2;
    --type-activity-value-size: 13px;
    --type-activity-value-weight: 800;
    --type-activity-value-line-height: 1.2;
    --type-activity-meta-size: 11px;
    --type-activity-meta-weight: 500;
    --type-activity-meta-line-height: 1.25;

    /* Elevation */
    --shadow-card:
        -4px -4px 14px 0 #ffffff,
        0 4px 14px -4px rgba(51, 51, 51, 0.14);

    /* Motion */
    --motion-ease: cubic-bezier(.2, .8, .2, 1);
    --motion-ease-standard: var(--motion-ease);
    --motion-micro: 160ms;
    --motion-small: 240ms;
    --motion-view: 280ms;
    --motion-sheet-open: 360ms;
    --motion-sheet-close: 310ms;
    --motion-enrollment: 480ms;
    --motion-emphasis: 580ms;

    /* Legacy compatibility values. Existing components keep their current
       geometry and timing until the dedicated migration stage. */
    --legacy-ui-text-subtle: #94a3b8;
    --legacy-record-radius: 18px;
    --legacy-badge-radius: 9px;
    --legacy-action-radius: 11px;
    --legacy-section-title-line-height: 24px;
    --legacy-section-title-weight: 400;
    --legacy-card-meta-size: 10px;
    --legacy-card-meta-line-height: 1.35;
    --legacy-card-meta-weight: 600;
    --legacy-card-badge-size: 9px;
    --legacy-card-badge-line-height: 1.25;
    --legacy-card-badge-weight: 800;
    --legacy-motion-layout-duration: 720ms;
    --legacy-motion-layout-easing: cubic-bezier(0.16, 1, 0.3, 1);
    --legacy-motion-control-duration: 200ms;

    /* Colors - Primary (legacy aliases) */
    --color-primary: var(--color-brand-main);
    --color-success: var(--color-success-main);
    --color-warning: var(--color-warning-main);
    --color-danger: var(--color-brand-main);

    /* Shared UI library */
    --ui-page-bg: var(--color-page);
    --ui-surface: var(--color-surface);
    --ui-surface-muted: var(--color-page);
    --ui-text: var(--color-text-primary);
    --ui-text-secondary: var(--color-text-secondary);
    --ui-text-muted: var(--color-text-secondary);
    --ui-text-subtle: var(--legacy-ui-text-subtle);
    --ui-line: var(--color-line);
    --ui-line-soft: var(--color-line);
    --ui-brand-action: var(--color-brand-main);
    --ui-brand-action-hover: var(--color-brand-dark);
    --ui-brand-action-soft: var(--color-brand-soft);
    --ui-brand-action-border: #ed9799;
    --ui-brand-action-focus: rgba(215, 24, 28, 0.22);
    --ui-selected: var(--color-selected-main);
    --ui-selected-dark: var(--color-selected-dark);
    --ui-selected-soft: var(--color-selected-soft);
    --ui-positive-action: var(--color-selected-main);
    --ui-positive-action-hover: var(--color-selected-dark);
    --ui-success: var(--color-success-main);
    --ui-success-soft: var(--color-success-soft);
    --ui-success-border: var(--color-success-border);
    --ui-success-text: var(--color-success-dark);
    --ui-success-focus: rgba(44, 166, 127, 0.22);
    --ui-warning: var(--color-warning-main);
    --ui-warning-soft: var(--color-warning-soft);
    --ui-warning-border: var(--color-warning-border);
    --ui-warning-text: var(--color-warning-dark);
    --ui-danger: var(--color-brand-main);
    --ui-danger-soft: var(--color-brand-soft);
    --ui-danger-border: #ed9799;
    --ui-danger-text: var(--color-brand-dark);
    --ui-info: var(--color-info-main);
    --ui-info-soft: var(--color-info-soft);
    --ui-info-border: var(--color-info-border);
    --ui-info-text: var(--color-info-dark);
    --ui-status-quiet-bg: var(--status-quiet-bg);
    --ui-status-quiet-text: var(--status-quiet-text);
    --ui-status-attention-bg: var(--status-attention-bg);
    --ui-status-attention-text: var(--status-attention-text);
    --ui-record-radius: var(--legacy-record-radius);
    --ui-group-radius: var(--radius-card);
    --ui-badge-radius: var(--legacy-badge-radius);
    --ui-action-radius: var(--legacy-action-radius);
    --ui-section-title-size: var(--type-section-title-size);
    --ui-section-title-line-height: var(--legacy-section-title-line-height);
    --ui-section-title-weight: var(--legacy-section-title-weight);
    --ui-card-title-size: var(--type-activity-title-size);
    --ui-card-title-line-height: 1.25;
    --ui-card-title-weight: var(--type-activity-title-weight);
    --ui-card-meta-size: var(--legacy-card-meta-size);
    --ui-card-meta-line-height: var(--legacy-card-meta-line-height);
    --ui-card-meta-weight: var(--legacy-card-meta-weight);
    --ui-card-badge-size: var(--legacy-card-badge-size);
    --ui-card-badge-line-height: var(--legacy-card-badge-line-height);
    --ui-card-badge-weight: var(--legacy-card-badge-weight);
    --ui-card-value-size: var(--type-activity-value-size);
    --ui-card-value-line-height: 1.25;
    --ui-card-value-weight: var(--type-activity-value-weight);
    --ui-record-shadow: var(--shadow-card);
    --ui-motion-layout-duration: var(--legacy-motion-layout-duration);
    --ui-motion-layout-easing: var(--legacy-motion-layout-easing);
    --ui-motion-control-duration: var(--legacy-motion-control-duration);

    /* Colors - Levels */
    --color-level-p0: #636363;
    --color-level-p1: #636363;
    --color-level-open: #636363;

    /* Colors - Timeline Dots */
    --dot-present-bg: #dcfce7;
    --dot-present-border: #86efac;
    --dot-present-text: #15803d;

    --dot-excused-bg: #fef9c3;
    --dot-excused-border: #fde047;
    --dot-excused-text: #a16207;

    --dot-absent-bg: #fee2e2;
    --dot-absent-border: #fca5a5;
    --dot-absent-text: #991b1b;

    --dot-future-bg: #ffffff;
    --dot-future-border: #e2e8f0;

    --dot-cancelled-bg: #f1f5f9;
    --dot-cancelled-border: #cbd5e1;
    --dot-cancelled-text: #64748b;

    /* Spacing - legacy values remain exact until migration */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;

    /* Border radius - legacy values remain exact until migration */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-badge: var(--ui-badge-radius);
    --radius-button: var(--ui-action-radius);

    /* Shadows - legacy */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* ============================================
   2. RESET & BASE
   ============================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-ui);
    -webkit-font-smoothing: antialiased;
}

/* Shared media viewer */
.c-media-viewer {
    position: absolute;
    inset: 0;
    z-index: 120;
    display: none;
    flex-direction: column;
    background: rgba(24, 24, 27, 0.98);
    color: #ffffff;
}

.c-media-viewer.is-open {
    display: flex;
}

.c-media-viewer__toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(180deg, rgba(51, 51, 51, 0.72), transparent);
}

.c-media-viewer__counter {
    min-width: 42px;
    border-radius: 999px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    text-align: center;
}

.c-media-viewer__close,
.c-media-viewer__nav {
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    transition: background 0.18s ease, transform 0.18s ease;
}

.c-media-viewer__close {
    width: 40px;
    height: 40px;
    font-size: 16px;
}

.c-media-viewer__close:active,
.c-media-viewer__nav:active {
    transform: scale(0.95);
}

.c-media-viewer__stage {
    position: relative;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 68px 12px 72px;
}

.c-media-viewer__stage img,
.c-media-viewer__stage video {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    border-radius: 12px;
    background: #333333;
    object-fit: contain;
}

.c-media-viewer__stage video {
    min-width: 0;
    outline: none;
}

.c-media-viewer__nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 40px;
    height: 40px;
    transform: translateY(-50%);
    font-size: 16px;
}

.c-media-viewer__nav:disabled {
    visibility: hidden;
}

.c-media-viewer__nav--prev {
    left: 12px;
}

.c-media-viewer__nav--next {
    right: 12px;
}

.c-media-viewer__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    min-height: 56px;
    padding: 16px 20px calc(18px + env(safe-area-inset-bottom));
    background: linear-gradient(0deg, rgba(51, 51, 51, 0.72), transparent);
    color: rgba(255, 255, 255, 0.86);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
}

/* ============================================
   3. LAYOUT
   ============================================ */

/* Legacy phone-frame (keep for compatibility) */
.phone-frame {
    width: 375px;
    height: 812px;
    background: #ffffff;
    border-radius: 40px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    border: 12px solid #333333;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Legal documents stay above the fixed bottom navigation. */
.legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    flex: 0 0 auto;
    padding: 1rem 1.25rem calc(5rem + max(0.75rem, env(safe-area-inset-bottom)));
    background: var(--ui-page-bg);
    color: var(--ui-text-secondary);
    font-size: 0.7rem;
    line-height: 1.4;
    text-align: center;
}

.legal a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal a:hover {
    color: var(--ui-brand-action);
}

.legal a:focus-visible {
    border-radius: 0.25rem;
    outline: 2px solid var(--ui-brand-action-focus);
    outline-offset: 3px;
}

.c-process-card:active {
    transform: scale(0.99);
}

.c-process-card--payment {
    border-left-color: #d7181c;
}

.c-process-card--reserve {
    border-left-color: #f59e0b;
}

.c-process-card--balance {
    border-left-color: #3b82f6;
}

/* --- Badges --- */
.c-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

/* Badge Base (for schedule.php compatibility) */
.badge-base,
.c-badge-base {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    flex-shrink: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Legacy badge-p0 (for schedule.php compatibility) */
.badge-p0,
.c-badge--p0 {
    background: #eff6ff;
    color: #1d4ed8;
}

/* Legacy badge-p1 (for schedule.php compatibility) */
.badge-p1,
.c-badge--p1 {
    background: #fceded;
    color: #950c0f;
}

/* Legacy badge-open (for schedule.php compatibility) */
.badge-open,
.c-badge--open {
    background: #fffbeb;
    color: #92400e;
}

/* Legacy badge-new (for schedule.php compatibility) */
.badge-new,
.c-badge--new {
    background: #eaf6f2;
    color: #1f765e;
    font-weight: 800;
    width: fit-content;
}

/* Badge variants for schedule.php */
.badge-start-soon,
.c-badge--start-soon {
    background: #fffbeb;
    color: #92400e;
}

.badge-start-date,
.c-badge--start-date {
    background: #f6f6f6;
    color: #636363;
}

/* --- Timeline Dots (Global) --- */
.c-dot--present {
    background-color: var(--dot-present-bg);
    border-color: var(--dot-present-border);
    color: var(--dot-present-text);
}

.c-dot--excused {
    background-color: var(--dot-excused-bg);
    border-color: var(--dot-excused-border);
    color: var(--dot-excused-text);
}

.c-dot--absent {
    background-color: var(--dot-absent-bg);
    border-color: var(--dot-absent-border);
    color: var(--dot-absent-text);
}

.c-dot--future {
    background-color: var(--dot-future-bg);
    border-color: var(--dot-future-border);
    color: transparent;
}

.c-dot--future-excused {
    background-color: var(--dot-excused-bg);
    border-color: #facc15;
    color: #ca8a04;
}

.c-dot--cancelled {
    background-color: var(--dot-cancelled-bg);
    border-color: var(--dot-cancelled-border);
    color: var(--dot-cancelled-text);
}

.c-date-label {
    font-size: 8px;
    color: #94a3b8;
    font-weight: 500;
    text-align: center;
}

/* --- Buttons --- */
.c-button--ripple {
    position: relative;
    overflow: hidden;
}

.c-button--ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.c-button--ripple:active::after {
    width: 300px;
    height: 300px;
}

/* ============================================
   5. UTILITIES
   ============================================ */

/* Legacy scrollbar-hide (keep for compatibility) */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* New utility classes */
.u-scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.u-scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.u-cursor-grab {
    cursor: grab;
}

.u-cursor-grabbing {
    cursor: grabbing;
}

.absence-makeup-summary,
.absence-makeup-section-summary {
    list-style: none;
}

.absence-makeup-summary::-webkit-details-marker,
.absence-makeup-section-summary::-webkit-details-marker {
    display: none;
}

.absence-makeup-summary-panel {
    position: relative;
}

.absence-makeup-summary-arrow {
    position: absolute;
    left: 50%;
    bottom: -8px;
    display: inline-flex;
    width: 24px;
    height: 16px;
    align-items: center;
    justify-content: center;
    color: #ececec;
    background: #ffffff;
    font-size: 10px;
    line-height: 1;
    transform: translateX(-50%);
    pointer-events: none;
}

.absence-makeup-summary-arrow i {
    transition: transform 0.18s ease;
}

details[open] > .absence-makeup-summary .absence-makeup-summary-arrow i {
    transform: rotate(180deg);
}

/* Shared component geometry */
.rounded-2xl,
.p-mypayments-empty-card,
.p-mypayments-error-card,
.p-mypayments-instrument-card,
.p-mypayments-process-card,
.p-mypayments-deposit-summary,
.p-schedule-activity-detail-card,
.activity-card,
.course-card,
.list-course-card,
.process-card,
.index-card,
.plan-card,
.applications-history-item,
.activity-history-item {
    border-radius: var(--radius-card) !important;
}

.rounded-xl:not(button):not(a):not(input):not(textarea):not(select) {
    border-radius: var(--radius-card) !important;
}

.rounded,
.badge-base,
.c-badge,
.c-badge-base,
.p-mypayments-badge-main,
.p-mypayments-badge-inline-level,
.p-mypayments-tag,
.list-payment-badge,
.timer-badge,
.deposit-status,
.chip-applied,
.p-schedule-chip-applied,
.chip-more,
.p-schedule-chip-more,
.chip-suggestion,
.p-schedule-chip-suggestion {
    border-radius: var(--radius-badge) !important;
}

button:not(.c-button):not(.rounded-full):not([class*="rounded-full"]):not([class*="-icon"]):not([aria-label]),
[class*="-button"]:not(.c-button):not(.rounded-full):not([class*="-icon"]):not([aria-label]),
[class*="-btn"]:not(.c-button):not(.rounded-full):not([class*="-icon"]):not([aria-label]) {
    border-radius: var(--radius-button) !important;
}

/* Shared record-card library. Wallet remains the visual reference. */
.c-record-card {
    background: var(--ui-surface);
    border: 0;
    border-radius: var(--ui-record-radius) !important;
    box-shadow: var(--ui-record-shadow);
    transition:
        transform var(--ui-motion-control-duration) ease,
        box-shadow var(--ui-motion-control-duration) ease;
}

.c-record-card:active {
    transform: scale(0.985);
}

/* Shared button hierarchy. */
.c-button,
.c-primary-action {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: var(--radius-control) !important;
    padding: 0 16px;
    font: inherit;
    font-size: var(--type-button-size);
    font-weight: var(--type-button-weight);
    line-height: var(--type-button-line-height);
    text-align: center;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition:
        background-color var(--motion-micro) var(--motion-ease-standard),
        border-color var(--motion-micro) var(--motion-ease-standard),
        color var(--motion-micro) var(--motion-ease-standard),
        transform 140ms var(--motion-ease-standard);
}

.c-button--primary,
.c-primary-action {
    border: 1px solid var(--ui-brand-action);
    background: var(--ui-brand-action);
    color: #ffffff;
}

.c-button--primary:hover,
.c-primary-action:hover {
    border-color: var(--ui-brand-action-hover);
    background: var(--ui-brand-action-hover);
}

.c-button--secondary {
    border: 1px solid #d9d9d9;
    background: var(--ui-surface);
    color: var(--ui-text);
}

.c-button--secondary:hover {
    border-color: #cfcfcf;
    background: #fafafa;
}

.c-button--tertiary {
    min-height: 40px;
    justify-content: flex-start;
    border: 0;
    padding: 0 4px;
    background: transparent;
    color: var(--ui-text);
}

.c-button--tertiary:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.c-button--danger {
    border: 1px solid #e7b4b5;
    background: var(--ui-surface);
    color: var(--ui-danger-text);
}

.c-button--danger:hover {
    border-color: #d78b8d;
    background: var(--ui-danger-soft);
}

.c-button--block {
    width: 100%;
}

.c-button-group {
    display: flex;
    gap: 8px;
}

.c-button-group > .c-button,
.c-button-group > .c-primary-action {
    flex: 1 1 0;
}

.c-button:focus-visible,
.c-primary-action:focus-visible,
.c-icon-button:focus-visible {
    outline: 3px solid var(--ui-brand-action-focus);
    outline-offset: 2px;
}

.c-button:active:not(:disabled):not([aria-disabled="true"]),
.c-primary-action:active:not(:disabled):not([aria-disabled="true"]) {
    transform: scale(0.985);
}

.c-button:disabled,
.c-button[aria-disabled="true"],
.c-primary-action:disabled,
.c-primary-action[aria-disabled="true"] {
    box-shadow: none !important;
    filter: none;
    transform: none !important;
    cursor: not-allowed;
}

.c-button--primary:disabled,
.c-button--primary[aria-disabled="true"],
.c-primary-action:disabled,
.c-primary-action[aria-disabled="true"] {
    border: 0;
    background: #d7d7d7;
    color: #ffffff;
}

.c-button--primary:disabled:hover,
.c-button--primary[aria-disabled="true"]:hover,
.c-primary-action:disabled:hover,
.c-primary-action[aria-disabled="true"]:hover {
    border: 0;
    background: #d7d7d7;
    color: #ffffff;
}

.c-button--secondary:disabled,
.c-button--secondary[aria-disabled="true"],
.c-button--danger:disabled,
.c-button--danger[aria-disabled="true"] {
    border-color: #e5e5e5;
    background: #f7f7f7;
    color: #a0a0a0;
}

.c-button--tertiary:disabled,
.c-button--tertiary[aria-disabled="true"] {
    background: transparent;
    color: #a0a0a0;
    text-decoration: none;
}

/* Shared SVG icon buttons. */
.c-icon-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 44px;
    border: 0;
    border-radius: var(--radius-control) !important;
    padding: 0;
    background: transparent;
    color: var(--ui-text);
    box-shadow: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition:
        background-color var(--motion-micro) var(--motion-ease-standard),
        color var(--motion-micro) var(--motion-ease-standard),
        transform 140ms var(--motion-ease-standard);
}

.c-icon-button:hover {
    background: #f5f5f5;
}

.c-icon-button:active:not(:disabled):not([aria-disabled="true"]) {
    transform: scale(0.94);
}

.c-icon-button:disabled,
.c-icon-button[aria-disabled="true"] {
    background: transparent;
    color: #a0a0a0;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed;
}

.c-icon {
    width: 18px;
    height: 18px;
    display: block;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.c-icon--sm {
    width: 16px;
    height: 16px;
}

.c-card-stack {
    position: relative;
    display: block !important;
    height: var(--c-card-stack-height, auto);
    cursor: pointer;
}

.c-card-stack::after {
    content: '';
    position: absolute;
    z-index: 0;
    top: 8px;
    right: 6px;
    bottom: 0;
    left: 6px;
    border-radius: var(--ui-record-radius);
    background: var(--ui-surface);
    box-shadow: var(--ui-record-shadow);
}

.c-card-stack > .c-card-stack__item {
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    margin: 0;
    z-index: var(--c-card-stack-z-index, 1);
    transform:
        translateY(var(--c-card-stack-offset, 0))
        scale(var(--c-card-stack-scale, 1));
    transform-origin: top center;
    transition:
        transform var(--ui-motion-layout-duration)
        var(--ui-motion-layout-easing);
    pointer-events: none;
}

.c-section-heading,
.c-section-disclosure {
    margin: 0;
    color: var(--ui-text);
    font-family: inherit;
    font-size: var(--ui-section-title-size);
    line-height: var(--ui-section-title-line-height);
    font-weight: var(--ui-section-title-weight);
    letter-spacing: 0;
    text-transform: none;
}

.c-section-disclosure {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    padding: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.c-section-disclosure__icon {
    color: var(--ui-text-secondary);
    font-size: 12px;
    transition: transform 220ms ease;
}

.c-section-disclosure[aria-expanded="false"] .c-section-disclosure__icon {
    transform: rotate(-90deg);
}

.c-segmented-tabs {
    display: grid;
    grid-template-columns: repeat(var(--c-segmented-tabs-count, 2), minmax(0, 1fr));
    width: 100%;
    gap: 6px;
    padding: 4px;
    border-radius: var(--ui-group-radius);
    background: var(--ui-line);
}

.c-segmented-tabs__tab {
    width: 100%;
    padding: 10px 14px;
    border: 0;
    border-radius: 12px !important;
    background: transparent;
    color: var(--ui-text-secondary);
    font-size: 12px;
    font-weight: 800;
    text-align: center;
    transition:
        background-color var(--ui-motion-control-duration) ease,
        color var(--ui-motion-control-duration) ease,
        transform 100ms ease;
}

.c-segmented-tabs__tab[aria-selected="true"],
.c-segmented-tabs__tab.is-active {
    background: var(--ui-surface);
    color: var(--ui-text);
    box-shadow: 0 1px 2px rgba(51, 51, 51, 0.08);
}

.c-divider-disclosure {
    position: relative;
    display: block;
    width: 100%;
    margin: 2px 0 10px;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: center;
}

.c-divider-disclosure::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    height: 1px;
    background: #ececec;
}

.c-divider-disclosure > span {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    background: var(--ui-page-bg);
    color: var(--ui-text-secondary);
    font-size: 10px;
    line-height: 1.4;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.c-schedule-group-card {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .c-record-card,
    .c-button,
    .c-primary-action,
    .c-icon-button,
    .c-card-stack > .c-card-stack__item,
    .c-section-disclosure__icon,
    .c-segmented-tabs__tab,
    .c-divider-disclosure {
        transition: none;
    }
}

/* Color-library migration exceptions: these established visuals stay unchanged. */
body:has(.p-mypayments-view) .bottom-sheet-overlay {
    background: rgba(15, 23, 42, 0.4) !important;
}
body:has(.p-mypayments-view) #notification-detail-sheet-overlay {
    background: rgba(15, 23, 42, 0.6) !important;
}
body:has(.p-mypayments-view) .custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: #e2e8f0 !important;
}
body:has(.p-mypayments-view) .custom-scrollbar:hover::-webkit-scrollbar-thumb {
    background-color: #cbd5e1 !important;
}
body:has(.p-mypayments-view) .custom-scrollbar {
    scrollbar-color: #e2e8f0 transparent !important;
}
body:has(.p-mypayments-view) .notif-delete-bg { background-color: #ef4444 !important; }
body:has(.p-mypayments-view) .notif-item:active { background-color: #f8fafc !important; }
body:has(.p-mypayments-view) .notif-unread { background-color: #f0f9ff !important; }
body:has(.p-mypayments-view) .notif-unread .notif-title { color: #0f172a !important; }
body:has(.p-mypayments-view) .notif-read .notif-title { color: #475569 !important; }
body:has(.p-mypayments-view) .end-of-list { color: #94a3b8 !important; }
body:has(.p-mypayments-view) .chip-active {
    background-color: #1e293b !important;
    border-color: #1e293b !important;
}
body:has(.p-mypayments-view) .chip-inactive {
    color: #64748b !important;
    border-color: #e2e8f0 !important;
}
@keyframes p-mypayments-markReadFlash {
    0% { background-color: #f0f9ff; }
    100% { background-color: #ffffff; }
}
body:has(.p-mypayments-view) .animate-mark-read {
    animation-name: p-mypayments-markReadFlash !important;
}

#bottom_sheet_meet_rating .text-slate-300 { color: #cbd5e1 !important; }
#bottom_sheet_meet_rating .text-slate-400 { color: #94a3b8 !important; }
#bottom_sheet_meet_rating .text-slate-500 { color: #64748b !important; }
#bottom_sheet_meet_rating .text-slate-800 { color: #1e293b !important; }
#bottom_sheet_meet_rating .bg-slate-50 { background-color: #f8fafc !important; }
#bottom_sheet_meet_rating .bg-slate-900 { background-color: #0f172a !important; }
#bottom_sheet_meet_rating .border-slate-200 { border-color: #e2e8f0 !important; }
#bottom_sheet_meet_rating .shadow-slate-200 { --tw-shadow-color: #e2e8f0 !important; }
#bottom_sheet_meet_rating .text-indigo-300 { color: #a5b4fc !important; }
#bottom_sheet_meet_rating .text-indigo-500 { color: #6366f1 !important; }
#bottom_sheet_meet_rating .hover\:text-indigo-500:hover { color: #6366f1 !important; }
#bottom_sheet_meet_rating .focus\:border-indigo-300:focus { border-color: #a5b4fc !important; }
#bottom_sheet_meet_rating .text-green-500 { color: #22c55e !important; }
#bottom_sheet_meet_rating .text-yellow-500 { color: #eab308 !important; }
#bottom_sheet_meet_rating .text-red-400 { color: #f87171 !important; }

#activity-rating-banner.border-red-100 { border-color: #fee2e2 !important; }
#activity-rating-banner.from-red-50 { --tw-gradient-from: #fef2f2 var(--tw-gradient-from-position) !important; }
#activity-rating-banner.to-orange-50 { --tw-gradient-to: #fff7ed var(--tw-gradient-to-position) !important; }
#activity-rating-banner .bg-red-600,
#section-do-oceny .bg-red-600 { background-color: #dc2626 !important; }
#activity-rating-banner .text-slate-600 { color: #475569 !important; }
#activity-rating-banner .text-slate-800 { color: #1e293b !important; }
#section-do-oceny .text-red-600 { color: #dc2626 !important; }

.details-rating-readonly .text-slate-400 { color: #94a3b8 !important; }
.details-rating-readonly .text-slate-500 { color: #64748b !important; }
#activity-pending-meets button .text-green-400,
#activity-past-meets button .text-green-400 { color: #4ade80 !important; }
#activity-pending-meets button .text-green-500,
#activity-past-meets button .text-green-500 { color: #22c55e !important; }
#activity-pending-meets button .text-green-600,
#activity-past-meets button .text-green-600 { color: #16a34a !important; }
#activity-pending-meets button .text-yellow-400,
#activity-past-meets button .text-yellow-400 { color: #facc15 !important; }
#activity-pending-meets button .text-yellow-500,
#activity-past-meets button .text-yellow-500 { color: #eab308 !important; }
#activity-pending-meets button .text-yellow-600,
#activity-past-meets button .text-yellow-600 { color: #ca8a04 !important; }
#activity-pending-meets button .text-red-400,
#activity-past-meets button .text-red-400 { color: #f87171 !important; }
#activity-pending-meets button .text-red-500,
#activity-past-meets button .text-red-500 { color: #ef4444 !important; }
#activity-pending-meets button .text-red-600,
#activity-past-meets button .text-red-600 { color: #dc2626 !important; }

.list-timeline-dot.bg-green-100 { background-color: #dcfce7 !important; }
.list-timeline-dot.border-green-300 { border-color: #86efac !important; }
.list-timeline-dot.text-green-600 { color: #16a34a !important; }
.list-timeline-dot.bg-red-100 { background-color: #fee2e2 !important; }
.list-timeline-dot.border-red-300 { border-color: #fca5a5 !important; }
.list-timeline-dot.text-red-600 { color: #dc2626 !important; }
.list-timeline-dot.bg-yellow-100 { background-color: #fef9c3 !important; }
.list-timeline-dot.border-yellow-300 { border-color: #fde047 !important; }
.list-timeline-dot.text-yellow-600 { color: #ca8a04 !important; }
.list-timeline-dot.border-slate-300 { border-color: #cbd5e1 !important; }
.list-timeline-dot.text-slate-300 { color: #cbd5e1 !important; }
.list-timeline-dot.bg-slate-100 { background-color: #f1f5f9 !important; }
.list-timeline-dot.text-slate-400 { color: #94a3b8 !important; }

/* Wspólna legenda obecności: Kursy, Dokładki i Start/Mój grafik. */
.badge-status-sm.st-obecny {
    background: var(--ui-success-soft) !important;
    color: var(--ui-success-text) !important;
    border: 1px solid var(--ui-success-border) !important;
}
.badge-status-sm.st-nieobecny {
    background: var(--ui-danger-soft) !important;
    color: var(--ui-danger-text) !important;
    border: 1px solid var(--ui-danger-border) !important;
}

.dot-reported,
.list-dot-reported {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
    color: #64748b;
}
.badge-status-sm.st-zgloszono {
    background: var(--ui-muted-soft, #f1f5f9) !important;
    color: var(--ui-muted-text, #64748b) !important;
    border: 1px solid var(--ui-muted-border, #cbd5e1) !important;
}
.badge-status-sm.st-odwolano {
    background: var(--ui-muted-soft, #f1f5f9) !important;
    color: var(--ui-muted-text, #64748b) !important;
    border: 1px solid var(--ui-muted-border, #cbd5e1) !important;
}
.badge-status-sm.st-do-odrobienia,
.badge-status-sm.st-odrobione {
    background: var(--ui-warning-soft) !important;
    color: var(--ui-warning-text) !important;
    border: 1px solid var(--ui-warning-border) !important;
}

/* Home calendar and bottom navigation intentionally keep their pre-migration palette. */
.p-home-calendar .c-section-heading { color: #0f172a !important; }
.p-home-calendar #displayed-month-name { color: #0f172a !important; }
.p-home-calendar .p-home-calendar-section-heading { color: #94a3b8 !important; }
.p-home-calendar .bg-gray-100 { background-color: #f3f4f6 !important; }
.p-home-calendar .text-gray-500 { color: #6b7280 !important; }
.p-home-calendar .text-slate-800 { color: #1e293b !important; }
.p-home-calendar .text-gray-400 { color: #9ca3af !important; }
.p-home-calendar .text-red-400 { color: #f87171 !important; }
.p-home-calendar .text-red-600 { color: #dc2626 !important; }
.p-home-calendar .border-red-600 { border-color: #dc2626 !important; }
.p-home-calendar .bg-red-600 { background-color: #dc2626 !important; }
.p-home-calendar .text-slate-300 { color: #cbd5e1 !important; }
.p-home-calendar .text-gray-700 { color: #374151 !important; }
.p-home-calendar .hover\:bg-gray-50:hover { background-color: #f9fafb !important; }

.bottom-nav-responsive { border-color: #f1f5f9 !important; }
.bottom-nav-responsive .text-red-600 { color: #dc2626 !important; }
.bottom-nav-responsive .text-slate-300 { color: #cbd5e1 !important; }
.bottom-nav-responsive .hover\:text-slate-500:hover { color: #64748b !important; }
.bottom-nav-responsive > a[aria-label="Grafik"] {
    position: relative;
    background-color: #dc2626 !important;
    border-color: #fff !important;
    --tw-shadow-color: #fee2e2 !important;
    --tw-shadow: var(--tw-shadow-colored) !important;
}
.bottom-nav-fab-label {
    position: absolute;
    top: 100%;
    left: 50%;
    margin-top: 4px;
    color: #cbd5e1;
    font-size: 9px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    transform: translateX(-50%);
}
.bottom-nav-fab-label.is-active {
    color: #dc2626;
    font-weight: 700;
}

/* Attendance choice used in the schedule and makeup lists. */
.c-attendance-toggle {
    --attendance-green: #43b581;
    --attendance-grey: #747f8d;
    display: inline-grid;
    justify-items: center;
    gap: 4px;
    width: 44px;
    min-width: 44px;
    padding: 0;
    margin-right: 4px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    flex-shrink: 0;
    align-self: center;
    -webkit-tap-highlight-color: transparent;
}

.c-attendance-toggle__label {
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
    color: #aeb2b8;
    transition: color 250ms ease, transform 250ms ease, opacity 250ms ease;
}

.c-attendance-toggle__track {
    position: relative;
    width: 28px;
    height: 51px;
    padding: 3px;
    border-radius: 999px;
    background: var(--attendance-green);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
    transition: background-color 350ms ease;
}

.c-attendance-toggle__thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #fff;
    color: var(--attendance-green);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.22);
    transform: translateY(0);
    transition: transform 480ms cubic-bezier(0.34, 1.56, 0.64, 1), color 300ms ease;
}

.c-attendance-toggle__icon {
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
}

.c-attendance-toggle[aria-pressed="true"] .c-attendance-toggle__label--yes {
    color: var(--attendance-green);
    transform: scale(1.08);
}

.c-attendance-toggle[aria-pressed="true"] .c-attendance-toggle__label--no {
    opacity: 0.55;
}

.c-attendance-toggle[aria-pressed="false"] .c-attendance-toggle__track {
    background: var(--attendance-grey);
}

.c-attendance-toggle[aria-pressed="false"] .c-attendance-toggle__thumb {
    color: var(--attendance-grey);
    transform: translateY(23px);
}

.c-attendance-toggle[aria-pressed="false"] .c-attendance-toggle__label--yes {
    opacity: 0.55;
}

.c-attendance-toggle[aria-pressed="false"] .c-attendance-toggle__label--no {
    color: var(--attendance-grey);
    transform: scale(1.08);
}

.c-attendance-toggle--reported,
.c-attendance-toggle:disabled {
    cursor: default;
    opacity: 1;
}

.c-attendance-toggle--cancel-available {
    cursor: pointer;
}

.c-attendance-toggle--cancel-blocked {
    cursor: not-allowed;
    opacity: 0.58;
}

.c-attendance-toggle--cancel-available[aria-busy="true"] {
    cursor: wait;
    opacity: 0.7;
}

.c-attendance-toggle:active:not(:disabled) {
    transform: scale(0.97);
}

.c-attendance-toggle:focus-visible {
    outline: 2px solid var(--attendance-green);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 480px) {
    body {
        background-color: #fff;
    }

    .phone-frame {
        width: 100%;
        height: 100%;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
}