/* =========================================================
   BUTTONS – COMPONENT LEVEL
   ========================================================= */

:root {
    --btn-primary-bg: #2563eb;
    --btn-primary-bg-hover: #1d4ed8;
    --btn-new-bg: #22c55e;
    --btn-new-bg-hover: #16a34a;
    --btn-edit-bg: #facc15;
    --btn-edit-bg-hover: #eab308;
    --btn-delete-bg: #dc2626;
    --btn-delete-bg-hover: #b91c1c;
}

/* -------------------------
   BASE BUTTON
-------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 14px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

    .btn:disabled,
    .btn.disabled {
        opacity: .6;
        cursor: not-allowed;
        pointer-events: none;
    }

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

    .btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(37,99,235,.25);
    }


/* -------------------------
   VARIANTS
-------------------------- */

/* Primary */
.btn-primary {
    background: var(--btn-primary-bg);
    color: #fff;
}

    .btn-primary:hover {
        background: var(--btn-primary-bg-hover);
    }

/* Secondary */
.btn-secondary {
    background: #64748b;
    color: #fff;
}

    .btn-secondary:hover {
        background: #475569;
    }

/* Success / New */
.btn-success,
.btn-new,
.btn-create,
.btn-add {
    background: var(--btn-new-bg);
    color: #fff;
}

    .btn-success:hover,
    .btn-new:hover,
    .btn-create:hover,
    .btn-add:hover {
        background: var(--btn-new-bg-hover);
    }

/* Danger */
.btn-danger {
    background: var(--btn-delete-bg);
    color: #fff;
}

    .btn-danger:hover {
        background: var(--btn-delete-bg-hover);
    }

/* Edit aliases */
.btn-edit,
.btn-update {
    background: var(--btn-edit-bg);
    color: #1f2937;
}

    .btn-edit:hover,
    .btn-update:hover {
        background: var(--btn-edit-bg-hover);
    }

/* Light */
.btn-light {
    background: #f8fafc;
    color: #334155;
    border-color: #cbd5e1;
}

    .btn-light:hover {
        background: #f1f5f9;
    }

/* Warning */
.btn-warning {
    background: #64748b;
    color: #fff;
}

    .btn-warning:hover {
        background: #475569;
    }

/* Outline buttons */
.btn-outline-primary {
    background: transparent;
    color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
}

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

.btn-outline-secondary {
    background: transparent;
    color: #475569;
    border-color: #94a3b8;
}

    .btn-outline-secondary:hover {
        background: #475569;
        color: #fff;
        border-color: #475569;
    }

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

    .btn-outline-danger:hover,
    .btn-delete:hover,
    .btn-remove:hover {
        background: var(--btn-delete-bg);
        color: #fff;
    }

/* Ghost / Outline */
.btn-ghost {
    background: transparent;
    color: #111827;
    border-color: #e5e7eb;
}

    .btn-ghost:hover {
        background: #f8fafc;
    }


/* -------------------------
   SIZES
-------------------------- */
.btn-sm {
    height: 32px;
    padding: 0 10px;
    font-size: 13px;
}

.btn-lg {
    height: 44px;
    padding: 0 18px;
    font-size: 15px;
}


/* -------------------------
   ICON BUTTONS
-------------------------- */
.btn-icon {
    width: 40px;
    padding: 0;
}

    .btn-icon.btn-sm {
        width: 32px;
    }

    .btn-icon.btn-lg {
        width: 44px;
    }


/* -------------------------
   BUTTON GROUP
-------------------------- */
.btn-group {
    display: inline-flex;
    gap: 8px;
}


/* -------------------------
   ACTION BUTTONS (TABLES ETC.)
-------------------------- */
.btn-action {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: 6px;
}

/* Common action alignment across pages */
.action-buttons,
.table-actions,
.form-actions,
.hrd-item-actions,
.hrd-add-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start !important;
    gap: 8px;
    flex-wrap: nowrap;
}

.page-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.col-actions,
th.col-actions,
td.col-actions {
    text-align: left !important;
    white-space: nowrap;
}

.action-buttons .btn,
.table-actions .btn,
.form-actions .btn {
    min-width: 0;
}

.action-buttons form,
.table-actions form,
.form-actions form,
.page-actions form {
    display: inline-flex;
    margin: 0;
}

.d-inline {
    display: inline-flex;
    align-items: center;
}

@media (max-width: 768px) {
    .page-actions,
    .form-actions,
    .action-buttons,
    .table-actions {
        justify-content: flex-start;
    }
}

/* -------------------------
   SENSITIVE REVEAL ICON FALLBACK
-------------------------- */
.reveal-btn i.fa {
    position: relative;
    display: inline-block;
    width: 14px;
    height: 14px;
    font-style: normal;
    line-height: 14px;
}

.reveal-btn i.fa-eye::before,
.reveal-btn i.fa-eye-slash::before {
    content: "\1F441";
    font-family: "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
    font-size: 12px;
    line-height: 14px;
    display: block;
    text-align: center;
}

.reveal-btn i.fa-eye-slash::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 0;
    width: 2px;
    height: 14px;
    background: currentColor;
    border-radius: 2px;
    transform: rotate(35deg);
}