/* Adapted from kanidm_style_override.css for Kanidm Dashboard 0.0.5.
   This stylesheet is loaded after the bundled CSS; native /ui pages are unchanged. */

:root,
:root[data-theme="light"] {
  --bg: #f0f4ff;
  --bg-2: #f8fafc;
  --text: #1e293b;
  --strong: #1e293b;
  --muted: #64748b;
  --faint: #64748b;
  --line: #e2e8f0;
  --line-strong: #cbd5e1;
  --panel: #ffffff;
  --panel-strong: #ffffff;
  --panel-raised: #f8fafc;
  --control: #f8fafc;
  --control-hover: #eef2ff;
  --shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  --brand-button: #4f46e5;
  --brand-hover: #4338ca;
  --brand-ink: #4f46e5;
  --login-brand: #660874;
  --login-hover: #4e0658;
  --login-ink: #660874;
  --radius: 12px;
  --radius-sm: 8px;
  --card-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --page-background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 30%, #fdf2f8 60%, #f0f4ff 100%);
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

:root[data-theme="dark"] {
  --bg: #0f172a;
  --bg-2: #1a2332;
  --text: #f1f5f9;
  --strong: #f1f5f9;
  --muted: #94a3b8;
  --faint: #94a3b8;
  --line: #334155;
  --line-strong: #64748b;
  --panel: #1e293b;
  --panel-strong: #1e293b;
  --panel-raised: #1a2332;
  --control: #1a2332;
  --control-hover: #283548;
  --shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
  --brand-ink: #a5b4fc;
  --login-ink: #e5b7ed;
  --card-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.05);
  --page-background: linear-gradient(135deg, #0f172a 0%, #1a1333 30%, #1a0f1f 60%, #0f172a 100%);
}

html,
body,
.auth-frame {
  background: var(--page-background);
  background-attachment: fixed;
}

body::before {
  display: none;
}

/* Keep the dashboard's existing grids, responsive navigation and wide reset forms. */
.topbar,
.main-nav,
.admin-rail,
.session-pill,
.glass-panel,
.stat-card,
.credential-card,
.app-card,
.auth-card,
.review-panel,
.empty-state,
.toolbar,
.table-shell,
.relationship-table-shell,
.resource-list,
.node-card {
  background: var(--panel);
  border-color: var(--line);
  backdrop-filter: none;
}

.glass-panel,
.stat-card,
.credential-card,
.app-card,
.review-panel,
.empty-state,
.table-shell,
.relationship-table-shell,
.resource-list,
.node-card {
  border-radius: var(--radius);
}

.topbar {
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06);
}

.main-nav,
.admin-rail,
.session-pill,
.toolbar {
  border-radius: var(--radius-sm);
}

.main-nav a,
.admin-rail a {
  border-radius: var(--radius-sm);
  color: var(--muted);
  transition: color var(--transition), background var(--transition);
}

.main-nav a:hover,
.main-nav a.active,
.admin-rail a:hover,
.admin-rail a.active {
  color: var(--brand-ink);
  background: color-mix(in srgb, var(--brand-ink) 10%, transparent);
}

.main-nav a.active,
.admin-rail a.active {
  font-weight: 600;
}

/* The existing square gAccount logo has its wordmark in the middle third.
   Crop only that image; do not enlarge application icons or future custom logos. */
.auth-brand img.logo-mark[src^="/ui/images/domain"],
.brand-lockup img.logo-mark[src^="/ui/images/domain"] {
  max-width: 100%;
  object-fit: cover;
  object-position: center;
  background: #ffffff;
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.auth-brand img.logo-mark[src^="/ui/images/domain"] {
  width: 224px;
  height: 84px;
}

.brand-lockup img.logo-mark[src^="/ui/images/domain"] {
  width: 144px;
  height: 54px;
}

/* Hide the duplicate title visually, but retain its accessible name. */
.auth-brand:has(img.logo-mark[src^="/ui/images/domain"]) h1,
.brand-lockup:has(img.logo-mark[src^="/ui/images/domain"]) .brand-name {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.auth-card {
  --accent: var(--login-brand);
  border-radius: var(--radius);
  padding: 2.5rem;
  box-shadow: var(--card-shadow);
  animation: dashboard-fade-in 0.4s ease-out;
}

.auth-card:not(.wide-auth):not(.reset-credential-card) {
  width: min(420px, 100%);
}

@keyframes dashboard-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

label {
  font-weight: 600;
  color: var(--muted);
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]),
select,
textarea {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.9rem;
  background: var(--control);
  color: var(--text);
  transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]):hover:not(:focus):not(:disabled),
select:hover:not(:focus):not(:disabled),
textarea:hover:not(:focus):not(:disabled) {
  border-color: var(--line-strong);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-ink) 12%, transparent);
  background: var(--panel);
}

.auth-card input,
.auth-card select {
  padding: 0.7rem 0.9rem;
  font-size: 0.95rem;
}

.auth-card input:focus,
.auth-card select:focus {
  border-color: var(--login-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--login-ink) 12%, transparent);
}

.primary-action,
.secondary-action,
.danger-action,
.file-button {
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}

.primary-action {
  background: var(--brand-button);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(79, 70, 229, 0.3);
}

.primary-action:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--brand-hover);
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
  transform: translateY(-1px);
}

.auth-card .primary-action {
  width: 100%;
  padding: 0.7rem 2rem;
  background: var(--login-brand);
  box-shadow: 0 1px 2px rgba(102, 8, 116, 0.3);
}

.auth-card .primary-action:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--login-hover);
  box-shadow: 0 4px 12px rgba(102, 8, 116, 0.35);
}

.primary-action:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(0);
}

.auth-card .segmented button.active {
  color: var(--login-ink);
  background: color-mix(in srgb, var(--login-ink) 12%, transparent);
}

.auth-links a {
  color: var(--login-ink);
  font-weight: 500;
}

.auth-links a:hover {
  text-decoration: underline;
}

.auth-card .error-box {
  border: none;
  padding: 0.75rem 1rem;
  background: #fef2f2;
  color: #991b1b;
}

:root[data-theme="dark"] .auth-card .error-box {
  background: #3b0a0a;
  color: #fecaca;
}

.app-card {
  border-width: 1.5px;
  padding: 1.75rem 1rem 1.5rem;
  transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition);
}

/* Application artwork should not inherit the logo mark's gradient or cropping. */
.app-card .app-icon {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
}

.app-card span.app-icon {
  background: var(--control);
  color: var(--brand-ink);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

/* Give dark artwork a neutral backing in dark mode, not a blue gradient. */
:root[data-theme="dark"] .app-card img.app-icon {
  background: #ffffff;
  border-radius: var(--radius-sm);
  padding: 3px;
}


.app-card:hover {
  border-color: var(--brand-ink);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

:root[data-theme="dark"] .app-card:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Preserve keyboard focus, disabled states and the upstream mobile layout. */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--brand-ink);
  outline-offset: 3px;
}

.auth-card button:focus-visible,
.auth-card a:focus-visible {
  outline-color: var(--login-ink);
}

@media (max-width: 480px) {
  .auth-frame { padding: 12px; }
  .auth-card { padding: 1.5rem 1.25rem; }
  .auth-brand img.logo-mark[src^="/ui/images/domain"] { width: 192px; height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0s; }
  .auth-card { animation: none; }
  .primary-action:hover:not(:disabled):not([aria-disabled="true"]),
  .app-card:hover { transform: none; }
}