/* ==========================================================================
   BUTTONS COMPONENT
   ========================================================================== */

.md-btn, .btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 24px; 
    border-radius: var(--md-sys-shape-corner-full);
    font: var(--md-sys-typescale-label-large); border: none; cursor: pointer;
    transition: all var(--md-sys-motion-standard); user-select: none; min-width: 64px; z-index: 1;
    overflow: hidden; white-space: nowrap;
}

/* --- STATES --- */
.md-btn::before, .btn::before {
    content: ""; position: absolute; inset: 0; background-color: currentcolor; opacity: 0;
    transform: scale(0.6); transition: opacity 200ms, transform 200ms; pointer-events: none; border-radius: inherit; z-index: -1;
}
.md-btn:hover::before, .btn:hover::before { opacity: var(--md-sys-state-hover); transform: scale(1); }
.md-btn:active::before, .btn:active::before { opacity: var(--md-sys-state-pressed); transform: scale(1); }

/* --- VARIANTS --- */
.md-btn-filled, .btn-filled { 
    background: var(--md-sys-color-primary); 
    color: var(--md-sys-color-on-primary);
}
.md-btn-filled .btn-text, .btn-filled .btn-text { color: inherit; } 
.md-btn-tonal, .btn-tonal { background: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container); }
.md-btn-outlined, .btn-outlined { background: transparent; color: var(--md-sys-color-primary); border: 1px solid var(--md-sys-color-outline); }
.md-btn-text, .btn-text { background: transparent; color: var(--md-sys-color-primary); padding: 0 12px; }
.md-btn-elevated, .btn-elevated {
    background: var(--md-sys-color-surface-container-low); color: var(--md-sys-color-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.icon-btn {
    width: 40px; min-width: 40px; height: 40px; padding: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
}
.icon-btn .material-symbols-rounded, .icon-btn .material-symbols-outlined {
    font-size: 24px;
}

/* --- ANIMATIONS --- */
.btn-anim-scale:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.btn-anim-glow:hover { box-shadow: 0 0 15px var(--md-sys-color-primary); border-color: transparent; }

/* --- LOADING --- */
.circular-progress {
    width: 18px; height: 18px; border: 2px solid; border-color: currentcolor; border-bottom-color: transparent;
    border-radius: 50%; display: inline-block; animation: rotation 1s linear infinite;
}
@keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.dots-loader { display: flex; gap: 3px; }
.dots-loader span { width: 5px; height: 5px; background: currentcolor; border-radius: 50%; animation: bounce 1.4s infinite ease-in-out both; }
.dots-loader span:nth-child(1) { animation-delay: -0.32s; }
.dots-loader span:nth-child(2) { animation-delay: -0.16s; }
@keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }
.md-btn.is-loading .btn-text, .md-btn.is-loading .material-symbols-rounded { display: none; }
.md-btn.is-loading .circular-progress, .md-btn.is-loading .dots-loader { display: flex !important; }

/* --- ICON TOOLBAR --- */
.icon-toolbar {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px; background: var(--md-sys-color-surface-container-high);
    border-radius: 100px;
    transition: all 0.4s cubic-bezier(0.2, 0, 0, 1);
    overflow: hidden; max-width: 320px; 
}
.icon-toolbar.collapsed {
    max-width: 56px; 
    padding: 8px; cursor: pointer;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}
.icon-toolbar.collapsed .icon-btn {
    pointer-events: none; opacity: 0; width: 0; padding: 0; margin: 0;
}
.icon-toolbar.collapsed .icon-btn.trigger {
    pointer-events: auto; opacity: 1; width: 40px; color: inherit;
}
.icon-toolbar .icon-btn.trigger {
    color: var(--md-sys-color-primary); 
    background: var(--md-sys-color-primary-container);
}
.icon-toolbar.collapsed .icon-btn.trigger {
    background: transparent; 
}
.icon-toolbar .icon-btn {
    transition: 0.3s; opacity: 1; width: 40px;
    flex-shrink: 0; 
}
.icon-toolbar .icon-btn.active {
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}