/* ==========================================================================
   dt.assignedstaff.css (MERGED / CLEAN)
   Assigned Staff — UI aligned to Leave MI language
   - Role + Client filters are REAL <select> dropdowns (Bootstrap-like)
   - Sorting: header click + direction toggle button (SVG injected)
   - Keep all JS-driven functionality intact (is-selected, detail open)
   - Desktop: detail hidden until selection; table expands full width
   - Mobile: detail becomes drawer; backdrop only on mobile
   ========================================================================== */

/* ---------- Theme tokens ---------- */
:root{
  --dt-color-surface: #ffffff;
  --dt-color-page-bg: #f5f6fa;
  --dt-color-ink: #1f2430;
  --dt-color-muted: #6c7280;
  --dt-border: #e7e9f2;

  --dt-radius-lg: 16px;
  --dt-radius-md: 12px;
  --dt-radius-sm: 10px;
  --dt-radius-pill: 999px;

  --dt-shadow: 0 10px 30px rgba(17,24,39,.06);
  --dt-shadow-soft: 0 6px 16px rgba(17,24,39,.06);

  --dt-accent: var(--dt-color-brand-start, #f57c00);
  --dt-accent-2: var(--dt-color-brand-mid, #ff9f1a);

  --dt-gap: 18px;

  --dt-avatar-size: 46px;
  --dt-avatar-detail-size: 78px;

  /* Bootstrap-ish focus */
  --dt-focus-ring: rgba(13,110,253,.25);
  --dt-focus-border: #86b7fe;

  /* SS2 border */
  --dt-ctl-border: #949494;

  /* Select chevron (V outline) */
  --dt-select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%236c7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- Page container ---------- */
.dt-assignedstaff{
  padding: 1.25rem;
  background: var(--dt-color-page-bg);
  color: var(--dt-color-ink);
}

#dtAssignedStaffRoot.dt-assignedstaff{
  background: transparent !important;
}

.dt-assignedstaff h1,
.dt-assignedstaff .h3{
  letter-spacing: -0.02em;
  font-weight: 400;
}

/* ---------- Card base ---------- */
.dt-assignedstaff .dt-card{
  background: var(--dt-color-surface);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius-lg);
  box-shadow: var(--dt-shadow-soft);
}

.dt-assignedstaff .dt-card--padded{
  padding: 14px 14px;
}

.dt-assignedstaff .dt-card__body{
  padding: 0;
}

/* ---------- Layout: table + detail ---------- */
.dt-assignedstaff-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--dt-gap);
  align-items: start;
}

/* JS adds dt-assignedstaff--detail-open */
.dt-assignedstaff--detail-open .dt-assignedstaff-layout{
  grid-template-columns: 1fr 380px;
}

/* Hide aside when not open (desktop) */
#dtStaffDetail{ display: none; }
.dt-assignedstaff--detail-open #dtStaffDetail{ display: block; }

/* ---------- Shared control styling (Search / Select) ---------- */
.dt-assignedstaff .form-control,
.dt-assignedstaff .form-select,
.dt-assignedstaff .dt-staff-search,
.dt-assignedstaff #dtStaffPageSize{
  border-radius: .25rem !important;
  border: 1px solid var(--dt-ctl-border) !important;
  background-color: #fff !important;
  box-shadow: none !important;
  color: var(--dt-color-ink);
  height: 38px;
  padding: .375rem .75rem !important;
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
}

/* Force dropdown chevron (Bootstrap-like) */
.dt-assignedstaff .form-select,
.dt-assignedstaff #dtStaffPageSize,
.dt-assignedstaff #dtRoleInput,
.dt-assignedstaff #dtClientInput{
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  background-color: #fff !important;
  background-image: var(--dt-select-chevron) !important;
  background-repeat: no-repeat !important;
  background-position: right .75rem center !important;
  background-size: 16px 16px !important;

  padding-right: 2.25rem !important;
}

/* Focus (kept clean) */
.dt-assignedstaff .form-control:focus,
.dt-assignedstaff .form-select:focus,
.dt-assignedstaff .dt-staff-search:focus,
.dt-assignedstaff #dtStaffPageSize:focus{
  outline: none !important;
  box-shadow: none !important;
  border-color: var(--dt-ctl-border) !important;
}

/* ---------- Filters toolbar (transparent) ---------- */
.dt-toolbar--filters{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 10px 10px;
  margin-bottom: 12px;
}

/* One-row filter line on desktop */
.dt-toolbar__left--row{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

/* Search takes remaining width */
.dt-field--search-inline{
  margin: 0 !important;
  flex: 1 1 640px;
  min-width: 320px;
}
.dt-field--search-inline .dt-staff-search{ width: 100%; }

/* Role/Client containers keep same width */
.dt-assignedstaff #dtRoleCombo,
.dt-assignedstaff #dtClientCombo{
  width: 240px;
  min-width: 240px;
  flex: 0 0 240px;
}

/* Control wrapper should stretch */
.dt-assignedstaff #dtRoleCombo .dt-combo__control,
.dt-assignedstaff #dtClientCombo .dt-combo__control{
  width: 100%;
}

/* Responsive wrap */
@media (max-width: 991.98px){
  .dt-toolbar__left--row{ flex-wrap: wrap; }
  .dt-field--search-inline{ flex: 1 1 100%; min-width: 100%; }

  .dt-assignedstaff #dtRoleCombo,
  .dt-assignedstaff #dtClientCombo{
    flex: 1 1 240px;
    min-width: 240px;
    width: auto;
  }
}

/* ---------- IMPORTANT: hide combo-only UI (menu/toggle) but keep IDs in DOM ---------- */
.dt-assignedstaff .dt-combo__menu{ display: none !important; }
.dt-assignedstaff #dtRoleToggle,
.dt-assignedstaff #dtClientToggle,
.dt-assignedstaff #dtRoleClear,
.dt-assignedstaff #dtClientClear{
  display: none !important;
}

/* ---------- Controls bar: Rows/page + Pager + SortDir ---------- */
.dt-assignedstaff .dt-staff-controlsbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: nowrap;
  margin: 10px 0 14px;
}

.dt-assignedstaff .dt-rows-control{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.dt-assignedstaff .dt-meta-row__label{
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  white-space: nowrap;
  margin: 0;
}

/* Sort direction icon button */
.dt-sortdir-wrap{
  display: inline-flex;
  align-items: center;
}
.dt-assignedstaff .dt-sortdir-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(226,232,240,.95) !important;
  background: #fff !important;
  box-shadow: none !important;
}
.dt-assignedstaff .dt-sortdir-btn:hover{
  background: #f9fafb !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06) !important;
}
.dt-assignedstaff .dt-sortdir-btn svg{
  display: block;
}

/* Pager */
.dt-assignedstaff .dt-staff-pager--top{
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Hide "Page X of Y" on desktop */
@media (min-width: 992px){
  .dt-assignedstaff .dt-staff-pageinfo{ display: none !important; }
}

/* Pager numbers wrap */
.dt-assignedstaff .dt-staff-pagenums{
  display: inline-flex;
  align-items: center;
  gap: 1px;
  flex-wrap: nowrap;
}

/* Pagination buttons (rounded-rectangle) */
#dtStaffPrev,
#dtStaffNext,
#dtStaffPageNums .dt-pagebtn{
  border: 1px solid rgba(226,232,240,.95);
  background: var(--dt-color-surface);
  border-radius: 10px;
  padding: .3rem .55rem;
  font-size: .875rem;
  font-weight: 400;
  cursor: pointer;
  transition: background-color .15s ease,
              border-color .15s ease,
              color .15s ease,
              box-shadow .15s ease;
}

#dtStaffPrev:hover:not(:disabled),
#dtStaffNext:hover:not(:disabled),
#dtStaffPageNums .dt-pagebtn:hover{
  background: #f9fafb;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

#dtStaffPrev:disabled,
#dtStaffNext:disabled,
#dtStaffPageNums .dt-pagebtn:disabled{
  opacity: .55;
  cursor: not-allowed;
}

#dtStaffPageNums .dt-pagebtn.is-active{
  border-color: rgba(200, 30, 30, 0.35);
  background: linear-gradient(135deg, #fee2e2, #fffbeb);
  color: #b91c1c;
}

/* Mobile: allow controls bar to wrap */
@media (max-width: 991.98px){
  .dt-assignedstaff .dt-staff-controlsbar{ flex-wrap: wrap; }
}

/* ---------- Legacy sort select kept in DOM for JS compatibility ---------- */
.dt-assignedstaff .dt-sort-legacy{
  display: none !important;
}

/* ---------- Table wrapper ---------- */
.dt-assignedstaff .dt-staff-table-wrapper{
  border: 0 !important;
  box-shadow: none !important;
  border-radius: var(--dt-radius-lg) !important;
  overflow: hidden !important;
  background: var(--dt-color-surface) !important;
}

.dt-staff-table{
  margin: 0;
  background: transparent !important;
}

.dt-assignedstaff .dt-staff-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--dt-color-surface) !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--dt-color-ink) !important;
  padding: 16px 14px !important;
  border-bottom: 1px solid rgba(231,233,242,.9) !important;
}

/* Sort header button */
.dt-assignedstaff .dt-sortbtn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.dt-assignedstaff .dt-sortbtn:hover{
  opacity: .92;
}
.dt-assignedstaff .dt-sorticon{
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--dt-color-muted);
}
.dt-assignedstaff .dt-sortth.is-sorted .dt-sorticon{
  color: #111827;
}

.dt-staff-table tbody td{
  padding: 12px 12px;
  vertical-align: middle;
  border-top: 1px solid rgba(231,233,242,.75);
  background: transparent !important;
  font-weight: 400;
  font-size: 14px;
  font-family: Arial, sans-serif;
}

.dt-staff-row{ cursor: pointer; }
.dt-staff-row:hover{ background: rgba(245,124,0,.05); }

.dt-staff-row.is-selected{
  background: rgba(245,124,0,.08) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Optional left accent */
.dt-staff-row.is-selected td:first-child{ position: relative; }
.dt-staff-row.is-selected td:first-child::before{
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: rgba(245,124,0,.55);
}

/* Name weight in table */
.dt-assignedstaff .dt-staff-table td[data-label="Name"] .fw-semibold{
  font-size: 14px;
  font-family: Arial, sans-serif;
  font-weight: 500 !important;
}

/* ---------- Avatars ---------- */
.dt-staff-avatar{
  width: var(--dt-avatar-size) !important;
  height: var(--dt-avatar-size) !important;
  min-width: var(--dt-avatar-size) !important;
  min-height: var(--dt-avatar-size) !important;
  max-width: var(--dt-avatar-size) !important;
  max-height: var(--dt-avatar-size) !important;
  aspect-ratio: 1 / 1;
  flex: 0 0 var(--dt-avatar-size);
  display: inline-grid;
  place-items: center;
  border-radius: 999px !important;
  overflow: hidden;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  color: #b91c1c;
  background: transparent;
  border: 1px solid rgba(245,124,0,.35) !important;
}

.dt-staff-avatar img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  border-radius: 999px !important;
}

.dt-staff-avatar--detail{
  width: var(--dt-avatar-detail-size) !important;
  height: var(--dt-avatar-detail-size) !important;
  min-width: var(--dt-avatar-detail-size) !important;
  min-height: var(--dt-avatar-detail-size) !important;
  max-width: var(--dt-avatar-detail-size) !important;
  max-height: var(--dt-avatar-detail-size) !important;
  flex: 0 0 var(--dt-avatar-detail-size);
  border-radius: 999px !important;
  border: 1px solid rgba(245,124,0,.35) !important;
  background: transparent;
  box-shadow: 0 12px 24px rgba(17,24,39,.08);
  font-size: 1.1rem;
  color: #b91c1c;
  font-weight: 600 !important;
  font-family: Arial, sans-serif;
}

/* ---------- Detail panel ---------- */
.dt-assignedstaff-detail{
  border-radius: var(--dt-radius-lg);
  overflow: hidden;
}

.dt-detail-close{
  position: absolute;
  top: 12px;
  right: 12px;
  opacity: .7;
}

.dt-detail-hero{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  width: 100%;
}

.dt-detail-name{
  font-family: Arial, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: 1.12rem;
  line-height: 1.25;
  max-width: 320px;
  word-break: break-word;
}
.dt-detail-name::after{
  content: "";
  display: block;
  height: 1px;
  width: min(320px, 90%);
  margin: 12px auto 0;
  background: rgba(231,233,242,.9);
}

.dt-detail-sections{
  padding: 12px;
  display: grid;
  gap: 10px;
}
.dt-detail-block{
  border: 1px solid rgba(231,233,242,.85);
  border-radius: var(--dt-radius-md);
  padding: 10px 10px;
  background: rgba(245, 246, 250, .45);
  font-size: 14px;
  font-family: Arial, sans-serif;
}
.dt-detail-label{
  color: var(--dt-color-muted);
  font-weight: 800;
  font-size: 10px;
  font-family: Arial, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.dt-detail-muted{ color: var(--dt-color-muted); }
.dt-detail-footer{
  margin: 6px 0 0;
  color: var(--dt-color-muted);
  font-size: .86rem;
  font-family: Arial, sans-serif;
}

/* ---------- Backdrop (mobile only) ---------- */
.dt-detail-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(17,24,39,.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 9998;
}
.dt-detail-backdrop.is-visible{
  opacity: 1;
  pointer-events: auto;
}
@media (min-width: 992px){
  .dt-detail-backdrop{ display: none !important; }
}

/* ---------- Mobile drawer behavior ---------- */
@media (max-width: 991.98px){
  .dt-assignedstaff--detail-open .dt-assignedstaff-layout{
    grid-template-columns: 1fr;
  }

  #dtStaffDetail{
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(420px, 92vw);
    transform: translateX(110%);
    transition: transform .22s ease;
    z-index: 9999;
    box-shadow: var(--dt-shadow);
  }

  .dt-assignedstaff--detail-open #dtStaffDetail{
    transform: translateX(0);
  }
}

/* ---------- Kill any plugin info labels ---------- */
.dt-assignedstaff .dataTables_info,
.dt-assignedstaff .datatable-info,
.dt-assignedstaff [id$="_info"]{
  display: none !important;
}

/* Minor polish */
.dt-assignedstaff .small{ color: inherit; }

/* Remove focus glows/outlines everywhere inside this module */
.dt-assignedstaff :focus,
.dt-assignedstaff :focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Clear button (orange outline) */
.dt-assignedstaff #dtStaffClearFilters{
  background: transparent !important;
  color: #f97316 !important;
  border: 1px solid rgba(249, 115, 22, .45) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  font-family: Arial, sans-serif !important;
  font-size: 14px !important;
}
.dt-assignedstaff #dtStaffClearFilters:hover{
  background: rgba(249,115,22,.08) !important;
}





/* ==========================================================================
   SORT ICON FIX (removes legacy triangles + uses our SVG icons)
   ========================================================================== */

/* 1) Some global libs (DataTables etc.) draw arrows using th::before/::after.
      Kill them ONLY inside Assigned Staff table header. */
.dt-assignedstaff .dt-staff-table thead th::before,
.dt-assignedstaff .dt-staff-table thead th::after{
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Also kill common DataTables class-based arrows if they get added */
.dt-assignedstaff .dt-staff-table thead th.sorting,
.dt-assignedstaff .dt-staff-table thead th.sorting_asc,
.dt-assignedstaff .dt-staff-table thead th.sorting_desc,
.dt-assignedstaff .dt-staff-table thead th.sorting_asc_disabled,
.dt-assignedstaff .dt-staff-table thead th.sorting_desc_disabled{
  background-image: none !important;
}
.dt-assignedstaff .dt-staff-table thead th.sorting::before,
.dt-assignedstaff .dt-staff-table thead th.sorting::after,
.dt-assignedstaff .dt-staff-table thead th.sorting_asc::before,
.dt-assignedstaff .dt-staff-table thead th.sorting_asc::after,
.dt-assignedstaff .dt-staff-table thead th.sorting_desc::before,
.dt-assignedstaff .dt-staff-table thead th.sorting_desc::after{
  content: none !important;
  display: none !important;
}

/* 2) Our header sort button layout */
.dt-assignedstaff .dt-sortbtn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 0;               /* th already has padding */
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.dt-assignedstaff .dt-sorticon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: rgba(15, 23, 42, .45);
}

/* Default: hide both icons unless sorted */
.dt-assignedstaff .dt-sortsvg{
  display: none;
}

/* When sorted: show correct icon */
.dt-assignedstaff .dt-sortth.is-sorted.is-asc .dt-sortsvg--asc{ display: block; }
.dt-assignedstaff .dt-sortth.is-sorted.is-desc .dt-sortsvg--desc{ display: block; }

/* Unsorted: show a subtle "asc" icon as hint (optional) */
.dt-assignedstaff .dt-sortth:not(.is-sorted) .dt-sortsvg--asc{
  display: block;
  opacity: .25;
}

/* Stronger icon for active sorted column */
.dt-assignedstaff .dt-sortth.is-sorted .dt-sorticon{
  color: rgba(185, 28, 28, .95);
}

/* Keep your "no outline glow" rule intact */
.dt-assignedstaff .dt-sortbtn:focus,
.dt-assignedstaff .dt-sortbtn:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}