.ph-table-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .85rem; } .ph-search-area { width: min(100%, 27rem); } .ph-search-input { position: relative; } .ph-search-input > i { position: absolute; top: 50%; left: .9rem; z-index: 1; color: var(--ph-text-muted); font-size: .8rem; transform: translateY(-50%); pointer-events: none; } .ph-search-input ::deep input { padding-left: 2.45rem; } .ph-pagination-area { margin-left: auto; } .ph-header.sortable { cursor: pointer; user-select: none; } .ph-header.sortable:hover { color: var(--ph-primary); background: var(--ph-primary-soft); } .actions-header { cursor: default; user-select: none; } .ph-actions { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 7rem; } .ph-actions ::deep .btn { margin: 0 !important; } .ph-empty-state { display: flex; flex-direction: column; align-items: center; gap: .35rem; } .ph-empty-state i { margin-bottom: .25rem; color: var(--ph-primary); font-size: 1.5rem; } .ph-empty-state strong { color: var(--ph-text); } .ph-empty-state span { font-size: .84rem; } @media (max-width: 767.98px) { .ph-table-toolbar { align-items: stretch; flex-direction: column; } .ph-search-area { width: 100%; } .ph-pagination-area { max-width: 100%; margin-left: 0; overflow-x: auto; } }