/**
 * Identity admin pages (Users, Groups): dark mode contrast and consistency.
 * Ensures inputs, links, and table content are readable when Unfold dark theme is active.
 * Targets both .dark (Unfold class on html) and [data-theme="dark"].
 */

/* Page title: ensure visible (Unfold base can hide or low-contrast) */
[data-identity-page] .identity-page-title,
[data-identity-page] > h2 {
  color: rgb(17 24 39);
  visibility: visible;
  opacity: 1;
}
html.dark [data-identity-page] .identity-page-title,
html.dark [data-identity-page] > h2,
.dark [data-identity-page] .identity-page-title,
.dark [data-identity-page] > h2,
[data-theme="dark"] [data-identity-page] .identity-page-title,
[data-theme="dark"] [data-identity-page] > h2 {
  color: rgb(243 244 246);
}

/* Identity users table: Unfold component with header always visible (override hidden / lg:table-cell) */
.identity-users-table table {
  min-width: 52rem;
  display: table !important;
}
.identity-users-table thead {
  display: table-header-group !important;
}
.identity-users-table thead tr {
  display: table-row !important;
}
.identity-users-table thead th {
  display: table-cell !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Shared dark selector: Unfold uses .dark on html; some setups use data-theme */
:root.dark [data-identity-page],
html.dark [data-identity-page],
[data-theme="dark"] [data-identity-page] {
  --identity-dark-bg: rgb(31 41 55);   /* gray-800 */
  --identity-dark-bg-row: rgb(31 41 55);
  --identity-dark-bg-head: rgb(55 65 81); /* gray-700 */
  --identity-dark-text: rgb(243 244 246);  /* gray-100 */
  --identity-dark-text-muted: rgb(209 213 219); /* gray-300 */
  --identity-dark-border: rgb(75 85 99);   /* gray-600 */
}

/* Inputs */
.dark [data-identity-page] input[type="text"],
.dark [data-identity-page] input[type="search"],
.dark [data-identity-page] input[type="password"],
[data-theme="dark"] [data-identity-page] input[type="text"],
[data-theme="dark"] [data-identity-page] input[type="search"],
[data-theme="dark"] [data-identity-page] input[type="password"] {
  background-color: rgb(55 65 81);
  border-color: rgb(75 85 99);
  color: rgb(243 244 246);
}

.dark [data-identity-page] input::placeholder,
[data-theme="dark"] [data-identity-page] input::placeholder {
  color: rgb(156 163 175);
}

/* Action and navigation links */
.dark [data-identity-page] a[href].text-primary-600,
.dark [data-identity-page] a.text-primary-600,
[data-theme="dark"] [data-identity-page] a.text-primary-600 {
  color: rgb(96 165 250);
}

.dark [data-identity-page] a[href].text-primary-600:hover,
.dark [data-identity-page] a.text-primary-600:hover,
[data-theme="dark"] [data-identity-page] a.text-primary-600:hover {
  color: rgb(147 197 253);
}

.dark [data-identity-page] a.rounded.border,
[data-theme="dark"] [data-identity-page] a.rounded.border {
  color: rgb(229 231 235);
}

.dark [data-identity-page] a.rounded.border:hover,
[data-theme="dark"] [data-identity-page] a.rounded.border:hover {
  color: rgb(243 244 246);
}

/* Table: force dark background and light text (load after Unfold via extrastyle) */
html.dark [data-identity-page] table,
.dark [data-identity-page] table,
[data-theme="dark"] [data-identity-page] table {
  border-color: rgb(75 85 99);
}

html.dark [data-identity-page] table thead,
.dark [data-identity-page] table thead,
[data-theme="dark"] [data-identity-page] table thead {
  background-color: rgb(55 65 81) !important;
  border-color: rgb(75 85 99);
}

html.dark [data-identity-page] table thead th,
.dark [data-identity-page] table thead th,
[data-theme="dark"] [data-identity-page] table thead th {
  color: rgb(209 213 219) !important;
  border-color: rgb(75 85 99);
}

html.dark [data-identity-page] table tbody tr,
.dark [data-identity-page] table tbody tr,
[data-theme="dark"] [data-identity-page] table tbody tr {
  background-color: rgb(31 41 55) !important;
  border-color: rgb(75 85 99);
}

/* Row hover in dark mode (slightly lighter than default row) */
html.dark [data-identity-page] table tbody tr.identity-row:hover,
.dark [data-identity-page] table tbody tr.identity-row:hover,
[data-theme="dark"] [data-identity-page] table tbody tr.identity-row:hover {
  background-color: rgb(55 65 81) !important;
}

html.dark [data-identity-page] table tbody td,
.dark [data-identity-page] table tbody td,
[data-theme="dark"] [data-identity-page] table tbody td {
  color: rgb(243 244 246) !important;
  background-color: transparent !important;
}

/* Restore row background on td so hover can change row bg */
html.dark [data-identity-page] table tbody tr:not(:hover) td,
.dark [data-identity-page] table tbody tr:not(:hover) td,
[data-theme="dark"] [data-identity-page] table tbody tr:not(:hover) td {
  background-color: rgb(31 41 55) !important;
}

html.dark [data-identity-page] table tbody tr.identity-row:hover td,
.dark [data-identity-page] table tbody tr.identity-row:hover td,
[data-theme="dark"] [data-identity-page] table tbody tr.identity-row:hover td {
  background-color: rgb(55 65 81) !important;
}

/* Last access column semantic colors (keep them visible in dark) */
.dark [data-identity-page] table tbody td.text-green-600,
[data-theme="dark"] [data-identity-page] table tbody td.text-green-600 {
  color: rgb(74 222 128) !important;
}

.dark [data-identity-page] table tbody td.text-amber-600,
[data-theme="dark"] [data-identity-page] table tbody td.text-amber-600 {
  color: rgb(251 191 36) !important;
}

.dark [data-identity-page] table tbody td.text-red-600,
[data-theme="dark"] [data-identity-page] table tbody td.text-red-600 {
  color: rgb(248 113 113) !important;
}

.dark [data-identity-page] table tbody td.text-gray-500,
[data-theme="dark"] [data-identity-page] table tbody td.text-gray-500 {
  color: rgb(156 163 175) !important;
}