/* Dashboard spacing and responsive positioning over the shared surface.
 * Tabs, drawers and expanded-by-default sections belong in shared component
 * composition/presentation options; CSS must not become a second UI controller. */

body.page-dashboard,
body.page-job-details {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-family--primary);
  color: var(--text-colour--primary);
  background:
    radial-gradient(
      circle at top left,
      rgba(142, 218, 239, 0.12),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      rgba(16, 26, 69, 0.98) 0%,
      rgba(3, 4, 35, 1) 48%,
      rgba(3, 4, 35, 1) 100%
    );
}

body.page-dashboard .dashboard-shell {
  min-height: 100vh;
}

body:is(.page-dashboard, .page-job-details) .panel {
  width: min(1120px, calc(100vw - 48px));
  margin: 24px auto;
  min-height: calc(100vh - 48px);
  border: 1px solid var(--border-colour--default);
  box-shadow: var(--shadow--overlay);
  background: rgba(3, 4, 35, 0.96);
}

body.page-dashboard .section {
  padding: 12px 18px;
  border-bottom: 1px solid rgba(142, 218, 239, 0.32);
}

body.page-dashboard .auth-wrapper {
  flex: 1;
}

body.page-dashboard .dashboard-auth-wrapper {
  min-height: 560px;
}

body.page-dashboard .btn:not(select):not(input) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing--sm);
}

[data-hover-platform="dashboard"] .surface-header .topbar-org-select {
  width: 220px;
}

[data-hover-platform="dashboard"] .surface-header .shell-dropdown {
  min-width: 260px;
}

[data-hover-platform="dashboard"]
  .surface-header
  .shell-notifications-dropdown {
  width: min(360px, calc(100vw - 64px));
}

[data-hover-platform="dashboard"] .surface-header .shell-notifications-list {
  max-height: 320px;
}

body.page-dashboard .control-group--domain {
  flex: 1;
}

body.page-dashboard .dashboard-domain-search {
  position: relative;
  min-width: 0;
  flex: 1;
}

body.page-dashboard .dashboard-domain-input {
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

body.page-dashboard .action-bar-select {
  width: 90px;
  min-width: 90px;
}

body.page-dashboard .content-scroll {
  padding-right: 18px;
}

body.page-dashboard .job-band {
  width: calc(100% + 36px);
  margin: -12px -18px 0;
  padding: 12px 18px;
}

body.page-dashboard .no-job-state {
  padding: var(--spacing--7xl) 0;
}

.dashboard-run-options {
  width: 100%;
  color: var(--text-colour--secondary);
  font-size: var(--font-size--caption);
}

.dashboard-run-options summary {
  cursor: pointer;
  padding: var(--spacing--xl) 0;
}

.dashboard-run-options input[type="number"] {
  width: 110px;
  min-height: var(--size--button-height);
  padding: var(--spacing--sm) var(--spacing--xl);
  border: var(--border-size--default) solid var(--border-colour--default);
  border-radius: var(--radius--control);
  color: var(--text-colour--primary);
  background: var(--background-colour--surface);
}

.dashboard-overview {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing--7xl);
}

.dashboard-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  flex: 1;
  gap: var(--spacing--7xl);
  margin: 0;
}

.dashboard-summary dt {
  color: var(--text-colour--secondary);
  font-size: var(--font-size--caption);
}

.dashboard-summary dd {
  margin: var(--spacing--sm) 0 0;
  font-size: var(--font-size--display);
  font-weight: 700;
}

@media (max-width: 520px) {
  .dashboard-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    flex-basis: 100%;
  }
}

@media (max-width: 860px) {
  body:is(.page-dashboard, .page-job-details) .panel {
    width: calc(100vw - 24px);
    margin: 12px auto;
    min-height: calc(100vh - 24px);
  }

  [data-hover-platform="dashboard"] .surface-header,
  body.page-dashboard .action-bar,
  body.page-dashboard .action-bar-controls,
  [data-hover-platform="dashboard"] .surface-header .topbar-actions {
    flex-direction: column;
    align-items: stretch;
  }

  [data-hover-platform="dashboard"] .surface-header .topbar-org-select,
  body.page-dashboard .dashboard-domain-search,
  body.page-dashboard .dashboard-domain-input,
  body.page-dashboard .action-bar-select {
    width: 100%;
    max-width: 100%;
  }

  body.page-dashboard .panel-footer {
    gap: var(--spacing--lg);
    flex-wrap: wrap;
  }

  [data-hover-platform="dashboard"] .surface-header .topbar-actions {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-left: 0;
    width: 100%;
  }

  [data-hover-platform="dashboard"] .surface-header .topbar-org-select {
    flex: 1;
    width: auto;
    min-width: 0;
  }
}

/* Every app route uses the same header dimensions and frame. */
[data-hover-platform="dashboard"] .app-header-shell {
  width: min(1120px, calc(100vw - 48px));
  margin: 24px auto 0;
  border: 1px solid var(--border-colour--default);
  color: var(--text-colour--primary);
  font-family: var(--font-family--primary);
  font-size: var(--font-size--body);
  line-height: var(--line-height--body);
}
[data-hover-platform="dashboard"] .surface-header.section {
  padding: 12px 18px;
  border-bottom: 0;
}
@media (max-width: 860px) {
  [data-hover-platform="dashboard"] .app-header-shell {
    width: calc(100vw - 24px);
    margin: 12px auto 0;
  }
}