/* ==========================================================================
   Bhagwati Paramedical Institute — Admin/Center Panel Modernization
   Applied globally via the shared admin layout stylesheet include.
   ========================================================================== */

/* ---------- Sidebar: keep it pinned while the page scrolls ---------- */
/* Targets the sidebar by its actual id (#layout-menu, see verticalMenu.blade.php)
   for maximum specificity — a plain class-based rule can be beaten by anything
   else touching `.layout-menu`, an id + !important cannot. Scoped under
   html.layout-menu-fixed so it still respects the off-canvas drawer behavior
   below 992px (that variant intentionally hides the menu via transform until
   toggled open — leaving it alone there is correct, not a bug). */
@media (min-width: 992px) {
  html.layout-menu-fixed #layout-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    z-index: 1200 !important;
  }
  html.layout-menu-fixed:not(.layout-menu-collapsed) .layout-page {
    padding-left: 16.25rem !important;
  }
}

/* ---------- Sidebar logo/brand bar ---------- */
.layout-menu .app-brand {
  padding: 1.35rem 1.5rem 1.15rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 4px;
}
.layout-menu .app-brand-link {
  gap: 10px;
}
.layout-menu .app-brand-logo img {
  border-radius: 8px;
  box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.35);
}
.layout-menu .app-brand-text {
  font-size: 0.92rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  position: relative;
}
.layout-menu .app-brand-text::after {
  content: '';
  display: block;
  width: 26px;
  height: 2px;
  background: #c9a227;
  border-radius: 2px;
  margin-top: 6px;
}

/* ---------- Top navbar ---------- */
.layout-navbar {
  box-shadow: 0 2px 14px -8px rgba(20, 38, 77, 0.25) !important;
}
.layout-navbar .navbar-nav .nav-item .form-control {
  border-radius: 30px;
  background: #f5f6fa;
  border: 1px solid transparent;
  padding-left: 14px;
}
.layout-navbar .navbar-nav .nav-item .form-control:focus {
  background: #fff;
  border-color: #c9a227;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.14);
}
.layout-navbar .bx-search {
  color: #14264d;
}
.layout-navbar .dropdown-user .avatar img {
  border: 2px solid #c9a227;
  padding: 1px;
}
.layout-navbar .dropdown-menu {
  border-radius: 14px;
  box-shadow: 0 20px 45px -20px rgba(20, 38, 77, 0.35);
  border: none;
  padding: 8px;
}
.layout-navbar .dropdown-menu .dropdown-item {
  border-radius: 9px;
  padding: 10px 12px;
}
.layout-navbar .dropdown-menu .dropdown-item:hover {
  background: #eef2f9;
}

/* ---------- Cards, panel-wide ---------- */
.content-wrapper .card {
  border: none;
  border-radius: 14px;
  box-shadow: 0 6px 22px -12px rgba(20, 38, 77, 0.22);
}
.content-wrapper .card .card-header {
  background: transparent;
  border-bottom: 1px solid #eef0f4;
  font-weight: 700;
  color: #14264d;
  padding: 1.1rem 1.25rem;
}
.content-wrapper .card .card-header .btn-primary {
  border-radius: 30px;
}

/* ---------- Tables, panel-wide ---------- */
.table-responsive,
.dataTables_scrollBody,
.dataTables_scrollHead {
  overflow-anchor: none;
}
/* scrollX tables (Certificate Issue List, Certificate Requirement List) size
   their inner table to a fixed pixel width based on column content, which can
   end up narrower than the actual container — leaving `margin:0 auto` to
   center a too-narrow table instead of it filling the available width. Force
   both the header clone and body table to stretch to 100% of their container. */
.dataTables_scrollHeadInner,
.dataTables_scrollHeadInner table.dataTable,
.dataTables_scrollBody table.dataTable {
  width: 100% !important;
}
/* Several pages put `.table-responsive` directly on a `.card-body`/`.card-header`
   that also wraps a Bootstrap `.row` (filter forms above the table). Bootstrap's
   `.row` uses negative side margins normally absorbed by the parent's own padding;
   once that parent becomes a scroll container those negative margins clip the
   row's left edge outside the scrollable area instead. Compensating padding here
   cancels that out so content starts flush at scrollLeft 0 instead of clipped. */
.card-body.table-responsive,
.card-header.table-responsive {
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}
.card-body.table-responsive > .row,
.card-header.table-responsive > .row {
  margin-left: 0;
  margin-right: 0;
}
.content-wrapper table.dataTable thead th {
  text-transform: uppercase;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: #5a6272;
  background: #f7f8fb;
  border-bottom: 2px solid #eef0f4 !important;
}
.content-wrapper table.dataTable tbody tr:hover {
  background: #f7f9fd;
}
.content-wrapper table.dataTable tbody td {
  vertical-align: middle;
}

/* ---------- DataTables controls, panel-wide ---------- */
.dataTables_wrapper .dataTables_filter input {
  border-radius: 30px;
  padding: 0.4rem 1rem;
  border: 1px solid #e4e8f1;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: #c9a227;
  outline: none;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.14);
}
.dataTables_wrapper .dataTables_length select {
  border-radius: 8px;
}
.dataTables_wrapper .pagination .page-link {
  border-radius: 8px;
  margin: 0 2px;
  border: 1px solid #e4e8f1;
}
.dataTables_wrapper .pagination .page-item.active .page-link {
  background-color: #14264d;
  border-color: #14264d;
}
.dataTables_wrapper .dataTables_info {
  color: #6b7280;
  font-size: 13px;
}

/* ---------- Status badges (available for any report/table to use) ---------- */
.bpi-status-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
}
.bpi-status-badge.verified { background: #ebfbee; color: #2f9e44; }
.bpi-status-badge.unverified { background: #fff5f5; color: #c92a2a; }