/* ===== SSO Design System ===== */

:root,
[data-bs-theme="sso"] {
  /* Slate palette */
  --sso-slate-900: #0f172a;
  --sso-slate-800: #1e293b;
  --sso-slate-700: #334155;
  --sso-slate-600: #475569;
  --sso-slate-500: #64748b;
  --sso-slate-200: #e2e8f0;
  --sso-slate-100: #f1f5f9;
  --sso-slate-50:  #f8fafc;

  /* Accent palette */
  --sso-amber-600: #d97706;
  --sso-amber-500: #f59e0b;
  --sso-amber-400: #fbbf24;
  --sso-teal-600:  #0d9488;
  --sso-red-600:   #dc2626;

  /* Bootstrap overrides */
  --bs-body-bg: var(--sso-slate-100);
  --bs-body-color: var(--sso-slate-900);
  --bs-border-color: var(--sso-slate-200);
  --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
  font-family: var(--bs-font-sans-serif);
  background-color: var(--sso-slate-100);
  color: var(--sso-slate-900);
}

/* ===== Navbar ===== */

.navbar-sso {
  background-color: var(--sso-slate-900) !important;
  padding: .75rem 0;
}

.navbar-sso .navbar-brand {
  color: #fff;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .02em;
}

.navbar-sso .navbar-brand .brand-accent {
  color: var(--sso-amber-500);
}

.navbar-sso .nav-link {
  color: var(--sso-slate-200) !important;
  font-size: .875rem;
  transition: color .15s;
}

.navbar-sso .nav-link:hover {
  color: var(--sso-amber-400) !important;
}

.navbar-sso .navbar-text {
  color: var(--sso-slate-500);
  font-size: .875rem;
}

/* ===== Accent Buttons ===== */

.btn-accent {
  background-color: var(--sso-amber-600);
  border-color: var(--sso-amber-600);
  color: #fff;
  font-weight: 500;
}

.btn-accent:hover,
.btn-accent:focus {
  background-color: var(--sso-amber-500);
  border-color: var(--sso-amber-500);
  color: #fff;
}

.btn-accent:focus {
  box-shadow: 0 0 0 .25rem rgba(251, 191, 36, .35);
}

.btn-outline-accent {
  border-color: var(--sso-amber-600);
  color: var(--sso-amber-600);
}

.btn-outline-accent:hover,
.btn-outline-accent:focus {
  background-color: var(--sso-amber-600);
  border-color: var(--sso-amber-600);
  color: #fff;
}

/* ===== Auth Card (Login / Password Change) ===== */

.sso-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--sso-slate-100) 0%, var(--sso-slate-200) 100%);
  padding: 1rem;
}

.sso-auth-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: .75rem;
  box-shadow: 0 4px 24px rgba(15, 23, 42, .08);
  border: 1px solid var(--sso-slate-200);
  padding: 2.5rem 2rem;
}

.sso-auth-card .auth-brand {
  text-align: center;
  margin-bottom: 1.5rem;
}

.sso-auth-card .auth-brand h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--sso-slate-900);
  margin-bottom: .25rem;
}

.sso-auth-card .auth-brand .brand-accent {
  color: var(--sso-amber-600);
}

.sso-auth-card .auth-brand p {
  font-size: .875rem;
  color: var(--sso-slate-500);
  margin: 0;
}

.sso-auth-card .form-floating > .form-control:focus {
  border-color: var(--sso-amber-500);
  box-shadow: 0 0 0 .25rem rgba(251, 191, 36, .2);
}

.sso-auth-card .form-check-input:checked {
  background-color: var(--sso-amber-600);
  border-color: var(--sso-amber-600);
}

/* ===== Tables ===== */

.sso-table {
  font-size: .875rem;
}

.sso-table thead th {
  text-transform: uppercase;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--sso-slate-500);
  border-bottom: 2px solid var(--sso-slate-200);
  padding: .75rem;
}

.sso-table td {
  vertical-align: middle;
  padding: .75rem;
}

.sso-table tbody tr {
  transition: background-color .1s;
}

.sso-table tbody tr:hover {
  background-color: var(--sso-slate-50);
}

/* ===== Badges ===== */

.badge-role {
  background-color: var(--sso-teal-600);
  color: #fff;
  font-weight: 500;
  font-size: .75rem;
  padding: .3em .6em;
}

.badge-group {
  background-color: var(--sso-slate-600);
  color: #fff;
  font-weight: 500;
  font-size: .75rem;
  padding: .3em .6em;
}

.badge-inherited {
  background-color: rgba(13, 148, 136, .15);
  color: var(--sso-teal-600);
  border: 1px solid var(--sso-teal-600);
  font-weight: 500;
  font-size: .75rem;
  padding: .3em .6em;
}

.badge-status-active {
  background-color: rgba(13, 148, 136, .12);
  color: var(--sso-teal-600);
}

.badge-status-disabled {
  background-color: rgba(220, 38, 38, .1);
  color: var(--sso-red-600);
}

.badge-result-success {
  background-color: rgba(13, 148, 136, .12);
  color: var(--sso-teal-600);
}

.badge-result-fail {
  background-color: rgba(220, 38, 38, .1);
  color: var(--sso-red-600);
}

.badge-result-autologin {
  background-color: rgba(217, 119, 6, .1);
  color: var(--sso-amber-600);
}

/* ===== Nav Tabs (Admin) ===== */

.nav-tabs-sso .nav-link {
  color: var(--sso-slate-600);
  font-weight: 500;
  font-size: .875rem;
  border: none;
  border-bottom: 2px solid transparent;
  padding: .75rem 1.25rem;
  transition: color .15s, border-color .15s;
}

.nav-tabs-sso .nav-link:hover {
  color: var(--sso-slate-900);
  border-bottom-color: var(--sso-slate-200);
}

.nav-tabs-sso .nav-link.active {
  color: var(--sso-amber-600);
  border-bottom-color: var(--sso-amber-600);
  background: transparent;
}

.nav-tabs-sso .nav-link i {
  margin-right: .35rem;
}

/* ===== Cards ===== */

.card {
  border: 1px solid var(--sso-slate-200);
  border-radius: .5rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}

.card-header {
  background-color: var(--sso-slate-50);
  border-bottom: 1px solid var(--sso-slate-200);
  font-weight: 600;
  font-size: .875rem;
}

/* ===== Alerts ===== */

.alert {
  font-size: .875rem;
  border-radius: .5rem;
}

/* ===== Form focus ===== */

.form-control:focus,
.form-select:focus {
  border-color: var(--sso-amber-500);
  box-shadow: 0 0 0 .25rem rgba(251, 191, 36, .2);
}

/* ===== Misc ===== */

.hidden {
  display: none;
}

.text-muted {
  color: var(--sso-slate-500) !important;
}

.section-heading {
  font-size: .875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sso-slate-500);
  margin-bottom: 1rem;
}

.remove-badge {
  cursor: pointer;
  opacity: .7;
  transition: opacity .15s;
}

.remove-badge:hover {
  opacity: 1;
}

/* Autologin interstitial */
.sso-autologin-card {
  text-align: center;
}

.sso-autologin-card .lock-icon {
  font-size: 4rem;
  color: var(--sso-amber-600);
  margin-bottom: 1rem;
}

.sso-autologin-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--sso-slate-900);
}

.sso-autologin-card p {
  color: var(--sso-slate-500);
  font-size: .9rem;
}

/* Modal */
.modal-header {
  background-color: var(--sso-slate-50);
  border-bottom: 1px solid var(--sso-slate-200);
}

.modal-footer {
  border-top: 1px solid var(--sso-slate-200);
}

/* Action buttons in tables */
.btn-icon {
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1;
  border-radius: .375rem;
}