.recent-runs-widget {width: 100%;height: 100%;display: flex;flex-direction: column;color: #fff;/* padding: 8px 0; */border-radius: 4px;font-family: monospace;font-size: 12px;margin-top: auto;/* align-items: center; *//* table-layout: auto; *//* align-content: center; *//* justify-content: center; */}
.recent-runs-widget > div:not(.recent-runs-widget__title) {/* flex: 1; */overflow-y: auto;/* min-height: 0; */}
.recent-runs-widget__title {flex-shrink: 0;text-align: center;padding: 4px 8px;}
.recent-runs-widget__error { color: #ff6b6b; }
.workflow-run {margin: 8px 0;padding: 8px 12px;border-radius: 4px;cursor: pointer;transition: background 0.2s;}
.workflow-run--active { background: #202020; }
.workflow-run:hover { background: #2a2a2a; }
.workflow-run__header { margin-bottom: 4px; display: flex; justify-content: space-between; align-items: center; }
.workflow-run__id { color: #66d9e8; display: none; }
.workflow-run__timestamp { color: #868e96; font-size: 12px; }
.workflow-run__detail { color: #63e6be; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent-runs-widget__loading { text-align: center; color: #868e96; padding: 16px; display: flex; flex-direction: column; align-items: center; }
.recent-runs-widget__spinner { width: 16px; height: 16px; border: 4px solid transparent; border-radius: 50%; border-top-color: #868e96; animation: spinner-rotate 0.8s linear infinite; margin: 0 auto 8px; }
@keyframes spinner-rotate { 100% { transform: rotate(360deg); } }

@media (orientation: portrait) {
    .main-content {
      flex-direction: column;
    }
    .main-content > recent-runs-widget {
      flex: 0 0 auto;
      height: 108px;
      margin-top: auto;
      border-left: none;
      padding-left: 0;
      border-top: 1px solid #222;
      overflow: hidden;
    }
    .recent-runs-widget > div:not(.recent-runs-widget__title) {
      display: flex;
      flex-direction: row;
      overflow-x: auto;
      overflow-y: hidden;
      flex-wrap: nowrap;
      padding: 8px 0;
      min-height: auto;
      flex: 1;
    }
    .recent-runs-widget .workflow-run {
      flex-shrink: 0;
      width: 180px;
      margin: 0 4px;
      padding: 8px 12px;
    }
  }

@media (orientation: landscape) {
    .recent-runs-widget > div:not(.recent-runs-widget__title) {
      overflow-y: auto;
      overflow-x: hidden;
      min-height: 0;
      flex: 1;
    }
    .recent-runs-widget .workflow-run {
      width: auto;
      margin: 8px 0;
    }
  }