/* =======================================================
   TRT E-Library (modern, responsive, variables from global :root)
   This file assumes your main :root variables live in style.css.
   ======================================================= */

/* ---------- Cards ---------- */
.trt-elibrary-cards{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;
  margin:20px 0;
}
.trt-elibrary-card{
  display:flex; flex-direction:column; gap:10px;
  padding:14px;
  border-radius:12px;
  border:1px solid var(--color-gray-focus);
  background:var(--color-white);
  box-shadow:0 2px 8px rgba(0,0,0,.05);
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.trt-elibrary-card:hover{
  transform:translateY(-4px);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
}
.trt-elibrary-card-img{
  aspect-ratio:16/9;
  border-radius:10px;
  overflow:hidden;
  background:var(--color-gray-light);
}
.trt-elibrary-card-img img{ width:100%; height:100%; object-fit:cover }
.trt-elibrary-card-title{ font-weight:700; color:var(--text-default) }
.trt-elibrary-card-blurb{ font-size:.9rem; color:var(--text-muted) }

/* ---------- Section heading ---------- */
.trt-elibrary-heading{
  margin:1rem 0 1.25rem;
  font-size:1.25rem;
  font-weight:800;
  color:var(--text-default);
}

/* ---------- Table wrapper (x-scroll only on ≤1024px) ---------- */
.trt-elib-wrap{ width:100% }           /* keep clean on desktop */
@media (max-width:1024px){
  .trt-elib-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch }
  .trt-elibrary-table{ min-width:720px } /* readable columns on small screens */
}

/* ---------- DataTables top/bottom bars ---------- */
.trt-dt-top, .trt-dt-bottom{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin:.75rem 0;
}

/* Entries per page (length) */
.dataTables_length label{
  display:flex; align-items:center; gap:8px;
  color:var(--text-default); font-size:.95rem;
}
.dataTables_length select{
  padding:.45rem .6rem;
  border:1px solid var(--color-gray-focus);
  border-radius:10px;
  background:var(--color-white);
  outline:0;
}

/* Search */
.dataTables_filter label{
  display:flex; align-items:center; gap:8px;
  color:var(--text-default); font-size:.95rem;
}
.dataTables_filter input{
  padding:.55rem .75rem; min-width:240px;
  border:1px solid var(--color-gray-focus);
  border-radius:10px; outline:0; background:var(--color-white);
}
.dataTables_filter input:focus{
  border-color:var(--color-accent);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

/* ---------- Table look ---------- */
table.trt-elibrary-table.dataTable{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--color-white);
}
table.trt-elibrary-table thead th{
  background:var(--color-gray-light);
  border-bottom:1px solid var(--color-gray-focus);
  padding:.9rem .85rem;
  color:var(--color-blue);
  font-weight:800;
}
table.trt-elibrary-table thead th:first-child{ border-top-left-radius:12px }
table.trt-elibrary-table thead th:last-child{ border-top-right-radius:12px }

table.trt-elibrary-table tbody td{
  padding:.85rem; color:var(--text-default);
  border-bottom:1px solid #eef1f4;
}
table.trt-elibrary-table tbody tr:hover{ background:var(--color-gray-bg) }

/* Sr No column */
table.trt-elibrary-table thead th:first-child,
table.trt-elibrary-table tbody td:first-child{
  text-align:center; width:96px;
}

/* View/Download links */
.trt-elibrary-table a{
  text-decoration:none; font-weight:700;
}
.trt-elibrary-table a[target="_blank"]{ color:var(--color-blue) }     /* View */
.trt-elibrary-table a[href*="download"]{ color:var(--color-orange) }  /* Download */
.trt-elibrary-table a:hover{ text-decoration:underline }

/* ---------- Info & Pagination ---------- */
/* Make sure the default DataTables info is always visible */
.dataTables_wrapper .dataTables_info{
  display:block !important;
  color:var(--text-muted);
  font-size:.95rem;
  padding:.35rem 0;
  margin-top:.25rem;
}

/* Custom backup info (inserted by JS into .trt-dt-bottom) */
.trt-dt-custom-info{
  margin-left:auto;
  margin-right:12px;
  color:var(--text-muted);
  font-size:.95rem;
}

/* Bottom bar layout (info + pagination) */
.trt-dt-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.dataTables_paginate{
  display:flex !important;
  gap:8px; align-items:center; justify-content:flex-end; margin:.75rem 0;
}
.dataTables_paginate .paginate_button{
  padding:.45rem .7rem; line-height:1;
  border:1px solid var(--color-gray-focus);
  background:var(--color-white);
  color:var(--text-default);
  border-radius:10px; cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
.dataTables_paginate .paginate_button:hover{
  border-color:var(--color-accent);
  transform:translateY(-1px);
}
.dataTables_paginate .paginate_button.current{
  background:var(--color-primary);
  color:#fff; border-color:var(--color-primary);
}
.dataTables_paginate .paginate_button.disabled{
  opacity:.45; cursor:not-allowed;
}

/* ---------- Responsive tweaks ---------- */
@media (max-width:640px){
  .dataTables_filter input{ min-width:160px }
  .trt-elibrary-cards{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px }
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  .trt-elibrary-card{ transition:none }
  .dataTables_paginate .paginate_button{ transition:none }
}