/* =============================================================================
	 Log viewer: monospace technical readout
	 Light shell and light log body with high-contrast text and compact rows.
	 Depends on: tokens.css
	 ============================================================================= */

.shiftora-log-viewer {
	border-radius:  var(--shiftora-radius-xl);
	border:         1px solid var(--shiftora-color-border);
	overflow:       hidden;
	display:        flex;
	flex-direction: column;
	background:     var(--shiftora-color-bg-surface);
}

/* Toolbar */
.shiftora-log-viewer__toolbar {
	display:          flex;
	align-items:      center;
	justify-content:  space-between;
	padding:          var(--shiftora-space-2) var(--shiftora-space-4);
	background-color: var(--shiftora-n-50);
	border-block-end: 1px solid var(--shiftora-color-border-light);
}

.shiftora-log-viewer__title {
	font-size:      var(--shiftora-font-size-xs);
	font-weight:    var(--shiftora-font-weight-semibold);
	color:          var(--shiftora-color-text-muted);
	text-transform: uppercase;
	letter-spacing: var(--shiftora-tracking-wider);
}

/* Log body */
.shiftora-log-viewer__body {
	overflow-y:  auto;
	max-height:  22rem;
	padding:     var(--shiftora-space-4);
	font-family: var(--shiftora-font-family-mono);
	font-size:   var(--shiftora-font-size-mono-sm);
	line-height: 1.45;
	color:       var(--shiftora-n-800);
	background:  var(--shiftora-color-bg-surface);
}

/* Log line */
.shiftora-log-line {
	display:       grid;
	grid-template-columns: auto minmax(6rem, 10rem) minmax(0, 1fr);
	align-items:   start;
	gap:           var(--shiftora-space-2);
	padding:       0.25rem 0;
	border-radius: var(--shiftora-radius-sm);
	transition:    background-color var(--shiftora-transition-fast);
}

.shiftora-log-line:hover {
	background-color: var(--shiftora-n-50);
}

.shiftora-log-line__ts {
	color:       var(--shiftora-color-text-muted);
	white-space: nowrap;
	font-size:   var(--shiftora-font-size-mono-xs);
}

.shiftora-log-line__level {
	min-inline-size: 6rem;
	max-inline-size: 10rem;
	text-align:      start;
	font-weight:     var(--shiftora-font-weight-semibold);
	font-size:       var(--shiftora-font-size-mono-xs);
	text-transform:  uppercase;
	letter-spacing:  var(--shiftora-tracking-wider);
	overflow-wrap:   anywhere;
	word-break:      break-word;
}

.shiftora-log-line--debug .shiftora-log-line__level   { color: var(--shiftora-color-log-debug); }
.shiftora-log-line--info .shiftora-log-line__level    { color: var(--shiftora-color-log-info); }
.shiftora-log-line--warning .shiftora-log-line__level { color: var(--shiftora-color-log-warn); }
.shiftora-log-line--error .shiftora-log-line__level   { color: var(--shiftora-color-log-error); }
.shiftora-log-line--success .shiftora-log-line__level { color: var(--shiftora-color-log-success); }
.shiftora-log-line--critical .shiftora-log-line__level { color: var(--shiftora-color-error); }

.shiftora-log-line--critical {
	background-color: var(--shiftora-color-error-bg);
}

.shiftora-log-line--error {
	background-color: var(--shiftora-color-error-bg);
}

.shiftora-log-line--warning {
	background-color: var(--shiftora-color-warning-bg);
}

.shiftora-log-line__msg {
	min-inline-size: 0;
	word-break:      break-word;
	overflow-wrap:   anywhere;
	white-space:     pre-line;
	color:           var(--shiftora-n-800);
}

.shiftora-log-line__ctx {
	color:      var(--shiftora-color-text-muted);
	font-size:  var(--shiftora-font-size-mono-xs);
	word-break: break-all;
}

/* Auto-scroll toggle */
.shiftora-log-viewer__autoscroll {
	font-size:   var(--shiftora-font-size-xs);
	color:       var(--shiftora-color-text-muted);
	cursor:      pointer;
	user-select: none;
	display:     flex;
	align-items: center;
	gap:         var(--shiftora-space-2);
	transition:  color var(--shiftora-transition-fast);
}

.shiftora-log-viewer__autoscroll:hover {
	color: var(--shiftora-color-text);
}

/* ── The log, behind a disclosure ───────────────────────────────────────────── */

/*
 * The log sits in a native `details` so a run that logs per chunk does not push the
 * progress figure and outcome out of view. The browser supplies keyboard and
 * screen-reader behavior.
 */
.shiftora-log-disclosure {
	margin-block-start: var(--shiftora-space-4);
	border:          1px solid var(--shiftora-color-border-light);
	border-radius:   var(--shiftora-radius-md);
	background:     var(--shiftora-color-bg-surface-alt, transparent);
}

.shiftora-log-disclosure__summary {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             var(--shiftora-space-3);
	padding:         var(--shiftora-space-3) var(--shiftora-space-4);
	cursor:          pointer;
	font-size:       var(--shiftora-font-size-sm);
	font-weight:     var(--shiftora-font-weight-medium);
	color:           var(--shiftora-color-text-secondary);
	list-style:      none;
}

.shiftora-log-disclosure__summary::-webkit-details-marker {
	display: none;
}

/*
 * The caret is drawn instead of the browser's marker so it can rotate with the
 * state, and so only one indicator shows.
 */
.shiftora-log-disclosure__summary::before {
	content:          '▸';
	display:          inline-block;
	margin-inline-end: var(--shiftora-space-2);
	color:            var(--shiftora-color-text-muted);
	transition:       transform var(--shiftora-duration-instant) var(--shiftora-ease-out);
}

.shiftora-log-disclosure[open] .shiftora-log-disclosure__summary::before {
	transform: rotate(90deg);
}

.shiftora-log-disclosure__summary:focus-visible {
	outline:       2px solid var(--shiftora-color-focus-ring);
	outline-offset: -2px;
	border-radius: var(--shiftora-radius-sm);
}

.shiftora-log-disclosure__count {
	color:       var(--shiftora-color-text-muted);
	font-variant-numeric: tabular-nums;
}

.shiftora-log-disclosure .shiftora-log-viewer {
	border:     0;
	border-radius: 0;
}