/* ==========================================================================
   Application-level adjustments.

   Unlike the other stylesheets in this folder, these rules are NOT extracted
   from the legacy views — they are adjustments requested for this application,
   kept in their own file so the extracted legacy CSS stays untouched and
   verifiable against the original.

   Loaded last so it wins over Bootstrap, AdminLTE and ril-design-system.
   ========================================================================== */

/* --- DataTable toolbar: exports, page length and search on one row -------
   The legacy tables were initialised with `dom: 'Bfrtip'` and `pageLength` as
   a button, which puts the export buttons, the length menu and the search box
   on a single line. This reproduces that layout for the React DataTable. */
.dataTables_wrapper .dt-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.dataTables_wrapper .dt-toolbar-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Kill the block-level stacking DataTables' own CSS applies to these. */
.dataTables_wrapper .dt-toolbar .dataTables_length,
.dataTables_wrapper .dt-toolbar .dataTables_filter {
  float: none;
  margin: 0;
  padding: 0;
  width: auto;
  text-align: left;
  white-space: nowrap;
}

.dataTables_wrapper .dt-toolbar .dataTables_length label,
.dataTables_wrapper .dt-toolbar .dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-weight: 400;
  white-space: nowrap;
}

.dataTables_wrapper .dt-toolbar .dataTables_length select {
  width: auto;
  min-width: 72px;
  display: inline-block;
}

.dataTables_wrapper .dt-toolbar .dataTables_filter input {
  width: auto;
  min-width: 190px;
  display: inline-block;
  margin-left: 0;
}

/* --- Button sizing, application-wide -------------------------------------
   One consistent width so button groups line up across every screen, matching
   the 124px the legacy upload bar already used. `width:auto` defeats
   Bootstrap's .btn-block, which some legacy markup applies inline. */
.btn {
  min-width: 124px;
  width: auto;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  line-height: 18px;
}

.btn i,
.btn .fa {
  margin-right: 6px;
}

/* Icon-only actions (the grid's edit pencil) must not inherit the min-width. */
.btn i:only-child,
.btn .fa:only-child {
  margin-right: 0;
}

/* Small and extra-small variants keep their own scale. */
.btn-xs {
  min-width: 0;
  padding: 1px 8px;
}

.btn-sm {
  min-width: 96px;
}

/* The toolbar's export group is deliberately compact: short labels, so the
   app-wide minimum width and padding are dropped in favour of a smaller
   control that sits neatly beside the length menu and the search box. */
.dt-buttons .btn {
  min-width: 0;
  padding: 2px 9px;
  font-size: 11px;
  line-height: 16px;
  height: 24px;
}

.dt-buttons .btn i,
.dt-buttons .btn .fa {
  margin-right: 4px;
  font-size: 11px;
}

/* Table cell actions are bare links, not buttons — never stretch them. */
td .btn-link,
td a.btn {
  min-width: 0;
  padding: 0 4px;
}

@media (max-width: 767px) {
  .dataTables_wrapper .dt-toolbar {
    justify-content: flex-start;
  }
  .dataTables_wrapper .dt-toolbar .dataTables_filter input {
    min-width: 0;
  }
  .btn {
    min-width: 0;
  }
}

/* --- DataTable sort indicators -------------------------------------------
   dataTables.bootstrap.min.css draws these with a :after pseudo-element in the
   'Glyphicons Halflings' font (Bootstrap 3's icon font — not Font Awesome),
   absolutely positioned at the right edge of the header cell. It reserves no
   space for them, so on a narrow column the glyph can sit on top of the label.
   This keeps the two apart. */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  padding-right: 26px;
}

/* --- DataTable row height ------------------------------------------------
   Bootstrap's .table pads cells 8px top and bottom. Halving that, with a
   tighter line-height, fits noticeably more rows on screen without changing
   the font size or the grid's borders. */
table.dataTable > thead > tr > th,
table.dataTable > tbody > tr > td {
  padding-top: 4px;
  padding-bottom: 4px;
  line-height: 1.3;
}

/* Keep the sort glyph clear of the label at the reduced height. */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
  bottom: 4px;
}

/* Controls sitting inside a cell must not re-inflate the row. */
table.dataTable > tbody > tr > td .btn,
table.dataTable > tbody > tr > td a {
  line-height: 1.3;
  padding-top: 0;
  padding-bottom: 0;
}

/* --- No layout jump while a grid refetches -------------------------------
   Reserving the scrollbar gutter stops the page shifting sideways when a
   shorter result set removes the vertical scrollbar. */
html {
  scrollbar-gutter: stable;
}

/* The grid dims rather than emptying while a sort, page or search is in
   flight; the rows stay mounted so the table keeps its height. */
table.dataTable.dt-refreshing tbody {
  opacity: 0.55;
  transition: opacity 120ms ease-in-out;
}

table.dataTable.dt-refreshing {
  pointer-events: none;
}

/* --- Open dropdowns must show ---------------------------------------------
   The legacy app relied on Bootstrap's JavaScript to open these. This app sets
   the `open` class from React instead and loads no Bootstrap JS, so the menu's
   visibility rests entirely on the cascade. Bootstrap's own
   `.open > .dropdown-menu { display: block }` should win on specificity over
   the `display: none` in bootstrap.min.css and ril-topnav.css, but it is not
   reaching the browser reliably here. Stating it explicitly, last and with a
   high-specificity selector, removes the doubt. */
.navbar-nav > li.open > .dropdown-menu,
li.dropdown.open > .dropdown-menu,
li.user-menu.open > .dropdown-menu {
  display: block !important;
}

/* The header must paint above the page content, or an open menu is hidden
   behind it rather than absent. */
.main-header .navbar {
  position: relative;
  z-index: 1040;
}

.navbar-nav > li.open > .dropdown-menu {
  z-index: 1050;
}

/* --- Login: the headline over the photography ----------------------------
   `ril-auth.css` sets the size and a 600 weight but leaves the colour to be
   inherited, which left it grey against the image. White and bold, as asked. */
.auth-visual h2 {
  color: #ffffff;
  font-weight: 700;
}

/* --- Dropdown items must be clickable ------------------------------------
   Reported: the menu opens but its items do not respond to a click. The
   anchors are real React Router links and the handler is correct, so the hit
   area itself is the suspect. This makes each item fill its row and sit above
   any sibling that might otherwise cover it. */
.navbar-nav > li.open > .dropdown-menu > li > a,
.navbar-nav > li.open > .dropdown-menu > li > a.nav-link {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  z-index: 1;
  pointer-events: auto;
  cursor: pointer;
}

/* Nothing inside an item should swallow the click meant for the anchor. */
.navbar-nav > li.open > .dropdown-menu > li > a > i,
.navbar-nav > li.open > .dropdown-menu > li > a > span {
  pointer-events: none;
}