@charset "UTF-8";
/* ===== DataTables 2.0.8 (Tailwind integration) — house style =====
   Applies to all three DataTables: #ewcTable (DWT EWC Codes), #leaderboardTable (Stats) and
   #siteModulesTable (Sites -> Modules tab). Styled centrally here so no view needs touching.

   The Tailwind integration is JAVASCRIPT, not CSS: dataTables.tailwindcss.js assigns Tailwind
   utility class strings at runtime and the page's Tailwind CDN generates them, injecting a <style>
   into <head> AFTER this stylesheet's <link>. So these rules compete with generated utilities on
   the same elements and lose on document order — hence !important throughout. Removing an
   !important here silently un-styles all three tables.

   USE DATATABLES 2.x SELECTORS. Two rules that previously lived here were written against 1.x
   names and did nothing at all: striping is the theme's `even:` utility -> tr:nth-child(even),
   NOT tr.odd / tr.even; and sort arrows are span.dt-column-order::before/::after inside
   th.dt-orderable-* / th.dt-ordering-*, NOT th.sorting / th.sorting_asc / th.sorting_desc.

   Deliberately NOT applied to the ~22 plain Tailwind tables, which keep thead.bg-gray-50 +
   th.text-gray-500. Known consequence: on the Sites screen the plain #sitesTable (tab 1) and
   #siteModulesTable (tab 3) are one click apart and their headers differ. That is a decision,
   not an oversight. */
/* No background behind the table or the controls — all three tables already sit inside the
   house `bg-white shadow rounded` card, so the theme's greys only muddy it. */
div.dt-container,
div.dt-container .dt-layout-row,
div.dt-container .dt-layout-cell,
table.dataTable {
  background-color: transparent !important;
}

/* Header — brand navy with white text, per the app's navy recipe ($brand-blue + white, as used by
   the page header, Login, the DEFRA pull buttons and every bg-brand-blue control).
   The theme puts `bg-gray-100/75 text-gray-900 font-semibold px-3 py-4` on every header cell,
   all of which fight the house `text-xs font-medium ... px-4 py-2` markup, so the house type is
   re-asserted here.

   text-align is deliberately NOT set: the theme forces text-left, but the markup's text-center
   (Modules flag columns) and text-right (Stats numerics) must keep winning.

   padding .5rem 1rem == px-4 py-2, matching what body cells resolve to (they get p-3 from the
   theme but px-4 py-2 from our markup/columnDefs, and Tailwind emits the axis padding utilities
   after the all-sides one, so px-4 py-2 wins). The LEFT padding is what keeps header labels aligned
   with the column contents beneath them.

   The RIGHT padding is overridden further down for orderable cells — this blanket !important was
   killing the room DataTables reserves for the sort arrow, so the arrow drew on top of the label.
   Consequence, accepted: an orderable right-aligned header sits ~1.75rem left of its numbers. An
   unreadable overlap is worse than a small offset, and body cells are untouched so the numbers still
   align with each other. */
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
  background-color: #01435b !important;
  color: #fff !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  padding: 0.5rem 1rem !important;
  border-bottom: 0 !important;
}

table.dataTable > thead > tr {
  border-bottom: 0 !important;
}

/* Sort arrows have to read on navy — the theme's dark grey glyphs disappear against the navy. */
table.dataTable > thead > tr > th span.dt-column-order::before,
table.dataTable > thead > tr > th span.dt-column-order::after {
  color: #fff !important;
  opacity: 0.6;
}

/* Reserve room at the right of orderable header cells for the sort arrow.
   span.dt-column-order is absolutely positioned, and the blanket `padding: .5rem 1rem !important`
   above overrides the padding-right DataTables itself sets for this — so without this rule the arrow
   is drawn ON TOP of the label. Invisible while headers were left-aligned (spare room at the right
   edge); it became obvious when the Stats leaderboard gained right-aligned numeric headers.

   BOTH class families are needed: dt-orderable-* is a sortable column not currently sorted,
   dt-ordering-* is the active sort column. DataTables swaps between them, so covering only one set
   would make the padding jump as the user re-sorts. */
table.dataTable > thead > tr > th.dt-orderable-asc,
table.dataTable > thead > tr > th.dt-orderable-desc,
table.dataTable > thead > tr > th.dt-ordering-asc,
table.dataTable > thead > tr > th.dt-ordering-desc {
  padding-right: 1.75rem !important;
}

/* Grouped header cells that must not offer sorting — e.g. the `Transactions` cell spanning
   Created/Paid/Value on the Stats leaderboard.
   DataTables 2.x DOES make a colspan header cell orderable (it maps to the first column it covers),
   and there is no per-header-cell option to switch that off: `orderable: false` is per COLUMN and
   would disable sorting on the first sub-column entirely. Hence CSS.
   pointer-events as well as hiding the glyph — hiding alone leaves an invisible control that still
   sorts on click. Safe because the cell holds nothing else interactive. */
table.dataTable > thead > tr > th.cp-no-sort {
  padding-right: 1rem !important;
  /* undo the arrow reservation above — there is no arrow here */
  pointer-events: none !important;
}
table.dataTable > thead > tr > th.cp-no-sort span.dt-column-order {
  display: none !important;
}

/* Row striping — a muted neutral grey (gray-50). Replaces an earlier navy-tinted
   rgba(1,67,91,0.07). Odd rows need no rule: the theme only paints even rows, and the markup's
   tbody.bg-white already supplies white beneath. This selector (0,2,3) outranks the
   transparent-background rule above (0,1,3), which is why that rule does not list tbody rows. */
table.dataTable > tbody > tr:nth-child(even) {
  background-color: #f9fafb !important;
}

/* Search input + entries select. Kept white with a navy focus ring — these define the control's
   look (border, radius, padding), they are not just a dark-mode defence; darkMode:'class' in the
   layout's tailwind.config is what handles that now. */
.dt-search input,
.dt-length select {
  background-color: #fff !important;
  color: #111827 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 4px;
  padding: 4px 8px;
}

.dt-search input:focus,
.dt-length select:focus {
  outline: none !important;
  border-color: #01435b !important;
  box-shadow: 0 0 0 2px rgba(1, 67, 91, 0.2) !important;
}

/* Pagination — unfilled by default so the buttons don't read as raised white chips on the card
   (the theme gives them bg-white / bg-gray-100). Navy for the current page.
   :not(.disabled) on the hover rule stops a greyed-out Previous/Next turning navy on hover. */
.dt-paging .dt-paging-button {
  background-color: transparent !important;
}

.dt-paging .dt-paging-button.current,
.dt-paging .dt-paging-button.current:hover {
  background-color: #01435b !important;
  color: #fff !important;
  border-color: #01435b !important;
}

.dt-paging .dt-paging-button:hover:not(.disabled):not(.current) {
  background-color: #012f41 !important;
  color: #fff !important;
  border-color: #012f41 !important;
}

/* ===== Table header helper =====
   Navy header for tables that are NOT DataTables. The three DataTables get navy from the block
   above (with !important, so this class is redundant on them but harmless).

   No !important needed on the text colour: `.cp-table-head th` is specificity (0,1,1), which
   outranks the house markup's `.text-gray-500` (0,1,0) on the same cell.

   🔴 BUT the BACKGROUND does need `bg-gray-50` REMOVED from the thead, not merely joined by this
   class. Both are (0,1,0), so document order decides — and the Tailwind CDN injects its generated
   <style> into <head> AFTER this stylesheet's <link> (see the note at the top of this file), so the
   utility wins and the header stays grey.

   Second consumer: #leaderboardTable (Stats). Its navy comes from the DataTables block above once
   .DataTable() has run, but that only happens after its rows arrive over AJAX — so without this class
   the header renders grey for the duration of the load and then flips to navy.

   Deliberately NOT rolled out across the ~22 plain tables — see the note above; that grey/navy
   split is a recorded decision, so ask before changing it. */
.cp-table-head {
  background-color: #01435b;
}
.cp-table-head th {
  color: #fff;
}

/* ===== Per-table overrides ===== */
/* DWT EWC Codes. The DataTables Tailwind theme puts `whitespace-nowrap` on the table, which
   forces long EWC descriptions into a horizontal scroll. The ID selector (1,0,1) beats the
   inherited utility regardless of load order, so no !important is needed.
   Moved here from Views/DwtOptions/EwcCodes.cshtml. */
#ewcTable td {
  white-space: normal;
}

/* ===== System Message banner preview =====
   Moved here from Views/SystemMessage/CreateEdit.cshtml.
   Keep in sync with MetalTrack.Blazor/Styles/_components.scss .home-banner — that is where the
   banner users actually see is styled; this is the Control Panel's authoring preview of it.

   The link colour is #f49600, which is NOT $brand-orange (#e87722). It is a third orange, carried
   over verbatim from the Blazor rules this mirrors — do not "normalise" it to the brand token
   without changing Blazor's copy at the same time, or the preview stops matching the real banner. */
.home-banner {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 24px;
  background-color: #01435b;
  background-size: cover;
  background-position: center;
  border-radius: 5px;
  color: #fff;
}

.home-banner__icon {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  object-fit: contain;
  border-radius: 3px;
}

.home-banner__content {
  flex: 1;
}
.home-banner__content h3 {
  color: #fff;
  font-weight: bold;
  margin-bottom: 4px;
}
.home-banner__content p,
.home-banner__content div {
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 10px;
}
.home-banner__content a {
  color: #f49600;
}

.home-banner__details {
  display: none;
  margin-top: 4px;
}

.home-banner__expand-toggle {
  cursor: pointer;
  text-decoration: underline;
  opacity: 0.8;
  font-size: 0.9em;
  display: inline-block;
  color: #f49600;
  font-weight: bold;
}
.home-banner__expand-toggle:hover {
  opacity: 1;
}

/* Editor-chrome only — not part of the rendered banner. Summernote's own stylesheet loads from the
   CDN at the end of <body>, i.e. after this file, so anything it also targets wins. */
.note-editable .mt-expand-marker {
  display: block;
  margin: 6px 0;
  padding: 6px 10px;
  border: 1px dashed #999;
  border-radius: 4px;
  background: #f5f5f5;
  color: #666;
  font-size: 0.85em;
  text-align: center;
  user-select: none;
}

/* Mirrors .home-banner__content h3 (font-weight/margin) — colour is navy instead of
   white here since the editor background is white, not the banner's navy */
.note-editable h3 {
  font-weight: bold;
  margin-bottom: 4px;
  color: #01435b;
}

/*# sourceMappingURL=main.css.map */
