/* Shared components and the audit screen. Status is always carried by words or shape as well as colour (WCAG 1.4.1). */

.card {
    padding: 1rem;
    margin-bottom: 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
}

/* Buttons */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-size);
    min-width: var(--tap-size);
    padding: 0.4rem 1rem;
    font: inherit;
    font-weight: 600;
    color: var(--color-primary-text);
    background: var(--color-primary);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius);
    cursor: pointer;
}

.button:hover:not(:disabled) { text-decoration: underline; }

.button:disabled {
    cursor: not-allowed;
    color: #4a4f5a;
    background: #e5e7ec;
    border-color: #6b7280;
    border-style: dashed;
}

.button--secondary {
    color: var(--color-primary);
    background: var(--color-bg);
}

.button--danger {
    background: var(--color-danger);
    border-color: var(--color-danger);
}

.button--small {
    min-height: 2.25rem;
    padding: 0.2rem 0.6rem;
    font-size: 0.9rem;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Form fields */
.field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.field label { font-weight: 600; }

.field input[type="text"],
.field input[type="date"],
.field select,
.pager select {
    min-height: var(--tap-size);
    padding: 0.35rem 0.6rem;
    font: inherit;
    color: var(--color-text);
    background: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: var(--radius);
    width: 100%;
}

.field--check {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    min-height: var(--tap-size);
}

.field--check input { width: 1.5rem; height: 1.5rem; flex: none; }
.field--check label { font-weight: 600; }

.field--inline { flex-direction: row; align-items: center; gap: 0.5rem; }
.field--inline select { width: auto; }

.filter-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 40em) {
    .filter-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 64em) {
    .filter-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Progress */
.progress-indicator {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: 0.75rem 0;
}

.progress-indicator__label { font-weight: 600; }

.progress-indicator__bar {
    flex: 1 1 12rem;
    max-width: 24rem;
    height: 1rem;
    accent-color: var(--color-primary);
}

.progress-indicator__value, .progress-indicator__detail { color: var(--color-muted); }

/* Error panel: a thick left bar, the word "Error", and text, so colour is never the only signal. */
.error-panel {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    background: var(--color-danger-bg);
    border: 2px solid var(--color-danger);
    border-left-width: 8px;
    border-radius: var(--radius);
}

.error-panel__title { color: #7a120b; font-size: 1.15rem; }
.error-panel__label { text-transform: uppercase; letter-spacing: 0.04em; }
.error-panel__reference { color: var(--color-muted); font-size: 0.9rem; }

/* Destructive confirmation */
.confirm-panel {
    margin: 1rem 0;
    padding: 1rem;
    background: #fff8f7;
    border: 3px double var(--color-danger);
    border-radius: var(--radius);
    max-width: 40rem;
}

.confirm-panel__title { color: #7a120b; }
.confirm-panel__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Audit log */
.results { margin-bottom: 1.5rem; }
.summary { color: var(--color-muted); }

.empty-state {
    padding: 1.5rem 1rem;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius);
    max-width: 40rem;
}

.table-scroll {
    /* Positioned so visually-hidden (absolutely positioned) cells stay inside this scroller instead of widening the page. */
    position: relative;
    overflow-x: auto;
    border: 1px solid var(--color-border-soft);
    border-radius: var(--radius);
}

.data-table {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
    text-align: left;
}

.data-table th, .data-table td {
    padding: 0.6rem 0.75rem;
    border-bottom: 1px solid var(--color-border-soft);
    vertical-align: top;
}

.data-table thead th {
    background: var(--color-surface);
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}

.data-table tbody tr:nth-child(even) { background: #fafbfd; }

.badge {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    background: #6b3a00;
    border: 2px solid #6b3a00;
    border-radius: 999px;
}

.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.pager__status { font-weight: 600; }

.detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 1rem;
    margin: 0 0 1rem;
}

.detail-list dt { font-weight: 700; }
.detail-list dd { margin: 0; }

.json-pair {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (min-width: 64em) {
    .json-pair { grid-template-columns: 1fr 1fr; }
}

.json {
    margin: 0;
    padding: 0.75rem;
    max-height: 24rem;
    overflow: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    white-space: pre-wrap;
}

@media (max-width: 30em) {
    .detail-list { grid-template-columns: 1fr; }
    .detail-list dt { margin-top: 0.5rem; }
}

/* Changeset review: the diff stacks before and after under visible labels, and long text or ids wrap instead of widening the page. */
.diff-blocks, .diff-blocks ul, [data-testid="diff-metadata"] { padding-left: 1.25rem; }
.diff-blocks li, [data-testid="diff-metadata"] li { overflow-wrap: anywhere; word-break: break-word; margin-bottom: 0.5rem; }
.diff-field__name { display: block; font-weight: 600; }
.diff-field__before, .diff-field__after { display: block; margin-top: 0.25rem; padding: 0.35rem 0.6rem; border-left: 4px solid var(--color-border); overflow-wrap: anywhere; }
.diff-field__before { border-left-style: dashed; }
.diff-field__label { display: block; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-muted); }
.diff-field__before del, .diff-field__after ins { display: block; overflow-wrap: anywhere; }
.quality-passage { margin: 0.35rem 0 0.5rem; padding: 0.35rem 0.75rem; border-left: 4px solid var(--color-border); overflow-wrap: anywhere; }
.card--warning { border-color: #8a5a00; border-width: 2px; }

/* Publishing calendar (FR-66): days as a plain list, slots as drop zones, past slots visibly unavailable, and a stacked layout on a narrow screen. */
.calendar-days, .calendar-slots, .calendar-entries, .calendar-markers { list-style: none; margin: 0; padding: 0; }
.calendar-day { padding: 0.5rem 0; border-top: 1px solid var(--color-border-soft); }
.calendar-day h3 { margin: 0 0 0.35rem; overflow-wrap: anywhere; }
.calendar-slot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0.25rem 0; padding: 0.4rem 0.6rem; border: 1px solid var(--color-border-soft); border-radius: var(--radius); background: var(--color-bg); }
.calendar-slot--past { background: var(--color-surface); color: var(--color-muted); border-style: dotted; }
.calendar-days--dragging .calendar-slot:not(.calendar-slot--past) { border: 2px dashed var(--color-primary); background: var(--color-surface); }
.calendar-entry { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; flex: 1 1 14rem; min-width: 0; padding: 0.25rem 0.5rem; border-left: 4px solid var(--color-primary); background: var(--color-surface); }
.calendar-entry[draggable="true"] { cursor: grab; }
.calendar-entry span { overflow-wrap: anywhere; min-width: 0; }
.calendar-entry button:focus-visible, .calendar-slot:focus-within { outline: var(--focus-width) solid var(--focus-color); outline-offset: 2px; }
.calendar-markers { margin: 0 0 0.35rem; }
.calendar-markers li { overflow-wrap: anywhere; }
@media (max-width: 30em) {
    .calendar-slot, .calendar-entry { flex-direction: column; align-items: stretch; }
    .calendar-entry button { width: 100%; min-height: var(--tap-size); }
}

/* The read-only built-HTML view (FR-17): the page's HTML as text. */
.raw-html {
    margin: 0;
    padding: 0.75rem;
    max-height: 70vh;
    overflow: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    white-space: pre;
    tab-size: 2;
}

.raw-html--wrap {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}