/* ==========================================================================
   E-Library Common Utilities
========================================================================== */

/* ── E-Library : DataTable Full Override (Table) ───────────────────────────────────────── */

/* Header (IMPORTANT: target wrapper + scroll head) */
.elDetailsTable_wrapper table thead th,
.elDetailsTable_wrapper .dt-scroll-head table thead th {
  background: #21336d !important;
  color: #ffffff !important;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.03em;
  border-right: 1px solid rgba(255, 255, 255, 0.12);
  padding: 11px 12px;
}

.elDetailsTable_wrapper table thead th:last-child {
  border-right: none;
}

/* Fix inner header wrapper (VERY IMPORTANT) */
.elDetailsTable_wrapper .dt-column-header {
  color: #ffffff !important;
}

/* Sort icons (DataTables v2 style) */
.elDetailsTable_wrapper .dt-column-order::before,
.elDetailsTable_wrapper .dt-column-order::after {
  color: rgba(255, 255, 255, 0.65) !important;
  opacity: 1 !important;
}

/* Rows */
.elDetailsTable tbody tr:nth-child(odd) {
  background: #ffffff;
}

.elDetailsTable tbody tr:nth-child(even) {
  background: #e8f1fb;
}

.elDetailsTable {
  border-bottom: none;
}

.elDetailsTable tbody tr {
  border-bottom: 1px solid #dce8f5;
}

/* Cells */
.elDetailsTable td {
  padding: 10px 12px;
  white-space: normal !important;
  color: #1e2a45;
  font-size: 13px;
  border-right: none;
}

.elDetailsTable td:first-child,
.elDetailsTable th:first-child {
  width: 35%;
  min-width: 250px;
}

/* ── E-Library : DataTable Full Override (Pagination) ───────────────────────────────────────── */

/* Base */
.elDetailsTable_wrapper .dt-paging-button .page-link {
  background: #ffffff !important;
  color: #21336d !important;
  border: 1px solid #d0d9e6 !important;
}

/* Active */
.elDetailsTable_wrapper .dt-paging-button.page-item.active .page-link {
  background: #21336d !important;
  color: #ffffff !important;
  border-color: #21336d !important;
}

/* Hover */
.elDetailsTable_wrapper .dt-paging-button .page-link:hover {
  background: #eef3fb !important;
  color: #21336d !important;
  border-color: #21336d !important;
}

/* Disabled */
.elDetailsTable_wrapper .dt-paging-button.disabled .page-link {
  background: #f5f7fa !important;
  color: #999 !important;
  border-color: #e0e6ef !important;
  cursor: not-allowed;
}

/* Remove Bootstrap focus */
.elDetailsTable_wrapper .dt-paging-button .page-link:focus {
  box-shadow: none !important;
}

/* ── E-Library : Back Button ───────────────────────────────────────── */

.elBackBtn {
  border-radius: 999px !important;
  padding: 8px 26px !important;
  font-size: 13px;
  font-weight: 600;
  background: #21336d !important;
  color: #ffffff !important;
  border: none !important;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.elBackBtn:hover {
  background: #1a2a5c !important;
  transform: translateY(-1px);
}

.elBackBtn:active {
  transform: translateY(0);
}

/* ── E-Library Card Footer ───────────────────────── */

.el-card-footer {
  padding: 9px 18px;
  background: #f4ede0;
  border-top: 1px solid #d4c5a9;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.el-view-more {
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  background: #eaf3ff;
  color: #1976d2;
  border: 1px solid #b9d7fb;
  transition: 0.2s ease;
  cursor: pointer;
}

.el-view-more:hover {
  background: #dbeafe;
  border-color: #90c2ff;
  color: #1565c0;
}

.el-download-btn {
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
  background: #e8f8f6;
  color: #0f766e;
  border: 1px solid #9dd9d2;
  transition: 0.2s ease;
  cursor: pointer;
}

.el-download-btn:hover {
  background: #d5f3ef;
  border-color: #7ecfc5;
  color: #0b5e57;
}

/* =============================================================================
   RESPONSIVE
   Desktop ≥ 993px | Tablet 577–992px | Mobile ≤ 576px | Small ≤ 390px
============================================================================= */

/* ── DataTable Mobile Fix (≤ 767px) ───────── */

@media (max-width: 767px) {

  /* Make the top controls row a single inline flex row */
  .elDetailsTable_wrapper .row.mt-2:first-of-type {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: 10px;
    justify-content: space-around !important;
  }

  /* Key fix: collapse the two col-md-auto divs to their content width */
  .elDetailsTable_wrapper .row.mt-2:first-of-type>.col-md-auto {
    width: auto !important;
    flex: 0 0 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    /* kills me-auto / ms-auto Bootstrap spacing */
  }

  /* Keep dt-length and dt-search inline */
  .elDetailsTable_wrapper .dt-length,
  .elDetailsTable_wrapper .dt-search {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
  }

  /* Hide "entries per page" label, keep only the select */
  .elDetailsTable_wrapper .dt-length label {
    display: none;
  }

  /* Search input width */
  .elDetailsTable_wrapper .dt-search input {
    width: auto !important;
    flex: 1 1 auto;
    min-width: 80px;
  }
}