/* ============================================
   Unified Button System - buttons.css
   Shared across all pages for consistent styling
   ============================================ */

/* --- Base Button --- */
.btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #30363d;
    background: #21262d;
    color: #c9d1d9;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s, border-color 0.2s;
    font-family: inherit;
    white-space: nowrap;
    touch-action: manipulation; /* Prevent double-tap-to-zoom delay on iPad */
}
.btn:hover {
    background: #30363d;
    border-color: #8b949e;
}

/* --- Color Variants --- */
.btn-primary {
    background: #238636;
    border-color: #238636;
    color: #fff;
}
.btn-primary:hover {
    background: #2ea043;
    border-color: #2ea043;
}

.btn-danger {
    background: #da3633;
    border-color: #da3633;
    color: #fff;
}
.btn-danger:hover {
    background: #f85149;
    border-color: #f85149;
}

.btn-accent {
    background: #1f6feb;
    border-color: #1f6feb;
    color: #fff;
}
.btn-accent:hover {
    background: #388bfd;
    border-color: #388bfd;
}

.btn-outline {
    background: transparent;
    border: 1px solid #30363d;
}
.btn-outline:hover {
    background: #21262d;
}

/* --- Size Variants --- */
.btn-sm {
    padding: 5px 10px;
    font-size: 13px;
}

.btn-lg {
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
}

/* --- Full Width --- */
.btn-block {
    width: 100%;
    justify-content: center;
}

/* --- States --- */
.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Modal Buttons --- */
.modal-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #30363d;
    transition: all 0.15s;
    font-family: inherit;
    touch-action: manipulation;
}
.modal-btn.cancel {
    background: #21262d;
    color: #c9d1d9;
}
.modal-btn.cancel:hover {
    background: #30363d;
}
.modal-btn.confirm {
    background: #238636;
    border-color: #238636;
    color: #fff;
}
.modal-btn.confirm:hover {
    background: #2ea043;
}
.modal-btn.confirm.deactivate,
.modal-btn.danger {
    background: #da3633;
    border-color: #da3633;
    color: #fff;
}
.modal-btn.confirm.deactivate:hover,
.modal-btn.danger:hover {
    background: #f85149;
}
.modal-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Confirm Modal Buttons (admin_users style) --- */
.confirm-modal-btn {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border: 1px solid #30363d;
    transition: all 0.15s;
    font-family: inherit;
    touch-action: manipulation;
}
.confirm-modal-btn.cancel {
    background: #21262d;
    color: #c9d1d9;
}
.confirm-modal-btn.cancel:hover {
    background: #30363d;
}
.confirm-modal-btn.danger {
    background: #da3633;
    border-color: #da3633;
    color: #fff;
}
.confirm-modal-btn.danger:hover {
    background: #f85149;
}