/* 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; }