/* ============================================
   ce-btn — Button system (phần web)
   Cách dùng: .ce-btn + kích thước + variant (tuỳ chọn)
   Ví dụ: .ce-btn.ce-btn-primary
          .ce-btn.ce-btn-sm.ce-btn-outline
          .ce-btn.ce-btn-sm.ce-btn-icon
   Tham khảo: man/css/core/buttons.css
   Legacy: .btn / .btn-* vẫn map sang ce-btn (migrate dần)
   ============================================ */

/* --- Reset appearance --- */
button.ce-btn,
a.ce-btn,
button.btn,
a.btn {
    appearance: none;
    -webkit-appearance: none;
}

/* --- Base --- */
.ce-btn,
.btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ce-btn-gap);
    margin: 0;
    padding: 12px var(--ce-btn-padding-x);
    min-height: var(--ce-btn-height-md);
    border: 1px solid var(--ce-btn-default-border);
    border-radius: var(--ce-btn-radius);
    background: var(--ce-btn-default-bg);
    color: var(--ce-btn-default-text);
    font-family: var(--font-primary);
    font-size: var(--ce-btn-font-size);
    font-weight: var(--ce-btn-font-weight);
    line-height: 1;
    letter-spacing: 0.3px;
    text-decoration: none;
    text-transform: capitalize;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    outline: none;
    box-shadow: none;
    transition: var(--ce-btn-transition);
}

.ce-btn:hover,
.btn:hover {
    border-color: var(--ce-btn-default-hover-bg);
    background: var(--ce-btn-default-hover-bg);
    color: var(--ce-btn-default-hover-text);
    transform: translateY(-2px);
}

.ce-btn:active,
.btn:active {
    transform: translateY(0);
}

.ce-btn:focus-visible,
.btn:focus-visible {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--ce-btn-focus-ring);
}

.ce-btn:disabled,
.ce-btn[disabled],
.ce-btn.is-disabled,
.btn:disabled,
.btn[disabled],
.btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

.ce-btn i,
.ce-btn .ph,
.ce-btn .fas,
.ce-btn .far,
.btn i,
.btn .ph,
.btn .fas,
.btn .far {
    line-height: 1;
    flex-shrink: 0;
}

/* --- Sizes --- */
.ce-btn-lg,
.btn-lg {
    min-height: var(--ce-btn-height-lg);
    padding: 14px var(--ce-btn-padding-x-lg);
    font-size: var(--ce-btn-font-size);
}

.ce-btn-sm,
.btn-sm {
    min-height: var(--ce-btn-height-sm);
    padding: 8px var(--ce-btn-padding-x-sm);
    font-size: var(--ce-btn-font-size-sm);
}

.ce-btn-mini,
.btn-mini {
    min-height: var(--ce-btn-height-mini);
    padding: var(--ce-btn-padding-x-mini);
    font-size: var(--ce-btn-font-size-sm);
}

/* Chỉ icon, không text */
.ce-btn-icon,
.btn-icon {
    width: var(--ce-btn-height-md);
    min-width: var(--ce-btn-height-md);
    padding: 0;
}

.ce-btn-sm.ce-btn-icon,
.btn-sm.btn-icon {
    width: var(--ce-btn-height-sm);
    min-width: var(--ce-btn-height-sm);
}

.ce-btn-mini.ce-btn-icon,
.btn-mini.btn-icon {
    width: var(--ce-btn-height-mini);
    min-width: var(--ce-btn-height-mini);
}

/* --- Variants --- */
.ce-btn-primary,
.btn-primary {
    border-color: transparent;
    background: var(--ce-btn-primary-bg);
    color: var(--ce-btn-primary-text);
}

.ce-btn-primary:hover,
.btn-primary:hover {
    border-color: transparent;
    background: var(--ce-btn-primary-hover-bg);
    color: var(--ce-btn-primary-text);
    transform: translateY(-2px);
}

.ce-btn-secondary,
.btn-secondary {
    border-color: transparent;
    background: var(--ce-btn-secondary-bg);
    color: var(--ce-btn-secondary-text);
}

.ce-btn-secondary:hover,
.btn-secondary:hover {
    border-color: transparent;
    background: var(--ce-btn-secondary-hover-bg);
    color: var(--ce-btn-secondary-text);
    transform: translateY(-2px);
}

.ce-btn-outline,
.btn-outline {
    border: 2px solid var(--ce-btn-outline-border);
    background: transparent;
    color: var(--ce-btn-outline-text);
}

.ce-btn-outline:hover,
.btn-outline:hover {
    border-color: var(--ce-btn-outline-border);
    background: var(--ce-btn-outline-hover-bg);
    color: var(--ce-btn-outline-hover-text);
    transform: translateY(-2px);
}

.ce-btn-danger,
.btn-danger {
    border-color: var(--ce-btn-danger-bg);
    background: var(--ce-btn-danger-bg);
    color: var(--ce-btn-danger-text);
}

.ce-btn-danger:hover,
.btn-danger:hover {
    border-color: var(--ce-btn-danger-hover-bg);
    background: var(--ce-btn-danger-hover-bg);
    color: var(--ce-btn-danger-text);
    transform: translateY(-2px);
}

.ce-btn-outline-danger,
.btn-outline-danger {
    border: 2px solid var(--ce-btn-danger-outline-border);
    background: transparent;
    color: var(--ce-btn-danger-outline-text);
}

.ce-btn-outline-danger:hover,
.btn-outline-danger:hover {
    border-color: var(--ce-btn-danger-bg);
    background: var(--ce-btn-danger-bg);
    color: var(--ce-btn-danger-text);
    transform: translateY(-2px);
}

.ce-btn-ghost,
.btn-ghost {
    border: 1px solid var(--ce-btn-ghost-border);
    background: var(--ce-btn-ghost-bg);
    color: var(--ce-btn-ghost-text);
}

.ce-btn-ghost:hover,
.btn-ghost:hover {
    border-color: var(--ce-btn-ghost-hover-border);
    background: var(--ce-btn-ghost-bg);
    color: var(--ce-btn-ghost-hover-text);
    transform: translateY(-2px);
}

/* --- Text / link buttons --- */
.ce-btn-text,
.ce-btn-text-danger,
.ce-btn-link-danger,
.btn-text,
.btn-text-danger,
.btn-link-danger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    font-family: var(--font-primary);
    font-size: var(--ce-btn-font-size-sm);
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    user-select: none;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

.ce-btn-text,
.btn-text {
    color: var(--ce-btn-text-color);
}

.ce-btn-text:hover,
.btn-text:hover {
    opacity: 0.8;
}

.ce-btn-text-danger,
.ce-btn-link-danger,
.ce-btn-text.red,
.btn-text-danger,
.btn-link-danger {
    color: var(--ce-btn-text-danger-color);
}

.ce-btn-link-danger,
.btn-link-danger {
    padding: 0.25rem 0.5rem;
}

.ce-btn-text-danger:hover,
.ce-btn-link-danger:hover,
.ce-btn-text.red:hover,
.btn-text-danger:hover,
.btn-link-danger:hover {
    opacity: 0.8;
}

.ce-btn-text:disabled,
.ce-btn-text-danger:disabled,
.ce-btn-link-danger:disabled,
.ce-btn-text[disabled],
.ce-btn-text-danger[disabled],
.ce-btn-link-danger[disabled],
.btn-text:disabled,
.btn-text-danger:disabled,
.btn-link-danger:disabled,
.btn-text[disabled],
.btn-text-danger[disabled],
.btn-link-danger[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Layout helper (không đổi màu) */
.ce-btn-cancel,
.btn-cancel {
    flex-shrink: 0;
}

/* --- Utilities --- */
.ce-btn-block,
.btn-block {
    display: flex;
    width: 100%;
}

.ce-btn-flex,
.btn-flex {
    display: flex;
    align-items: center;
}

.radio-btn {
    cursor: pointer;
}

/* ============================================
   SweetAlert2 button theme
   ============================================ */

.swal-btn-primary,
.swal-btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ce-btn-gap);

    min-height: var(--ce-btn-height-sm);
    padding: 8px var(--ce-btn-padding-x-sm);

    border: none;
    border-radius: var(--ce-btn-radius);

    font-family: var(--font-primary);
    font-size: var(--ce-btn-font-size-sm);
    font-weight: var(--ce-btn-font-weight);

    cursor: pointer;
    transition: var(--ce-btn-transition);
}

.swal-btn-primary {
    background: var(--primary-color);
    color: #fff;
}

.swal-btn-primary:hover {
    background: var(--ce-btn-primary-hover-bg);
    transform: translateY(-2px);
}

.swal-btn-danger {
    background: var(--accent-color);
    color: #fff;
    margin-left: 10px;
}

.swal-btn-danger:hover {
    background: var(--ce-btn-danger-hover-bg);
    transform: translateY(-2px);
}

.swal-btn-primary:active,
.swal-btn-danger:active {
    transform: translateY(0);
}

.swal-btn-primary:focus-visible,
.swal-btn-danger:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px var(--ce-btn-focus-ring);
}

/* ============================================
   KẾT THÚC CSS BUTTONS
   ============================================ */