/**
 * ============================================================================
 * KOPITA SHARED BUTTON SYSTEM (ADMIN & PAGE-ANGGOTA)
 * ============================================================================
 * Shared global button styles for all views across Kopita web application.
 * Includes standard buttons, signature glossy pink buttons, action buttons,
 * detail outline buttons, button groups, and DataTables Excel & PDF export buttons.
 */

:root {
    --primary-pink: #FF3B8D;
    --pink-gloss-start: #FF4D97;
    --pink-gloss-mid: #FF2F92;
    --pink-gloss-end: #D91B5C;
    --pink-gloss-border: #C2185B;
    --pink-gloss-shadow: rgba(255, 47, 146, 0.35);
}

/* ============================================================
   1. UNIVERSAL BASE BUTTON & RADIUS EQUALIZATION
   ============================================================ */
.btn,
button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.btn,
.btn-primary,
.btn-secondary,
.btn-success,
.btn-warning,
.btn-danger,
.btn-info,
.btn-light,
.btn-dark,
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-warning,
.btn-outline-danger,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark {
    border-radius: 12px !important;
    font-family: var(--font-family-sans) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn:focus,
.btn:focus-visible,
.btn:active,
button:focus,
button:focus-visible,
button:active {
    outline: none !important;
    box-shadow: none !important;
}

/* Sizing Variants */
.btn-sm,
.btn-xs {
    border-radius: 8px !important;
    font-size: 12px !important;
    padding: 6px 12px !important;
    min-height: 32px !important;
}

.btn-lg {
    border-radius: 14px !important;
    font-size: 15.5px !important;
    padding: 13px 24px !important;
    min-height: 48px !important;
}

.btn-block,
.btn-full-width {
    width: 100% !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ============================================================
   2. KOPITA SIGNATURE PRIMARY GLOSSY PINK BUTTONS
   ============================================================ */
.btn-primary:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button),
button[type="submit"]:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button):not(.btn-light):not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-success):not(.btn-dark),
.btn-process-transaction,
.pos-btn-pay,
.btn-pink-gloss,
.btn-glossy-pink,
.pos-btn,
.sidebar-pos-wrapper .pos-btn,
.btn-checkout-primary,
.btn-submit-order,
.btn-start-shopping,
.empty-cart-cta-btn,
.orders-header-shop-btn,
#modal.pulse-btn,
a.btn[style*="#FF3B8D"],
button.btn[style*="#FF3B8D"],
a.btn[style*="#FF2F92"],
button.btn[style*="#FF2F92"] {
    background: linear-gradient(180deg, #FF3B8D 0%, #E61E72 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    text-shadow: none !important;
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
        0 1px 2px 0 rgba(0, 0, 0, 0.05),
        0 4px 14px 0 rgba(255, 47, 146, 0.3) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 42px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    position: relative !important;
    overflow: hidden !important;
}

.btn-primary:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button):hover,
button[type="submit"]:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button):not(.btn-light):not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-success):not(.btn-dark):hover,
.btn-process-transaction:hover,
.pos-btn-pay:hover,
.btn-pink-gloss:hover,
.btn-glossy-pink:hover,
.pos-btn:hover,
.sidebar-pos-wrapper .pos-btn:hover,
.btn-checkout-primary:hover,
.btn-submit-order:hover,
.btn-start-shopping:hover,
.empty-cart-cta-btn:hover,
.orders-header-shop-btn:hover,
#modal.pulse-btn:hover,
a.btn[style*="#FF3B8D"]:hover,
button.btn[style*="#FF3B8D"]:hover,
a.btn[style*="#FF2F92"]:hover,
button.btn[style*="#FF2F92"]:hover {
    background: linear-gradient(180deg, #FF4D9A 0%, #EF267C 100%) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 0.35),
        0 6px 18px 0 rgba(255, 47, 146, 0.42) !important;
}

.btn-primary:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button):active,
button[type="submit"]:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button):not(.btn-light):not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-success):not(.btn-dark):active,
.btn-process-transaction:active,
.pos-btn-pay:active,
.btn-pink-gloss:active,
.btn-glossy-pink:active,
.pos-btn:active,
.sidebar-pos-wrapper .pos-btn:active,
.btn-checkout-primary:active,
.btn-submit-order:active,
.btn-start-shopping:active,
.empty-cart-cta-btn:active,
.orders-header-shop-btn:active,
#modal.pulse-btn:active,
a.btn[style*="#FF3B8D"]:active,
button.btn[style*="#FF3B8D"]:active,
a.btn[style*="#FF2F92"]:active,
button.btn[style*="#FF2F92"]:active {
    background: linear-gradient(180deg, #D91B5C 0%, #C2185B 100%) !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #FFFFFF !important;
    transform: translateY(0px) scale(0.98) !important;
    box-shadow: 
        inset 0 2px 4px 0 rgba(0, 0, 0, 0.2),
        0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    transition-duration: 0.05s !important;
}

.btn-primary:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button):focus,
button[type="submit"]:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button):not(.btn-light):not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-success):not(.btn-dark):focus,
.btn-process-transaction:focus,
.pos-btn-pay:focus,
.btn-pink-gloss:focus,
.btn-glossy-pink:focus,
.btn-checkout-primary:focus,
.btn-submit-order:focus,
.btn-start-shopping:focus,
.empty-cart-cta-btn:focus,
.orders-header-shop-btn:focus,
#modal.pulse-btn:focus {
    outline: none !important;
    box-shadow: 
        0 0 0 3px rgba(255, 47, 146, 0.35),
        inset 0 1px 0 0 rgba(255, 255, 255, 0.4) !important;
}

/* ============================================================
   3. SECONDARY, LIGHT & OUTLINE BUTTONS
   ============================================================ */
.btn-light:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button),
.btn-secondary:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button),
.btn-outline-secondary:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button) {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%) !important;
    border: 1px solid #CBD5E1 !important;
    color: #334155 !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    text-shadow: none !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    box-shadow: 
        inset 0 1px 0 0 #FFFFFF,
        0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.btn-light:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button):hover,
.btn-secondary:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button):hover,
.btn-outline-secondary:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button):hover {
    background: linear-gradient(180deg, #F8FAFC 0%, #F1F5F9 100%) !important;
    border-color: #94A3B8 !important;
    color: #0F172A !important;
    transform: translateY(-1px) !important;
    box-shadow: 
        inset 0 1px 0 0 #FFFFFF,
        0 4px 10px 0 rgba(148, 163, 184, 0.2) !important;
}

/* Detail Outline System (Kembali, Detail, dsb. untuk Admin & Anggota) */
.btn-detail-outline,
.btn-detail-order,
.empty-cart-secondary-btn,
.order-header-right-btn {
    border-radius: 10px !important;
    border: 1px solid #CBD5E1 !important;
    padding: 8px 20px !important;
    min-height: 40px !important;
    font-weight: 600 !important;
    background: #FFFFFF !important;
    color: #475569 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.btn-detail-outline:hover,
.btn-detail-order:hover,
.empty-cart-secondary-btn:hover,
.order-header-right-btn:hover {
    background: #F8FAFC !important;
    color: #0F172A !important;
    border-color: #94A3B8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

.btn-detail-outline-pink {
    border-radius: 10px !important;
    border: 1px solid rgba(255, 59, 141, 0.3) !important;
    padding: 8px 16px !important;
    min-height: 40px !important;
    font-weight: 600 !important;
    background: #FFF5F8 !important;
    color: #FF3B8D !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.btn-detail-outline-pink:hover {
    background: linear-gradient(180deg, #FF3B8D 0%, #E61E72 100%) !important;
    color: #FFFFFF !important;
    border-color: #FF3B8D !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(255, 59, 141, 0.3) !important;
}

/* ============================================================
   4. COLOR VARIANTS (SUCCESS, WARNING, DANGER, INFO, DARK)
   ============================================================ */
/* Success */
.btn-success:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button),
.btn-forest-gloss,
.btn-glossy-green,
.btn-forest {
    background: linear-gradient(180deg, #10B981 0%, #059669 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    text-shadow: none !important;
    min-height: 42px !important;
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
        0 1px 2px 0 rgba(0, 0, 0, 0.05),
        0 4px 14px 0 rgba(16, 185, 129, 0.28) !important;
}
.btn-success:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button):hover,
.btn-forest-gloss:hover,
.btn-glossy-green:hover,
.btn-forest:hover {
    background: linear-gradient(180deg, #34D399 0%, #10B981 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 0.35),
        0 6px 18px 0 rgba(16, 185, 129, 0.38) !important;
}

/* Warning */
.btn-warning:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button) {
    background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    text-shadow: none !important;
    min-height: 42px !important;
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
        0 1px 2px 0 rgba(0, 0, 0, 0.05),
        0 4px 14px 0 rgba(245, 158, 11, 0.28) !important;
}
.btn-warning:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button):hover {
    background: linear-gradient(180deg, #FBBF24 0%, #F59E0B 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 0.35),
        0 6px 18px 0 rgba(245, 158, 11, 0.38) !important;
}

/* Danger */
.btn-danger:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button) {
    background: linear-gradient(180deg, #EF4444 0%, #DC2626 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    text-shadow: none !important;
    min-height: 42px !important;
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
        0 1px 2px 0 rgba(0, 0, 0, 0.05),
        0 4px 14px 0 rgba(239, 68, 68, 0.28) !important;
}
.btn-danger:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button):hover {
    background: linear-gradient(180deg, #F87171 0%, #EF4444 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 0.35),
        0 6px 18px 0 rgba(239, 68, 68, 0.38) !important;
}

/* Info */
.btn-info:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button) {
    background: linear-gradient(180deg, #06B6D4 0%, #0891B2 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    text-shadow: none !important;
    min-height: 42px !important;
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
        0 1px 2px 0 rgba(0, 0, 0, 0.05),
        0 4px 14px 0 rgba(6, 182, 212, 0.28) !important;
}
.btn-info:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button):hover {
    background: linear-gradient(180deg, #22D3EE 0%, #06B6D4 100%) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 0.35),
        0 6px 18px 0 rgba(6, 182, 212, 0.38) !important;
}

/* Dark */
.btn-dark:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button) {
    background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    text-shadow: none !important;
    min-height: 42px !important;
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 0.15),
        0 1px 2px 0 rgba(0, 0, 0, 0.05),
        0 4px 14px 0 rgba(15, 23, 42, 0.3) !important;
}
.btn-dark:not(.btn-action):not(.action-btn):not(.btn-table-action):not(.btn-icon):not(td .btn):not(.dataTable .btn):not(.dt-button):hover {
    background: linear-gradient(180deg, #334155 0%, #1E293B 100%) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 
        inset 0 1px 0 0 rgba(255, 255, 255, 0.25),
        0 6px 18px 0 rgba(15, 23, 42, 0.4) !important;
}

/* ============================================================
   5. TABLE ACTION BUTTONS (.btn-action, .action-btn, td .btn)
   ============================================================ */
.btn-action,
.action-btn,
.btn-table-action,
.btn-icon,
.btn-group-action .btn,
.dataTable td .btn,
.dataTable td.action .btn,
.dataTable td:last-child .btn,
table.dataTable tbody tr.child ul.dtr-details > li span.dtr-data .btn {
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    padding: 0 !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    text-shadow: none !important;
    line-height: 1 !important;
}

.btn-action:hover,
.action-btn:hover,
.btn-table-action:hover,
.dataTable td .btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
}

.btn-action:active,
.action-btn:active,
.btn-table-action:active,
.dataTable td .btn:active {
    transform: translateY(0) scale(0.96) !important;
}

/* ============================================================
   6. DATATABLES EXPORT BUTTONS (EXCEL & PDF)
   ============================================================ */
.dataTables_wrapper .dt-buttons,
.dt-buttons,
.dt-buttons.btn-group {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-bottom: 0 !important;
    width: max-content !important;
    margin-left: auto !important;
    float: none !important;
}

.dataTables_wrapper .dt-buttons .btn,
.dt-buttons .btn,
.dt-buttons.btn-group > .btn,
.dt-buttons.btn-group .btn {
    border-radius: 8px !important;
    height: 36px !important;
    min-height: 36px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    padding: 0 12px !important;
    width: auto !important;
    max-width: max-content !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

/* Solid Green Excel Button */
.dataTables_wrapper .dt-buttons .buttons-excel.btn-success,
.dt-buttons .buttons-excel.btn-success,
.buttons-excel.btn-success {
    background: linear-gradient(180deg, #10B981 0%, #059669 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(16, 185, 129, 0.25) !important;
}

.dataTables_wrapper .dt-buttons .buttons-excel.btn-success i,
.dt-buttons .buttons-excel.btn-success i,
.buttons-excel.btn-success i,
.buttons-excel.btn-success .fa,
.buttons-excel.btn-success .fas {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

.dataTables_wrapper .dt-buttons .buttons-excel.btn-success:hover,
.dt-buttons .buttons-excel.btn-success:hover,
.buttons-excel.btn-success:hover {
    background: linear-gradient(180deg, #34D399 0%, #10B981 100%) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.35) !important;
}

/* Solid Red PDF Button */
.dataTables_wrapper .dt-buttons .buttons-pdf.btn-danger,
.dt-buttons .buttons-pdf.btn-danger,
.buttons-pdf.btn-danger {
    background: linear-gradient(180deg, #EF4444 0%, #DC2626 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(239, 68, 68, 0.25) !important;
}

.dataTables_wrapper .dt-buttons .buttons-pdf.btn-danger i,
.dt-buttons .buttons-pdf.btn-danger i,
.buttons-pdf.btn-danger i,
.buttons-pdf.btn-danger .fa,
.buttons-pdf.btn-danger .fas {
    color: #FFFFFF !important;
    opacity: 1 !important;
}

.dataTables_wrapper .dt-buttons .buttons-pdf.btn-danger:hover,
.dt-buttons .buttons-pdf.btn-danger:hover,
.buttons-pdf.btn-danger:hover {
    background: linear-gradient(180deg, #F87171 0%, #EF4444 100%) !important;
    color: #FFFFFF !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.35) !important;
}

/* White Outlined Fallback for Excel & PDF */
.dataTables_wrapper .dt-buttons .buttons-excel:not(.btn-success):not(.btn-danger),
.dt-buttons .buttons-excel:not(.btn-success):not(.btn-danger) {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #475569 !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 8px !important;
}

.dataTables_wrapper .dt-buttons .buttons-excel:not(.btn-success):not(.btn-danger) i,
.dt-buttons .buttons-excel:not(.btn-success):not(.btn-danger) i {
    color: #10B981 !important;
}

.dataTables_wrapper .dt-buttons .buttons-pdf:not(.btn-success):not(.btn-danger),
.dt-buttons .buttons-pdf:not(.btn-success):not(.btn-danger) {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #475569 !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 8px !important;
}

.dataTables_wrapper .dt-buttons .buttons-pdf:not(.btn-success):not(.btn-danger) i,
.dt-buttons .buttons-pdf:not(.btn-success):not(.btn-danger) i {
    color: #EF4444 !important;
}

/* ============================================================
   7. BUTTON GROUPS & CORNER UNIFICATION
   ============================================================ */
.btn-group {
    border-radius: 12px !important;
}

.btn-group:not(.dt-buttons) > .btn:first-child:not(:last-child) {
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.btn-group:not(.dt-buttons) > .btn:last-child:not(:first-child) {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.btn-group:not(.dt-buttons) > .btn:not(:first-child):not(:last-child) {
    border-radius: 0 !important;
}

.btn-group.gap-1 > .btn,
.btn-group.gap-2 > .btn,
.btn-group[style*="gap"] > .btn,
.d-flex.gap-2 > .btn,
.d-flex.gap-1 > .btn {
    border-radius: 10px !important;
}

/* ============================================================
   8. UNIVERSAL ICON COLOR & CONTRAST RULES
   ============================================================ */
.btn-secondary i,
.btn-secondary .fa,
.btn-secondary .fas,
.btn-secondary .far,
.btn-secondary .fa-eye,
.btn-light i,
.btn-light .fa,
.btn-light .fas,
.btn-light .far,
.btn-light .fa-eye,
.btn-outline-secondary i {
    color: #475569 !important;
}

.btn-primary i,
.btn-primary .fa,
.btn-primary .fas,
.btn-primary .far,
.btn-primary .fa-eye,
.btn-info i,
.btn-info .fa,
.btn-info .fas,
.btn-info .far,
.btn-info .fa-eye,
.btn-success i,
.btn-warning i,
.btn-danger i,
.btn-dark i {
    color: #FFFFFF !important;
}

/* Icon alignment inside buttons */
.btn i,
.btn svg {
    font-size: 13.5px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}