/* ==========================================================================
   Terminal — live system log feed
   Color convention: matrix-green για authentic terminal feel,
   αλλά με το δικό μας teal για status highlights.
   ========================================================================== */

:root {
	--term-bg:        #05090d;
	--term-header:    #0e141c;
	--term-border:    #1a2230;
	--term-text:      #e2e8f0;
	--term-muted:     #64748b;
	--term-green:     #5EEAD4;   /* teal-300, substitute for classic matrix green */
	--term-accent:    #14B8A6;
	--term-purple:    #7B61FF;
	--term-orange:    #F97316;
	--term-red:       #FF4747;
	--term-yellow:    #FFAB00;
	--term-success:   #00D68F;
}

.section--terminal {
	background:
		radial-gradient(800px 400px at 30% 70%, rgba(94,234,212,.05), transparent 60%),
		var(--bg);
}

.terminal-window {
	max-width: 1080px;
	margin: 0 auto;
	background: var(--term-bg);
	border: 1px solid var(--term-border);
	border-radius: 12px;
	box-shadow:
		0 30px 80px rgba(0,0,0,.6),
		0 0 50px rgba(20,184,166,.08),
		inset 0 0 0 1px rgba(94,234,212,.04);
	font-family: var(--font-mono);
	overflow: hidden;
}

/* Header bar (macOS-style) */
.terminal-window__header {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 16px;
	background: var(--term-header);
	border-bottom: 1px solid var(--term-border);
}

.terminal-window__dots {
	display: flex;
	gap: 8px;
}
.terminal-window__dots .dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	display: inline-block;
}
.dot--red    { background: var(--term-red);    box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.dot--yellow { background: var(--term-yellow); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }
.dot--green  { background: var(--term-success); box-shadow: inset 0 0 0 1px rgba(0,0,0,.2); }

.terminal-window__title {
	flex: 1;
	text-align: center;
	color: var(--term-muted);
	font-size: .82rem;
	letter-spacing: .02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.terminal-window__meta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .72rem;
	color: var(--term-accent);
	font-weight: 700;
	letter-spacing: .12em;
	padding: 3px 10px;
	border: 1px solid rgba(20,184,166,.3);
	border-radius: 100px;
	background: rgba(20,184,166,.06);
}

/* Body */
.terminal-window__body {
	padding: 22px 20px;
	min-height: 300px;
	max-height: 460px;
	overflow-y: auto;
	background:
		linear-gradient(rgba(255,255,255,.01) 1px, transparent 1px) 0 0 / 100% 2px,
		var(--term-bg);
	color: var(--term-text);
	font-size: .88rem;
	line-height: 1.7;
	scroll-behavior: smooth;
}

/* Custom scrollbar */
.terminal-window__body::-webkit-scrollbar { width: 6px; }
.terminal-window__body::-webkit-scrollbar-track { background: transparent; }
.terminal-window__body::-webkit-scrollbar-thumb { background: var(--term-border); border-radius: 10px; }
.terminal-window__body::-webkit-scrollbar-thumb:hover { background: #2a3548; }

/* Log entries */
.log-entry {
	padding: 6px 10px 6px 14px;
	margin-bottom: 4px;
	border-left: 2px solid transparent;
	transition: border-color .2s, background .2s;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: baseline;
}
.log-entry:hover {
	background: rgba(94,234,212,.04);
}
.log-entry--success:hover { border-left-color: var(--term-success); }
.log-entry--accent:hover  { border-left-color: var(--term-accent); }
.log-entry--info:hover    { border-left-color: var(--term-muted); }
.log-entry--purple:hover  { border-left-color: var(--term-purple); }
.log-entry--warn:hover    { border-left-color: var(--term-yellow); }
.log-entry--danger:hover  { border-left-color: var(--term-red); }

.log-time {
	color: var(--term-muted);
	font-size: .78rem;
	white-space: nowrap;
	flex-shrink: 0;
}

.log-status {
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .04em;
	white-space: nowrap;
	flex-shrink: 0;
}
.log-status--success { color: var(--term-success); }
.log-status--accent  { color: var(--term-green); }
.log-status--info    { color: #94a3b8; }
.log-status--purple  { color: var(--term-purple); }
.log-status--warn    { color: var(--term-yellow); }
.log-status--danger  { color: var(--term-red); }

.log-message {
	color: #d1d5db;
	flex: 1;
	min-width: 200px;
	word-break: break-word;
}
.log-message strong {
	color: var(--term-green);
	font-weight: 600;
}

/* Active prompt line */
.log-entry--prompt {
	margin-top: 14px;
	padding-left: 0;
	border-left: none;
	align-items: center;
}
.log-prompt {
	color: var(--term-accent);
	font-weight: 700;
}
.log-cursor {
	display: inline-block;
	width: 10px;
	height: 1.1em;
	background: var(--term-green);
	animation: term-blink 1.1s steps(2, start) infinite;
	box-shadow: 0 0 6px var(--term-green);
	vertical-align: text-bottom;
}
@keyframes term-blink {
	to { visibility: hidden; }
}

/* Footer */
.terminal-window__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 18px;
	background: var(--term-header);
	border-top: 1px solid var(--term-border);
	font-size: .72rem;
	color: var(--term-muted);
	letter-spacing: .02em;
	flex-wrap: wrap;
	gap: 8px;
}
.terminal-window__cache {
	color: var(--term-accent);
	font-family: var(--font-mono);
}

/* Reveal animation on scroll into view */
.terminal-window[data-terminal-revealed] .log-entry {
	animation: term-reveal .3s ease-out both;
}
.terminal-window[data-terminal-revealed] .log-entry:nth-child(1) { animation-delay: .05s; }
.terminal-window[data-terminal-revealed] .log-entry:nth-child(2) { animation-delay: .15s; }
.terminal-window[data-terminal-revealed] .log-entry:nth-child(3) { animation-delay: .25s; }
.terminal-window[data-terminal-revealed] .log-entry:nth-child(4) { animation-delay: .35s; }
.terminal-window[data-terminal-revealed] .log-entry:nth-child(5) { animation-delay: .45s; }
.terminal-window[data-terminal-revealed] .log-entry:nth-child(6) { animation-delay: .55s; }
.terminal-window[data-terminal-revealed] .log-entry:nth-child(7) { animation-delay: .65s; }
.terminal-window[data-terminal-revealed] .log-entry:nth-child(8) { animation-delay: .75s; }
.terminal-window[data-terminal-revealed] .log-entry:nth-child(9) { animation-delay: .85s; }
@keyframes term-reveal {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: none; }
}

/* Live-update flash (when JS fetches new Capella row) */
.log-entry--flash {
	animation: term-flash 1.2s ease-out;
}
@keyframes term-flash {
	0%   { background: rgba(123,97,255,.25); }
	100% { background: transparent; }
}

@media (max-width: 640px) {
	.terminal-window__body { padding: 16px 12px; font-size: .8rem; }
	.log-entry { flex-direction: column; gap: 2px; }
	.log-time, .log-status { font-size: .72rem; }
}