/**
 * Material Design 3 — Component System
 * CMS — Course Management System
 *
 * Complete MD3 component implementation:
 * - Cards (elevated, filled, outlined)
 * - Buttons (filled, tonal, outlined, text, FAB)
 * - Navigation (drawer, rail, bar)
 * - Tables (data tables)
 * - Forms (text fields, selects, switches)
 * - Chips
 * - Dialogs/Modals
 * - Badges
 * - Progress indicators
 * - Dividers
 */

/* ============================================================
   MD3 CARDS
   ============================================================ */
.md3-card {
    background-color: var(--md3-surface-container-low);
    border-radius: var(--md3-shape-corner-medium);
    color: var(--md3-on-surface);
    overflow: hidden;
    transition: all var(--md3-motion-duration-medium2) var(--md3-motion-easing-standard);
}

.md3-card--elevated {
    background-color: var(--md3-surface-container-low);
    box-shadow: var(--md3-elevation-1);
    border: none;
}
.md3-card--elevated:hover {
    box-shadow: var(--md3-elevation-2);
}

.md3-card--filled {
    background-color: var(--md3-surface-container-highest);
    border: none;
    box-shadow: none;
}

.md3-card--outlined {
    background-color: var(--md3-surface);
    border: 1px solid var(--md3-outline-variant);
    box-shadow: none;
}

.md3-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--md3-space-4) var(--md3-space-4) var(--md3-space-2);
}

.md3-card__title {
    font-size: var(--md3-font-title-medium);
    font-weight: var(--md3-weight-medium);
    color: var(--md3-on-surface);
    margin: 0;
}

.md3-card__subtitle {
    font-size: var(--md3-font-body-small);
    color: var(--md3-on-surface-variant);
    margin: 2px 0 0;
}

.md3-card__content {
    padding: 0 var(--md3-space-4) var(--md3-space-4);
}

.md3-card__actions {
    display: flex;
    align-items: center;
    gap: var(--md3-space-2);
    padding: var(--md3-space-2) var(--md3-space-4) var(--md3-space-4);
}

.md3-card__media {
    width: 100%;
    overflow: hidden;
}
.md3-card__media img {
    width: 100%;
    height: auto;
    display: block;
}

/* MD3 KPI Card */
.md3-kpi-card {
    position: relative;
    padding: var(--md3-space-5);
    background-color: var(--md3-surface-container-low);
    border-radius: var(--md3-shape-corner-medium);
    box-shadow: var(--md3-elevation-1);
    transition: all var(--md3-motion-duration-medium2) var(--md3-motion-easing-standard);
    overflow: hidden;
}
.md3-kpi-card:hover {
    box-shadow: var(--md3-elevation-2);
    transform: translateY(-2px);
}

.md3-kpi-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--md3-space-3);
}

.md3-kpi-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--md3-shape-corner-medium);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    transition: transform var(--md3-motion-duration-medium2) var(--md3-motion-easing-standard);
}
.md3-kpi-card:hover .md3-kpi-card__icon {
    transform: scale(1.08);
}

.md3-kpi-card__label {
    font-size: var(--md3-font-label-medium);
    font-weight: var(--md3-weight-medium);
    color: var(--md3-on-surface-variant);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--md3-space-1);
}

.md3-kpi-card__value {
    font-size: var(--md3-font-headline-medium);
    font-weight: var(--md3-weight-bold);
    color: var(--md3-on-surface);
    line-height: 1.2;
    margin: 0;
}

.md3-kpi-card__trend {
    display: inline-flex;
    align-items: center;
    gap: var(--md3-space-1);
    font-size: var(--md3-font-label-small);
    font-weight: var(--md3-weight-medium);
    padding: var(--md3-space-1) var(--md3-space-2);
    border-radius: var(--md3-shape-corner-full);
    margin-top: var(--md3-space-2);
}
.md3-kpi-card__trend--positive {
    background-color: var(--md3-success-container);
    color: var(--md3-on-success-container);
}
.md3-kpi-card__trend--negative {
    background-color: var(--md3-error-container);
    color: var(--md3-on-error-container);
}
.md3-kpi-card__trend--neutral {
    background-color: var(--md3-surface-container-high);
    color: var(--md3-on-surface-variant);
}

/* ============================================================
   MD3 BUTTONS
   ============================================================ */
.md3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--md3-space-2);
    height: var(--md3-touch-target-min);
    padding: 0 var(--md3-space-6);
    border: none;
    border-radius: var(--md3-shape-corner-full);
    font-family: var(--md3-font-sans);
    font-size: var(--md3-font-label-large);
    font-weight: var(--md3-weight-medium);
    letter-spacing: 0.1px;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.md3-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    border-radius: inherit;
}
.md3-btn:hover::after { opacity: var(--md3-state-hover); }
.md3-btn:active::after { opacity: var(--md3-state-pressed); }
.md3-btn:focus-visible {
    outline: 3px solid var(--md3-primary);
    outline-offset: 2px;
}

.md3-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

/* Filled Button */
.md3-btn--filled {
    background-color: var(--md3-primary);
    color: var(--md3-on-primary);
    box-shadow: var(--md3-elevation-1);
}
.md3-btn--filled:hover {
    box-shadow: var(--md3-elevation-2);
}

/* Tonal Button */
.md3-btn--tonal {
    background-color: var(--md3-secondary-container);
    color: var(--md3-on-secondary-container);
    box-shadow: none;
}

/* Outlined Button */
.md3-btn--outlined {
    background-color: transparent;
    color: var(--md3-primary);
    border: 1px solid var(--md3-outline);
    box-shadow: none;
}
.md3-btn--outlined:hover {
    background-color: rgba(103, 80, 164, var(--md3-state-hover));
}

/* Text Button */
.md3-btn--text {
    background-color: transparent;
    color: var(--md3-primary);
    padding: 0 var(--md3-space-3);
    box-shadow: none;
}
.md3-btn--text:hover {
    background-color: rgba(103, 80, 164, var(--md3-state-hover));
}

/* FAB — Floating Action Button */
.md3-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: var(--md3-shape-corner-large);
    background-color: var(--md3-primary-container);
    color: var(--md3-on-primary-container);
    font-size: 24px;
    cursor: pointer;
    box-shadow: var(--md3-elevation-3);
    transition: all var(--md3-motion-duration-medium2) var(--md3-motion-easing-standard);
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.md3-fab:hover {
    box-shadow: var(--md3-elevation-4);
}
.md3-fab:active {
    box-shadow: var(--md3-elevation-2);
}
.md3-fab::after {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    border-radius: inherit;
}
.md3-fab:hover::after { opacity: var(--md3-state-hover); }
.md3-fab:active::after { opacity: var(--md3-state-pressed); }

.md3-fab--small {
    width: 40px;
    height: 40px;
    border-radius: var(--md3-shape-corner-medium);
}
.md3-fab--large {
    width: 96px;
    height: 96px;
    border-radius: var(--md3-shape-corner-extra-large);
}

/* ============================================================
   MD3 ICON BUTTON
   ============================================================ */
.md3-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--md3-touch-target-min);
    height: var(--md3-touch-target-min);
    border: none;
    border-radius: var(--md3-shape-corner-full);
    background: transparent;
    color: var(--md3-on-surface-variant);
    font-size: var(--md3-icon-size-medium);
    cursor: pointer;
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.md3-icon-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    border-radius: inherit;
}
.md3-icon-btn:hover::after { opacity: var(--md3-state-hover); }
.md3-icon-btn:active::after { opacity: var(--md3-state-pressed); }
.md3-icon-btn:focus-visible {
    outline: 3px solid var(--md3-primary);
    outline-offset: 2px;
}
.md3-icon-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.md3-icon-btn--filled {
    background-color: var(--md3-primary);
    color: var(--md3-on-primary);
}
.md3-icon-btn--tonal {
    background-color: var(--md3-secondary-container);
    color: var(--md3-on-secondary-container);
}

/* ============================================================
   MD3 CHIPS
   ============================================================ */
.md3-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--md3-space-2);
    height: 32px;
    padding: 0 var(--md3-space-3);
    border: 1px solid var(--md3-outline);
    border-radius: var(--md3-shape-corner-small);
    background-color: transparent;
    color: var(--md3-on-surface-variant);
    font-size: var(--md3-font-label-medium);
    font-weight: var(--md3-weight-medium);
    cursor: pointer;
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    white-space: nowrap;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.md3-chip:hover {
    background-color: rgba(103, 80, 164, var(--md3-state-hover));
}
.md3-chip:focus-visible {
    outline: 3px solid var(--md3-primary);
    outline-offset: 2px;
}
.md3-chip--selected {
    background-color: var(--md3-secondary-container);
    color: var(--md3-on-secondary-container);
    border-color: transparent;
}
.md3-chip--elevated {
    background-color: var(--md3-surface-container-low);
    box-shadow: var(--md3-elevation-1);
    border-color: transparent;
}
.md3-chip__icon {
    font-size: 18px;
    margin-left: -4px;
}
.md3-chip__delete {
    font-size: 18px;
    margin-right: -4px;
    opacity: 0.54;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
}
.md3-chip__delete:hover {
    opacity: 1;
    background: rgba(0,0,0,0.08);
}

/* ============================================================
   MD3 NAVIGATION DRAWER (Sidebar)
   ============================================================ */
.md3-nav-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    inset-inline-end: auto;
    width: var(--md3-nav-drawer-width);
    background-color: var(--md3-surface-container-low);
    border-inline-end: 1px solid var(--md3-outline-variant);
    display: flex;
    flex-direction: column;
    z-index: 3000;
    transition: transform var(--md3-motion-duration-medium3) var(--md3-motion-easing-emphasized);
    overflow: hidden;
}

.md3-nav-drawer--modal {
    box-shadow: var(--md3-elevation-3);
    border-inline-end: none;
    border-start-end-radius: var(--md3-shape-corner-large);
    border-end-end-radius: var(--md3-shape-corner-large);
}

.md3-nav-drawer__header {
    padding: var(--md3-space-4) var(--md3-space-4) var(--md3-space-2);
    display: flex;
    align-items: center;
    gap: var(--md3-space-3);
}

.md3-nav-drawer__title {
    font-size: var(--md3-font-title-medium);
    font-weight: var(--md3-weight-medium);
    color: var(--md3-on-surface);
    margin: 0;
}

.md3-nav-drawer__content {
    flex: 1;
    overflow-y: auto;
    padding: var(--md3-space-2);
}

.md3-nav-drawer__footer {
    padding: var(--md3-space-3);
    border-top: 1px solid var(--md3-outline-variant);
}

/* MD3 Navigation Rail */
.md3-nav-rail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--md3-nav-rail-width);
    background-color: var(--md3-surface-container-low);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--md3-space-3) 0;
    z-index: 3000;
    transition: transform var(--md3-motion-duration-medium3) var(--md3-motion-easing-emphasized);
}

.md3-nav-rail__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--md3-space-1);
    width: 100%;
    padding: var(--md3-space-2) 0;
    text-decoration: none;
    color: var(--md3-on-surface-variant);
    font-size: var(--md3-font-label-small);
    font-weight: var(--md3-weight-medium);
    transition: color var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    position: relative;
}
.md3-nav-rail__item:hover {
    color: var(--md3-on-surface);
}
.md3-nav-rail__item--active {
    color: var(--md3-on-secondary-container);
}
.md3-nav-rail__icon {
    width: 56px;
    height: 32px;
    border-radius: var(--md3-shape-corner-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--md3-icon-size-medium);
    transition: background-color var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
}
.md3-nav-rail__item--active .md3-nav-rail__icon {
    background-color: var(--md3-secondary-container);
}

/* MD3 Navigation Bar (Bottom) */
.md3-nav-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--md3-bottom-app-bar-height);
    background-color: var(--md3-surface-container);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 var(--md3-space-4);
    z-index: 3000;
    box-shadow: 0 -1px 2px rgba(0,0,0,0.1);
}

/* ============================================================
   MD3 TOP APP BAR (Header)
   ============================================================ */
.md3-top-app-bar {
    position: sticky;
    top: 0;
    height: var(--md3-top-app-bar-height);
    background-color: var(--md3-surface);
    display: flex;
    align-items: center;
    padding: 0 var(--md3-space-4);
    gap: var(--md3-space-4);
    z-index: 2000;
    transition: background-color var(--md3-motion-duration-medium2) var(--md3-motion-easing-standard);
}

.md3-top-app-bar--scrolled {
    background-color: var(--md3-surface-container-low);
    box-shadow: var(--md3-elevation-1);
}

.md3-top-app-bar__title {
    font-size: var(--md3-font-title-large);
    font-weight: var(--md3-weight-regular);
    color: var(--md3-on-surface);
    margin: 0;
    flex: 1;
}

/* ============================================================
   MD3 TABLES
   ============================================================ */
.md3-table-container {
    overflow-x: auto;
    border-radius: var(--md3-shape-corner-medium);
    background-color: var(--md3-surface-container-low);
    box-shadow: var(--md3-elevation-1);
}

.md3-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--md3-font-body-medium);
    color: var(--md3-on-surface);
}

.md3-table thead {
    background-color: var(--md3-surface-container);
    position: sticky;
    top: 0;
    z-index: 1;
}

.md3-table th {
    padding: var(--md3-space-3) var(--md3-space-4);
    text-align: left;
    font-size: var(--md3-font-label-medium);
    font-weight: var(--md3-weight-medium);
    color: var(--md3-on-surface-variant);
    border-bottom: 1px solid var(--md3-outline-variant);
    white-space: nowrap;
    user-select: none;
    cursor: pointer;
    transition: background-color var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
}
.md3-table th:hover {
    background-color: var(--md3-surface-container-high);
}

.md3-table td {
    padding: var(--md3-space-3) var(--md3-space-4);
    border-bottom: 1px solid var(--md3-outline-variant);
    vertical-align: middle;
}

.md3-table tbody tr {
    transition: background-color var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
}
.md3-table tbody tr:hover {
    background-color: var(--md3-surface-container);
}
.md3-table tbody tr:last-child td {
    border-bottom: none;
}

.md3-table__actions {
    display: flex;
    gap: var(--md3-space-1);
    justify-content: flex-end;
}

/* ============================================================
   MD3 TEXT FIELDS (Forms)
   ============================================================ */
.md3-text-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--md3-space-1);
}

.md3-text-field__input {
    width: 100%;
    height: 56px;
    padding: 0 var(--md3-space-4);
    border: 1px solid var(--md3-outline);
    border-radius: var(--md3-shape-corner-extra-small);
    background-color: transparent;
    color: var(--md3-on-surface);
    font-family: var(--md3-font-sans);
    font-size: var(--md3-font-body-large);
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.md3-text-field__input:hover {
    border-color: var(--md3-on-surface);
}

.md3-text-field__input:focus {
    border-color: var(--md3-primary);
    border-width: 2px;
    padding: 0 calc(var(--md3-space-4) - 1px);
}

.md3-text-field__input:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

.md3-text-field__label {
    position: absolute;
    top: 16px;
    inset-inline-start: var(--md3-space-4);
    font-size: var(--md3-font-body-large);
    color: var(--md3-on-surface-variant);
    pointer-events: none;
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    background-color: var(--md3-surface);
    padding: 0 var(--md3-space-1);
}

.md3-text-field__input:focus ~ .md3-text-field__label,
.md3-text-field__input:not(:placeholder-shown) ~ .md3-text-field__label {
    top: -8px;
    inset-inline-start: var(--md3-space-3);
    font-size: var(--md3-font-label-small);
    color: var(--md3-primary);
}

.md3-text-field__helper {
    font-size: var(--md3-font-body-small);
    color: var(--md3-on-surface-variant);
    padding: 0 var(--md3-space-4);
    margin: 0;
}

.md3-text-field__error {
    font-size: var(--md3-font-body-small);
    color: var(--md3-error);
    padding: 0 var(--md3-space-4);
    margin: 0;
}

.md3-text-field--filled .md3-text-field__input {
    background-color: var(--md3-surface-container-highest);
    border: none;
    border-bottom: 1px solid var(--md3-outline);
    border-radius: var(--md3-shape-corner-extra-small) var(--md3-shape-corner-extra-small) 0 0;
}
.md3-text-field--filled .md3-text-field__input:focus {
    border-bottom: 2px solid var(--md3-primary);
    background-color: var(--md3-surface-container-high);
}

.md3-text-field--error .md3-text-field__input {
    border-color: var(--md3-error);
}
.md3-text-field--error .md3-text-field__input:focus {
    border-color: var(--md3-error);
}
.md3-text-field--error .md3-text-field__label {
    color: var(--md3-error);
}

/* MD3 Select */
.md3-select {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--md3-space-1);
}

.md3-select__input {
    width: 100%;
    height: 56px;
    padding: 0 var(--md3-space-4);
    border: 1px solid var(--md3-outline);
    border-radius: var(--md3-shape-corner-extra-small);
    background-color: transparent;
    color: var(--md3-on-surface);
    font-family: var(--md3-font-sans);
    font-size: var(--md3-font-body-large);
    cursor: pointer;
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.md3-select__input:hover {
    border-color: var(--md3-on-surface);
}
.md3-select__input:focus {
    border-color: var(--md3-primary);
    border-width: 2px;
}

.md3-select__label {
    position: absolute;
    top: 16px;
    inset-inline-start: var(--md3-space-4);
    font-size: var(--md3-font-body-large);
    color: var(--md3-on-surface-variant);
    pointer-events: none;
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    background-color: var(--md3-surface);
    padding: 0 var(--md3-space-1);
}

.md3-select__input:focus ~ .md3-select__label,
.md3-select__input.has-value ~ .md3-select__label {
    top: -8px;
    inset-inline-start: var(--md3-space-3);
    font-size: var(--md3-font-label-small);
    color: var(--md3-primary);
}

.md3-select__icon {
    position: absolute;
    inset-inline-end: var(--md3-space-4);
    top: 50%;
    transform: translateY(-50%);
    color: var(--md3-on-surface-variant);
    pointer-events: none;
    font-size: var(--md3-icon-size-medium);
}

/* MD3 Switch */
.md3-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.md3-switch__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.md3-switch__track {
    width: 52px;
    height: 32px;
    border-radius: var(--md3-shape-corner-full);
    border: 2px solid var(--md3-outline);
    background-color: var(--md3-surface-container-highest);
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    position: relative;
}

.md3-switch__thumb {
    position: absolute;
    top: 50%;
    inset-inline-start: 4px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--md3-outline);
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
}

.md3-switch__input:checked ~ .md3-switch__track {
    background-color: var(--md3-primary);
    border-color: var(--md3-primary);
}
.md3-switch__input:checked ~ .md3-switch__track .md3-switch__thumb {
    width: 24px;
    height: 24px;
    inset-inline-start: auto;
    inset-inline-end: 4px;
    background-color: var(--md3-on-primary);
}

.md3-switch__input:focus-visible ~ .md3-switch__track {
    outline: 3px solid var(--md3-primary);
    outline-offset: 2px;
}

/* MD3 Checkbox */
.md3-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--md3-touch-target-min);
    height: var(--md3-touch-target-min);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.md3-checkbox__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.md3-checkbox__box {
    width: 18px;
    height: 18px;
    border: 2px solid var(--md3-outline);
    border-radius: 2px;
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    display: flex;
    align-items: center;
    justify-content: center;
    color: transparent;
    font-size: 14px;
}

.md3-checkbox__input:checked ~ .md3-checkbox__box {
    background-color: var(--md3-primary);
    border-color: var(--md3-primary);
    color: var(--md3-on-primary);
}

.md3-checkbox__input:focus-visible ~ .md3-checkbox__box {
    outline: 3px solid var(--md3-primary);
    outline-offset: 2px;
}

/* MD3 Radio */
.md3-radio {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--md3-touch-target-min);
    height: var(--md3-touch-target-min);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.md3-radio__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.md3-radio__circle {
    width: 20px;
    height: 20px;
    border: 2px solid var(--md3-outline);
    border-radius: 50%;
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    display: flex;
    align-items: center;
    justify-content: center;
}

.md3-radio__circle::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--md3-primary);
    transform: scale(0);
    transition: transform var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
}

.md3-radio__input:checked ~ .md3-radio__circle {
    border-color: var(--md3-primary);
}
.md3-radio__input:checked ~ .md3-radio__circle::after {
    transform: scale(1);
}

.md3-radio__input:focus-visible ~ .md3-radio__circle {
    outline: 3px solid var(--md3-primary);
    outline-offset: 2px;
}

/* ============================================================
   MD3 DIALOGS / MODALS
   ============================================================ */
.md3-dialog-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 4000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--md3-motion-duration-medium2) var(--md3-motion-easing-standard);
}
.md3-dialog-backdrop--open {
    opacity: 1;
}

.md3-dialog {
    background-color: var(--md3-surface-container-high);
    border-radius: var(--md3-shape-corner-extra-large);
    box-shadow: var(--md3-elevation-3);
    max-width: 560px;
    width: calc(100% - var(--md3-space-8));
    max-height: calc(100vh - var(--md3-space-12));
    overflow-y: auto;
    transform: scale(0.8);
    transition: transform var(--md3-motion-duration-medium3) var(--md3-motion-easing-emphasized);
}
.md3-dialog-backdrop--open .md3-dialog {
    transform: scale(1);
}

.md3-dialog__header {
    padding: var(--md3-space-6) var(--md3-space-6) 0;
}

.md3-dialog__title {
    font-size: var(--md3-font-headline-small);
    font-weight: var(--md3-weight-regular);
    color: var(--md3-on-surface);
    margin: 0;
}

.md3-dialog__content {
    padding: var(--md3-space-4) var(--md3-space-6);
    font-size: var(--md3-font-body-medium);
    color: var(--md3-on-surface-variant);
    line-height: 1.5;
}

.md3-dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--md3-space-2);
    padding: 0 var(--md3-space-6) var(--md3-space-6);
}

/* ============================================================
   MD3 BADGES
   ============================================================ */
.md3-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: var(--md3-shape-corner-full);
    background-color: var(--md3-error);
    color: var(--md3-on-error);
    font-size: var(--md3-font-label-small);
    font-weight: var(--md3-weight-medium);
    line-height: 1;
}

.md3-badge--small {
    min-width: 8px;
    height: 8px;
    padding: 0;
}

.md3-badge--large {
    min-width: 24px;
    height: 24px;
    font-size: var(--md3-font-label-medium);
}

/* ============================================================
   MD3 PROGRESS INDICATORS
   ============================================================ */
.md3-progress-linear {
    height: 4px;
    background-color: var(--md3-surface-container-highest);
    border-radius: var(--md3-shape-corner-full);
    overflow: hidden;
    position: relative;
}

.md3-progress-linear__bar {
    height: 100%;
    background-color: var(--md3-primary);
    border-radius: inherit;
    transition: width var(--md3-motion-duration-medium2) var(--md3-motion-easing-standard);
}

.md3-progress-circular {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 4px solid var(--md3-surface-container-highest);
    border-top-color: var(--md3-primary);
    animation: md3-spin 1s linear infinite;
}

@keyframes md3-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   MD3 DIVIDERS
   ============================================================ */
.md3-divider {
    height: 1px;
    background-color: var(--md3-outline-variant);
    border: none;
    margin: 0;
}

.md3-divider--inset {
    margin-inline-start: var(--md3-space-4);
}

/* ============================================================
   MD3 LIST
   ============================================================ */
.md3-list {
    list-style: none;
    padding: var(--md3-space-2) 0;
    margin: 0;
}

.md3-list__item {
    display: flex;
    align-items: center;
    gap: var(--md3-space-4);
    padding: var(--md3-space-3) var(--md3-space-4);
    min-height: 56px;
    color: var(--md3-on-surface);
    font-size: var(--md3-font-body-large);
    cursor: pointer;
    transition: background-color var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    border-radius: var(--md3-shape-corner-small);
    text-decoration: none;
}
.md3-list__item:hover {
    background-color: var(--md3-surface-container);
}

.md3-list__icon {
    font-size: var(--md3-icon-size-medium);
    color: var(--md3-on-surface-variant);
    flex-shrink: 0;
}

.md3-list__text {
    flex: 1;
    min-width: 0;
}

.md3-list__primary {
    font-size: var(--md3-font-body-large);
    color: var(--md3-on-surface);
    display: block;
}

.md3-list__secondary {
    font-size: var(--md3-font-body-small);
    color: var(--md3-on-surface-variant);
    display: block;
    margin-top: 2px;
}

/* ============================================================
   MD3 TABS
   ============================================================ */
.md3-tabs {
    display: flex;
    border-bottom: 1px solid var(--md3-outline-variant);
    overflow-x: auto;
    scrollbar-width: none;
}
.md3-tabs::-webkit-scrollbar {
    display: none;
}

.md3-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--md3-space-2);
    height: var(--md3-touch-target-min);
    padding: 0 var(--md3-space-4);
    border: none;
    background: transparent;
    color: var(--md3-on-surface-variant);
    font-family: var(--md3-font-sans);
    font-size: var(--md3-font-label-large);
    font-weight: var(--md3-weight-medium);
    cursor: pointer;
    position: relative;
    white-space: nowrap;
    transition: color var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    -webkit-tap-highlight-color: transparent;
}
.md3-tab:hover {
    color: var(--md3-on-surface);
}
.md3-tab--active {
    color: var(--md3-primary);
}
.md3-tab--active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--md3-primary);
    border-radius: 3px 3px 0 0;
}
.md3-tab:focus-visible {
    outline: 3px solid var(--md3-primary);
    outline-offset: -3px;
}

/* ============================================================
   MD3 SNACKBAR
   ============================================================ */
.md3-snackbar {
    position: fixed;
    bottom: var(--md3-space-4);
    inset-inline-start: var(--md3-space-4);
    z-index: 5000;
    display: flex;
    align-items: center;
    gap: var(--md3-space-3);
    min-width: 344px;
    max-width: 672px;
    padding: var(--md3-space-3) var(--md3-space-4);
    background-color: var(--md3-inverse-surface);
    color: var(--md3-inverse-on-surface);
    border-radius: var(--md3-shape-corner-extra-small);
    box-shadow: var(--md3-elevation-3);
    font-size: var(--md3-font-body-medium);
    transform: translateY(100%);
    opacity: 0;
    transition: all var(--md3-motion-duration-medium2) var(--md3-motion-easing-emphasized);
}
.md3-snackbar--open {
    transform: translateY(0);
    opacity: 1;
}

.md3-snackbar__action {
    color: var(--md3-inverse-primary);
    font-weight: var(--md3-weight-medium);
    font-size: var(--md3-font-label-large);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-inline-start: auto;
}

/* ============================================================
   MD3 AVATAR
   ============================================================ */
.md3-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--md3-primary-container);
    color: var(--md3-on-primary-container);
    font-size: var(--md3-font-label-large);
    font-weight: var(--md3-weight-medium);
    overflow: hidden;
    flex-shrink: 0;
}
.md3-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.md3-avatar--small { width: 32px; height: 32px; font-size: var(--md3-font-label-medium); }
.md3-avatar--large { width: 56px; height: 56px; font-size: var(--md3-font-title-medium); }
.md3-avatar--xl { width: 96px; height: 96px; font-size: var(--md3-font-headline-small); }

/* ============================================================
   MD3 TOOLTIP
   ============================================================ */
.md3-tooltip {
    position: fixed;
    z-index: 6000;
    padding: var(--md3-space-1) var(--md3-space-2);
    background-color: var(--md3-inverse-surface);
    color: var(--md3-inverse-on-surface);
    font-size: var(--md3-font-body-small);
    border-radius: var(--md3-shape-corner-extra-small);
    box-shadow: var(--md3-elevation-2);
    pointer-events: none;
    opacity: 0;
    transform: scale(0.8);
    transition: all var(--md3-motion-duration-short3) var(--md3-motion-easing-standard);
    max-width: 200px;
    text-align: center;
}
.md3-tooltip--visible {
    opacity: 1;
    transform: scale(1);
}

/* ============================================================
   MD3 SEARCH BAR
   ============================================================ */
.md3-search-bar {
    display: flex;
    align-items: center;
    gap: var(--md3-space-3);
    height: 56px;
    padding: 0 var(--md3-space-4);
    background-color: var(--md3-surface-container-high);
    border-radius: var(--md3-shape-corner-full);
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
}
.md3-search-bar:focus-within {
    background-color: var(--md3-surface-container-highest);
    box-shadow: var(--md3-elevation-1);
}

.md3-search-bar__icon {
    color: var(--md3-on-surface-variant);
    font-size: var(--md3-icon-size-medium);
    flex-shrink: 0;
}

.md3-search-bar__input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--md3-on-surface);
    font-family: var(--md3-font-sans);
    font-size: var(--md3-font-body-large);
    outline: none;
    min-width: 0;
}
.md3-search-bar__input::placeholder {
    color: var(--md3-on-surface-variant);
}

/* ============================================================
   MD3 PAGINATION
   ============================================================ */
.md3-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--md3-space-1);
    padding: var(--md3-space-3) 0;
}

.md3-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--md3-touch-target-min);
    height: var(--md3-touch-target-min);
    border: none;
    border-radius: var(--md3-shape-corner-full);
    background: transparent;
    color: var(--md3-on-surface-variant);
    font-size: var(--md3-font-label-large);
    font-weight: var(--md3-weight-medium);
    cursor: pointer;
    transition: all var(--md3-motion-duration-short4) var(--md3-motion-easing-standard);
    -webkit-tap-highlight-color: transparent;
}
.md3-pagination__btn:hover {
    background-color: var(--md3-surface-container);
}
.md3-pagination__btn--active {
    background-color: var(--md3-primary);
    color: var(--md3-on-primary);
}
.md3-pagination__btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

/* ============================================================
   MD3 EMPTY STATE
   ============================================================ */
.md3-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--md3-space-12) var(--md3-space-6);
    text-align: center;
}

.md3-empty-state__icon {
    font-size: 96px;
    color: var(--md3-outline);
    margin-bottom: var(--md3-space-4);
    opacity: 0.6;
}

.md3-empty-state__title {
    font-size: var(--md3-font-title-large);
    font-weight: var(--md3-weight-regular);
    color: var(--md3-on-surface);
    margin: 0 0 var(--md3-space-2);
}

.md3-empty-state__description {
    font-size: var(--md3-font-body-medium);
    color: var(--md3-on-surface-variant);
    margin: 0 0 var(--md3-space-6);
    max-width: 400px;
}

/* ============================================================
   MD3 SECTION HEADER
   ============================================================ */
.md3-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--md3-space-4);
    gap: var(--md3-space-4);
}

.md3-section-header__title {
    font-size: var(--md3-font-headline-small);
    font-weight: var(--md3-weight-regular);
    color: var(--md3-on-surface);
    margin: 0;
}

.md3-section-header__actions {
    display: flex;
    align-items: center;
    gap: var(--md3-space-2);
}

/* ============================================================
   MD3 GRID SYSTEM
   ============================================================ */
.md3-grid {
    display: grid;
    gap: var(--md3-grid-gutter);
}

.md3-grid--cols-1 { grid-template-columns: repeat(1, 1fr); }
.md3-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.md3-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.md3-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.md3-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }
.md3-grid--cols-12 { grid-template-columns: repeat(12, 1fr); }

@media (max-width: 599px) {
    .md3-grid--cols-2,
    .md3-grid--cols-3,
    .md3-grid--cols-4,
    .md3-grid--cols-6,
    .md3-grid--cols-12 {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (min-width: 600px) and (max-width: 839px) {
    .md3-grid--cols-3,
    .md3-grid--cols-4,
    .md3-grid--cols-6,
    .md3-grid--cols-12 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 840px) and (max-width: 1239px) {
    .md3-grid--cols-4,
    .md3-grid--cols-6,
    .md3-grid--cols-12 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1240px) and (max-width: 1439px) {
    .md3-grid--cols-6,
    .md3-grid--cols-12 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1440px) {
    .md3-grid--cols-6 { grid-template-columns: repeat(6, 1fr); }
    .md3-grid--cols-12 { grid-template-columns: repeat(12, 1fr); }
}

/* ============================================================
   MD3 RESPONSIVE UTILITIES
   ============================================================ */
.md3-hidden { display: none !important; }
.md3-block { display: block !important; }
.md3-flex { display: flex !important; }
.md3-inline-flex { display: inline-flex !important; }
.md3-grid { display: grid !important; }

@media (max-width: 599px) {
    .md3-hidden--compact { display: none !important; }
    .md3-block--compact { display: block !important; }
}

@media (min-width: 600px) and (max-width: 839px) {
    .md3-hidden--medium { display: none !important; }
    .md3-block--medium { display: block !important; }
}

@media (min-width: 840px) and (max-width: 1239px) {
    .md3-hidden--expanded { display: none !important; }
    .md3-block--expanded { display: block !important; }
}

@media (min-width: 1240px) {
    .md3-hidden--large { display: none !important; }
    .md3-block--large { display: block !important; }
}

@media (min-width: 1440px) {
    .md3-hidden--extra-large { display: none !important; }
    .md3-block--extra-large { display: block !important; }
}