/* Site-wide styles on top of Fluent UI's defaults (SPEC.md section 7: admin-console style, light
   theme). Screen-specific styles live next to their components. */

html, body {
    background: var(--colorNeutralBackground1, #ffffff);
    color: var(--colorNeutralForeground1, #242424);
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    margin: 0;
}

h1:focus {
    outline: none;
}

h1 {
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 16px;
}

h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 24px 0 8px;
}

/* SPEC.md 6.1 error panels: load errors, unexpected page errors and save errors. */
.error-panel {
    background: var(--colorStatusDangerBackground1, #fdf3f4);
    border: 1px solid var(--colorStatusDangerBorder1, #eeacb2);
    border-radius: 4px;
    margin: 8px 0;
    padding: 12px 16px;
}

.error-panel p {
    margin: 0 0 8px;
}

.loading-indicator {
    align-items: center;
    display: flex;
    gap: 8px;
    padding: 16px 0;
}

/* Dense tables, as in the Azure portal (SPEC.md section 7). Real <table> elements, so screen readers
   read them cell by cell. */
.data-table {
    border-collapse: collapse;
    width: 100%;
}

.data-table th, .data-table td {
    border-bottom: 1px solid var(--colorNeutralStroke2, #e0e0e0);
    padding: 6px 8px;
    text-align: left;
}

.data-table th {
    font-weight: 600;
}

.details {
    display: grid;
    gap: 6px 16px;
    grid-template-columns: max-content 1fr;
}

.details dt {
    font-weight: 600;
}

.details dd {
    margin: 0;
}


.table-pager {
    align-items: center;
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

/* S-01: the spinner of a sign-in button, shown by js/app.js once it is selected. */
.busy-spinner {
    animation: busy-spin 0.8s linear infinite;
    border: 2px solid currentColor;
    border-radius: 50%;
    border-right-color: transparent;
    display: none;
    height: 14px;
    margin-right: 8px;
    vertical-align: -2px;
    width: 14px;
}

.is-busy .busy-spinner {
    display: inline-block;
}

@keyframes busy-spin {
    to {
        transform: rotate(360deg);
    }
}

/* SPEC.md 6.1: tables show 5 placeholder rows until data arrives. */
.placeholder-bar {
    animation: placeholder-pulse 1.5s ease-in-out infinite;
    background: var(--colorNeutralBackground3, #f0f0f0);
    border-radius: 4px;
    display: block;
    height: 12px;
    width: 80%;
}

@keyframes placeholder-pulse {
    50% {
        opacity: 0.5;
    }
}

/* Text for screen readers only, such as the header of a column of buttons. */
.visually-hidden {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

/* A banner under the top bar (SPEC.md 6.1). */
.banner {
    align-items: center;
    background: var(--colorBrandBackground2, #ebf3fc);
    border: 1px solid var(--colorBrandStroke2, #b4d6fa);
    border-radius: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
    padding: 8px 16px;
}

/* The organization switcher's panel (SPEC.md 6.1, F-05.8). */
.switcher {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 12px;
}

.switcher-group-name {
    color: var(--colorNeutralForeground3, #616161);
    font-size: 12px;
    font-weight: 600;
    margin: 0 0 4px;
}

.switcher ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.switcher li a {
    border-radius: 4px;
    color: inherit;
    display: block;
    padding: 6px 8px;
    text-decoration: none;
}

.switcher li a:hover,
.switcher li a:focus-visible {
    background: var(--colorNeutralBackground1Hover, #f5f5f5);
}

.switcher li a.current {
    font-weight: 600;
}

/* A short hint under a form's fields. */
.hint {
    color: var(--colorNeutralForeground3, #616161);
    font-size: 12px;
    margin: 0;
}

/* S-11: one section per site. */
.site-section {
    margin-bottom: 32px;
}

.site-heading {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* S-14: a new token's install commands, and token prefixes in a font that tells l from I and 0 from O. */
.token-panel {
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 4px;
    padding: 16px;
    margin-bottom: 24px;
}

.install-command {
    width: 100%;
    margin-bottom: 12px;
    font-family: Consolas, "Courier New", monospace;
}

.token-prefix {
    font-family: Consolas, "Courier New", monospace;
}

/* A short marker beside a value, such as S-12's "Multiple zones". */
.flag {
    margin-left: 8px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--colorNeutralBackground3, #f0f0f0);
    font-size: 0.85em;
}

/* Agent states and flags (SPEC.md 6.1): the symbols decorate text that says the same. */
.agent-status,
.zone-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.status-dot-online {
    background: var(--colorPaletteGreenForeground1, #107c10);
}

.status-dot-offline {
    background: var(--colorPaletteRedForeground1, #c50f1f);
}

.agent-status-paused svg {
    fill: var(--colorNeutralForeground3, #616161);
}

.zone-flag svg {
    fill: var(--colorPaletteDarkOrangeForeground1, #bc4b09);
}

/* S-13's clock warning and similar notes beside a value. */
.warning-text {
    color: var(--colorPaletteDarkOrangeForeground1, #bc4b09);
    font-weight: 600;
}

/* S-08's target picker: a search over a scrolling list of check boxes. */
.target-picker {
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 4px;
    padding: 8px 12px 12px;
}

.target-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 240px;
    overflow-y: auto;
    margin-top: 8px;
}

/* A field error that is not part of a Fluent UI input. */
.error-text {
    color: var(--colorPaletteRedForeground1, #bc2f32);
    margin: 4px 0 0;
}

/* S-09: the policy's description under its name. */
.policy-description {
    margin: 0 0 16px;
    white-space: pre-wrap;
}

/* Test and policy statuses: icon, text and color (SPEC.md 6.1). */
.status-badge,
.target-check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.status-pass {
    color: var(--colorPaletteGreenForeground1, #107c10);
}

.status-fail {
    color: var(--colorPaletteRedForeground1, #c50f1f);
}

.status-inconclusive {
    color: var(--colorPaletteDarkOrangeForeground1, #8a3707);
}

.status-pending {
    color: var(--colorPaletteBlueForeground2, #0f6cbd);
}

.status-neutral {
    color: var(--colorNeutralForeground3, #616161);
}

/* Test now on S-09 (F-14): a held button stays focusable, so it only looks unavailable. */
.test-now {
    margin-bottom: 16px;
}

.test-now fluent-button[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* S-06 Dashboard (F-15): counts side by side, the checklist and a matrix that scrolls sideways on narrow screens. */
.dashboard-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

.count-list {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}

.count-list .count {
    font-weight: 600;
}

.checklist {
    border: 1px solid var(--colorNeutralStroke1, #d1d1d1);
    border-radius: 4px;
    padding: 8px 16px;
    margin-bottom: 16px;
}

.checklist ul {
    list-style: none;
    padding: 0;
}

.checklist li {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 4px 0;
}

.table-scroll {
    overflow-x: auto;
    max-width: 100%;
}

.zone-matrix td a {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
}