/* Tahseeel Collect redesign bundle.
   Loaded globally from header.php — safe by construction: the token files
   only declare @font-face and :root custom properties, and chrome.css is
   scoped under .ds-shell / .ds-* classes, so pages still on the legacy
   design are visually unaffected. tokens/base.css is intentionally NOT
   imported (it styles bare <a> tags globally). */
@import "tokens/fonts.css";
@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";
@import "tokens/motion.css";
@import "chrome.css";

/* ==============================================================
   DS restyle — DataTables 1.13.1 (bootstrap5 theme) chrome + SweetAlert2
   dialogs. CSS-only: the DataTables engine, its generated bootstrap5
   markup (.dataTables_wrapper, ul.pagination > li.page-item > a.page-link,
   input.form-control, select.form-select) and the SweetAlert2 v11 DOM
   (.swal2-*, driven by `new swal(...)` calls across Collect) are untouched.
   Everything below is scoped under .dataTables_wrapper or .swal2-* so it
   cannot leak into unrelated markup. Loaded globally by header.php /
   headerIndex.php, after both libraries' own stylesheets, so this wins the
   cascade without needing broad !important use — !important is kept only
   where Bootstrap/Metronic utility classes (.form-control, .pagination)
   would otherwise tie on source order.
   ============================================================== */

/* ---------- Task 1: DataTables chrome ---------- */

.dataTables_wrapper { font-family: var(--font-latin); }

/* search box */
.dataTables_wrapper .dataTables_filter label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-secondary);
}
.dataTables_wrapper .dataTables_filter input.form-control {
  height: 40px;
  margin-inline-start: 8px !important;
  padding: 0 14px;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-field);
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: none !important;
  font-family: inherit;
}
.dataTables_wrapper .dataTables_filter input.form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--focus-ring) !important;
  outline: none;
}

/* length menu — restyled, not hidden: keep the engine's control */
.dataTables_wrapper .dataTables_length label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-secondary);
}
.dataTables_wrapper .dataTables_length select.form-select {
  height: 36px;
  padding: 0 28px 0 10px;
  border: 1px solid var(--border) !important;
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink-secondary);
  background-color: var(--surface);
  box-shadow: none !important;
}
.dataTables_wrapper .dataTables_length select.form-select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px var(--focus-ring) !important;
  outline: none;
}

/* info text */
.dataTables_wrapper .dataTables_info {
  color: var(--ink-tertiary);
  font-size: 13px;
  padding-top: 0.85em;
}

/* pagination — bootstrap5 theme renders ul.pagination > li.page-item > a.page-link */
.dataTables_wrapper .dataTables_paginate ul.pagination { margin: 2px 0; }
.dataTables_wrapper .pagination .page-link {
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--ink-secondary) !important;
  background: var(--surface) !important;
  font-size: 13px;
  font-weight: 600;
  margin: 0 3px;
  padding: 6px 12px;
  box-shadow: none !important;
}
.dataTables_wrapper .pagination .page-item:not(.disabled):not(.active) .page-link:hover {
  background: var(--navy-tint) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}
.dataTables_wrapper .pagination .page-link:focus {
  box-shadow: 0 0 0 4px var(--focus-ring) !important;
  outline: none;
}
.dataTables_wrapper .pagination .page-item.active .page-link {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #FFFFFF !important;
}
.dataTables_wrapper .pagination .page-item.disabled .page-link {
  color: var(--ink-tertiary) !important;
  background: var(--surface) !important;
  border-color: var(--divider) !important;
}

/* table header/cells generated inside a bare .dataTables_wrapper (pages that
   already wrap their table in .ds-tablecard keep the fuller rules already
   defined for that class in chrome.css — this only fills the gap for pages
   without that extra wrapper, matching the same look). */
.dataTables_wrapper table.dataTable > thead > tr > th {
  padding: 10px 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-tertiary) !important;
  background: var(--surface) !important;
  border-bottom: 1px solid var(--divider) !important;
  text-align: start !important;
}
.dataTables_wrapper table.dataTable > tbody > tr > td {
  padding: 13px 12px !important;
  font-size: 13.5px !important;
  color: var(--ink) !important;
  border-bottom: 1px solid var(--divider) !important;
  vertical-align: middle !important;
}
.dataTables_wrapper table.dataTable > tbody > tr:hover > td { background: rgba(42, 55, 71, 0.02) !important; }

/* ---------- Task 2: SweetAlert2 dialogs ---------- */
/* SweetAlert2 v11, loaded globally (footerJS.php / footerJSLogin.php) and
   invoked via the legacy `new swal(...)` alias — the rendered DOM is
   standard .swal2-* markup, confirmed against the loaded bundle
   (assets/downloadedAssets/js/cdn.jsdelivr.net_npm_sweetalert2@11). */

.swal2-popup {
  border-radius: 20px !important;
  padding: 30px 26px 26px !important;
  background: var(--surface) !important;
  box-shadow: 0 20px 48px rgba(33, 43, 56, 0.16), 0 2px 8px rgba(33, 43, 56, 0.08) !important;
  font-family: var(--font-latin) !important;
}
.swal2-title {
  color: var(--ink) !important;
  font-size: 19px !important;
  font-weight: 800 !important;
  letter-spacing: var(--ls-snug);
  padding: 0 0.4em 4px !important;
}
.swal2-html-container {
  color: var(--ink-secondary) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
}
.swal2-actions { gap: 10px; margin-top: 22px !important; }
.swal2-styled.swal2-confirm {
  background: var(--navy) !important;
  border: 0 !important;
  border-radius: 13px !important;
  color: #FFFFFF !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  padding: 11px 22px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.swal2-styled.swal2-confirm:hover { background: #354456 !important; }
.swal2-styled.swal2-confirm:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring) !important;
}
.swal2-styled.swal2-cancel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 13px !important;
  color: var(--ink-secondary) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  padding: 10px 22px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.swal2-styled.swal2-cancel:hover {
  border-color: var(--ink-tertiary) !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
}
.swal2-styled.swal2-cancel:focus {
  outline: none;
  box-shadow: 0 0 0 4px var(--focus-ring) !important;
}

/* icon rings — DS tint colors, outline + line strokes only, never a solid
   fill (the icon's own background must stay transparent: SweetAlert2 reads
   .swal2-popup's computed background at runtime to mask the success-tick
   overflow pieces, so filling .swal2-icon itself would show a seam). */
.swal2-icon.swal2-success { border-color: var(--success) !important; color: var(--success) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: var(--success-tint) !important; }
.swal2-success-line-tip, .swal2-success-line-long { background-color: var(--success) !important; }
.swal2-icon.swal2-error { border-color: var(--accent) !important; color: var(--accent) !important; }
.swal2-error [class^="swal2-x-mark-line"] { background-color: var(--accent) !important; }
.swal2-icon.swal2-warning { border-color: var(--accent) !important; color: var(--accent) !important; }
.swal2-icon.swal2-info,
.swal2-icon.swal2-question { border-color: var(--navy) !important; color: var(--navy) !important; }