/* Mygtukai.

   Variantai: be varianto (tas pats, kas .btn-secondary) — neutralus su rėmeliu; .btn-primary —
   vienas pagrindinis veiksmas ekrane; .btn-ghost — juostų ir antraeiliai veiksmai; .btn-danger —
   trynimas ir kiti negrįžtami veiksmai. Dydžiai: numatytasis ir .btn-sm. .btn-icon — kvadratas
   be teksto, visada su title ir aria-label. Klasių tvarka HTML'e: btn, variantas, dydis, btn-icon.

   Juostose (.toolbar, .tab-bar, .efix-filter-bar) ir modalo turinyje visi mygtukai rodomi kaip
   ghost, modalo poraštė grąžina pilnus variantus — tos taisyklės gyvena `standards` sluoksnyje
   failo gale, kad modulių CSS jų nenugalėtų.

   Įtraukiamas per @import į design-system.css; build'as suklijuoja į design-system.min.css. */
@layer components {

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn:hover { background: var(--bg-card-hover); border-color: var(--border-strong); }
.btn:active { background: var(--bg-tertiary); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled,
.btn[disabled] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* .btn-secondary atrodo kaip numatytasis — klasė palikta, kad HTML'e variantas būtų įvardytas. */

.btn-primary { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--white); }
.btn-primary:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); color: var(--white); }
.btn-primary:active { background: var(--btn-primary-bg-active); border-color: var(--btn-primary-bg-active); color: var(--white); }

.btn-ghost { background: transparent; border-color: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-hover); border-color: transparent; color: var(--text-primary); }
.btn-ghost:active { background: var(--bg-secondary); }

.btn-danger { background: var(--btn-danger-bg); border-color: var(--btn-danger-bg); color: var(--white); }
.btn-danger:hover { background: var(--btn-danger-bg-hover); border-color: var(--btn-danger-bg-hover); color: var(--white); }
.btn-danger:active { background: var(--btn-danger-bg-active); border-color: var(--btn-danger-bg-active); color: var(--white); }

/* Dydžiai */
.btn-sm { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }
.btn-sm .efix-icon { width: 16px; height: 16px; }

/* Tik ikona: 40×40, mažas 32×32 */
.btn-icon {
    width: var(--space-10);
    height: var(--space-10);
    min-width: var(--space-10);
    padding: 0;
    justify-content: center;
    flex-shrink: 0;
}
.btn-icon.btn-sm {
    width: var(--space-8);
    height: var(--space-8);
    min-width: var(--space-8);
}

/* Krovimas: btn.classList.add('loading') kol laukiama atsakymo */
.btn.loading { pointer-events: none; opacity: 0.75; }
.btn.loading::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
    border-top-color: currentColor;
    border-radius: var(--radius-full);
    animation: spin 0.6s linear infinite;
    flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
    .btn.loading::before { --reduced-motion-duration: var(--duration-spinner-calm); --reduced-motion-count: infinite; }
}

}

@layer standards {

/* Juostų mygtukai — vienas rinkinys toolbar'ui, filtrų juostai ir tab-bar'ui.
   Etalonas — /repairs toolbar: tamsus tekstas, be rėmelio ir fono; aktyvus
   pažymimas navigacijos spalva. */
.efix-filter-bar .btn,
.toolbar .btn,
.toolbar-flat .btn,
.tab-bar .btn {
    background: transparent;
    border-color: transparent;
    color: var(--text-primary);
    box-shadow: none;
}
.efix-filter-bar .btn:hover,
.efix-filter-bar .btn:active,
.toolbar .btn:hover,
.toolbar-flat .btn:hover,
.toolbar .btn:active,
.toolbar-flat .btn:active,
.tab-bar .btn:hover,
.tab-bar .btn:active {
    background: color-mix(in srgb, var(--color-hint-primary) 10%, transparent);
    color: var(--color-hint-primary);
    border-color: transparent;
}
.efix-filter-bar .btn.active,
.toolbar .btn.active,
.toolbar-flat .btn.active,
.tab-bar .btn.active {
    background: transparent;
    color: var(--color-nav-active);
    border-color: transparent;
    font-weight: 600;
}
.efix-filter-bar .btn-danger,
.toolbar .btn-danger { color: var(--danger); }
.efix-filter-bar .btn-danger:hover,
.efix-filter-bar .btn-danger:active,
.toolbar .btn-danger:hover,
.toolbar .btn-danger:active {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    color: var(--danger);
}

/* Modalo turinyje mygtukai ghost, poraštėje — pilni variantai */
.modal .btn {
    background: transparent;
    border-color: transparent;
    color: var(--text-primary);
    box-shadow: none;
}
.modal .btn:hover,
.modal .btn:active {
    background: var(--bg-hover);
    border-color: transparent;
    color: var(--text-primary);
}
.modal .btn-danger { color: var(--danger); }
.modal .btn-danger:hover,
.modal .btn-danger:active {
    background: color-mix(in srgb, var(--danger) 8%, transparent);
    color: var(--danger);
}
.modal-footer .btn-primary {
    background: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--white);
}
.modal-footer .btn-primary:hover,
.modal-footer .btn-primary:active {
    background: var(--btn-primary-bg-hover);
    border-color: var(--btn-primary-bg-hover);
    color: var(--white);
}
.modal-footer .btn-ghost,
.modal-footer .btn-secondary {
    background: var(--bg-card);
    border-color: var(--border-strong);
    color: var(--text-secondary);
}
.modal-footer .btn-ghost:hover,
.modal-footer .btn-secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border);
    color: var(--text-primary);
}
.modal-footer .btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: var(--white);
}
.modal-footer .btn-danger:hover,
.modal-footer .btn-danger:active {
    background: color-mix(in srgb, var(--danger) 85%, black);
    border-color: color-mix(in srgb, var(--danger) 85%, black);
    color: var(--white);
}

}