/* ========================================
   TurnFile 360 - M3 Component Library
   Professional Button, Card & Form Styles
   ======================================== */

/* ========================================
   BUTTONS - M3 FILLED, OUTLINED, TONAL
   ======================================== */

.m3-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--m3-space-2);

    font-family: var(--m3-font-family);
    font-size: var(--m3-label-large);
    font-weight: var(--m3-weight-medium);
    letter-spacing: var(--m3-tracking-wide);
    text-decoration: none;
    white-space: nowrap;

    height: var(--m3-btn-height-md);
    padding: 0 var(--m3-btn-padding-x);
    border: none;
    border-radius: var(--m3-btn-radius);

    cursor: pointer;
    user-select: none;
    position: relative;
    overflow: hidden;

    transition:
        background-color var(--m3-duration-fast) var(--m3-ease-standard),
        box-shadow var(--m3-duration-fast) var(--m3-ease-standard),
        transform var(--m3-duration-instant) var(--m3-ease-standard);
}

.m3-btn:focus-visible {
    outline: 2px solid var(--m3-primary);
    outline-offset: 2px;
}

.m3-btn:active {
    transform: scale(0.98);
}

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

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

.m3-btn--filled:hover {
    background: var(--m3-primary-30);
    box-shadow: var(--m3-elevation-2);
}

/* Filled Tonal Button */
.m3-btn--tonal {
    background: var(--m3-secondary-container);
    color: var(--m3-on-secondary-container);
}

.m3-btn--tonal:hover {
    background: var(--m3-secondary-80);
}

/* Outlined Button */
.m3-btn--outlined {
    background: transparent;
    color: var(--m3-primary);
    border: 1px solid var(--m3-outline);
}

.m3-btn--outlined:hover {
    background: var(--m3-primary-95);
    border-color: var(--m3-primary);
}

/* Text Button */
.m3-btn--text {
    background: transparent;
    color: var(--m3-primary);
    padding: 0 var(--m3-space-3);
}

.m3-btn--text:hover {
    background: var(--m3-primary-95);
}

/* Elevated Button */
.m3-btn--elevated {
    background: var(--m3-surface-container-low);
    color: var(--m3-primary);
    box-shadow: var(--m3-elevation-1);
}

.m3-btn--elevated:hover {
    box-shadow: var(--m3-elevation-2);
    background: var(--m3-surface-container);
}

/* Button Sizes */
.m3-btn--sm {
    height: var(--m3-btn-height-sm);
    padding: 0 var(--m3-space-4);
    font-size: var(--m3-label-medium);
}

.m3-btn--lg {
    height: var(--m3-btn-height-lg);
    padding: 0 var(--m3-space-8);
    font-size: var(--m3-body-large);
}

/* Button with icon */
.m3-btn__icon {
    font-size: 1.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========================================
   ICON BUTTONS
   ======================================== */

.m3-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    padding: 0;

    background: transparent;
    border: none;
    border-radius: 50%;

    color: var(--m3-on-surface-variant);
    font-size: 1.25rem;

    cursor: pointer;
    transition:
        background-color var(--m3-duration-fast) var(--m3-ease-standard),
        color var(--m3-duration-fast) var(--m3-ease-standard);
}

.m3-icon-btn:hover {
    background: var(--m3-surface-container-high);
    color: var(--m3-on-surface);
}

.m3-icon-btn:focus-visible {
    outline: 2px solid var(--m3-primary);
    outline-offset: 2px;
}

.m3-icon-btn--filled {
    background: var(--m3-primary);
    color: var(--m3-on-primary);
}

.m3-icon-btn--filled:hover {
    background: var(--m3-primary-30);
}

/* ========================================
   FLOATING ACTION BUTTON (FAB)
   ======================================== */

.m3-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 56px;
    height: 56px;
    padding: 0;

    background: var(--m3-primary-container);
    color: var(--m3-on-primary-container);

    border: none;
    border-radius: var(--m3-shape-lg);
    box-shadow: var(--m3-elevation-3);

    font-size: 1.5rem;
    cursor: pointer;

    transition:
        box-shadow var(--m3-duration-normal) var(--m3-ease-standard),
        transform var(--m3-duration-fast) var(--m3-ease-spring-soft);
}

.m3-fab:hover {
    box-shadow: var(--m3-elevation-4);
    transform: scale(1.04);
}

.m3-fab:active {
    transform: scale(0.96);
}

.m3-fab--extended {
    width: auto;
    padding: 0 var(--m3-space-6);
    gap: var(--m3-space-3);
    font-size: var(--m3-label-large);
    font-weight: var(--m3-weight-medium);
}

.m3-fab--sm {
    width: 40px;
    height: 40px;
    border-radius: var(--m3-shape-md);
    font-size: 1.25rem;
}

/* ========================================
   CARDS - M3 ELEVATED, FILLED, OUTLINED
   ======================================== */

.m3-card {
    background: var(--m3-surface);
    border-radius: var(--m3-card-radius);
    padding: var(--m3-card-padding);

    transition:
        box-shadow var(--m3-duration-normal) var(--m3-ease-standard),
        transform var(--m3-duration-normal) var(--m3-ease-spring-soft);
}

/* Elevated Card */
.m3-card--elevated {
    background: var(--m3-surface-container-low);
    box-shadow: var(--m3-elevation-1);
}

.m3-card--elevated:hover {
    box-shadow: var(--m3-elevation-2);
}

/* Filled Card */
.m3-card--filled {
    background: var(--m3-surface-container-highest);
    box-shadow: none;
}

/* Outlined Card */
.m3-card--outlined {
    background: var(--m3-surface);
    border: 1px solid var(--m3-outline-variant);
    box-shadow: none;
}

.m3-card--outlined:hover {
    border-color: var(--m3-outline);
}

/* Interactive Card */
.m3-card--interactive {
    cursor: pointer;
}

.m3-card--interactive:hover {
    transform: translateY(-4px);
}

.m3-card--interactive:active {
    transform: translateY(-2px);
}

/* Card Header */
.m3-card__header {
    display: flex;
    align-items: center;
    gap: var(--m3-space-4);
    margin-bottom: var(--m3-space-4);
}

.m3-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--m3-primary-container);
    color: var(--m3-on-primary-container);
    border-radius: var(--m3-shape-md);
    font-size: 1.5rem;
}

.m3-card__title {
    font-size: var(--m3-title-large);
    font-weight: var(--m3-weight-semibold);
    color: var(--m3-on-surface);
    margin: 0;
}

.m3-card__subtitle {
    font-size: var(--m3-body-medium);
    color: var(--m3-on-surface-variant);
    margin: 0;
}

.m3-card__content {
    color: var(--m3-on-surface-variant);
    font-size: var(--m3-body-medium);
    line-height: var(--m3-leading-relaxed);
}

.m3-card__actions {
    display: flex;
    gap: var(--m3-space-2);
    margin-top: var(--m3-space-4);
}

/* ========================================
   INPUTS & FORM CONTROLS
   ======================================== */

/* Input Container */
.m3-input-container {
    position: relative;
    width: 100%;
}

/* Text Field */
.m3-input {
    width: 100%;
    height: var(--m3-input-height);
    padding: 0 var(--m3-space-4);

    font-family: var(--m3-font-family);
    font-size: var(--m3-body-large);
    color: var(--m3-on-surface);

    background: var(--m3-surface-container-highest);
    border: none;
    border-bottom: var(--m3-input-border-width) solid var(--m3-on-surface-variant);
    border-radius: var(--m3-input-radius) var(--m3-input-radius) 0 0;

    transition:
        border-color var(--m3-duration-fast) var(--m3-ease-standard),
        background-color var(--m3-duration-fast) var(--m3-ease-standard);
}

.m3-input:hover {
    background: var(--m3-surface-container-high);
}

.m3-input:focus {
    outline: none;
    border-bottom-width: 2px;
    border-bottom-color: var(--m3-primary);
}

.m3-input::placeholder {
    color: var(--m3-on-surface-variant);
    opacity: 0.6;
}

/* Outlined Input */
.m3-input--outlined {
    background: transparent;
    border: var(--m3-input-border-width) solid var(--m3-outline);
    border-radius: var(--m3-input-radius);
}

.m3-input--outlined:focus {
    border-width: 2px;
    border-color: var(--m3-primary);
}

/* Input Label */
.m3-label {
    display: block;
    font-size: var(--m3-body-small);
    font-weight: var(--m3-weight-medium);
    color: var(--m3-on-surface-variant);
    margin-bottom: var(--m3-space-2);
}

/* Helper Text */
.m3-helper {
    font-size: var(--m3-body-small);
    color: var(--m3-on-surface-variant);
    margin-top: var(--m3-space-1);
}

.m3-helper--error {
    color: var(--m3-error-40);
}

/* ========================================
   CHIPS
   ======================================== */

.m3-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--m3-space-2);

    height: 32px;
    padding: 0 var(--m3-space-4);

    font-size: var(--m3-label-large);
    font-weight: var(--m3-weight-medium);
    color: var(--m3-on-surface-variant);

    background: transparent;
    border: 1px solid var(--m3-outline);
    border-radius: var(--m3-shape-sm);

    cursor: pointer;
    transition:
        background-color var(--m3-duration-fast) var(--m3-ease-standard),
        border-color var(--m3-duration-fast) var(--m3-ease-standard);
}

.m3-chip:hover {
    background: var(--m3-surface-container-high);
}

.m3-chip--selected {
    background: var(--m3-secondary-container);
    border-color: var(--m3-secondary-container);
    color: var(--m3-on-secondary-container);
}

/* ========================================
   BADGES
   ======================================== */

.m3-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 20px;
    height: 20px;
    padding: 0 var(--m3-space-2);

    font-size: var(--m3-label-small);
    font-weight: var(--m3-weight-medium);

    background: var(--m3-error-40);
    color: white;
    border-radius: var(--m3-shape-full);
}

.m3-badge--sm {
    min-width: 8px;
    height: 8px;
    padding: 0;
}

/* ========================================
   DIVIDERS
   ======================================== */

.m3-divider {
    height: 1px;
    background: var(--m3-outline-variant);
    border: none;
    margin: var(--m3-space-4) 0;
}

.m3-divider--inset {
    margin-left: var(--m3-space-4);
    margin-right: var(--m3-space-4);
}

/* ========================================
   UPLOAD AREA
   ======================================== */

.m3-upload-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--m3-space-4);

    padding: var(--m3-space-12) var(--m3-space-8);

    background: var(--m3-surface-container-low);
    border: 2px dashed var(--m3-outline-variant);
    border-radius: var(--m3-shape-xl);

    cursor: pointer;
    transition:
        border-color var(--m3-duration-normal) var(--m3-ease-standard),
        background-color var(--m3-duration-normal) var(--m3-ease-standard),
        transform var(--m3-duration-fast) var(--m3-ease-spring-soft);
}

.m3-upload-area:hover {
    border-color: var(--m3-primary-60);
    background: var(--m3-primary-95);
}

.m3-upload-area--drag-over {
    border-color: var(--m3-primary);
    background: var(--m3-primary-90);
    transform: scale(1.01);
    border-style: solid;
}

.m3-upload-area__icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--m3-primary-90);
    color: var(--m3-primary-40);
    border-radius: var(--m3-shape-xl);
    font-size: 2.5rem;
}

.m3-upload-area__title {
    font-size: var(--m3-title-large);
    font-weight: var(--m3-weight-semibold);
    color: var(--m3-on-surface);
    margin: 0;
}

.m3-upload-area__desc {
    font-size: var(--m3-body-medium);
    color: var(--m3-on-surface-variant);
    margin: 0;
    text-align: center;
}

.m3-upload-area__hint {
    font-size: var(--m3-body-small);
    color: var(--m3-on-surface-variant);
    opacity: 0.7;
}

/* ========================================
   PROGRESS INDICATORS
   ======================================== */

.m3-progress {
    width: 100%;
    height: 4px;
    background: var(--m3-surface-container);
    border-radius: var(--m3-shape-full);
    overflow: hidden;
}

.m3-progress__bar {
    height: 100%;
    background: var(--m3-primary);
    border-radius: var(--m3-shape-full);
    transition: width var(--m3-duration-normal) var(--m3-ease-emphasized-decelerate);
}

/* ========================================
   ALERTS / SNACKBARS
   ======================================== */

.m3-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--m3-space-3);

    padding: var(--m3-space-4);

    background: var(--m3-inverse-surface);
    color: var(--m3-inverse-on-surface);
    border-radius: var(--m3-shape-sm);
    box-shadow: var(--m3-elevation-3);
}

.m3-alert--success {
    background: var(--m3-success-90);
    color: var(--m3-success-10);
}

.m3-alert--error {
    background: var(--m3-error-90);
    color: var(--m3-error-10);
}

.m3-alert--warning {
    background: var(--m3-warning-90);
    color: var(--m3-warning-10);
}

.m3-alert--info {
    background: var(--m3-info-90);
    color: var(--m3-info-10);
}

/* ========================================
   LISTS
   ======================================== */

.m3-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.m3-list-item {
    display: flex;
    align-items: center;
    gap: var(--m3-space-4);

    padding: var(--m3-space-3) var(--m3-space-4);

    border-radius: var(--m3-shape-lg);
    transition: background-color var(--m3-duration-fast) var(--m3-ease-standard);
}

.m3-list-item:hover {
    background: var(--m3-surface-container-high);
}

.m3-list-item__icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--m3-primary-container);
    color: var(--m3-on-primary-container);
    border-radius: var(--m3-shape-full);
    font-size: 1.25rem;
}

.m3-list-item__content {
    flex: 1;
}

.m3-list-item__title {
    font-size: var(--m3-body-large);
    font-weight: var(--m3-weight-medium);
    color: var(--m3-on-surface);
}

.m3-list-item__subtitle {
    font-size: var(--m3-body-small);
    color: var(--m3-on-surface-variant);
}

/* ========================================
   CONTAINER
   ======================================== */

.m3-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--m3-space-4);
}

@media (min-width: 768px) {
    .m3-container {
        padding: 0 var(--m3-space-6);
    }
}

@media (min-width: 1024px) {
    .m3-container {
        padding: 0 var(--m3-space-8);
    }
}