/* =================================================================
   Purple Mail Archive — Metronic companion stylesheet
   Layout, theming, and chrome are provided by Metronic's Tailwind
   utilities (styles.css). This file covers only the runtime classes
   that app.js constructs programmatically, plus a few overrides.

   SECTION 0 — Missing Tailwind utilities
   The Metronic pre-built styles.css omits many Tailwind classes that
   our app.html uses. We replicate them here verbatim.
   ================================================================= */

/* ---- Brand theme: Purple Tech — override Metronic's default blue primary ---- */
:root {
  /* violet-600 ≈ #7c3aed */
  --primary: oklch(52% 0.271 293);
  --primary-foreground: #fff;
}
.dark {
  /* violet-400 ≈ #a78bfa  — lighter for dark-mode contrast */
  --primary: oklch(67% 0.22 293);
}

/* ---- Typography ---- */
.font-bold    { font-weight: 700; }
.leading-tight { line-height: 1.25; }
.tracking-wide  { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }
.break-words { overflow-wrap: break-word; }
.break-all   { word-break: break-all; }
.shrink { flex-shrink: 1; }
.text-\[10px\] { font-size: 10px; }

/* ---- Overflow ---- */
.overflow-y-auto { overflow-y: auto; }

/* ---- Spacing — gap ---- */
.gap-0\.5 { gap: 0.125rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3\.5 { gap: 0.875rem; }

/* ---- Spacing — padding ---- */
.py-8  { padding-top: 2rem;   padding-bottom: 2rem; }
.pb-8  { padding-bottom: 2rem; }
.pt-8  { padding-top: 2rem; }
.px-2\.5 { padding-left: 0.625rem; padding-right: 0.625rem; }
.py-\[8px\]  { padding-top: 8px;  padding-bottom: 8px; }
.px-\[10px\] { padding-left: 10px; padding-right: 10px; }

/* ---- Spacing — margin ---- */
.mt-0\.5 { margin-top:    0.125rem; }
.mb-0\.5 { margin-bottom: 0.125rem; }
.ms-1    { margin-inline-start: 0.25rem; }
.me-1    { margin-inline-end:   0.25rem; }
.ms-1\.5 { margin-inline-start: 0.375rem; }
.me-1\.5 { margin-inline-end:   0.375rem; }

/* ---- Sizing ---- */
.max-w-md        { max-width: 28rem; }
.max-w-\[400px\] { max-width: 400px; }
.max-h-\[70vh\]  { max-height: 70vh; }
.size-\[28px\]   { width: 28px;  height: 28px; }
.size-\[48px\]   { width: 48px;  height: 48px; }
.size-\[52px\]   { width: 52px;  height: 52px; }
.w-\[20px\]      { width: 20px; }
.w-24            { width: 6rem; }
.h-\[--kt-header-height\]  { height: var(--kt-header-height); }
.max-w-\[220px\] { max-width: 220px; }

/* ---- Border radius ---- */
.rounded-\[14px\] { border-radius: 14px; }

/* ---- Transition ---- */
.transition-\[padding\] { transition-property: padding; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

/* ---- Semantic color text utilities ---- */
.text-primary { color: var(--primary); }
.text-success { color: #17c653; }
.text-warning { color: #f59e0b; }
.text-danger  { color: #f8285a; }
.text-info    { color: #3b82f6; }

/* ---- Semantic color background utilities (with opacity) ---- */
.bg-primary { background-color: var(--primary); }
.bg-primary\/10 { background-color: color-mix(in oklab, var(--primary) 10%, transparent); }
.bg-success\/10 { background-color: color-mix(in oklab, #17c653 10%, transparent); }
.bg-warning\/10 { background-color: color-mix(in oklab, #f59e0b 10%, transparent); }
.bg-danger\/10  { background-color: color-mix(in oklab, #f8285a 10%, transparent); }
.bg-info\/10    { background-color: color-mix(in oklab, #3b82f6 10%, transparent); }
.bg-muted\/20   { background-color: color-mix(in oklab, var(--muted) 20%, transparent); }
.bg-muted\/40   { background-color: color-mix(in oklab, var(--muted) 40%, transparent); }
.hover\:bg-accent\/60:hover { background-color: color-mix(in oklab, var(--accent) 60%, transparent); }

/* ---- Responsive display ---- */
@media (min-width: 640px)  { .sm\:hidden  { display: none; } }
@media (min-width: 640px)  { .sm\:inline  { display: inline; } }
@media (min-width: 640px)  { .sm\:flex    { display: flex; } }
@media (min-width: 768px)  { .md\:flex    { display: flex; } }
@media (min-width: 768px)  { .md\:hidden  { display: none; } }

/* ---- Responsive grid ---- */
@media (min-width: 640px)  { .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 640px)  { .sm\:col-span-2  { grid-column: span 2 / span 2; } }
@media (min-width: 1024px) { .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .lg\:col-span-3  { grid-column: span 3 / span 3; } }
@media (min-width: 1024px) { .lg\:col-span-4  { grid-column: span 4 / span 4; } }
@media (min-width: 1280px) { .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---- Responsive spacing ---- */
@media (min-width: 640px)  { .sm\:px-0  { padding-left: 0; padding-right: 0; } }
@media (min-width: 1024px) { .lg\:px-7  { padding-left: 1.75rem; padding-right: 1.75rem; } }
@media (min-width: 1024px) { .lg\:ps-4  { padding-inline-start: 1rem; } }
@media (min-width: 1024px) { .lg\:pe-3  { padding-inline-end: 0.75rem; } }

/* ---- Grid: custom column templates used in app.html ---- */
.grid-cols-\[1fr_auto\]        { grid-template-columns: 1fr auto; }
.grid-cols-\[minmax\(180px\2c 240px\)_minmax\(0\2c 1fr\)\] {
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
}

/* ---- Utility ---- */
/* NOTE: .hidden is defined by Metronic's styles.css (display:none, no !important).
   We must NOT redefine it here — that would break Metronic's responsive patterns
   like "hidden lg:flex" where lg:flex must override hidden at large viewports. */

/* ---- Toast notifications ---- */
#app-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
}

#app-loading-screen.hidden {
  display: none;
}

#app-loading-screen .loading-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  min-width: 280px;
  max-width: 360px;
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.12);
  text-align: center;
}

#app-loading-screen .loading-spinner-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: rgba(61, 104, 255, 0.1);
  color: #3d68ff;
}

#app-loading-screen .loading-spinner {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  border: 2px solid rgba(61, 104, 255, 0.2);
  border-top-color: #3d68ff;
  animation: app-loading-spin 0.85s linear infinite;
}

@keyframes app-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.dark #app-loading-screen {
  background: rgba(9, 9, 11, 0.82);
}

.dark #app-loading-screen .loading-card {
  border-color: #27272a;
  background: #09090b;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.toast-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: grid;
  gap: 0.65rem;
  pointer-events: none;
}

.toast {
  min-width: 260px;
  max-width: 380px;
  padding: 0.85rem 1rem;
  border-radius: 0.625rem;
  background: #fff;
  border: 1px solid #e9ecef;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  font-size: 0.875rem;
  color: #374151;
  pointer-events: auto;
}

.toast.success {
  border-left: 3px solid #17c653;
}

.toast.error {
  border-left: 3px solid #f8285a;
}

/* ---- Inline feedback messages ---- */
.feedback {
  margin: 0;
  font-size: 0.8125rem;
}

.error {
  color: #f8285a;
}

.success {
  color: #17c653;
}

.warning {
  color: #f6b100;
}

/* ---- Nav link active state ---- */
/* Keeps the current view highlighted; Metronic .active class already
   handles most of this — we add a minimal fallback for the JS toggle. */
.nav-link.active {
  color: var(--primary, #7c3aed) !important;
  background-color: color-mix(in oklab, var(--primary, #7c3aed) 10%, transparent) !important;
}

/* ---- Status badges (generated by statusBadge() in app.js) ---- */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
}

.status-badge.success {
  color: #0d6832;
  background: #dfffea;
  border-color: #9ef5bc;
}

.status-badge.warning {
  color: #7a4200;
  background: #fff8e0;
  border-color: #fcd34d;
}

.status-badge.info {
  color: #1e40af;
  background: #dbeafe;
  border-color: #93c5fd;
}

.status-badge.danger {
  color: #8b0020;
  background: #ffe5ea;
  border-color: #fca5a5;
}

/* ---- Chart containers ---- */
.chart-shell {
  min-height: 320px;
  width: 100%;
}

.chart-shell.small {
  min-height: 240px;
}

.chart-shell.timeline {
  min-height: 340px;
}

/* ---- Progress bar ---- */
.progress-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: #e9ecef;
  overflow: hidden;
}

.progress-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--primary, #7c3aed);
  transition: width 220ms ease;
}

/* ---- Overview desktop layout ---- */
#app-shell {
  min-height: 100%;
}

#sidebar_content,
#sidebar_scrollable {
  min-height: 0;
}

#sidebar_content,
#sidebar_scrollable {
  flex-shrink: 1;
}

#sidebar_scrollable,
#nav-panel {
  width: 100%;
}

#sidebar_scrollable {
  overflow-y: auto;
}

#session-panel {
  margin-top: auto;
}

.sidebar-brand-copy {
  min-width: 0;
}

.sidebar-session-compact {
  display: none;
}

.session-compact-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  color: #17c653;
  background: rgb(23 198 83 / 10%);
}

.sidebar-action-label {
  display: inline;
}

.dashboard-metrics-row {
  display: grid;
}

.overview-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

#overview-trend-card {
  min-width: 0;
}

@media (min-width: 1024px) {
  .dashboard-metrics-row {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .chart-card {
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
  }

  .overview-layout.overview-layout-superadmin {
    grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 3fr);
  }

  .overview-layout.overview-layout-scoped {
    grid-template-columns: minmax(0, 2fr) minmax(0, 8fr);
  }

  .demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .sidebar-session-expanded,
  .demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .sidebar-session-expanded-block,
  .demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .sidebar-brand-copy {
    display: none !important;
  }

  .demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .sidebar-session-compact {
    display: flex;
    justify-content: center;
  }

  .demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) #session-panel {
    padding-inline: 0.75rem;
  }

  .demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .sidebar-session-actions .kt-btn {
    padding-inline: 0;
  }

  .demo1.kt-sidebar-collapse .kt-sidebar:not(:hover) .sidebar-action-label {
    display: none !important;
  }
}

/* ---- Ops-health / stack list ---- */
.stack-list {
  display: grid;
  gap: 0.65rem;
}

.stack-item {
  padding: 0.85rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #e9ecef;
  background: #f9fafb;
}

.stack-item strong {
  display: block;
  margin-bottom: 0.15rem;
}

/* ---- Scope chip (tenant/role indicator in header) ---- */
.scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid #e9ecef;
  background: #f3f4f6;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* ---- Email results list ---- */
.results-stack {
  display: grid;
  gap: 0.75rem;
}

/* ---- Email detail placeholder ---- */
.detail-placeholder {
  min-height: 260px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
  border-radius: 0.5rem;
  border: 1.5px dashed #d1d5db;
  color: #9ca3af;
  background: #fafafa;
}

/* ---- Section headings (used in app.html template) ---- */
.section-eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #71717a;
}

.section-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #09090b;
}

/* ---- Muted text (generated by app.js inline HTML) ---- */
.muted {
  color: #71717a;
  font-size: 0.8125rem;
}

/* ---- Detail meta row (generated by app.js) ---- */
.detail-meta {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.2rem;
  font-size: 0.8125rem;
  color: #71717a;
}

/* ---- Pill badge (generated by app.js for issue codes) ---- */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  border: 1px solid #e4e4e7;
  background: #f4f4f5;
  color: #3f3f46;
  font-size: 0.75rem;
  font-weight: 500;
}

/* ---- Chart card layout (chart donut + breakdown list side-by-side) ---- */
.chart-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  align-items: center;
}

#donut_chart {
  min-height: 260px;
}

.storage-legend-swatch {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
}

.storage-legend-row {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.storage-legend-copy {
  min-width: 0;
  flex: 1 1 auto;
}

/* ---- Compact stack variant ---- */
.stack-list.compact .stack-item {
  padding: 0.6rem 0.75rem;
}

/* ---- DataTables search bar ---- */
/* Placed between the card header and the table body */
.dt-search-bar {
  padding: 0.65rem 1.25rem;
  border-bottom: 1px solid #e4e4e7;
  background: #fafafa;
}

.dt-search-bar .dt-search,
.dataTables_wrapper .dataTables_filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.dt-search-bar .dt-search label,
.dataTables_wrapper .dataTables_filter label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  color: #71717a;
  margin: 0;
}

.dt-search-bar .dt-search input,
.dataTables_wrapper .dataTables_filter input {
  height: 2rem;
  padding: 0 0.65rem;
  border: 1px solid #e4e4e7;
  border-radius: 0.4rem;
  font-size: 0.8125rem;
  color: #09090b;
  background: #fff;
  width: 200px;
  outline: none;
}

.dt-search-bar .dt-search input:focus,
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124,58,237,0.15);
}

/* Remove DataTables' own wrapper margins that conflict with card padding */
.dataTables_wrapper {
  overflow: hidden;
}

/* Sort arrow cursor on th */
table.dataTable thead th {
  cursor: pointer;
}

/* ---- Email result list item ---- */
.email-result-item {
  padding: 0.75rem 1.25rem;
  border-bottom: 1px solid #e4e4e7;
  cursor: pointer;
  transition: background 120ms ease;
}

.email-result-item:last-child {
  border-bottom: none;
}

.email-result-item:hover {
  background: #f4f4f5;
}

.email-result-item.selected {
  background: rgba(124, 58, 237, 0.06);
  border-left: 3px solid #7c3aed;
}

/* ---- Email detail — HTML preview iframe ---- */
.email-html-preview {
  width: 100%;
  min-height: 260px;
  border: none;
  display: block;
  background: #fff;
}

/* ---- Email detail — plain text body ---- */
.email-body-text {
  margin: 0;
  padding: 1rem 1.25rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: #3f3f46;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-height: 360px;
  overflow-y: auto;
}

/* ---- Dark mode adjustments ---- */
.dark .section-title { color: #fafafa; }
.dark .section-eyebrow { color: #a1a1aa; }
.dark .muted { color: #a1a1aa; }
.dark .detail-meta { color: #a1a1aa; }
.dark .stack-item { background: #18181b; border-color: #27272a; }
.dark .pill { background: #27272a; border-color: #3f3f46; color: #d4d4d8; }
.dark .detail-placeholder { border-color: #3f3f46; color: #71717a; background: #09090b; }
.dark .progress-track { background: #27272a; }
.dark .scope-chip { background: #18181b; border-color: #27272a; color: #a1a1aa; }
.dark .toast { background: #18181b; border-color: #27272a; color: #fafafa; }
.dark .email-result-item { border-color: #27272a; }
.dark .email-result-item:hover { background: #18181b; }
.dark .email-result-item.selected { background: rgba(124,58,237,0.12); border-left-color: #a78bfa; }
.dark .email-html-preview { background: #fff; } /* keep white bg for HTML mail readability */
.dark .email-body-text { color: #a1a1aa; }

/* ---- Login page ---- */
.login-page {
  min-height: 100vh;
  margin: 0;
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at top left, rgba(124, 58, 237, 0.08), transparent 32%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 58%, #f8fafc 100%);
  color: #111827;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.login-page .hidden {
  display: none !important;
}

.login-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.login-stack {
  width: min(100%, 34rem);
  display: grid;
  gap: 1.25rem;
}

.login-card {
  display: grid;
  gap: 1rem;
  width: 100%;
  padding: 2rem;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.10);
}

.login-card-header {
  display: grid;
  gap: 0.35rem;
  text-align: center;
}

.login-card-title {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 700;
  color: #111827;
}

.login-card-subtitle {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #64748b;
}

.login-field {
  display: grid;
  gap: 0.45rem;
}

.login-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
}

.login-inline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.login-tenant-toggle,
.login-tenant-link {
  border: 0;
  padding: 0;
  background: transparent;
  font-size: 0.85rem;
  font-weight: 600;
  color: #6d28d9;
  cursor: pointer;
}

.login-tenant-toggle:hover,
.login-tenant-link:hover {
  color: #5b21b6;
}

.login-tenant-panel {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px dashed rgba(109, 40, 217, 0.28);
  border-radius: 1rem;
  background: rgba(248, 250, 252, 0.94);
}

.login-help-text {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #64748b;
}

.login-card-actions {
  display: grid;
  gap: 0.75rem;
}

.login-mobile-brand {
  display: grid;
  gap: 0.55rem;
  justify-items: center;
  text-align: center;
  padding: 0.5rem 0;
}

.login-mobile-mark,
.login-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #7c3aed, #6d28d9);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: 0 18px 40px rgba(109, 40, 217, 0.35);
}

.login-mobile-title {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  color: #111827;
}

.login-mobile-subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: #64748b;
}

.login-info-panel {
  display: grid;
  gap: 0.3rem;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  border: 1px solid rgba(124, 58, 237, 0.18);
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.08), rgba(59, 130, 246, 0.08));
}

.login-info-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #111827;
}

.login-info-body {
  font-size: 0.875rem;
  color: #475569;
}

.page-bg {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.login-hero {
  position: relative;
  display: none;
  overflow: hidden;
  min-height: 100vh;
  color: #fff;
}

.login-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(76, 29, 149, 0.88), rgba(67, 56, 202, 0.78) 52%, rgba(15, 23, 42, 0.82)),
    radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 26%);
}

.login-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  padding: 3rem clamp(2rem, 4vw, 4.5rem);
  gap: 2rem;
}

.login-hero-copy {
  display: grid;
  gap: 2rem;
}

.login-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  width: fit-content;
  padding: 1rem 1.1rem;
  border-radius: 1.25rem;
  background: rgba(15, 23, 42, 0.20);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(16px);
}

.login-brand-eyebrow,
.login-hero-eyebrow {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

.login-brand-title {
  margin: 0.2rem 0 0;
  font-size: 1.4rem;
  line-height: 1.1;
  font-weight: 700;
  color: #fff;
}

.login-hero-text {
  display: grid;
  gap: 1rem;
  max-width: 38rem;
}

.login-hero-heading {
  margin: 0;
  font-size: clamp(2.2rem, 3vw, 3.4rem);
  line-height: 1.05;
  font-weight: 700;
  text-wrap: balance;
  color: #fff;
}

.login-hero-body {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.86);
}

.login-hero-panels {
  display: grid;
  gap: 1rem;
}

.login-hero-panel {
  display: grid;
  gap: 0.45rem;
  padding: 1.1rem 1.15rem;
  border-radius: 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
}

.login-hero-panel-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
}

.login-hero-panel-body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}

@media (min-width: 1024px) {
  .login-shell {
    grid-template-columns: minmax(0, 1.08fr) minmax(460px, 0.92fr);
  }

  .login-hero {
    display: block;
  }

  .login-main {
    padding: 2.5rem clamp(2rem, 3vw, 4rem);
  }

  .login-mobile-brand {
    display: none;
  }

  .login-hero-panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023.98px) {
  .login-card {
    padding: 1.5rem;
    border-radius: 1.25rem;
  }

  .login-card-title {
    font-size: 1.5rem;
  }
}

.dark .login-page {
  background:
    radial-gradient(circle at top left, rgba(167, 139, 250, 0.10), transparent 32%),
    linear-gradient(180deg, #09090b 0%, #111827 52%, #09090b 100%);
  color: #f8fafc;
}

.dark .login-card {
  border-color: rgba(63, 63, 70, 0.72);
  background: rgba(15, 23, 42, 0.86);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
}

.dark .login-card-title,
.dark .login-label,
.dark .login-mobile-title,
.dark .login-info-title {
  color: #f8fafc;
}

.dark .login-card-subtitle,
.dark .login-mobile-subtitle,
.dark .login-help-text,
.dark .login-info-body {
  color: #cbd5e1;
}

.dark .login-tenant-panel {
  border-color: rgba(167, 139, 250, 0.34);
  background: rgba(15, 23, 42, 0.65);
}

.dark .login-tenant-toggle,
.dark .login-tenant-link {
  color: #c4b5fd;
}