/* ==========================================================================
   CARDS COMPONENT
   ========================================================================== */

.md-card, .card {
    background-color: var(--md-sys-color-surface-container);
    border-radius: var(--md-sys-shape-corner-medium);
    padding: 24px; position: relative;
    box-shadow: var(--md-sys-elevation-1);
    transition: 0.2s;
    margin-bottom: 16px;
    border: 1px solid transparent;
    width: 100%; max-width: 100%; 
    margin-inline: 0; 
}
.card-wide { max-width: 100% !important; }
.card-outlined { background: var(--md-sys-color-surface); border-color: var(--md-sys-color-outline-variant); box-shadow: none; }
.card-filled { background: var(--md-sys-color-surface-container-highest); box-shadow: none; }
.card-elevated { 
    background: var(--md-sys-color-surface-container-low); 
    box-shadow: var(--md-sys-elevation-1); 
}
.card-elevated:hover {
    box-shadow: var(--md-sys-elevation-2);
    /* Tonal overlay simulated by background change */
    background: var(--md-sys-color-surface-container-high);
}







/* --- EXPRESSIVE & SEMANTIC CARDS --- */
.expressive-card {
    border-radius: 28px;
    padding: 32px;
    transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);
}
.expressive-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--md-sys-elevation-3);
}

.card-semantic {
    border-left: 4px solid transparent;
}
.card-success { border-left-color: var(--md-sys-color-success); background: var(--md-sys-color-success-container); color: var(--md-sys-color-on-success-container); }
.card-warning { border-left-color: var(--md-sys-color-warning); background: var(--md-sys-color-warning-container); color: var(--md-sys-color-on-warning-container); }
.card-error { border-left-color: var(--md-sys-color-error); background: var(--md-sys-color-error-container); color: var(--md-sys-color-on-error-container); }

.card-entrance {
    animation: card-fade-in 0.6s cubic-bezier(0.2, 0, 0, 1) both;
}

@keyframes card-fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}



/* --- COLORFUL CARDS --- */
.card-colorful .card-media {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}
.card-colorful:nth-child(2n) .card-media {
    background: var(--md-sys-color-tertiary-container);
    color: var(--md-sys-color-on-tertiary-container);
}
.card-colorful:nth-child(3n) .card-media {
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}
.card-colorful, .dialog {
    border-radius: 28px;
}

/* --- LISTS --- */
.list { border-radius: var(--md-sys-shape-corner-large); background: var(--md-sys-color-surface-container-low); overflow: hidden; }
.list-item {
    padding: 12px 16px; display: flex; align-items: center; gap: 16px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant); cursor: pointer;
    transition: background 0.2s;
    position: relative; overflow: hidden;
}
.list-item::before {
    content: ""; position: absolute; inset: 0; background-color: currentcolor; opacity: 0;
    transition: opacity 200ms; pointer-events: none;
}
.list-item:hover::before { opacity: var(--md-sys-state-hover); }
.list-item:active::before { opacity: var(--md-sys-state-pressed); }
.list-item:last-child { border-bottom: none; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container); display: flex; align-items: center; justify-content: center; font-weight: 500; }