/* =======================================================
   PURE LEFT WEBAPP – BRAND COLOR OVERRIDE
   Primary: linear-gradient(135deg, #0a3d62 0%, #0a3d62 100%)
   ======================================================= */

@media screen {

    /* ───── THEAD / TABLE HEADER ───── */
    html body .table-default-thead-bg,
    html body .dataTables_wrapper thead,
    html body .DTFC_LeftHeadWrapper thead,
    html body .DTFC_RightHeadWrapper thead,
    html body .dataTables_scrollHead thead,
    html body table:not(.no-custom-header) thead {
        background: linear-gradient(135deg, var(--hth-table-header) 0%, var(--hth-table-header-end, var(--hth-table-header)) 100%) !important;
    }

    /* Cells inside thead */
    html body .table-default-thead-bg tr:not(.filter-row) th,
    html body .dataTables_wrapper thead tr:not(.filter-row) th,
    html body .DTFC_LeftHeadWrapper thead tr:not(.filter-row) th,
    html body .DTFC_RightHeadWrapper thead tr:not(.filter-row) th,
    html body .dataTables_scrollHead thead tr:not(.filter-row) th,
    html body table:not(.no-custom-header) thead tr:not(.filter-row) th {
        background: linear-gradient(135deg, var(--hth-table-header) 0%, var(--hth-table-header-end, var(--hth-table-header)) 100%) !important;
        color: #ffffff !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
        box-shadow: none !important;
    }

    /* Links, icons inside thead */
    html body thead tr:not(.filter-row) th a,
    html body thead tr:not(.filter-row) th i {
        color: #ffffff !important;
    }

    /* DataTables sorting arrows */
    html body table.dataTable thead tr:not(.filter-row) th.sorting::before,
    html body table.dataTable thead tr:not(.filter-row) th.sorting::after,
    html body table.dataTable thead tr:not(.filter-row) th.sorting_asc::before,
    html body table.dataTable thead tr:not(.filter-row) th.sorting_asc::after,
    html body table.dataTable thead tr:not(.filter-row) th.sorting_desc::before,
    html body table.dataTable thead tr:not(.filter-row) th.sorting_desc::after {
        color: rgba(255, 255, 255, 0.7) !important;
    }
    html body table.dataTable thead tr:not(.filter-row) th.sorting_asc::before,
    html body table.dataTable thead tr:not(.filter-row) th.sorting_desc::after {
        color: #ffffff !important;
        opacity: 1 !important;
    }

    /* ───── FILTER ROW (keep white) ───── */
    html body thead tr.filter-row,
    html body .dataTables_wrapper thead tr.filter-row {
        background: #fff !important;
        background-color: #fff !important;
    }
    html body thead tr.filter-row th,
    html body .dataTables_wrapper thead tr.filter-row th {
        background: #fff !important;
        background-color: #fff !important;
        color: #333 !important;
        border-color: #dee2e6 !important;
    }
}

/* ───── BUTTON STYLING OVERRIDES (Refresh, Add, Success) ───── */

/* 1. Refresh Button (btn-refresh / btn-outline-light) */
html body .btn-refresh,
html body .btn-outline-light.btn-refresh {
    border: 1.5px solid #cbd5e1 !important;
    color: #475569 !important;
    background-color: #ffffff !important;
    background-image: none !important;
    padding: 7px 16px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}
html body .btn-refresh:hover,
html body .btn-outline-light.btn-refresh:hover {
    background-color: #f8fafc !important;
    border-color: var(--hth-primary) !important;
    color: var(--hth-primary) !important;
    box-shadow: 0 4px 12px var(--hth-shadow-primary-light) !important;
}
html body .btn-refresh i,
html body .btn-outline-light.btn-refresh i {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
html body .btn-refresh:hover i,
html body .btn-outline-light.btn-refresh:hover i {
    transform: rotate(180deg) !important;
}

/* 2. Add Button (btn-add / btn-outline-primary) */
html body .btn-add,
html body .btn-outline-primary.btn-add {
    background: linear-gradient(135deg, var(--hth-primary) 0%, var(--hth-primary-gradient-end) 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 12px var(--hth-shadow-primary) !important;
}
html body .btn-add:hover,
html body .btn-outline-primary.btn-add:hover {
    background: linear-gradient(135deg, var(--hth-primary-hover) 0%, var(--hth-primary) 100%) !important;
    box-shadow: 0 6px 16px var(--hth-shadow-primary-hover) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}
html body .btn-add:active,
html body .btn-outline-primary.btn-add:active {
    transform: translateY(0) !important;
}
html body .btn-add i,
html body .btn-outline-primary.btn-add i {
    transition: transform 0.2s ease !important;
}
html body .btn-add:hover i,
html body .btn-outline-primary.btn-add:hover i {
    transform: scale(1.15) !important;
}

/* 3. Success Buttons (btn-success & btn-outline-success) */
html body .btn-outline-success {
    border: 1.5px solid var(--hth-success) !important;
    color: var(--hth-success) !important;
    background-color: transparent !important;
    background-image: none !important;
    padding: 7px 16px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}
html body .btn-outline-success:hover {
    background-color: var(--hth-success) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.25) !important;
    transform: translateY(-1px) !important;
}
html body .btn-outline-success:active {
    transform: translateY(0) !important;
}

html body .btn-success {
    background: linear-gradient(135deg, var(--hth-success) 0%, var(--hth-success-dark) 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important;
}
html body .btn-success:hover {
    background: linear-gradient(135deg, var(--hth-success-dark) 0%, var(--hth-success-darker) 100%) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}
html body .btn-success:active {
    transform: translateY(0) !important;
}

/* 4. Primary Button (btn-primary) */
html body .btn-primary {
    background: linear-gradient(135deg, var(--hth-primary) 0%, var(--hth-primary-gradient-end) 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 12px var(--hth-shadow-primary) !important;
}
html body .btn-primary:hover {
    background: linear-gradient(135deg, var(--hth-primary-hover) 0%, var(--hth-primary) 100%) !important;
    box-shadow: 0 6px 16px var(--hth-shadow-primary-hover) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}
html body .btn-primary:active {
    transform: translateY(0) !important;
}
html body .btn-primary i {
    transition: transform 0.2s ease !important;
}
html body .btn-primary:hover i {
    transform: scale(1.1) !important;
}

/* 5. Special rules for search button group (btnQuickSearch & btnAdvSearchToggle) */
html body [id^="btnQuickSearch"] {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
html body [id^="btnAdvSearchToggle"] {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.25) !important;
}

/* 6. Premium Action Buttons inside DataTables (link-success, link-danger, link-primary, link-info, link-warning) */
html body table.dataTable td a.link-success,
html body table.dataTable td a.link-danger,
html body table.dataTable td a.link-primary,
html body table.dataTable td a.link-info,
html body table.dataTable td a.link-warning,
html body table.dataTable td a[class^="link-"] {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
}

/* Edit / View / Success Actions */
html body table.dataTable td a.link-success {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.15) !important;
}
html body table.dataTable td a.link-success:hover {
    background-color: var(--hth-success) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.2) !important;
    transform: translateY(-1px) !important;
}
html body table.dataTable td a.link-success:active {
    transform: translateY(0) !important;
}

/* Delete / Danger Actions */
html body table.dataTable td a.link-danger {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.15) !important;
}
html body table.dataTable td a.link-danger:hover {
    background-color: #ef4444 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.2) !important;
    transform: translateY(-1px) !important;
}
html body table.dataTable td a.link-danger:active {
    transform: translateY(0) !important;
}

/* Password Change / Info / Primary Actions */
html body table.dataTable td a.link-primary {
    background-color: var(--hth-primary-light) !important;
    color: var(--hth-primary) !important;
    border: 1px solid var(--hth-primary-light-15) !important;
}
html body table.dataTable td a.link-primary:hover {
    background-color: var(--hth-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px var(--hth-shadow-primary) !important;
    transform: translateY(-1px) !important;
}
html body table.dataTable td a.link-primary:active {
    transform: translateY(0) !important;
}

/* Info / Details Actions */
html body table.dataTable td a.link-info {
    background-color: rgba(6, 182, 212, 0.1) !important;
    color: #06b6d4 !important;
    border: 1px solid rgba(6, 182, 212, 0.15) !important;
}
html body table.dataTable td a.link-info:hover {
    background-color: #06b6d4 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(6, 182, 212, 0.2) !important;
    transform: translateY(-1px) !important;
}
html body table.dataTable td a.link-info:active {
    transform: translateY(0) !important;
}

/* Warning Actions */
html body table.dataTable td a.link-warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.15) !important;
}
html body table.dataTable td a.link-warning:hover {
    background-color: #f59e0b !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(245, 158, 11, 0.2) !important;
    transform: translateY(-1px) !important;
}
html body table.dataTable td a.link-warning:active {
    transform: translateY(0) !important;
}

/* Flex layout wrappers for action column buttons */
html body table.dataTable td ul.hstack {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding-left: 0 !important;
}
html body table.dataTable td li.list-inline-item {
    margin: 0 !important;
    display: inline-flex !important;
}

/*# sourceMappingURL=custom.min.css.map */

/* 7. Delete Button (btn-delete / btn-check-delete-modal) */
html body .btn-delete,
html body .btn-outline-danger.btn-delete,
html body .btn-check-delete-modal.btn-delete {
    background: linear-gradient(135deg, var(--hth-danger-dark) 0%, var(--hth-danger) 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    box-shadow: 0 4px 12px rgba(185, 28, 28, 0.25) !important;
}
html body .btn-delete:hover,
html body .btn-outline-danger.btn-delete:hover,
html body .btn-check-delete-modal.btn-delete:hover {
    background: linear-gradient(135deg, var(--hth-danger) 0%, var(--hth-danger-dark) 100%) !important;
    box-shadow: 0 6px 16px rgba(185, 28, 28, 0.35) !important;
    transform: translateY(-1px) !important;
    color: #ffffff !important;
}
html body .btn-delete:active,
html body .btn-outline-danger.btn-delete:active,
html body .btn-check-delete-modal.btn-delete:active {
    transform: translateY(0) !important;
}
html body .btn-delete i,
html body .btn-outline-danger.btn-delete i,
html body .btn-check-delete-modal.btn-delete i {
    transition: transform 0.2s ease !important;
}
html body .btn-delete:hover i,
html body .btn-outline-danger.btn-delete:hover i,
html body .btn-check-delete-modal.btn-delete:hover i {
    transform: scale(1.15) !important;
}