/* ============================================================
   index.css — table, export, pagination & dropdown refinements
   Loaded last, so these rules are the final word on DataTables
   look-and-feel. Kept intentionally small and consistent.
   ============================================================ */

@font-face {
  font-family: 'fox';
  src: url('../fonts/font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'fox', 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1f2430;
}

a { text-decoration: none; }
a:hover { text-decoration: none; }

/* ---------- Compact tables (small th / td, responsive) ---------- */
table.dataTable,
.table-sm {
  font-size: .78rem;
}
table.dataTable thead th,
.table-sm > thead > tr > th {
  padding: .34rem .5rem;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .3px;
  white-space: nowrap;
}
table.dataTable tbody td,
.table-sm > tbody > tr > td {
  padding: .3rem .5rem;
  vertical-align: middle;
}
/* horizontal scroll on small screens instead of breaking the layout */
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.dataTables_wrapper { width: 100%; }

/* ---------- DataTables control row: export LEFT, search RIGHT ---------- */
.dataTables_wrapper .dt-buttons,
.dataTables_wrapper div.dt-buttons {
  float: none;                 /* undo any legacy float */
  display: flex;
  flex-wrap: wrap;             /* responsive: wrap on narrow screens */
  gap: .3rem;
  justify-content: flex-start; /* export buttons on the LEFT */
  margin: 0 0 .25rem 0;
}
.dt-left { display: flex; align-items: center; }

/* Export buttons: small, rounded, responsive */
.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-buttons button.dt-button,
.dt-buttons .buttons-copy,
.dt-buttons .buttons-csv,
.dt-buttons .buttons-excel,
.dt-buttons .buttons-pdf,
.dt-buttons .buttons-print {
  border: 1px solid var(--bp-border, #e4e7ec);
  border-radius: .5rem;        /* rounded corners */
  background: #fff;
  color: #374151;
  font-size: .72rem;
  font-weight: 500;
  padding: .22rem .55rem;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  transition: all .15s ease;
  line-height: 1.2;
}
.dataTables_wrapper .dt-buttons .btn:hover,
.dataTables_wrapper .dt-buttons button.dt-button:hover {
  background: var(--bp-primary, #9a1b1b);
  color: #fff;
  border-color: var(--bp-primary, #9a1b1b);
}

/* Search box: aligned right, sensible width */
.dataTables_wrapper .dataTables_filter { text-align: right; }
.dataTables_wrapper .dataTables_filter input {
  width: 180px;
  max-width: 60vw;
  border: 1px solid var(--bp-border, #e4e7ec);
  border-radius: .5rem;
  padding: .24rem .55rem;
  font-size: .78rem;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--bp-primary-light, #c0392b);
  box-shadow: 0 0 0 .18rem rgba(154, 27, 27, .12);
}

/* ---------- Pagination: RIGHT, small, rounded, responsive ---------- */
.dataTables_wrapper .dataTables_paginate {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;   /* pagination on the RIGHT */
  gap: .2rem;
  margin-top: .4rem;
}
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .page-link {
  border-radius: .45rem !important;   /* rounded */
  padding: .16rem .5rem !important;
  font-size: .74rem;
  min-width: 1.9rem;
  text-align: center;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .page-item.active .page-link {
  background: var(--bp-primary, #9a1b1b) !important;
  border-color: var(--bp-primary, #9a1b1b) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate ul.pagination {
  margin: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.dataTables_wrapper .dataTables_info { font-size: .74rem; color: var(--bp-muted, #6b7280); padding-top: .45rem; }
.dataTables_wrapper .dataTables_length select {
  border-radius: .5rem;
  border: 1px solid var(--bp-border, #e4e7ec);
  padding: .18rem 1.4rem .18rem .5rem;
  font-size: .78rem;
}

/* Keep the control rows readable on small screens */
@media (max-width: 575.98px) {
  .dataTables_wrapper .dataTables_filter { text-align: left; margin-top: .35rem; }
  .dataTables_wrapper .dataTables_filter input { width: 100%; max-width: 100%; }
  .dataTables_wrapper .dataTables_paginate { justify-content: center; }
  .dataTables_wrapper .dt-buttons { justify-content: center; }
}

/* ---------- Uniform dropdowns: short caret + aligned item icons ---------- */
.dropdown-toggle::after {
  margin-left: .4rem;
  vertical-align: .12em;
  border-top: .3em solid;      /* short, uniform caret */
  border-right: .3em solid transparent;
  border-left: .3em solid transparent;
  border-bottom: 0;
  opacity: .75;
}
.dropdown-menu {
  border: 1px solid var(--bp-border, #e4e7ec);
  border-radius: .55rem;
  box-shadow: 0 8px 26px rgba(16, 24, 40, .12);
  font-size: .82rem;
  padding: .3rem;
}
.dropdown-menu .dropdown-item {
  border-radius: .4rem;
  padding: .34rem .6rem;
  display: flex;
  align-items: center;
}
.dropdown-menu .dropdown-item i {
  width: 1.15rem;              /* icons aligned in a uniform column */
  text-align: center;
  margin-right: .4rem;
  font-size: .95rem;
  opacity: .85;
}
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
  background: var(--bp-primary, #9a1b1b);
  color: #fff;
}
.dropdown-menu .dropdown-header {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--bp-muted, #6b7280);
  padding: .3rem .6rem;
}

/* Top-bar branch switcher */
.bp-branch-switch .dropdown-toggle {
  border: 1px solid var(--bp-border, #e4e7ec);
  background: #fff;
  font-weight: 600;
  font-size: .78rem;
}
.bp-branch-badge {
  font-size: .74rem;
  color: var(--bp-muted, #6b7280);
  border: 1px solid var(--bp-border, #e4e7ec);
  border-radius: .5rem;
  padding: .2rem .5rem;
}