/* Portal styles layered on top of Pico (pico.min.css loads first).
   Kept small: Pico handles typography, forms, buttons, tables, and light/dark
   theming; this file covers the app shell (header/nav) and a few helpers. */

/* Pico scales the root font-size up to ~125%+ on wide screens and uses generous
   form/spacing defaults, which makes a data-dense admin UI feel oversized. Pin a
   compact, consistent scale. */
:root {
  --pico-font-size: 100%;
  --pico-line-height: 1.4;
  --pico-spacing: 0.75rem;
  --pico-block-spacing-vertical: 0.75rem;
  --pico-form-element-spacing-vertical: 0.4rem;
  --pico-form-element-spacing-horizontal: 0.6rem;
  --pico-border-radius: 6px;
}

header {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.6rem 1.25rem;
  border-bottom: 1px solid var(--pico-muted-border-color, #8883);
}
header .brand {
  font-weight: 600;
}
header nav {
  display: flex;
  gap: 1rem;
  margin: 0;
}
header nav a {
  text-decoration: none;
}

/* Nav links sit on the left (after the brand); this group is pushed right. */
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.header-right .user-email {
  font-size: 0.85rem;
}

/* Header actions render as plain text, not full-width Pico buttons. */
header .logout-form {
  margin: 0;
}
header .logout-form button,
.theme-toggle {
  width: auto;
  margin: 0;
  padding: 0 0.4rem;
  background: none;
  border: 0;
  color: var(--pico-primary);
  cursor: pointer;
}
.theme-toggle {
  color: inherit;
  font-size: 1.1rem;
  line-height: 1;
}

main {
  padding: 1.25rem;
  max-width: 1400px;
  margin: 0 auto;
}
h1 {
  font-size: 1.4rem;
}

.card {
  border: 1px solid var(--pico-muted-border-color, #8883);
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
}
.card h2 {
  font-size: 1rem;
  margin-top: 0;
}

.error {
  background: #d33;
  color: #fff;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  margin: 1rem 0;
}
.success {
  background: #1f8f4d;
  color: #fff;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  margin: 1rem 0;
}
.warning {
  background: #f4c430;
  color: #222;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  margin: 1rem 0;
}

/* Audit run lifecycle at a glance: green done, red broken, blue in-progress,
   amber waiting, grey neutral. Solid background + fixed text color so it
   reads the same in light and dark theme, matching .error/.success/.warning. */
.status-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: capitalize;
  white-space: nowrap;
}
.status-completed {
  background: #1f8f4d;
  color: #fff;
}
.status-failed {
  background: #d33;
  color: #fff;
}
.status-running {
  background: #1a73c7;
  color: #fff;
}
.status-queued {
  background: #f4c430;
  color: #222;
}
.status-cancelled {
  background: #6b7280;
  color: #fff;
}
.muted {
  color: var(--pico-muted-color, #8889);
}

/* Compact inline forms (admin rows, filters) instead of Pico's stacked layout. */
.row-form {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.row-form input,
.row-form select,
.row-form button {
  width: auto;
  margin: 0;
}
label.check {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  margin: 0;
}

/* Report view: title row, Lite-scope notice, and the embedded report iframe. */
.report-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.notice {
  border-left: 3px solid var(--pico-primary, #1f8f4d);
  padding: 0.5rem 0.8rem;
  margin: 1rem 0;
  border-radius: 4px;
}
.report-frame {
  width: 100%;
  height: 75vh;
  border: 1px solid var(--pico-muted-border-color, #8883);
  border-radius: 6px;
  background: #fff;
}
.report-tabs {
  margin-top: 0.5rem;
}
.report-tab-input {
  display: none;
}
.report-tab-bar {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--pico-muted-border-color, #8883);
  margin-bottom: 1rem;
}
.report-tab-label {
  padding: 0.6rem 1rem;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  color: var(--pico-muted-color);
}
#tab-report:checked ~ .report-tab-bar label[for="tab-report"],
#tab-data:checked ~ .report-tab-bar label[for="tab-data"] {
  border-bottom-color: var(--pico-primary, #1f8f4d);
  color: var(--pico-color);
}
.report-tab-panel {
  display: none;
}
#tab-report:checked ~ .report-tab-panel--report,
#tab-data:checked ~ .report-tab-panel--data {
  display: block;
}
.artifact-section {
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.artifact-nav {
  display: flex;
  flex-direction: column;
}
.artifact-nav h2 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}
.artifact-list {
  display: grid;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.artifact-link {
  display: block;
  padding: 0.55rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 6px;
  text-decoration: none;
}
.artifact-link:hover,
.artifact-link.active {
  border-color: var(--pico-muted-border-color, #8883);
  background: var(--pico-card-background-color, #fff);
}
.artifact-link strong,
.artifact-link span {
  display: block;
}
.artifact-link span {
  color: var(--pico-muted-color);
  font-size: 0.82rem;
}
.artifact-main {
  min-width: 0;
}
.artifact-main h3 {
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.artifact-table-wrap {
  max-height: 65vh;
  overflow: auto;
  border: 1px solid var(--pico-muted-border-color, #8883);
  border-radius: 6px;
}
@media (max-width: 720px) {
  .artifact-section {
    grid-template-columns: 1fr;
  }
}
.artifact-table-wrap table {
  margin: 0;
}
.artifact-table-wrap caption {
  padding: 0.65rem;
  text-align: left;
  font-weight: 600;
}
.artifact-table-wrap th,
.artifact-table-wrap td {
  min-width: 7rem;
  vertical-align: top;
  font-size: 0.82rem;
}
.artifact-summary {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
  margin: 0 0 0.75rem;
}
.artifact-summary div {
  border: 1px solid var(--pico-muted-border-color, #8883);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
}
.artifact-summary dt {
  color: var(--pico-muted-color);
  font-size: 0.78rem;
}
.artifact-summary dd {
  margin: 0;
  font-weight: 600;
}
.head-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.head-actions a[role="button"] {
  margin: 0;
  width: auto;
}
.empty-state {
  text-align: center;
}
.empty-state a[role="button"] {
  width: auto;
}
.upload-list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0 0.8rem;
  font-size: 0.9rem;
}
.upload-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.15rem 0;
}
.upload-remove {
  flex: none;
  padding: 0 0.4rem;
  line-height: 1.4;
  font-size: 0.85rem;
  background: none;
  border: 1px solid var(--pico-muted-border-color, #8884);
  border-radius: 4px;
  color: inherit;
  cursor: pointer;
}
.upload-ok {
  color: var(--pico-muted-color, #8889);
}
.upload-bad {
  color: #d33;
}
.dropzone {
  border: 2px dashed var(--pico-muted-border-color, #8884);
  border-radius: 8px;
  padding: 1rem;
  text-align: center;
  margin-bottom: 0.6rem;
}
.dropzone p {
  margin: 0 0 0.5rem;
}
.dropzone-active {
  border-color: var(--pico-primary, #1f8f4d);
  background: var(--pico-primary-background, #1f8f4d1a);
}
progress[data-upload-progress] {
  width: 100%;
  margin: 0.4rem 0;
}

/* Audit source picker: a segmented toggle between "Uploaded files" and the
   "Jira API" source, so only one source form shows at a time. */
.source-tabs {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  margin: 0.25rem 0 1rem;
  border: 1px solid var(--pico-muted-border-color, #8883);
  border-radius: 8px;
}
.source-tab {
  width: auto;
  margin: 0;
  padding: 0.3rem 0.9rem;
  background: transparent;
  border: 0;
  border-radius: 6px;
  /* Pico scopes --pico-color to the button-inverse (white) inside a <button>,
     so an inactive tab using it renders white-on-white on the light card. Use
     --pico-secondary, a palette text colour Pico does not override on a plain
     button and which adapts to both themes. */
  color: var(--pico-secondary, #5d6b89);
  cursor: pointer;
  font-size: 0.9rem;
}
.source-tab:hover {
  background: rgba(128, 128, 128, 0.14);
  color: var(--pico-secondary-hover, var(--pico-secondary, #5d6b89));
}
.source-tab.is-active {
  background: var(--pico-primary, #1f8f4d);
  color: var(--pico-primary-inverse, #fff);
}
.source-tab.is-active:hover {
  background: var(--pico-primary-hover, var(--pico-primary, #1f8f4d));
  color: var(--pico-primary-inverse, #fff);
}