/* identity.theme.css
   Local theme for IdentityServer pages that:
   - Bridges Bootstrap variables to Fluent UI tokens when present (via CSS custom properties)
   - Respects the user's system light/dark preference using prefers-color-scheme
   - Does not depend on any external project assets
*/

:root {
  color-scheme: light dark;

  /* Bootstrap variable fallbacks; resolve to Fluent tokens if provided by a FluentProvider upstream */
  --bs-body-bg: var(--neutral-layer-1, #ffffff);
  --bs-body-color: var(--neutral-foreground-rest, rgba(39,39,39,255));
  --bs-border-color: var(--neutral-stroke-rest, #e5e7eb);

  --bs-link-color: var(--accent-foreground-rest, #0078d4);
  --bs-link-hover-color: var(--accent-foreground-hover, color-mix(in oklab, var(--accent-foreground-rest, #0078d4) 85%, black 15%));

  --bs-primary: var(--accent-fill-rest, #0078d4);
  --bs-secondary: var(--neutral-fill-rest, #6c757d);
  --bs-success: var(--colorStatusSuccessBackground1, #198754);
  --bs-danger: var(--colorStatusDangerBackground1, #dc3545);
  --bs-warning: var(--colorStatusWarningBackground1, #ffc107);
  --bs-info: var(--colorStatusInfoBackground1, #0dcaf0);
  --bs-light: var(--neutral-layer-1, #f8f9fa);
  --bs-dark: var(--neutral-layer-4, #212529);
}

/* Respect system dark mode when Fluent tokens are not present */
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark fallbacks */
        --bs-body-bg: var(--neutral-layer-1,rgba(39,39,39,255));
        --bs-body-color: var(--neutral-foreground-rest, #e5e7eb);
        --bs-border-color: var(--neutral-stroke-rest, #374151);
        --bs-link-color: var(--accent-foreground-rest, #60a5fa);
        --bs-link-hover-color: var(--accent-foreground-hover, color-mix(in oklab, var(--accent-foreground-rest, #60a5fa) 85%, white 15%));
        --bs-primary: var(--accent-fill-rest, #60a5fa);
        --bs-secondary: var(--neutral-fill-rest, #9ca3af);
        --bs-light: var(--neutral-layer-1, #111827);
        --bs-dark: var(--neutral-layer-4, #0b0f1a);
    }
}

html, body { height: 100%; }

/* Page base */
body {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

a { color: var(--bs-link-color); }
a:hover { color: var(--bs-link-hover-color); }

/* Navbar */
.navbar { background-color: var(--neutral-layer-2, color-mix(in oklab, var(--bs-body-bg) 96%, black 4%)) !important; }
.navbar.bg-light, .navbar.bg-dark { background-color: var(--neutral-layer-2, color-mix(in oklab, var(--bs-body-bg) 96%, black 4%)) !important; }
.navbar .navbar-brand, .navbar .nav-link { color: var(--neutral-foreground-rest, var(--bs-body-color)) !important; }
.navbar .navbar-brand .brand-logo { display: block; height: 28px; width: auto; }

/* Cards */
.card { background-color: var(--neutral-layer-2, color-mix(in oklab, var(--bs-body-bg) 96%, black 4%)); color: var(--bs-body-color); border-color: var(--bs-border-color); }
.card .card-header { background-color: var(--neutral-layer-3, color-mix(in oklab, var(--bs-body-bg) 92%, black 8%)); border-bottom-color: var(--bs-border-color); color: var(--bs-body-color); }

/* Bootstrap utility alignment with Fluent tokens */
.bg-dark { background-color: var(--neutral-layer-2, color-mix(in oklab, var(--bs-body-bg) 96%, black 4%)) !important; color: var(--bs-body-color) !important; }
.bg-light { background-color: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; }

/* Buttons */
.btn-primary {
  --bs-btn-color: var(--neutral-stroke-rest, #ffffff);
  --bs-btn-bg: var(--accent-fill-rest, #0078d4);
  --bs-btn-border-color: var(--accent-fill-rest, #0078d4);
  --bs-btn-hover-bg: var(--accent-fill-hover, color-mix(in oklab, var(--accent-fill-rest, #0078d4) 90%, black 10%));
  --bs-btn-hover-border-color: var(--accent-fill-hover, color-mix(in oklab, var(--accent-fill-rest, #0078d4) 90%, black 10%));
  --bs-btn-active-bg: var(--accent-fill-active, color-mix(in oklab, var(--accent-fill-rest, #0078d4) 80%, black 20%));
  --bs-btn-active-border-color: var(--accent-fill-active, color-mix(in oklab, var(--accent-fill-rest, #0078d4) 80%, black 20%));
  --bs-btn-disabled-bg: var(--accent-fill-disabled, color-mix(in oklab, var(--accent-fill-rest, #0078d4) 40%, transparent));
  --bs-btn-disabled-border-color: var(--accent-fill-disabled, color-mix(in oklab, var(--accent-fill-rest, #0078d4) 40%, transparent));
}

.btn-outline-secondary {
  --bs-btn-color: var(--neutral-foreground-rest, var(--bs-body-color));
  --bs-btn-border-color: var(--neutral-stroke-rest, var(--bs-border-color));
  --bs-btn-hover-color: var(--neutral-foreground-rest, var(--bs-body_COLOR));
  --bs-btn-hover-bg: var(--neutral-layer-2, color-mix(in oklab, var(--bs-body-bg) 96%, black 4%));
  --bs-btn-hover-border-color: var(--neutral-stroke-rest, var(--bs-border-color));
}

.btn-secondary {
  --bs-btn-color: var(--neutral-foreground-rest, var(--bs-body-color));
  --bs-btn-bg: var(--neutral-layer-2, color-mix(in oklab, var(--bs-body-bg) 96%, black 4%));
  --bs-btn-border-color: var(--neutral-stroke-rest, var(--bs-border-color));
}

/* Forms */
.form-control, .form-select { background-color: var(--neutral-layer-2, color-mix(in oklab, var(--bs-body-bg) 96%, black 4%)); color: var(--bs-body-color); border-color: var(--bs-border-color); }
.form-control:focus, .form-select:focus { border-color: var(--accent-fill-rest, var(--bs-primary)); box-shadow: 0 0 0 .25rem color-mix(in oklab, var(--accent-fill-rest, var(--bs-primary)) 25%, transparent); }
.form-check-input { border-color: var(--bs-border-color); background-color: var(--neutral-layer-1, var(--bs-body-bg)); }

/* Tables & list groups */
.table { color: var(--bs-body-color); }
.table, .table > :not(caption) > * > * { background-color: var(--neutral-layer-1, var(--bs-body-bg)); }
.list-group-item { background-color: var(--neutral-layer-2, color-mix(in oklab, var(--bs-body-bg) 96%, black 4%)); color: var(--bs-body-color); border-color: var(--bs-border-color); }

/* Borders */
.border, .border-top, .border-end, .border-bottom, .border-start { border-color: var(--bs-border-color) !important; }