/* Small custom overrides on top of the Tailwind CDN build loaded in _Layout.cshtml. */

[x-cloak] {
  display: none !important;
}

/* --- DataTables: more breathing room in the header/toolbar rows --------------------- */

table.dataTable thead th,
table.dataTable thead td {
  padding: 0.75rem 1rem !important;
}

table.dataTable tbody th,
table.dataTable tbody td {
  padding: 0.6rem 1rem;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  padding: 0.75rem 1rem;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  margin-left: 0.5rem;
}

/* --- Dark theme: DataTables ships white-only chrome, so override it explicitly ------ */

html.dark table.dataTable {
  color: #e2e8f0;
  border-color: #334155;
}

html.dark table.dataTable thead th,
html.dark table.dataTable thead td {
  color: #94a3b8;
  border-bottom-color: #334155;
}

html.dark table.dataTable tbody tr {
  background-color: transparent;
  border-color: #1e293b;
}

html.dark table.dataTable tbody tr:hover {
  background-color: #1e293b;
}

html.dark .dataTables_wrapper .dataTables_length,
html.dark .dataTables_wrapper .dataTables_filter,
html.dark .dataTables_wrapper .dataTables_info,
html.dark .dataTables_wrapper .dataTables_paginate {
  color: #94a3b8;
}

html.dark .dataTables_wrapper .dataTables_filter input,
html.dark .dataTables_wrapper .dataTables_length select {
  background-color: #0f172a;
  border-color: #334155;
  color: #e2e8f0;
}

html.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #e2e8f0 !important;
}

html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: #334155 !important;
  border-color: #475569 !important;
  color: #f8fafc !important;
}

html.dark .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  color: #475569 !important;
}

html.dark .dataTables_processing {
  background-color: #0f172a;
  color: #e2e8f0;
}

/* Row links (rendered client-side by DataTables' render() callbacks, so Tailwind's CDN JIT may
   not reliably pick up dark: variants baked into those JS strings) - fall back to plain CSS. */
html.dark table.dataTable tbody a,
html.dark table:not(.dataTable) tbody a {
  color: #38bdf8;
}

html.dark table.dataTable tbody a:hover,
html.dark table:not(.dataTable) tbody a:hover {
  color: #7dd3fc;
}


/* --- Buttons ------------------------------------------------------------------------
   Outlined by default; solid reserved for the one primary action on a page. A page of
   solid buttons gives every action the same weight, which is what made the Sync page hard
   to read.

   Every variant sets border, text AND background explicitly in both themes. The original
   bug here was a button that defined only a light-mode background and disappeared into a
   dark page; an outline style fails the same way if the border is left to inherit. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn:focus-visible { outline: 2px solid #0ea5e9; outline-offset: 2px; }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* Primary - solid. The single affirmative action on a page. */
.btn-primary             { background-color: #0f172a; color: #fff; border-color: #0f172a; }
.btn-primary:hover       { background-color: #1e293b; border-color: #1e293b; }
.dark .btn-primary       { background-color: #38bdf8; color: #0b1220; border-color: #38bdf8; }
.dark .btn-primary:hover { background-color: #7dd3fc; border-color: #7dd3fc; }

/* Secondary - the default. Outlined, and legible on both grounds. */
.btn-secondary             { background-color: transparent; color: #334155; border-color: #cbd5e1; }
.btn-secondary:hover       { background-color: #f1f5f9; border-color: #94a3b8; }
.dark .btn-secondary       { background-color: transparent; color: #cbd5e1; border-color: #475569; }
.dark .btn-secondary:hover { background-color: #1e293b; color: #f8fafc; border-color: #64748b; }

/* Info - outlined, for a secondary action that still does something, e.g. Edit. */
.btn-info             { background-color: transparent; color: #0369a1; border-color: #7dd3fc; }
.btn-info:hover       { background-color: #f0f9ff; border-color: #0284c7; }
.dark .btn-info       { background-color: transparent; color: #7dd3fc; border-color: #0369a1; }
.dark .btn-info:hover { background-color: #082f49; color: #bae6fd; border-color: #0284c7; }

/* Danger - outlined until hovered, so a destructive action is visible but not shouting. */
.btn-danger             { background-color: transparent; color: #b91c1c; border-color: #fca5a5; }
.btn-danger:hover       { background-color: #dc2626; color: #fff; border-color: #dc2626; }
.dark .btn-danger       { background-color: transparent; color: #fca5a5; border-color: #7f1d1d; }
.dark .btn-danger:hover { background-color: #b91c1c; color: #fff; border-color: #b91c1c; }

/* Success - solid, and used once: Run Full Sync. */
.btn-success             { background-color: #059669; color: #fff; border-color: #059669; }
.btn-success:hover       { background-color: #047857; border-color: #047857; }
.dark .btn-success       { background-color: #047857; color: #ecfdf5; border-color: #047857; }
.dark .btn-success:hover { background-color: #059669; border-color: #059669; }

.btn-block { width: 100%; }

.btn-sm {
  padding: 0.25rem 0.625rem;
  font-size: 0.8125rem;
  border-radius: 0.375rem;
}

/* Validation summaries
   --------------------
   ASP.NET's asp-validation-summary ALWAYS renders its <div>; with nothing to report it merely
   swaps in the class .validation-summary-valid. Any summary given a background, border or padding
   therefore shows as an empty coloured bar on a form nobody has submitted yet.

   Hiding it here rather than wrapping each form in an @if keeps the fix with the cause: a new
   form gets the correct behaviour without its author having to know this. It is the same rule the
   buttons follow - nothing renders an empty styled box. */
.validation-summary-valid { display: none; }

/* Same problem, one field at a time: field-validation-valid is emitted for every field on a clean
   form. It carries no background today, so this is belt-and-braces against a future style making
   an empty span visible. */
.field-validation-valid { display: none; }

/* --- Page width ---------------------------------------------------------------------
   The shell - header nav and <main> - is full-bleed. Staff run this on wide monitors and
   the directory tables are the thing they spend the day looking at, so the old max-w-6xl
   (1152px) cap left most of the screen empty and forced the wide tables to scroll
   sideways inside a narrow column.

   Gutters grow with the viewport so content never sits against the edge of the glass.

   This is the ONE place page width is decided: the header and the body both use it, so
   they stay aligned with each other by construction. Individual pages still narrow their
   own content where a short measure is right - prose paragraphs, forms, the sign-in
   cards - and those caps are deliberate, not leftovers from this one. */
.page-container {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .page-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .page-container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* Small badge size for the Bar # column's wordy states ("Missing", "N/A"). A plain rule, not a
   Tailwind arbitrary value: the class is only ever produced inside a DataTables render() string,
   and the JIT has been caught missing those before. See directory-tables.js for why the size is
   passed in rather than layered over text-xs. */
.badge-sm {
  font-size: 11px;
  line-height: 1rem;
}

/* DataTables 1.13 lays its toolbar out with floats - length and info left, search and paging
   right. Below ~640px those two halves collide and the paging controls end up half off the edge
   of the card. Stack them instead; the grid itself is handled by the table's own breakpoints. */
@media (max-width: 639px) {
  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info,
  .dataTables_wrapper .dataTables_paginate {
    float: none;
    width: 100%;
    text-align: left;
  }

  .dataTables_wrapper .dataTables_filter input {
    margin-left: 0;
    width: 100%;
  }

  .dataTables_wrapper .dataTables_paginate {
    padding-top: 0;
  }

  /* Paging buttons are inline-block, so they wrap on their own once the row is full width.
     Trimming their padding fits more per line - "Previous 1 2 3 ... 1,181 Next" is a lot of
     control for a phone. */
  .dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.35em 0.7em;
    min-width: 0;
  }

  /* Cell padding of 1rem a side costs 2rem per column. At four columns on a 375px screen that is
     a fifth of the viewport spent on gutters, so tighten it - the !important matches the base
     rule above, which needs one to beat DataTables' own stylesheet. */
  table.dataTable thead th,
  table.dataTable thead td {
    padding: 0.6rem 0.5rem !important;
  }

  table.dataTable tbody th,
  table.dataTable tbody td {
    padding: 0.55rem 0.5rem;
  }

  .dataTables_wrapper .dataTables_length,
  .dataTables_wrapper .dataTables_filter,
  .dataTables_wrapper .dataTables_info {
    padding: 0.5rem;
  }
}

/* --- Wordmark -----------------------------------------------------------------------
   "STAFF PORTAL" beside the OBA lockup. The brief was taller but not wider, which is a
   typeface choice rather than a size one: scaling a normal face up makes it wider too, and
   scaling it vertically with a transform distorts the letterforms. Oswald is condensed, so
   it gains height at the same width.

   Set in caps to match the lockup, which is all caps. Letter-spacing is opened slightly
   because condensed caps set tight are hard to read at small sizes - the logo's own type
   does the same.

   1.375rem against the logo's 40px puts the cap height close to the artwork's second line
   without the text outgrowing the 56px bar. */
.wordmark {
  font-family: 'Oswald', 'Arial Narrow', 'Helvetica Neue Condensed', system-ui, sans-serif;
  /* 400, not 600: at this size the heavier cut read as a slab against the logo's own lighter
     lettering. Condensed faces carry their weight in narrow strokes, so they look heavier than
     the same number in a normal face. */
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  /* The fallbacks are narrower than Oswald at the same size; without this they would jump on
     the swap. Not exact, but it keeps the shift small enough not to catch the eye. */
  font-stretch: condensed;
}