/* GSS premium surface system
   Loaded last so every workspace shares one polished card and KPI language. */
:root {
  --premium-bg: #f2f4f7;
  --premium-card: linear-gradient(145deg, #ffffff 0%, #fcfdff 62%, #f8fafc 100%);
  --premium-card-head: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,249,252,.96));
  --premium-border: rgba(15, 23, 42, .10);
  --premium-border-strong: rgba(15, 23, 42, .15);
  --premium-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.065);
  --premium-shadow-raised: 0 2px 4px rgba(15,23,42,.05), 0 16px 38px rgba(15,23,42,.11);
  --premium-inset: inset 0 1px 0 rgba(255,255,255,.92);
}

body,
.app {
  background:
    radial-gradient(circle at 88% 4%, color-mix(in srgb, var(--theme) 4%, transparent), transparent 28rem),
    linear-gradient(180deg, #f7f8fa 0, var(--premium-bg) 16rem, #f4f6f8 100%);
}

/* Primary content surfaces */
.card,
.workflow-card,
.priority-bucket,
.report-card,
.ed-chart-card,
.knowledge-doc,
.profile-section,
.profile-rail-card,
.gantt-insight,
.fleet-report-card,
.tenant-account-card,
.workspace-card,
.role-btn,
.ai-panel,
.client-contract-list,
.side-workspace-card,
.side-primary-nav {
  min-width: 0;
  border: 1px solid var(--premium-border) !important;
  border-radius: 14px !important;
  background: var(--premium-card) !important;
  box-shadow: var(--premium-shadow), var(--premium-inset) !important;
}

.card,
.workflow-card,
.priority-bucket,
.report-card,
.ed-chart-card,
.gantt-insight,
.fleet-report-card,
.tenant-account-card {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.card:hover,
.priority-bucket:hover,
.report-card:hover,
.ed-chart-card:hover,
.gantt-insight:hover,
.fleet-report-card:hover,
.tenant-account-card:hover {
  border-color: var(--premium-border-strong) !important;
  box-shadow: var(--premium-shadow-raised), var(--premium-inset) !important;
}

.card-h,
.priority-bucket-head,
.profile-section > summary,
.client-contract-list > .card-h {
  position: relative;
  min-width: 0;
  border-bottom: 1px solid rgba(15,23,42,.075) !important;
  background: var(--premium-card-head) !important;
  box-shadow: inset 0 1px 0 #fff;
}

.card-h::before,
.client-contract-list > .card-h::before,
.kpi::before,
.tw-kpi::before,
.ed-kpi::before,
.workflow-card::before,
.report-row::before,
.workspace-card::before,
.ed-hero::before {
  content: none !important;
  display: none !important;
}

.card-h > b,
.priority-bucket-head b,
.ed-chart-head b {
  color: #111827;
  letter-spacing: -.012em;
}

.card.good { border-color: rgba(47,133,90,.24) !important; }
.card.warn { border-color: rgba(194,122,24,.25) !important; }
.card.bad { border-color: rgba(201,54,43,.24) !important; border-left-width: 1px !important; }

.card-b,
.priority-bucket-body,
.report-card-footer,
.client-contract-list > .card-b {
  background: transparent !important;
}

/* KPI family: standard, tenant-scale, executive, K9 and stock dashboards. */
.kpi,
.tw-kpi,
.ed-kpi {
  min-width: 0;
  min-height: 84px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--premium-border) !important;
  border-radius: 14px !important;
  background:
    radial-gradient(circle at 96% 8%, color-mix(in srgb, var(--ed, var(--theme)) 11%, transparent), transparent 46%),
    var(--premium-card) !important;
  box-shadow: var(--premium-shadow), var(--premium-inset) !important;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.kpi::after,
.tw-kpi::after,
.ed-kpi::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 74px;
  height: 74px;
  right: -34px;
  bottom: -38px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ed, var(--theme)) 7%, transparent);
  pointer-events: none;
}

.kpi b,
.tw-kpi b,
.ed-kpi b {
  color: color-mix(in srgb, var(--ed, var(--theme)) 82%, #101827) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.035em;
  text-shadow: 0 1px 0 #fff;
}

.kpi div,
.tw-kpi span,
.ed-kpi span {
  color: #5c6878 !important;
  letter-spacing: .025em;
}

.tw-kpi em,
.ed-kpi em {
  color: #7b8796 !important;
  line-height: 1.3;
}

.kpi[onclick],
button.kpi,
.personnel-kpi,
.k9-kpi-grid .kpi,
.system-tool-card,
.workspace-card {
  cursor: pointer;
}

.kpi[onclick]:hover,
button.kpi:hover,
.personnel-kpi:hover,
.k9-kpi-grid .kpi:hover,
.system-tool-card:hover,
.workspace-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--theme) 28%, var(--premium-border)) !important;
  box-shadow: var(--premium-shadow-raised), 0 0 0 1px color-mix(in srgb, var(--theme) 5%, transparent) !important;
}

.personnel-kpi.active,
.k9-kpi-grid .kpi.active {
  border-color: color-mix(in srgb, var(--theme) 42%, var(--premium-border)) !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--theme) 7%, #fff), #fff) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme) 10%, transparent), var(--premium-shadow-raised) !important;
}

/* Compact information tiles and workflow cards. */
.item,
.tenant-meta-grid span,
.tenant-count,
.fleet-route-chip,
.fleet-location-register > button,
.ed-team,
.ed-gap,
.role-template-item,
.lean-hint,
.gantt-published-strip,
.client-contract-summary > div {
  min-width: 0;
  border: 1px solid rgba(15,23,42,.085) !important;
  border-radius: 11px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.98), rgba(248,250,252,.92)) !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.025), inset 0 1px 0 #fff !important;
}

.item.good,
.gantt-insight.good {
  border-left: 3px solid #2f855a !important;
  background: linear-gradient(110deg, #f4fbf7, #fff 34%) !important;
}

.item.warn,
.gantt-insight.warn {
  border-left: 3px solid #c27a18 !important;
  background: linear-gradient(110deg, #fffaf0, #fff 34%) !important;
}

.item.bad,
.gantt-insight.bad {
  border-color: rgba(201,54,43,.24) !important;
  border-left-width: 1px !important;
  background: linear-gradient(110deg, #fff6f5, #fff 34%) !important;
}

.gantt-published-strip,
.client-contract-summary .contract-countdown {
  border-color: rgba(47,133,90,.22) !important;
  background: linear-gradient(120deg, #eefaf3, #fff 58%) !important;
}

.client-contract-summary .contract-countdown.expired {
  border-color: rgba(201,54,43,.23) !important;
  background: linear-gradient(120deg, #fff2f1, #fff 58%) !important;
}

.kpi.pm-post-red,
.pm-post-red {
  border-color: rgba(201,54,43,.25) !important;
  background: radial-gradient(circle at 96% 8%, rgba(201,54,43,.10), transparent 46%), linear-gradient(145deg,#fff8f7,#fff) !important;
}

.workflow-card {
  border-radius: 14px !important;
  background: var(--premium-card) !important;
  box-shadow: var(--premium-shadow), var(--premium-inset) !important;
}

.workflow-icon {
  border: 1px solid color-mix(in srgb, var(--theme) 18%, var(--premium-border)) !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, color-mix(in srgb, var(--theme) 10%, #fff), #fff) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--theme) 10%, transparent), inset 0 1px 0 #fff;
}

.report-row {
  border: 1px solid var(--premium-border) !important;
  border-radius: 11px !important;
  background: var(--premium-card) !important;
  box-shadow: 0 2px 8px rgba(15,23,42,.045), var(--premium-inset) !important;
}

/* Tables should feel like part of the same surface, not a separate utility. */
.table-wrap {
  min-width: 0;
  border: 1px solid rgba(15,23,42,.075);
  border-radius: 11px;
  background: rgba(255,255,255,.78);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}

.dt th {
  background: linear-gradient(180deg, #f9fafb, #f2f5f8) !important;
  color: #586577 !important;
  border-bottom-color: rgba(15,23,42,.10) !important;
  box-shadow: inset 0 1px 0 #fff;
}

.dt td {
  border-bottom-color: rgba(15,23,42,.065) !important;
}

.dt tbody tr:last-child td { border-bottom: 0; }
.dt tbody tr:hover td { background: color-mix(in srgb, var(--theme) 3.5%, #fff) !important; }

/* Navigation and modal surfaces complete the premium system. */
.side-workspace-card {
  background: linear-gradient(145deg, #fff, #f8fafc) !important;
}

.side-primary-nav .side-nav-link {
  border: 1px solid transparent;
  transition: background .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.side-primary-nav .side-nav-link:hover {
  transform: translateX(2px);
  border-color: color-mix(in srgb, var(--theme) 14%, var(--premium-border));
  background: color-mix(in srgb, var(--theme) 5%, #fff);
}

.side-primary-nav .side-nav-link.active {
  border-color: color-mix(in srgb, var(--theme) 68%, #111827);
  background: linear-gradient(135deg, color-mix(in srgb, var(--theme) 90%, #111827), var(--theme)) !important;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--theme) 20%, transparent), inset 0 1px 0 rgba(255,255,255,.18) !important;
}

.modal {
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: 0 28px 80px rgba(2,8,23,.28), 0 0 0 1px rgba(15,23,42,.08) !important;
}

.modal-bg {
  background: rgba(8,15,28,.58) !important;
  backdrop-filter: blur(8px) saturate(.85);
}

.modal-h {
  background: var(--premium-card-head);
  border-bottom-color: rgba(15,23,42,.08) !important;
}

.primary,
.success,
.danger,
.amber,
.outline {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

.primary:hover,
.success:hover,
.danger:hover,
.amber:hover,
.outline:hover {
  transform: translateY(-1px);
}

.primary { box-shadow: 0 6px 14px color-mix(in srgb, var(--theme) 18%, transparent); }
.outline { box-shadow: 0 1px 2px rgba(15,23,42,.035), inset 0 1px 0 #fff; }

.role-btn {
  border-color: var(--premium-border) !important;
  background: linear-gradient(145deg,#fff,#f7f9fc) !important;
  box-shadow: 0 3px 12px rgba(15,23,42,.045), inset 0 1px 0 #fff !important;
}

.role-btn:hover,
.role-btn.active {
  border-color: color-mix(in srgb, var(--theme) 35%, var(--premium-border)) !important;
  background: linear-gradient(145deg,color-mix(in srgb,var(--theme) 7%,#fff),#fff) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb,var(--theme) 9%,transparent), 0 10px 24px rgba(15,23,42,.08) !important;
}

/* Spacious, always-visible testing profile gallery after workspace selection. */
.login.credentials-view {
  padding: 8px 12px;
  gap: 8px;
}

.login.credentials-view .tenant-login-card {
  width: min(1500px, 100%) !important;
  min-height: 570px !important;
  max-height: none !important;
  grid-template-columns: minmax(250px, .42fr) minmax(0, 1.58fr) !important;
}

.login.credentials-view .tenant-login-brand {
  padding: 30px !important;
}

.login.credentials-view .tenant-login-panel {
  align-items: flex-start;
  padding: 16px 28px !important;
}

.login.credentials-view .login-stage {
  max-width: none;
}

.login.credentials-view .login-back {
  margin: 7px 0 5px;
}

.login.credentials-view .login-stage-heading {
  margin-top: 9px;
}

.login.credentials-view .login-stage-heading h2 {
  font-size: 25px !important;
}

.login.credentials-view .login-stage-copy {
  margin-bottom: 6px;
  line-height: 1.35;
}

.login-test-profiles {
  margin: 6px 0 8px;
  overflow: visible;
  border: 1px solid var(--premium-border) !important;
  border-radius: 14px;
  background: linear-gradient(145deg, #fff, #f8fafc);
  box-shadow: 0 4px 15px rgba(15,23,42,.045), inset 0 1px 0 #fff;
}

.login-test-profiles-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px 7px;
}

.login-test-profiles-head span {
  color: #1f2937;
  font-size: 12px;
  font-weight: 900;
}

.login-test-profiles-head small {
  color: #718096;
  font-size: 10px;
  font-weight: 750;
  text-align: right;
}

.login.credentials-view .login-test-profiles .role-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  max-height: none !important;
  overflow: visible !important;
  margin: 0;
  padding: 0 12px 12px;
}

.login.credentials-view .login-test-profiles .role-btn {
  height: 68px !important;
  min-height: 0 !important;
  padding: 7px 8px !important;
  gap: 8px;
  overflow: hidden;
}

.login.credentials-view .role-profile-copy {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.login.credentials-view .tenant-login-form {
  margin-top: 7px;
  margin-bottom: 7px !important;
}

.login.credentials-view .login-submit {
  height: 44px;
}

.login.credentials-view .login-assurance {
  margin-top: 8px;
}

.login.credentials-view .login-testing-scope {
  margin-top: 7px;
  padding-top: 7px;
}

.login.credentials-view .login-security-footer {
  display: none;
}

/* Remove decorative colour bars while retaining semantic status surfaces. */
.fleet-start-card {
  border-top-width: 1px !important;
  border-top-color: var(--premium-border) !important;
}

.guard-profile-hero.bad,
.cr-command-card.bad,
.cr-stream.high {
  border-left-width: 1px !important;
}

.profile-timeline > div {
  border: 1px solid var(--premium-border) !important;
}

@media (max-width: 1200px) {
  .login.credentials-view .tenant-login-card {
    grid-template-columns: minmax(230px, .36fr) minmax(0, 1.64fr) !important;
  }

  .login.credentials-view .login-test-profiles .role-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .login.credentials-view .tenant-login-card {
    display: block !important;
    min-height: 0 !important;
  }

  .login.credentials-view .tenant-login-brand {
    display: none !important;
  }

  .login.credentials-view .tenant-login-panel {
    padding: 22px !important;
  }
}

@media (max-width: 700px) {
  .login.credentials-view .login-test-profiles .role-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .login-test-profiles-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .login-test-profiles-head small { text-align: left; }
}

@media (max-width: 520px) {
  .login.credentials-view .tenant-login-panel { padding: 18px 14px !important; }
  .login.credentials-view .login-test-profiles .role-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .login.credentials-view .login-test-profiles .role-btn { height: 70px !important; }
}

/* Preserve the compact, non-overlapping page behavior. */
#page > .grid:has(> .kpi),
#page > [id$="Kpis"],
#page > [id$="Kpis"] > .grid:has(> .kpi),
.pm-top-kpis {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  box-shadow: none !important;
}

.page > *,
.page .grid > *,
.tw-main > * { min-width: 0; }

.workflow-tabs,
.fleet-top-tabs,
.grid:has(> .kpi) {
  scrollbar-width: none !important;
}

.workflow-tabs::-webkit-scrollbar,
.fleet-top-tabs::-webkit-scrollbar,
.grid:has(> .kpi)::-webkit-scrollbar { display: none; }

@media (max-width: 980px) {
  .app.with-side-nav .side-nav {
    position: relative !important;
    top: auto !important;
    z-index: 10;
  }

  .card,
  .workflow-card,
  .priority-bucket,
  .report-card,
  .ed-chart-card,
  .gantt-insight,
  .fleet-report-card,
  .tenant-account-card { border-radius: 12px !important; }

  .kpi,
  .tw-kpi,
  .ed-kpi { min-height: 76px; border-radius: 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .kpi,
  .tw-kpi,
  .ed-kpi,
  .workflow-card,
  .workspace-card,
  .side-nav-link,
  .primary,
  .outline { transition: none !important; transform: none !important; }
}