/* =========================================================
WONDER APP
VENDOR APPLICATION

File: vendor_app/assets/css/buttons.css
Purpose: Global Button System
========================================================= */

/* =========================================================

1. BUTTON VARIABLES
   ========================================================= */

:root {
--btn-primary: #2563eb;
--btn-primary-hover: #1d4ed8;
--btn-primary-active: #1e40af;

--btn-secondary: #64748b;
--btn-secondary-hover: #475569;

--btn-success: #16a34a;
--btn-success-hover: #15803d;

--btn-danger: #dc2626;
--btn-danger-hover: #b91c1c;

--btn-warning: #f59e0b;
--btn-warning-hover: #d97706;

--btn-info: #0891b2;
--btn-info-hover: #0e7490;

--btn-dark: #0f172a;
--btn-dark-hover: #1e293b;

--btn-light: #f8fafc;
--btn-light-hover: #f1f5f9;

--btn-white: #ffffff;

--btn-border: #e2e8f0;
--btn-text: #1e293b;
--btn-muted: #64748b;

--btn-radius: 8px;
--btn-radius-sm: 6px;
--btn-radius-lg: 10px;
--btn-radius-pill: 999px;

--btn-transition: 0.2s ease;

}

/* =========================================================
2. BASE BUTTON
========================================================= */

.btn {
position: relative;

display: inline-flex;
align-items: center;
justify-content: center;

gap: 8px;

min-height: 40px;
padding: 9px 16px;

border: 1px solid transparent;
border-radius: var(--btn-radius);

font-family: inherit;
font-size: 14px;
font-weight: 600;
line-height: 1.4;

text-align: center;
text-decoration: none;
white-space: nowrap;

cursor: pointer;
user-select: none;

transition:
    background-color var(--btn-transition),
    border-color var(--btn-transition),
    color var(--btn-transition),
    box-shadow var(--btn-transition),
    transform 0.1s ease,
    opacity var(--btn-transition);

}

.btn:hover {
text-decoration: none;
}

.btn:active {
transform: translateY(1px);
}

.btn:focus {
outline: none;
}

.btn:focus-visible {
outline: 3px solid rgba(37, 99, 235, 0.20);
outline-offset: 2px;
}

.btn:disabled,
.btn.disabled,
.btn[disabled],
.btn[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
pointer-events: none;
}

/* =========================================================
3. PRIMARY BUTTON
========================================================= */

.btn-primary {
background: var(--btn-primary);
color: #ffffff;
border-color: var(--btn-primary);

box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);

}

.btn-primary:hover {
background: var(--btn-primary-hover);
border-color: var(--btn-primary-hover);
color: #ffffff;
}

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

/* =========================================================
4. SECONDARY BUTTON
========================================================= */

.btn-secondary {
background: var(--btn-secondary);
color: #ffffff;
border-color: var(--btn-secondary);
}

.btn-secondary:hover {
background: var(--btn-secondary-hover);
border-color: var(--btn-secondary-hover);
color: #ffffff;
}

/* =========================================================
5. SUCCESS BUTTON
========================================================= */

.btn-success {
background: var(--btn-success);
color: #ffffff;
border-color: var(--btn-success);
}

.btn-success:hover {
background: var(--btn-success-hover);
border-color: var(--btn-success-hover);
color: #ffffff;
}

/* =========================================================
6. DANGER BUTTON
========================================================= */

.btn-danger {
background: var(--btn-danger);
color: #ffffff;
border-color: var(--btn-danger);
}

.btn-danger:hover {
background: var(--btn-danger-hover);
border-color: var(--btn-danger-hover);
color: #ffffff;
}

/* =========================================================
7. WARNING BUTTON
========================================================= */

.btn-warning {
background: var(--btn-warning);
color: #111827;
border-color: var(--btn-warning);
}

.btn-warning:hover {
background: var(--btn-warning-hover);
border-color: var(--btn-warning-hover);
color: #ffffff;
}

/* =========================================================
8. INFO BUTTON
========================================================= */

.btn-info {
background: var(--btn-info);
color: #ffffff;
border-color: var(--btn-info);
}

.btn-info:hover {
background: var(--btn-info-hover);
border-color: var(--btn-info-hover);
color: #ffffff;
}

/* =========================================================
9. DARK BUTTON
========================================================= */

.btn-dark {
background: var(--btn-dark);
color: #ffffff;
border-color: var(--btn-dark);
}

.btn-dark:hover {
background: var(--btn-dark-hover);
border-color: var(--btn-dark-hover);
color: #ffffff;
}

/* =========================================================
10. LIGHT BUTTON
========================================================= */

.btn-light {
background: var(--btn-light);
color: var(--btn-text);
border-color: var(--btn-border);
}

.btn-light:hover {
background: var(--btn-light-hover);
color: #0f172a;
border-color: #cbd5e1;
}

/* =========================================================
11. WHITE BUTTON
========================================================= */

.btn-white {
background: #ffffff;
color: var(--btn-text);
border-color: var(--btn-border);
}

.btn-white:hover {
background: #f8fafc;
border-color: #cbd5e1;
}

/* =========================================================
12. OUTLINE BUTTON
========================================================= */

.btn-outline {
background: transparent;
color: var(--btn-primary);
border-color: var(--btn-primary);
}

.btn-outline:hover {
background: var(--btn-primary);
color: #ffffff;
}

/* =========================================================
13. OUTLINE VARIANTS
========================================================= */

.btn-outline-primary {
background: transparent;
color: var(--btn-primary);
border-color: var(--btn-primary);
}

.btn-outline-primary:hover {
background: var(--btn-primary);
color: #ffffff;
}

.btn-outline-secondary {
background: transparent;
color: var(--btn-secondary-hover);
border-color: #cbd5e1;
}

.btn-outline-secondary:hover {
background: var(--btn-secondary);
border-color: var(--btn-secondary);
color: #ffffff;
}

.btn-outline-success {
background: transparent;
color: var(--btn-success-hover);
border-color: var(--btn-success);
}

.btn-outline-success:hover {
background: var(--btn-success);
color: #ffffff;
}

.btn-outline-danger {
background: transparent;
color: var(--btn-danger);
border-color: var(--btn-danger);
}

.btn-outline-danger:hover {
background: var(--btn-danger);
color: #ffffff;
}

.btn-outline-warning {
background: transparent;
color: #b45309;
border-color: var(--btn-warning);
}

.btn-outline-warning:hover {
background: var(--btn-warning);
color: #111827;
}

.btn-outline-info {
background: transparent;
color: var(--btn-info-hover);
border-color: var(--btn-info);
}

.btn-outline-info:hover {
background: var(--btn-info);
color: #ffffff;
}

.btn-outline-dark {
background: transparent;
color: var(--btn-dark);
border-color: var(--btn-dark);
}

.btn-outline-dark:hover {
background: var(--btn-dark);
color: #ffffff;
}

/* =========================================================
14. GHOST BUTTONS
========================================================= */

.btn-ghost {
background: transparent;
color: var(--btn-muted);
border-color: transparent;
box-shadow: none;
}

.btn-ghost:hover {
background: #f1f5f9;
color: var(--btn-text);
}

.btn-ghost-primary {
background: transparent;
color: var(--btn-primary);
border-color: transparent;
}

.btn-ghost-primary:hover {
background: #eff6ff;
color: var(--btn-primary-hover);
}

.btn-ghost-success {
background: transparent;
color: var(--btn-success);
border-color: transparent;
}

.btn-ghost-success:hover {
background: #f0fdf4;
color: var(--btn-success-hover);
}

.btn-ghost-danger {
background: transparent;
color: var(--btn-danger);
border-color: transparent;
}

.btn-ghost-danger:hover {
background: #fef2f2;
color: var(--btn-danger-hover);
}

.btn-ghost-warning {
background: transparent;
color: #b45309;
border-color: transparent;
}

.btn-ghost-warning:hover {
background: #fffbeb;
}

/* =========================================================
15. LINK BUTTON
========================================================= */

.btn-link {
min-height: auto;
padding: 0;

background: transparent;

color: var(--btn-primary);

border: 0;
border-radius: 0;

box-shadow: none;

}

.btn-link:hover {
background: transparent;
color: var(--btn-primary-hover);
text-decoration: underline;
}

/* =========================================================
16. BUTTON SIZES
========================================================= */

.btn-xs {
min-height: 30px;
padding: 5px 10px;

border-radius: var(--btn-radius-sm);

font-size: 12px;
gap: 5px;

}

.btn-sm {
min-height: 34px;
padding: 7px 12px;

border-radius: 7px;

font-size: 13px;
gap: 6px;

}

.btn-md {
min-height: 40px;
padding: 9px 16px;

font-size: 14px;

}

.btn-lg {
min-height: 46px;
padding: 11px 20px;

border-radius: var(--btn-radius-lg);

font-size: 15px;
gap: 9px;

}

.btn-xl {
min-height: 52px;
padding: 13px 24px;

border-radius: 12px;

font-size: 16px;
gap: 10px;

}

/* =========================================================
17. FULL WIDTH BUTTON
========================================================= */

.btn-block {
display: flex;
width: 100%;
}

/* =========================================================
18. ICON BUTTON
========================================================= */

.btn-icon {
width: 40px;
min-width: 40px;

height: 40px;
min-height: 40px;

padding: 0;

gap: 0;

}

.btn-icon.btn-xs {
width: 30px;
min-width: 30px;
height: 30px;
min-height: 30px;
}

.btn-icon.btn-sm {
width: 34px;
min-width: 34px;
height: 34px;
min-height: 34px;
}

.btn-icon.btn-lg {
width: 46px;
min-width: 46px;
height: 46px;
min-height: 46px;
}

.btn-icon.btn-xl {
width: 52px;
min-width: 52px;
height: 52px;
min-height: 52px;
}

/* =========================================================
19. ROUND BUTTON
========================================================= */

.btn-round {
border-radius: var(--btn-radius-pill);
}

/* =========================================================
20. CIRCLE BUTTON
========================================================= */

.btn-circle {
width: 40px;
min-width: 40px;

height: 40px;
min-height: 40px;

padding: 0;

border-radius: 50%;

}

.btn-circle.btn-sm {
width: 34px;
min-width: 34px;

height: 34px;
min-height: 34px;

}

.btn-circle.btn-lg {
width: 46px;
min-width: 46px;

height: 46px;
min-height: 46px;

}

/* =========================================================
21. BUTTON ICONS
========================================================= */

.btn > .icon,
.btn > i,
.btn > svg {
flex: 0 0 auto;

display: inline-flex;
align-items: center;
justify-content: center;

width: 18px;
height: 18px;

line-height: 1;

}

.btn-sm > .icon,
.btn-sm > i,
.btn-sm > svg {
width: 16px;
height: 16px;
}

.btn-lg > .icon,
.btn-lg > i,
.btn-lg > svg {
width: 20px;
height: 20px;
}

/* =========================================================
22. ADD / SAVE / EDIT / DELETE ACTIONS
========================================================= */

.btn-add {
background: var(--btn-primary);
color: #ffffff;
border-color: var(--btn-primary);
}

.btn-add:hover {
background: var(--btn-primary-hover);
color: #ffffff;
}

.btn-save {
background: var(--btn-success);
color: #ffffff;
border-color: var(--btn-success);
}

.btn-save:hover {
background: var(--btn-success-hover);
color: #ffffff;
}

.btn-edit {
background: #eff6ff;
color: #1d4ed8;
border-color: #bfdbfe;
}

.btn-edit:hover {
background: #dbeafe;
color: #1e40af;
border-color: #93c5fd;
}

.btn-delete {
background: #fef2f2;
color: #dc2626;
border-color: #fecaca;
}

.btn-delete:hover {
background: #fee2e2;
color: #b91c1c;
border-color: #fca5a5;
}

.btn-view {
background: #f8fafc;
color: #334155;
border-color: #e2e8f0;
}

.btn-view:hover {
background: #f1f5f9;
color: #0f172a;
}

/* =========================================================
23. TABLE ACTION BUTTONS
========================================================= */

.table-actions {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}

.table-actions .btn {
min-height: 32px;
padding: 6px 10px;

font-size: 12px;

}

/* =========================================================
24. DASHBOARD ACTIONS
========================================================= */

.dashboard-actions {
display: flex;
align-items: center;
flex-wrap: wrap;

gap: 10px;

}

.dashboard-actions .btn {
flex: 0 0 auto;
}

/* =========================================================
25. FORM ACTIONS
========================================================= */

.form-actions {
display: flex;
align-items: center;
justify-content: flex-end;

flex-wrap: wrap;

gap: 10px;

margin-top: 24px;

}

.form-actions-start {
justify-content: flex-start;
}

.form-actions-center {
justify-content: center;
}

.form-actions-between {
justify-content: space-between;
}

/* =========================================================
26. MODAL ACTIONS
========================================================= */

.modal-actions {
display: flex;
align-items: center;
justify-content: flex-end;

flex-wrap: wrap;

gap: 10px;

padding-top: 18px;

}

/* =========================================================
27. BUTTON GROUP
========================================================= */

.btn-group {
display: inline-flex;
align-items: stretch;
vertical-align: middle;
}

.btn-group > .btn {
position: relative;
border-radius: 0;
}

.btn-group > .btn:first-child {
border-top-left-radius: var(--btn-radius);
border-bottom-left-radius: var(--btn-radius);
}

.btn-group > .btn:last-child {
border-top-right-radius: var(--btn-radius);
border-bottom-right-radius: var(--btn-radius);
}

.btn-group > .btn + .btn {
margin-left: -1px;
}

.btn-group > .btn:hover,
.btn-group > .btn:focus-visible {
z-index: 2;
}

/* =========================================================
28. SPLIT BUTTON
========================================================= */

.btn-split {
display: inline-flex;
align-items: stretch;
}

.btn-split > .btn {
border-radius: 0;
}

.btn-split > .btn:first-child {
border-top-left-radius: var(--btn-radius);
border-bottom-left-radius: var(--btn-radius);
}

.btn-split > .btn:last-child {
width: 40px;
min-width: 40px;

padding: 0;

border-left-color: rgba(255, 255, 255, 0.25);

border-top-right-radius: var(--btn-radius);
border-bottom-right-radius: var(--btn-radius);

}

/* =========================================================
29. DROPDOWN BUTTON
========================================================= */

.btn-dropdown {
padding-right: 38px;
}

.btn-dropdown::after {
content: "";

position: absolute;

top: 50%;
right: 14px;

width: 7px;
height: 7px;

margin-top: -5px;

border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;

transform: rotate(45deg);

}

/* =========================================================
30. LOADING BUTTON
========================================================= */

.btn.loading,
.btn.is-loading {
color: transparent !important;
pointer-events: none;
}

.btn.loading::after,
.btn.is-loading::after {
content: "";

position: absolute;

top: 50%;
left: 50%;

width: 17px;
height: 17px;

margin-top: -8.5px;
margin-left: -8.5px;

border: 2px solid rgba(255, 255, 255, 0.45);
border-top-color: #ffffff;

border-radius: 50%;

animation: btn-loading-spin 0.65s linear infinite;

}

.btn-light.loading::after,
.btn-white.loading::after,
.btn-outline.loading::after,
.btn-ghost.loading::after {
border-color: rgba(37, 99, 235, 0.25);
border-top-color: var(--btn-primary);
}

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

/* =========================================================
31. STATUS BUTTONS / BADGE BUTTONS
========================================================= */

.btn-status {
min-height: 30px;
padding: 5px 11px;

border-radius: var(--btn-radius-pill);

font-size: 12px;
font-weight: 600;

box-shadow: none;

}

.btn-status-active {
background: #dcfce7;
color: #166534;
border-color: #bbf7d0;
}

.btn-status-pending {
background: #fef3c7;
color: #92400e;
border-color: #fde68a;
}

.btn-status-rejected {
background: #fee2e2;
color: #991b1b;
border-color: #fecaca;
}

.btn-status-completed {
background: #dbeafe;
color: #1e40af;
border-color: #bfdbfe;
}

.btn-status-cancelled {
background: #f1f5f9;
color: #475569;
border-color: #e2e8f0;
}

.btn-status-new {
background: #ede9fe;
color: #6d28d9;
border-color: #ddd6fe;
}

/* =========================================================
32. PAGINATION
========================================================= */

.pagination {
display: flex;
align-items: center;
flex-wrap: wrap;

gap: 6px;

}

.pagination .btn {
min-width: 36px;
min-height: 36px;

padding: 7px 10px;

}

.pagination .btn.active,
.pagination .btn[aria-current="page"] {
background: var(--btn-primary);
color: #ffffff;
border-color: var(--btn-primary);
}

/* =========================================================
33. NAVIGATION BUTTON
========================================================= */

.btn-nav {
width: 100%;

justify-content: flex-start;

min-height: 42px;

padding: 9px 12px;

background: transparent;
color: #475569;

border-color: transparent;

box-shadow: none;

}

.btn-nav:hover {
background: #f1f5f9;
color: #1e293b;
}

.btn-nav.active,
.btn-nav[aria-current="page"] {
background: #eff6ff;
color: var(--btn-primary);
border-color: transparent;
}

/* =========================================================
34. SOCIAL / CONTACT BUTTONS
========================================================= */

.btn-whatsapp {
background: #16a34a;
color: #ffffff;
border-color: #16a34a;
}

.btn-whatsapp:hover {
background: #15803d;
border-color: #15803d;
color: #ffffff;
}

.btn-call {
background: #0ea5e9;
color: #ffffff;
border-color: #0ea5e9;
}

.btn-call:hover {
background: #0284c7;
border-color: #0284c7;
color: #ffffff;
}

.btn-email {
background: #6366f1;
color: #ffffff;
border-color: #6366f1;
}

.btn-email:hover {
background: #4f46e5;
border-color: #4f46e5;
color: #ffffff;
}

/* =========================================================
35. MOBILE RESPONSIVE
========================================================= */

@media (max-width: 768px) {

.btn {
    min-height: 42px;
}

.dashboard-actions {
    width: 100%;
}

.dashboard-actions .btn {
    flex: 1 1 auto;
}

.form-actions,
.modal-actions {
    width: 100%;
}

.form-actions .btn,
.modal-actions .btn {
    flex: 1 1 140px;
}

.btn-group {
    width: 100%;
}

.btn-group > .btn {
    flex: 1 1 0;
}

}

/* =========================================================
36. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

.btn-block-mobile {
    display: flex;
    width: 100%;
}

.dashboard-actions {
    flex-direction: column;
    align-items: stretch;
}

.dashboard-actions .btn {
    width: 100%;
}

.form-actions,
.modal-actions {
    flex-direction: column-reverse;
    align-items: stretch;
}

.form-actions .btn,
.modal-actions .btn {
    width: 100%;
}

.table-actions {
    gap: 5px;
}

.btn-group {
    width: 100%;
}

.btn-group > .btn {
    width: auto;
}

}

/* =========================================================
37. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

.btn {
    transition: none;
}

.btn.loading::after,
.btn.is-loading::after {
    animation: none;
}

}

/* =========================================================
END OF BUTTONS.CSS
========================================================= */