/*
  CorConnect theme — Cor product family tokens (match CorAuth).
  Layout: sticky TOP header only — never left sidebar.
  Toggle dark via html.dark + localStorage key cor-theme.
  Fonts: Segoe UI everywhere — never monospace/code faces for UI text.
  Gradients: see ca-gradients.css + .ca-grad-blue on cards.
  Menubar: see ca-menubar.css (Help ? · Theme · Sign out).
*/

:root {
  color-scheme: light;
  --ca-font: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--ca-font);
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;

  --ca-bg: #eef2f7;
  --ca-bg-deep: #e2e8f0;
  --ca-panel: #ffffff;
  --ca-panel-soft: #f8fafc;
  --ca-input: #ffffff;
  --ca-hover: #f1f5f9;
  --ca-border: #d0d7e2;
  --ca-border-strong: #b6c0ce;

  --ca-fg: #0f172a;
  --ca-secondary: #334155;
  --ca-muted: #64748b;
  --ca-faint: #94a3b8;

  /* Brand blue — same as logo / CorPBX family */
  --ca-brand: #0284c7;
  --ca-header: #0284c7;
  --ca-accent: #0ea5e9;
  --ca-accent-strong: #0284c7;
  --ca-accent-soft: rgba(14, 165, 233, 0.12);
  --ca-ring: rgba(14, 165, 233, 0.35);

  --ca-danger-bg: #fff1f2;
  --ca-danger-border: #fecdd3;
  --ca-danger-fg: #9f1239;
  --ca-warn-bg: #fffbeb;
  --ca-warn-border: #fde68a;
  --ca-warn-fg: #92400e;
  --ca-ok-bg: #ecfdf5;
  --ca-ok-border: #a7f3d0;
  --ca-ok-fg: #065f46;
  --ca-info-bg: #f0f9ff;
  --ca-info-border: #bae6fd;
  --ca-info-fg: #075985;

  color: var(--ca-fg);
  background-color: var(--ca-bg);
}

html.dark {
  color-scheme: dark;
  --ca-bg: #0b1220;
  --ca-bg-deep: #020617;
  --ca-panel: #111827;
  --ca-panel-soft: #0f172a;
  --ca-input: #020617;
  --ca-hover: #1e293b;
  --ca-border: #1e293b;
  --ca-border-strong: #334155;
  --ca-fg: #e8edf5;
  --ca-secondary: #cbd5e1;
  --ca-muted: #94a3b8;
  --ca-faint: #64748b;
  /* Brand blue stays sky-600 in dark mode (CorPBX family) */
  --ca-brand: #0284c7;
  --ca-header: #0284c7;
  --ca-accent: #0284c7;
  --ca-accent-strong: #0284c7;
  --ca-accent-soft: rgba(2, 132, 199, 0.18);
  --ca-ring: rgba(2, 132, 199, 0.4);
  --ca-danger-bg: rgba(69, 10, 10, 0.45);
  --ca-danger-border: rgba(127, 29, 29, 0.55);
  --ca-danger-fg: #fecdd3;
  --ca-warn-bg: rgba(69, 26, 3, 0.4);
  --ca-warn-border: rgba(146, 64, 14, 0.5);
  --ca-warn-fg: #fde68a;
  --ca-ok-bg: rgba(6, 78, 59, 0.35);
  --ca-ok-border: rgba(6, 95, 70, 0.5);
  --ca-ok-fg: #a7f3d0;
  --ca-info-bg: rgba(12, 74, 110, 0.35);
  --ca-info-border: rgba(3, 105, 161, 0.5);
  --ca-info-fg: #bae6fd;
}

*, *::before, *::after { box-sizing: border-box; }

/*
  Site-wide UI font: always Segoe UI (main brand stack).
  Do not use monospace/code faces for usernames, IPs, slugs, emails, or body text.
*/
html,
body,
button,
input,
textarea,
select,
code,
pre,
kbd,
samp,
.form-control,
.form-select,
.btn,
.table,
.nav-link,
.badge,
.font-monospace,
.font-mono,
[class*="font-mono"],
[class*="font-monospace"] {
  font-family: var(--ca-font, "Segoe UI", system-ui, sans-serif) !important;
}

html, body {
  margin: 0;
  min-height: 100%;
  width: 100%;
  color: var(--ca-fg);
  background:
    radial-gradient(1200px 600px at 10% -10%, var(--ca-accent-soft), transparent 50%),
    radial-gradient(900px 500px at 100% 0%, rgba(99, 102, 241, 0.08), transparent 45%),
    var(--ca-bg);
}

html.dark body {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(56, 189, 248, 0.12), transparent 50%),
    radial-gradient(900px 500px at 100% 0%, rgba(99, 102, 241, 0.12), transparent 45%),
    var(--ca-bg);
}

code, pre, kbd, samp {
  font-size: 0.92em;
  font-variant-ligatures: none;
}

code {
  background: var(--ca-hover);
  padding: 0.1em 0.35em;
  border-radius: 0.25rem;
}

/* ===== Shell: column only (header on TOP) ===== */
.page {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh;
  width: 100%;
}

/* Defensive: never allow Blazor template sidebar layout */
.sidebar,
.page > .sidebar {
  display: none !important;
}

a { color: var(--ca-header); text-decoration: none; }
a:hover { color: var(--ca-accent-strong); }

/* Wordmark — CorAuth header: text-2xl / letter-spacing -0.03em */
.brand-word {
  color: var(--ca-brand, var(--ca-header));
  letter-spacing: -0.03em;
  font-size: 1.5rem; /* text-2xl — CorAuth BrandLogo size sm */
  line-height: 1;
  white-space: nowrap;
  font-weight: 400;
}
.brand-word-header {
  font-size: 1.5rem;
}
.brand-cor { font-weight: 400; }
.brand-suffix,
.brand-connect { font-weight: 700; }

/* ——— Header brand (match CorAuth Layout + BrandLogo sm) ——— */
.ca-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: color-mix(in srgb, var(--ca-panel) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ca-border);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03);
}

.ca-header-inner {
  max-width: 90rem;
  margin: 0 auto;
  padding: 0.75rem 1rem; /* CorAuth py-3.5 ~ 0.875rem — close */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem 1rem;
  min-height: 3.5rem;
}

.ca-header-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
}

/* CorAuth: flex items-center gap-2 (0.5rem) between mark and wordmark */
.ca-header-left a.brand-link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem; /* gap-2 */
  min-width: 0;
  text-decoration: none;
  color: inherit;
  line-height: 1;
}

.ca-header-left a.brand-link:hover .brand-word {
  color: var(--ca-brand) !important;
}

/* CorAuth BrandLogo sm: h-10 w-10 (2.5rem) */
.ca-header-left img.ca-mark,
.ca-header-left img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  background: transparent;
  user-select: none;
}

.ca-header-cluster {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem 0.75rem;
  flex: 1 1 auto;
  min-width: 0;
}

/* Nav pills (CorPBX) */
.ca-nav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.1rem 0.5rem;
  flex: 1 1 auto;
  min-width: 0;
  justify-content: flex-end;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
  padding-block: 0.15rem;
}

.ca-nav a,
.ca-nav .nav-link {
  color: var(--ca-muted) !important;
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.4rem 0.7rem !important;
  border-radius: 999px !important;
  border: 1px solid transparent !important;
  background: none !important;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.2 !important;
  height: auto !important;
  width: auto !important;
  display: inline-flex !important;
  align-items: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.ca-nav a:hover,
.ca-nav .nav-link:hover {
  color: var(--ca-brand) !important;
  background: var(--ca-hover) !important;
  border-color: var(--ca-border) !important;
}

.ca-nav a.active,
.ca-nav .nav-link.active {
  color: var(--ca-brand) !important;
  background: var(--ca-accent-soft) !important;
  border-color: color-mix(in srgb, var(--ca-brand) 35%, var(--ca-border)) !important;
  font-weight: 600 !important;
}

/* Right tools: styles in js/ca-menubar.css (CorPBX reference) */
.ca-header-right {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
}

.ca-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.ca-footer {
  width: 100%;
  border-top: 1px solid var(--ca-border);
  text-align: center;
  font-size: 11px;
  color: var(--ca-faint);
  padding: 1rem;
  background: transparent;
}

h1, .h1, .page-title, h1.h3 {
  color: var(--ca-header) !important;
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 0;
}

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.page-sub {
  color: var(--ca-muted);
  font-size: 0.92rem;
  margin: 0.25rem 0 0;
}
.ca-card-kicker {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ca-muted);
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.ca-alert {
  border-radius: 10px;
}
.card, .ca-card {
  background-color: var(--ca-panel);
  background-image: linear-gradient(
    to bottom right,
    var(--ca-panel),
    color-mix(in srgb, var(--ca-accent) 10%, transparent)
  );
  border: 1px solid var(--ca-border) !important;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04);
}

.card-header {
  border-bottom-color: var(--ca-border) !important;
  color: var(--ca-fg);
  background: transparent !important;
}

/* Metric / feature tiles */
.ca-metric {
  background-image: linear-gradient(
    to bottom right,
    var(--ca-panel),
    color-mix(in srgb, var(--ca-accent) 12%, transparent)
  );
}

.table thead,
.table thead th {
  background-image: linear-gradient(
    to bottom right,
    var(--ca-panel),
    color-mix(in srgb, var(--ca-accent) 8%, transparent)
  );
  color: var(--ca-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

.btn-primary {
  background: var(--ca-accent-strong);
  border-color: var(--ca-accent-strong);
  color: #fff;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.28);
}
.btn-primary:hover {
  background: #0369a1;
  border-color: #0369a1;
  color: #fff;
}
.btn-outline-primary {
  color: var(--ca-header);
  border-color: var(--ca-header);
}
.btn-outline-primary:hover {
  background: var(--ca-accent-soft);
  color: var(--ca-header);
  border-color: var(--ca-header);
}
.btn-outline-secondary {
  color: var(--ca-secondary);
  border-color: var(--ca-border-strong);
}

.table {
  --bs-table-bg: var(--ca-panel);
  --bs-table-color: var(--ca-fg);
  --bs-table-border-color: var(--ca-border);
  --bs-table-hover-bg: var(--ca-hover);
}
.table-light {
  --bs-table-bg: var(--ca-panel-soft);
  --bs-table-color: var(--ca-secondary);
}
.form-control, .form-select {
  background: var(--ca-input);
  border-color: var(--ca-border);
  color: var(--ca-fg);
}
.form-control:focus, .form-select:focus {
  border-color: var(--ca-accent);
  box-shadow: 0 0 0 0.2rem var(--ca-ring);
}
.alert-info {
  background: var(--ca-info-bg);
  border-color: var(--ca-info-border);
  color: var(--ca-info-fg);
}
.alert-danger {
  background: var(--ca-danger-bg);
  border-color: var(--ca-danger-border);
  color: var(--ca-danger-fg);
}
.alert-success {
  background: var(--ca-ok-bg);
  border-color: var(--ca-ok-border);
  color: var(--ca-ok-fg);
}
.list-group-item {
  background: var(--ca-panel);
  border-color: var(--ca-border);
  color: var(--ca-fg);
}

/* Login — CorAuth card: max-w-md, p-8/p-10, large horizontal brand */
.login-shell {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(1200px 600px at 10% -10%, var(--ca-accent-soft), transparent 50%),
    radial-gradient(900px 500px at 100% 0%, rgba(99, 102, 241, 0.08), transparent 45%),
    var(--ca-bg);
}
html.dark .login-shell {
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(56, 189, 248, 0.12), transparent 50%),
    radial-gradient(900px 500px at 100% 0%, rgba(99, 102, 241, 0.12), transparent 45%),
    var(--ca-bg);
}
.login-theme-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}
.login-card {
  width: 100%;
  max-width: 28rem; /* max-w-md */
  background-color: color-mix(in srgb, var(--ca-panel) 95%, transparent);
  background-image: linear-gradient(
    to bottom right,
    var(--ca-panel),
    color-mix(in srgb, var(--ca-accent) 10%, transparent)
  );
  backdrop-filter: blur(12px);
  border: 1px solid var(--ca-border);
  border-radius: 1rem; /* rounded-2xl */
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
}
.login-card-body {
  padding: 2rem 2rem 2.25rem; /* p-8 */
}
@media (min-width: 640px) {
  .login-card-body {
    padding: 2.5rem; /* sm:p-10 */
  }
}

/* Hero brand — CorAuth BrandLogo size lg: mark h-14/h-16, word text-4xl/5xl, gap-2 */
.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 2rem; /* mb-8 */
}
.login-brand-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* gap-2 — same as CorAuth */
}
.login-brand-mark {
  width: 3.5rem;   /* h-14 */
  height: 3.5rem;
  flex-shrink: 0;
  object-fit: contain;
  border-radius: 0.75rem;
  user-select: none;
  display: block;
}
@media (min-width: 640px) {
  .login-brand-mark {
    width: 4rem;   /* sm:h-16 */
    height: 4rem;
    border-radius: 0.85rem;
  }
}
.login-brand-word {
  color: var(--ca-brand, var(--ca-header));
  letter-spacing: -0.03em;
  line-height: 1;
  white-space: nowrap;
  font-size: 2.25rem; /* text-4xl */
  user-select: none;
}
@media (min-width: 640px) {
  .login-brand-word {
    font-size: 3rem; /* sm:text-5xl */
  }
}
.login-brand-word .brand-cor { font-weight: 400; }
.login-brand-word .brand-suffix { font-weight: 700; }

.login-label {
  color: var(--ca-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}
.login-input {
  margin-top: 0.25rem;
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
}
.login-input:focus {
  border-color: var(--ca-accent);
  box-shadow: 0 0 0 0.2rem var(--ca-ring);
}
.login-submit {
  padding: 0.65rem 1rem;
  font-weight: 600;
  border-radius: 0.5rem;
}

.hero {
  background-color: var(--ca-panel);
  background-image: linear-gradient(
    to bottom right,
    var(--ca-panel),
    color-mix(in srgb, var(--ca-accent) 10%, transparent)
  );
  border: 1px solid var(--ca-border);
  border-left: 4px solid var(--ca-accent-strong) !important;
  border-radius: 12px;
}

/* Deploy modal (Managed page) */
.deploy-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 80;
}
.deploy-modal {
  position: fixed;
  z-index: 90;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(40rem, calc(100vw - 2rem));
  max-height: min(90vh, 44rem);
  overflow: auto;
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
}

/* Dashboard metric tiles (CorAuth-style 4-up grids) */
.dash-metric-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
}
@media (min-width: 992px) {
  .dash-metric-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}
.dash-stat {
  padding: 1rem 1.1rem;
  min-height: 7.5rem;
}
.dash-stat-value {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--ca-header);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-top: 0.35rem;
}
.dash-stat-value-sm {
  font-size: 1.45rem;
}
.dash-stat-status {
  font-size: 1.35rem;
  text-transform: capitalize;
}
.dash-stat-hint {
  margin-top: 0.35rem;
  font-size: 0.8rem;
  color: var(--ca-muted);
  line-height: 1.35;
}
a.dash-stat-link {
  text-decoration: none !important;
  color: inherit;
  display: block;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
a.dash-stat-link:hover {
  border-color: color-mix(in srgb, var(--ca-header) 45%, var(--ca-border)) !important;
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.12);
}

/* Settings hub (CorAuth-style card grid — family template) */
.settings-hub-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.settings-hub-card {
  display: block;
  border: 1px solid var(--ca-border);
  border-radius: 1rem;
  padding: 1.25rem;
  text-decoration: none !important;
  color: inherit;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.settings-hub-card:hover {
  border-color: color-mix(in srgb, var(--ca-header) 45%, var(--ca-border));
  box-shadow: 0 4px 16px rgba(2, 132, 199, 0.12);
}
.settings-hub-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ca-header);
}
.settings-hub-desc {
  margin: 0.5rem 0 0;
  font-size: 0.875rem;
  color: var(--ca-muted);
  line-height: 1.45;
}
.settings-hub-open {
  margin-top: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ca-header);
  opacity: 0.85;
}
.settings-hub-card:hover .settings-hub-open { opacity: 1; }

.settings-back {
  display: inline-block;
  font-size: 0.875rem;
  color: var(--ca-header);
  text-decoration: none;
  margin-bottom: 0.25rem;
}
.settings-back:hover { text-decoration: underline; }

/* Theme toggle: CorAuth sun/moon icon — see js/theme-toggle.css */
.ghost-btn {
  border: 1px solid var(--ca-border);
  background: transparent;
  color: var(--ca-secondary);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  font-size: 0.85rem;
  cursor: pointer;
}
.ghost-btn:hover { background: var(--ca-hover); color: var(--ca-fg); }

.session-stage {
  background: #0b1220;
  border-radius: 12px;
  min-height: 420px;
}

#blazor-error-ui {
  background: var(--ca-warn-bg);
  border-top: 1px solid var(--ca-warn-border);
  color: var(--ca-warn-fg);
  bottom: 0;
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

/* Mobile: keep tools; allow nav scroll */
@media (max-width: 900px) {
  .ca-header-inner { flex-wrap: wrap; }
  .ca-header-cluster { width: 100%; }
}