/* ==========================================================================
   Destiny SMS — Agent panel pages (reports, clients, numbers, statements)
   Feature layout of the reference panel, drawn entirely with Destiny SMS's own
   theme variables so it follows light / dark mode like every other page.
   ========================================================================== */

.zp-desc { color: var(--text-secondary); font-size: 13px; line-height: 1.6; margin: -4px 0 14px; }
.zp-desc b { color: var(--text-primary); }

/* page alert ("Well Done! Client Updated.") */
.zp-alert { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.zp-alert .zp-alert-x { margin-left: auto; background: none; border: 0; color: inherit;
  font-size: 16px; cursor: pointer; opacity: .7; }
.zp-alert .zp-alert-x:hover { opacity: 1; }

/* card with title on the left and icon actions on the right */
.zp-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-bottom: 14px; }
.zp-card-head .card-title { text-transform: uppercase; letter-spacing: .4px; }
.zp-head-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.zp-icon-btn { width: 38px; height: 34px; padding: 0; display: inline-flex; align-items: center;
  justify-content: center; }

/* filter panel */
.zp-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px; align-items: end; }
.zp-filters .form-group { margin-bottom: 0; }
.zp-filter-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.zp-groupby { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; align-items: center; }
.zp-groupby .zp-gb-title { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.zp-groupby label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  cursor: pointer; color: var(--text-primary); }
.zp-groupby input { width: 16px; height: 16px; accent-color: var(--accent); }

/* table toolbar */
.zp-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 12px; }
.zp-toolbar-l, .zp-toolbar-r { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.zp-toolbar label { font-size: 13px; color: var(--text-muted); }
.zp-toolbar select { width: auto; min-width: 78px; }
.zp-search { position: relative; }
.zp-search i { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); font-size: 12px; pointer-events: none; }
.zp-search input { padding-left: 30px; width: 210px; max-width: 100%; }

/* show / hide columns */
.zp-colvis { position: relative; }
.zp-colvis-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 190px; max-height: 320px; overflow-y: auto; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; }
.zp-colvis.open .zp-colvis-menu { display: block; }
.zp-colvis-menu label { display: flex; align-items: center; gap: 8px; padding: 7px 8px;
  border-radius: 6px; font-size: 13px; cursor: pointer; color: var(--text-primary); }
.zp-colvis-menu label:hover { background: var(--bg-hover); }
.zp-colvis-menu input { accent-color: var(--accent); }

/* sortable headers */
.zp-table th.zp-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.zp-table th.zp-sort::after { content: "\f0dc"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  margin-left: 6px; opacity: .3; font-size: 10px; }
.zp-table th.zp-sort.asc::after { content: "\f0de"; opacity: .9; color: var(--accent); }
.zp-table th.zp-sort.desc::after { content: "\f0dd"; opacity: .9; color: var(--accent); }
.zp-table th.zp-chk, .zp-table td.zp-chk { width: 38px; text-align: center; }
.zp-table input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.zp-table tfoot td { font-weight: 700; background: var(--bg-hover); vertical-align: top;
  border-top: 2px solid var(--border); }
.zp-table .zp-tot-line { display: block; line-height: 1.7; white-space: nowrap; }
.zp-table .zp-tot-head { display: block; color: var(--text-muted); font-size: 11px;
  text-transform: uppercase; letter-spacing: .4px; }
.zp-actions { display: flex; gap: 4px; flex-wrap: nowrap; }
.zp-actions .btn { padding: 5px 9px; }

/* footer: info + pager */
.zp-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.zp-info { font-size: 13px; color: var(--text-muted); }
.zp-pager { display: flex; gap: 4px; flex-wrap: wrap; }
.zp-pager button { min-width: 34px; }
.zp-pager button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.zp-pager button:disabled { opacity: .45; cursor: not-allowed; }
.zp-pager .zp-ell { padding: 6px 4px; color: var(--text-muted); }

/* searchable select */
.zp-sel { position: relative; }
.zp-sel-btn { width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 8px; text-align: left; cursor: pointer; background: var(--bg-secondary);
  border: 1px solid var(--border); color: var(--text-primary); border-radius: var(--radius);
  padding: 9px 12px; font-size: 13px; min-height: 38px; }
.zp-sel-btn .zp-ph { color: var(--text-muted); }
.zp-sel-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zp-sel-drop { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 70;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 6px; }
.zp-sel.open .zp-sel-drop { display: block; }
.zp-sel-drop input { width: 100%; margin-bottom: 6px; }
.zp-sel-list { max-height: 230px; overflow-y: auto; }
.zp-sel-opt { padding: 8px 10px; border-radius: 6px; font-size: 13px; cursor: pointer;
  color: var(--text-primary); }
.zp-sel-opt:hover, .zp-sel-opt.on { background: var(--accent); color: #fff; }
.zp-sel-empty { padding: 8px 10px; font-size: 12px; color: var(--text-muted); }

/* detail list inside the view modal */
.zp-dl { display: grid; grid-template-columns: 1fr; gap: 12px; }
.zp-dl div b { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 3px; }
.zp-dl div span { font-size: 14px; color: var(--text-primary); word-break: break-word; }
.zp-check-yes { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.zp-check-yes input { width: 18px; height: 18px; accent-color: var(--accent); }
.zp-field-err { border-color: var(--red) !important; box-shadow: 0 0 0 2px rgba(218,54,51,.15) !important; }

@media (max-width: 640px) {
  .zp-search input { width: 100%; }
  .zp-toolbar-r, .zp-search { width: 100%; }
  .zp-filters { grid-template-columns: 1fr; }
}

@media print {
  .sidebar, .topbar, .zp-toolbar, .zp-foot, .zp-filters-card, .zp-head-actions, .page-actions { display: none !important; }
  .main-wrapper { margin: 0 !important; }
}

/* keep dates, numbers and money on one line; the table scrolls sideways instead */
.zp-table th, .zp-table td { white-space: nowrap; }

/* multi-select range list (bulk allocations) */
.zp-msel { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; background: var(--bg-secondary); }
.zp-msel .zp-search input { width: 100%; }
.zp-msel-bar { display: flex; gap: 6px; align-items: center; margin: 8px 0; flex-wrap: wrap; }
.zp-msel-bar .zp-info { margin-left: auto; }
.zp-msel-list { max-height: 240px; overflow-y: auto; display: grid; gap: 2px; }
.zp-msel-list label { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 6px;
  font-size: 13px; cursor: pointer; color: var(--text-primary); }
.zp-msel-list label:hover { background: var(--bg-hover); }
.zp-msel-list input { width: 16px; height: 16px; accent-color: var(--accent); }
.zp-msel-list input:disabled + * , .zp-msel-list label:has(input:disabled) { opacity: .5; cursor: not-allowed; }

/* the premium skin gives ".text-success" inside table cells a monospace font,
   which also hit the ✔ icon and turned it into an empty box — keep icons on
   the icon font */
table td i.fas, table td i.fa-solid, table td i.far, .zp-table i.fas {
  font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important;
}

/* action colours matched to the reference panel:
   view = blue, allocate / remove-token = cyan, edit = orange, delete = red */
.zp-btn-blue, .zp-btn-cyan { color: #fff !important; border: 1px solid transparent !important; }
.zp-btn-blue { background: linear-gradient(180deg, #2A7FB8, #1F6F9C) !important; }
.zp-btn-blue:hover { background: linear-gradient(180deg, #3390cc, #1F6F9C) !important; }
.zp-btn-cyan { background: linear-gradient(180deg, #2E8FA6, #1E7A8C) !important; }
.zp-btn-cyan:hover { background: linear-gradient(180deg, #37a2ba, #1E7A8C) !important; }
.zp-btn-blue i, .zp-btn-cyan i { color: #fff !important; }
.zp-table .btn-icon { color: var(--text-primary); background: var(--bg-hover); border: 1px solid var(--border);
  width: 30px; height: 30px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; }
.zp-table .btn-icon:hover { border-color: var(--accent); color: var(--accent); }

/* Excel List modal: wider + full scroll so the paginated number table fits */
.modal:has(#zal-out) { max-width: 1100px; }
/* fallback for browsers without :has() */
.modal-xl { max-width: 1100px !important; }

/* fix: paginator buttons inside a modal must scroll into view, not be clipped */
.modal .zp-pager { display:flex; flex-wrap:wrap; gap:4px; }