/* v6.5.35 Personal User Dashboard Console
   Scope only to the user dashboard so admin, focus, messenger, files, settings, and working app flows stay untouched. */

.page-view[data-view="dashboard"] {
  overflow: hidden !important;
}

.page-view[data-view="dashboard"] > .personal-console {
  grid-row: 3 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-rows: max-content !important;
  align-content: start !important;
  gap: 18px !important;
  padding: 18px 0 42px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-gutter: stable !important;
}

.personal-console,
.personal-console * {
  min-width: 0;
}

.personal-console .abdash-panel,
.personal-console .personal-panel {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid color-mix(in srgb, var(--cream) 12%, transparent) !important;
  background:
    radial-gradient(900px 420px at 18% 0%, color-mix(in srgb, var(--sage) 8%, transparent), transparent 58%),
    radial-gradient(640px 360px at 100% 0%, color-mix(in srgb, var(--amber) 7%, transparent), transparent 56%),
    linear-gradient(180deg, color-mix(in srgb, var(--main-bg-2) 94%, transparent), color-mix(in srgb, var(--main-bg) 96%, transparent)) !important;
  box-shadow: 0 20px 64px rgba(0, 0, 0, 0.24) !important;
  overflow: hidden !important;
}

.personal-console .personal-hero {
  min-height: 168px !important;
  padding: 26px 28px !important;
  display: grid !important;
  gap: 16px !important;
  align-content: center !important;
  border: 1px solid color-mix(in srgb, var(--amber) 24%, transparent) !important;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--sage) 11%, transparent), transparent 45%),
    radial-gradient(920px 520px at 78% 0%, color-mix(in srgb, var(--amber) 15%, transparent), transparent 62%),
    rgba(8, 13, 12, 0.9) !important;
}

.personal-console .dashboard-hero-title {
  max-width: 980px;
  color: var(--cream);
  font-size: clamp(24px, 3.4vw, 46px);
  line-height: 1.02;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.personal-console .dashboard-hero-copy {
  max-width: 940px;
  color: color-mix(in srgb, var(--cream) 68%, transparent);
  font-size: 13px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

.personal-console .dashboard-chip-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.personal-console .dashboard-chip {
  display: inline-grid !important;
  grid-template-columns: auto auto !important;
  gap: 10px !important;
  align-items: center !important;
  min-height: 36px !important;
  padding: 7px 11px !important;
  border: 1px solid color-mix(in srgb, var(--cream) 12%, transparent) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  color: color-mix(in srgb, var(--cream) 70%, transparent) !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.personal-console .dashboard-chip strong {
  color: var(--amber) !important;
  font-size: 13px !important;
}

.personal-action-bar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.personal-action-pill {
  width: 100%;
  min-height: 74px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--cream) 12%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--cream) 5%, transparent), transparent 62%),
    rgba(13, 19, 17, 0.72);
  color: var(--cream);
  display: grid;
  gap: 5px;
  align-content: center;
  text-align: left;
}

.personal-action-pill.is-primary {
  border-color: color-mix(in srgb, var(--amber) 44%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--amber) 16%, transparent), transparent 64%),
    rgba(18, 19, 14, 0.82);
}

.personal-action-pill strong {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.personal-action-pill span {
  color: color-mix(in srgb, var(--cream) 56%, transparent);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.personal-dashboard-grid {
  display: grid;
  gap: 18px;
  width: 100%;
  min-width: 0;
}

.personal-dashboard-grid-top {
  grid-template-columns: minmax(0, 1.65fr) minmax(320px, 0.85fr);
}

.personal-dashboard-grid-main {
  grid-template-columns: minmax(0, 1.35fr) minmax(340px, 0.75fr);
}

.personal-dashboard-grid-secondary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.personal-console .personal-panel {
  padding: 20px !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: 14px !important;
  min-height: 310px !important;
}

.personal-console .personal-snapshot-panel,
.personal-console .personal-chart-panel {
  min-height: 360px !important;
}

.personal-console .personal-radar-panel,
.personal-console .personal-usage-panel {
  min-height: 360px !important;
}

.personal-panel-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: start;
}

.personal-panel-head .panel-title {
  margin: 0 0 6px !important;
}

.personal-panel-head .action.small-action {
  white-space: nowrap;
  flex: 0 0 auto;
}

.personal-console .abdash-scroll {
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 6px !important;
}

.personal-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.personal-snapshot-card {
  min-height: 134px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--cream) 12%, transparent);
  background: rgba(255, 255, 255, 0.035);
  overflow: hidden;
}

.personal-snapshot-card.is-warning,
.personal-snapshot-card.is-danger {
  border-color: color-mix(in srgb, var(--amber) 46%, transparent);
  background: color-mix(in srgb, var(--amber) 7%, rgba(255, 255, 255, 0.025));
}

.personal-snapshot-label,
.personal-snapshot-trend {
  color: color-mix(in srgb, var(--cream) 48%, transparent);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.personal-snapshot-value {
  color: var(--cream);
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 900;
  letter-spacing: 0.02em;
  line-height: 1;
  overflow-wrap: anywhere;
}

.personal-snapshot-copy {
  color: color-mix(in srgb, var(--cream) 62%, transparent);
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: break-word;
}

.personal-chart-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.personal-chart-card {
  min-height: 150px;
  display: grid;
  grid-template-rows: auto 58px 22px;
  gap: 10px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--cream) 12%, transparent);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.personal-chart-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.personal-chart-top strong {
  display: block;
  color: var(--cream);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.personal-chart-top span {
  display: block;
  margin-top: 4px;
  color: color-mix(in srgb, var(--cream) 50%, transparent);
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: break-word;
}

.personal-chart-top em {
  color: var(--amber);
  font-size: 18px;
  font-style: normal;
  font-weight: 900;
}

.personal-sparkline {
  width: 100%;
  height: 58px;
  overflow: visible;
}

.personal-sparkline polyline {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  color: color-mix(in srgb, var(--amber) 72%, var(--cream));
  vector-effect: non-scaling-stroke;
}

.personal-barline {
  display: flex;
  align-items: end;
  gap: 4px;
  height: 22px;
}

.personal-barline span {
  flex: 1 1 0;
  min-width: 3px;
  background: color-mix(in srgb, var(--sage) 44%, transparent);
  border-radius: 999px 999px 0 0;
}

.personal-radar-list,
.personal-usage-list,
.personal-apps-list,
.personal-workspace-breakdown-list {
  display: grid;
  gap: 10px;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 5px;
}

.personal-radar-row,
.personal-app-row,
.personal-workspace-breakdown-row {
  width: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 68px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--cream) 11%, transparent);
  background: rgba(255, 255, 255, 0.03);
  text-align: left;
  overflow: hidden;
}

.personal-app-row,
.personal-workspace-breakdown-row {
  grid-template-columns: minmax(0, 1fr) auto;
}

.personal-radar-row.is-warning,
.personal-radar-row.is-high,
.personal-radar-row.is-danger {
  border-color: color-mix(in srgb, var(--amber) 42%, transparent);
  background: color-mix(in srgb, var(--amber) 7%, rgba(255, 255, 255, 0.025));
}

.personal-radar-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--sage);
  box-shadow: 0 0 18px color-mix(in srgb, var(--sage) 62%, transparent);
}

.personal-radar-row.is-warning .personal-radar-dot,
.personal-radar-row.is-high .personal-radar-dot,
.personal-radar-row.is-danger .personal-radar-dot {
  background: var(--amber);
  box-shadow: 0 0 18px color-mix(in srgb, var(--amber) 65%, transparent);
}

.personal-radar-row strong,
.personal-app-row strong,
.personal-workspace-breakdown-row strong {
  display: block;
  color: var(--cream);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  overflow-wrap: break-word;
}

.personal-radar-row em,
.personal-app-row em,
.personal-workspace-breakdown-row em {
  display: block;
  margin-top: 4px;
  color: color-mix(in srgb, var(--cream) 52%, transparent);
  font-size: 10px;
  font-style: normal;
  line-height: 1.42;
  overflow-wrap: break-word;
}

.personal-radar-row b,
.personal-app-row b,
.personal-workspace-breakdown-row b {
  color: color-mix(in srgb, var(--amber) 80%, var(--cream));
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: normal;
  text-align: right;
  overflow-wrap: break-word;
}

.personal-panel-copy {
  margin-bottom: 2px;
  color: color-mix(in srgb, var(--cream) 52%, transparent);
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: break-word;
}

.personal-usage-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 34%);
  gap: 12px;
  align-items: center;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--cream) 11%, transparent);
  background: rgba(255, 255, 255, 0.03);
}

.personal-usage-row strong {
  display: block;
  color: var(--cream);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.personal-usage-row span {
  display: block;
  margin-top: 5px;
  color: color-mix(in srgb, var(--cream) 54%, transparent);
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: break-word;
}

.personal-meter-stack {
  display: grid;
  gap: 7px;
}

.personal-meter {
  height: 8px;
  border: 1px solid color-mix(in srgb, var(--cream) 10%, transparent);
  background: rgba(0, 0, 0, 0.24);
  overflow: hidden;
}

.personal-meter span {
  display: block;
  height: 100%;
  background: color-mix(in srgb, var(--amber) 58%, var(--cream));
}

.personal-meter.is-hour span {
  background: color-mix(in srgb, var(--sage) 54%, var(--cream));
}

.personal-empty {
  padding: 16px;
  border: 1px dashed color-mix(in srgb, var(--cream) 14%, transparent);
  color: color-mix(in srgb, var(--cream) 54%, transparent);
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: break-word;
}

.personal-console .project-row,
.personal-console .notification-row,
.personal-console .system-card,
.personal-console .library-card {
  border-color: color-mix(in srgb, var(--cream) 11%, transparent) !important;
  background: rgba(255, 255, 255, 0.028) !important;
}

.personal-console .project-row,
.personal-console .notification-row,
.personal-console .system-card {
  grid-template-columns: minmax(0, 1fr) auto !important;
  overflow: hidden !important;
}

.personal-console .project-title,
.personal-console .notification-title,
.personal-console .system-card-title,
.personal-console .library-title {
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}

.personal-console .project-copy,
.personal-console .notification-copy,
.personal-console .system-card-copy,
.personal-console .library-copy {
  display: block !important;
  max-width: 100% !important;
  overflow: visible !important;
  overflow-wrap: break-word !important;
  white-space: normal !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
}

.personal-console .library-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
  gap: 14px !important;
}

.personal-welcome-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.personal-welcome-modal .welcome-back-lede {
  max-width: 840px;
}

@media (max-width: 1260px) {
  .personal-dashboard-grid-top,
  .personal-dashboard-grid-main,
  .personal-dashboard-grid-secondary {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .personal-console .personal-panel,
  .personal-console .personal-snapshot-panel,
  .personal-console .personal-chart-panel,
  .personal-console .personal-radar-panel,
  .personal-console .personal-usage-panel {
    min-height: 0 !important;
    height: auto !important;
  }
}

@media (max-width: 920px) {
  .personal-action-bar,
  .personal-snapshot-grid,
  .personal-chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .personal-console .personal-hero {
    min-height: 0 !important;
    padding: 20px !important;
  }
}

@media (max-width: 680px) {
  .page-view[data-view="dashboard"] > .personal-console {
    padding: 12px 0 92px !important;
    gap: 14px !important;
  }

  .personal-action-bar,
  .personal-snapshot-grid,
  .personal-chart-grid,
  .personal-welcome-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .personal-console .personal-panel {
    padding: 15px !important;
  }

  .personal-panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .personal-panel-head .action.small-action {
    width: 100%;
  }

  .personal-usage-row,
  .personal-radar-row,
  .personal-app-row,
  .personal-workspace-breakdown-row {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .personal-radar-row b,
  .personal-app-row b,
  .personal-workspace-breakdown-row b {
    text-align: left;
  }

  .personal-console .dashboard-hero-title {
    font-size: 24px;
  }
}