/* The org-admin site's own layout, on top of /shared/theme.css and /portal/portal.css. Every
   colour is a theme token, so contrast stays as checked there. No inline styles anywhere: the one
   dynamic value (a bar's or meter's width) is set through the CSSOM. */

/* The signed-in shell fills the page, so the footer sits at the bottom of short views. */
.app-shell { flex: 1 0 auto; display: flex; flex-direction: column; }

.app-pair { display: flex; flex-direction: column; gap: var(--fr-stack-tight); min-width: 0; }
.app-stack { display: flex; flex-direction: column; gap: var(--fr-space-3); min-width: 0; }
.app-view { display: flex; flex-direction: column; gap: var(--fr-space-6); }
.portal-page-head h1:focus { outline: none; }

.app-grid { display: grid; grid-template-columns: 1fr; gap: var(--fr-space-4); align-items: start; }
@media (min-width: 900px) {
  .app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-grid--wide { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

.app-seat-stats { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.app-seat-headline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fr-space-3); }
.app-links { display: flex; flex-direction: column; gap: var(--fr-space-2); margin: 0; padding-left: var(--fr-space-5); }
.app-empty-title { font-weight: 600; color: var(--fr-text); }

/* Tables */
.portal-table .app-actions-cell { text-align: right; white-space: nowrap; }
.portal-table td.app-actions-cell .portal-actions { justify-content: flex-end; }
.app-member-name { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--fr-space-2); font-weight: 500; }
@media (max-width: 719px) {
  .portal-table .app-actions-cell { text-align: left; }
}

/* Forms */
.app-inline-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--fr-space-3); }
.app-inline-form .fr-field { flex: 1 1 200px; margin-bottom: 0; }
.app-check, .app-switch { display: flex; align-items: center; gap: var(--fr-space-2); min-height: var(--fr-control-md); cursor: pointer; }
.app-check input, .app-switch input { width: 18px; height: 18px; flex: none; margin: 0; }
.app-switch { font-weight: 500; }
.app-checklist { display: flex; flex-direction: column; gap: var(--fr-space-1); max-height: 50vh; overflow-y: auto; margin: 0; padding: var(--fr-space-2) var(--fr-space-3); border: 1px solid var(--fr-border); border-radius: var(--fr-radius-md); }
.app-check .portal-hint { margin-left: auto; overflow-wrap: anywhere; }

/* Team members */
.app-member-list { display: flex; flex-direction: column; gap: var(--fr-space-1); margin: 0; padding: 0; list-style: none; }
.app-member-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fr-space-2); min-height: var(--fr-control-md); padding: 0 var(--fr-space-1); border-bottom: 1px solid var(--fr-border); }
.app-member-list li:last-child { border-bottom: 0; }

/* Settings */
.app-status-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fr-space-2); }
.app-points { display: flex; flex-direction: column; gap: var(--fr-space-1); margin: 0; padding-left: var(--fr-space-5); color: var(--fr-text-secondary); }
.app-explanation { color: var(--fr-text-secondary); }
.app-subsection { display: flex; flex-direction: column; gap: var(--fr-space-2); padding-top: var(--fr-space-3); border-top: 1px solid var(--fr-border); }
.app-host-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.app-host-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--fr-space-2); min-height: var(--fr-control-md); padding: 0 var(--fr-space-1); border-bottom: 1px solid var(--fr-border); }
.app-host-list li:last-child { border-bottom: 0; }
.app-host { min-width: 0; font-family: var(--fr-font-mono); font-size: 13px; overflow-wrap: anywhere; }
.app-inline-form .app-field-narrow { flex: 0 1 220px; }

/* Dialogs */
.app-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--fr-space-3); }
.app-dialog-section { display: flex; flex-direction: column; gap: var(--fr-space-2); padding-top: var(--fr-space-3); border-top: 1px solid var(--fr-border); }
.app-dialog-text { color: var(--fr-text-secondary); }

/* Analytics: one hue, rounded data-ends, value at the tip in text ink. */
.app-filter-row { justify-content: flex-start; }
.app-filter-row .fr-input { flex: 0 1 220px; }
.app-analytics { transition: opacity var(--fr-dur-base) var(--fr-ease-standard); }
.app-refreshing { opacity: 0.55; }
.app-bars { display: flex; flex-direction: column; gap: var(--fr-space-2); margin: 0; padding: 0; list-style: none; }
.app-bars li { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr) auto; align-items: center; gap: var(--fr-space-3); font-size: 13px; line-height: 20px; }
.app-bar-label { color: var(--fr-text-secondary); overflow-wrap: anywhere; }
.app-bar-track { display: block; height: 14px; background: var(--fr-track); border-radius: 0 var(--fr-radius-xs) var(--fr-radius-xs) 0; }
.app-bar-fill { display: block; height: 100%; min-width: 3px; background: var(--fr-accent-ink); border-radius: 0 4px 4px 0; }
.app-bar-fill--zero { min-width: 0; }
.app-bar-value { min-width: 4ch; text-align: right; font-variant-numeric: tabular-nums; color: var(--fr-text); white-space: nowrap; }
.app-chart { overflow-x: auto; }
.app-columns { display: block; flex: none; }
.app-columns-base { stroke: var(--fr-gray-200); stroke-width: 1; }
.app-column-bar { fill: var(--fr-accent-ink); }
.app-column-hit { fill: transparent; }
.app-column:hover .app-column-hit, .app-column:focus .app-column-hit { fill: var(--fr-track); }
.app-column:focus { outline: none; }
.app-column:focus .app-column-hit { stroke: var(--fr-focus); stroke-width: 2; }
.app-column-value { fill: var(--fr-text); font-size: 11px; font-weight: 600; }
.app-column-tick { fill: var(--fr-text-muted); font-size: 10px; }
.app-details summary { cursor: pointer; color: var(--fr-text-secondary); font-size: 13px; }
.app-details[open] summary { margin-bottom: var(--fr-space-2); }

@media (forced-colors: active) {
  .app-bar-fill, .app-column-bar { background: CanvasText; fill: CanvasText; }
}