/* ================================================================
 * app-buttons.css
 *
 * SINGLE, SITE-WIDE source of truth for toolbar "feature" button colors
 * (Add New, Filter, Export/Download, Template, Import, Delete Selected,
 * Remove All, Reset/Clear, Apply/Submit). Loaded on every page via
 * config/settings.php -> KT_THEME_ASSETS.global.css, AFTER the Metronic
 * theme bundle and every per-module CSS file, so these rules — plus
 * !important — are what actually wins the cascade. Per-module CSS files
 * are intentionally left untouched; their color declarations for these
 * roles are simply superseded from here.
 *
 * Two kinds of selectors are used:
 *   1. Existing per-module classes/ids that are ALREADY unique to one
 *      button (safe to target directly — no risk of recoloring an
 *      unrelated button elsewhere in the app).
 *   2. `[data-btn-role="…"]` — an attribute added directly to specific
 *      buttons that otherwise only have generic, widely-reused Bootstrap/
 *      Metronic classes (btn-primary, btn-light-primary, btn-info, …).
 *      Those generic classes are NEVER targeted directly here, because
 *      they are shared by hundreds of unrelated buttons/forms across the
 *      app — repainting them would affect far more than these toolbars.
 *
 * Rule ordering matters: the `[data-btn-role]` blocks are placed AFTER
 * the convenience class/id blocks so that on the rare button that (by
 * pre-existing bug) shares a class with a different role, an explicitly
 * added data-btn-role always wins (see wEnquiries/wEnquiryFollowUps
 * "Delete Selected" notes below).
 * ================================================================ */

/* ---------------------------------------------------------------
 * 1. ADD NEW — green
 * ------------------------------------------------------------- */
.eq-btn-primary,
.ep-btn-primary,
.wa-btn-add,
.cp-btn-primary,
[data-btn-role="add"] {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: #fff !important;
    border-color: #059669 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 14px !important;
    height: 32px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}
.eq-btn-primary:hover,
.ep-btn-primary:hover,
.wa-btn-add:hover,
.cp-btn-primary:hover,
[data-btn-role="add"]:hover {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(16, 185, 129, .35) !important;
}

/* ---------------------------------------------------------------
 * 2. FILTER — purple
 * ------------------------------------------------------------- */
.eq-btn-filter,
#followup-page-wrapper .fu-btn-filter,
.cp-btn-filter,
.ep-btn-filter,
#filter-menu-trigger,
#filterToggleBtn,
#cih-filter-btn,
#cpn-filter-btn,
#btn-toggle-filter,
#filter-btn,
[data-btn-role="filter"] {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
    color: #fff !important;
    border-color: #7c3aed !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 14px !important;
    height: 32px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}
.eq-btn-filter:hover,
#followup-page-wrapper .fu-btn-filter:hover,
.cp-btn-filter:hover,
.ep-btn-filter:hover,
#filter-menu-trigger:hover,
#filterToggleBtn:hover,
#cih-filter-btn:hover,
#cpn-filter-btn:hover,
#btn-toggle-filter:hover,
#filter-btn:hover,
[data-btn-role="filter"]:hover {
    background: linear-gradient(135deg, #7c3aed, #6d28d9) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(139, 92, 246, .35) !important;
}

/* ---------------------------------------------------------------
 * 3. EXPORT / DOWNLOAD (includes "Download All") — blue
 *
 * `.dt-buttons .dt-button` is added by the DataTables Buttons extension
 * to EVERY button it renders, regardless of the custom className passed
 * from PHP — so this one rule recolors every DataTable-generated export
 * button across the entire app (Excel, and the CSV+Excel dropdown while
 * it still exists) without editing any of the ~50 DataTable classes.
 * ------------------------------------------------------------- */
.dt-buttons .dt-button,
.eq-btn-success,
#followup-page-wrapper .fu-btn-excel,
.cp-export-btn,
.ep-btn-export,
#fu-excel-btn,
#btn-wa-export,
#btn-lr-export,
#btn-export,
#exportSalesBtn,
#dt-excel-export,
[data-btn-role="export"] {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: #fff !important;
    border-color: #2563eb !important;
        padding: 0 14px !important;
    height: 32px;
}
.dt-buttons .dt-button:hover,
.eq-btn-success:hover,
#followup-page-wrapper .fu-btn-excel:hover,
.cp-export-btn:hover,
.ep-btn-export:hover,
#fu-excel-btn:hover,
#btn-wa-export:hover,
#btn-lr-export:hover,
#btn-export:hover,
#exportSalesBtn:hover,
#dt-excel-export:hover,
[data-btn-role="export"]:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(59, 130, 246, .35) !important;
}

/* ---------------------------------------------------------------
 * 4. TEMPLATE DOWNLOAD — cyan
 * ------------------------------------------------------------- */
.eq-btn-template,
.ep-btn-dl,
.wa-btn-dl,
[data-btn-role="template"] {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
    color: #fff !important;
    border-color: #0891b2 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 14px !important;
    height: 32px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}
.eq-btn-template:hover,
.ep-btn-dl:hover,
.wa-btn-dl:hover,
[data-btn-role="template"]:hover {
    background: linear-gradient(135deg, #0891b2, #0e7490) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(6, 182, 212, .35) !important;
}

/* ---------------------------------------------------------------
 * 5. IMPORT — amber
 * ------------------------------------------------------------- */
.ep-btn-ghost,
.wa-btn-import,
[data-btn-role="import"] {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #fff !important;
    border-color: #d97706 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 14px !important;
    height: 32px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}
.ep-btn-ghost:hover,
.wa-btn-import:hover,
[data-btn-role="import"]:hover {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(245, 158, 11, .35) !important;
}
/* wEnquiries Import reuses .eq-btn-secondary, which "Delete Selected" also
   (incorrectly) reuses on the same page — scope this one to the actual
   import trigger so it can't repaint Delete Selected too. */
[data-kt-action="import"].eq-btn-secondary {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #fff !important;
    border-color: #d97706 !important;
}
[data-kt-action="import"].eq-btn-secondary:hover {
    background: linear-gradient(135deg, #d97706, #b45309) !important;
    color: #fff !important;
}

/* ---------------------------------------------------------------
 * 6. DELETE SELECTED (bulk, checkbox-driven) — pink
 *
 * NOTE: on wEnquiryFollowUps, this button also carries the shared
 * class .fu-btn-excel (same one Export uses). A bare attribute
 * selector here has specificity (0,1,0) and loses to section 3's
 * "#followup-page-wrapper .fu-btn-excel" at (1,1,0), even with
 * !important on both — so it was rendering Export's blue instead of
 * its own color. #followup-page-wrapper #fu-bulk-delete-btn is two
 * ids, specificity (2,0,0), which always outranks (1,1,0) regardless
 * of file order, so it's added alongside the generic attribute
 * selector (which still covers every other module's Delete Selected
 * button, e.g. wEnquiries).
 * ------------------------------------------------------------- */
[data-btn-role="delete-selected"],
#followup-page-wrapper #fu-bulk-delete-btn {
    background: linear-gradient(135deg, #ec4899, #db2777) !important;
    color: #fff !important;
    border-color: #db2777 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 14px !important;
    height: 32px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}
[data-btn-role="delete-selected"]:hover,
#followup-page-wrapper #fu-bulk-delete-btn:hover {
    background: linear-gradient(135deg, #db2777, #be185d) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(236, 72, 153, .35) !important;
}

/* ---------------------------------------------------------------
 * 7. REMOVE ALL — red (unchanged from the existing wEnquiries/
 *    wEnquiryFollowUps implementation; extended here to every module)
 * ------------------------------------------------------------- */
.eq-btn-danger,
#followup-page-wrapper .fu-btn-danger,
.wa-btn-del,
[data-btn-role="remove-all"] {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #fff !important;
    border-color: #dc2626 !important;
}
.eq-btn-danger:hover,
#followup-page-wrapper .fu-btn-danger:hover,
.wa-btn-del:hover,
[data-btn-role="remove-all"]:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(239, 68, 68, .35) !important;
}

/* ---------------------------------------------------------------
 * 8. RESET / CLEAR — neutral slate (deliberately not a bold color;
 *    a "clear filters" action is not a feature, keeping it muted avoids
 *    competing visually with the 8 colored roles above/below it)
 * ------------------------------------------------------------- */
.fu-btn-clear,
.cp-fclear,
#btn-clear-filters,
#btn-reset-filter,
#cpn-reset-btn,
#btn-filter-reset,
#kt_filter_reset,
#reset-btn,
#dt-reset,
#cih-reset-btn,
[data-btn-role="reset"] {
    background: #fff !important;
    color: #64748b !important;
    border-color: #cbd5e1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 14px !important;
    height: 32px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}
.fu-btn-clear:hover,
.cp-fclear:hover,
#btn-clear-filters:hover,
#btn-reset-filter:hover,
#cpn-reset-btn:hover,
#btn-filter-reset:hover,
#kt_filter_reset:hover,
#reset-btn:hover,
#dt-reset:hover,
#cih-reset-btn:hover,
[data-btn-role="reset"]:hover {
    background: #f8fafc !important;
    color: #475569 !important;
    border-color: #94a3b8 !important;
}

/* ---------------------------------------------------------------
 * 9. APPLY / SUBMIT / SEARCH / FIND (filter-panel confirm action) — teal
 * ------------------------------------------------------------- */
.cp-fapply,
#btn-apply-filters,
#btn-apply-filter,
#cpn-apply-btn,
#btn-filter-apply,
#kt_filter_submit,
#dt-find,
#dt-filter,
#cih-apply-btn,
[data-btn-role="apply"] {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    color: #fff !important;
    border-color: #0d9488 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 0 14px !important;
    height: 32px;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
}
.cp-fapply:hover,
#btn-apply-filters:hover,
#btn-apply-filter:hover,
#cpn-apply-btn:hover,
#btn-filter-apply:hover,
#kt_filter_submit:hover,
#dt-find:hover,
#dt-filter:hover,
#cih-apply-btn:hover,
[data-btn-role="apply"]:hover {
    background: linear-gradient(135deg, #0d9488, #0f766e) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px rgba(20, 184, 166, .35) !important;
}