/* BLACKCELL — Mobile Recon Terminal Styles */
:root{
  --bg:#04070b;
  --fg:#b8ffcb;
  --neon:#25ff8a;
  --neon-2:#36f0ff;
  --danger:#ff3b3b;
  --muted:#6aa78c;
}

/* Light mode variables */
[data-theme="light"] {
  --bg: #ffffff;
  --fg: #000000;
  --neon: #25ff8a;
  --neon-2: #36f0ff;
  --danger: #ff3b3b;
  --muted: #6aa78c;
}

html,body{ height:100%; }
body{
  background: var(--bg);
  color:var(--fg);
  font-family:'Share Tech Mono', monospace;
}

/* Dark mode specific background */
body:not([data-theme="light"]) {
  background: radial-gradient(ellipse at top, #020409 0%, #000 60%) no-repeat fixed;
}

.logo-glitch{
  letter-spacing:.15em;
  font-weight:700;
  text-shadow:0 0 12px var(--neon), 0 0 24px var(--neon-2);
  filter: drop-shadow(0 0 4px var(--neon));
}
.subtitle{ color:var(--muted); }

/* Ensure header/footer honor theme colors */
header.container, footer.container{ color: var(--fg); }
footer.container{ background: transparent; border-top:1px solid rgba(37,255,138,.35); }
[data-theme="light"] footer.container{ border-top-color: rgba(0,0,0,.15); }

.border-neon{
  border:1px solid rgba(37,255,138,.35)!important;
  box-shadow: 0 0 16px rgba(37,255,138,.15), inset 0 0 32px rgba(37,255,138,.05);
}

.terminal-wrapper{ position:relative; overflow:hidden; }
.crt-overlay{
  position:absolute; inset:0; pointer-events:none;
  background: repeating-linear-gradient( to bottom, rgba(255,255,255,.05), rgba(255,255,255,.05) 1px, transparent 1px, transparent 3px );
  mix-blend-mode: overlay; opacity:.07;
}
.matrix-rain{
  position:absolute; inset:0; pointer-events:none; opacity:.08; background:
  repeating-linear-gradient(180deg, transparent 0 10px, rgba(54,240,255,.35) 10px 11px, transparent 11px 20px);
  animation: drift 14s linear infinite;
}
@keyframes drift{ from{ transform: translateY(-10%);} to{ transform: translateY(10%);} }

.terminal{ min-height:46vh; background:rgba(2,6,10,.35); }
.terminal-output{ min-height:32vh; white-space:pre-wrap; font-size:1.05rem; }
/* Force bright green terminal text in dark mode */
body:not([data-theme="light"]) .terminal-output{ color: var(--neon); }
body:not([data-theme="light"]) .line-data{ color: var(--neon); background: rgba(37,255,138,.08); border-left-color: var(--neon); }

.prompt{ color:var(--neon); background:rgba(37,255,138,.08); border:none; }
.neon-input{
  background: transparent; color:var(--fg);
  border: none; border-bottom: 2px solid rgba(37,255,138,.45);
  outline:none; box-shadow: none; border-radius:0;
  caret-color: var(--neon);
  font-family:'Share Tech Mono', monospace;
  letter-spacing:.05em;
}
.neon-input::placeholder{ 
	color: rgba(184,255,203,.45); 
}

/* Light theme placeholder styling */
[data-theme="light"] .neon-input::placeholder {
	color: #6c757d;
	opacity: 0.9;
}

/* Dark theme placeholder styling */
body:not([data-theme="light"]) .neon-input::placeholder {
	color: rgba(184,255,203,.45);
	opacity: 0.8;
}
.neon-input:focus{ background: transparent!important; border-bottom-color:var(--neon); box-shadow:0 10px 18px -12px rgba(37,255,138,.55); color:var(--fg); }
/* Override Bootstrap default white background on focus */
.form-control.neon-input, .form-control.neon-input:focus{ background-color: transparent!important; }

.btn-neon{ color:#001b0e; background:var(--neon); border:1px solid var(--neon); font-weight:700; }
.btn-neon:hover{ filter:brightness(1.1); }

.btn-outline-neon{ color:var(--neon); border:1px solid var(--neon); }
.btn-outline-neon:disabled{ opacity:.55; }

/* Make input group feel more terminal-like */
.input-group-text.prompt{ border:none; border-bottom:2px solid rgba(37,255,138,.45); border-radius:0; background:transparent; font-weight:700; }
.input-group-lg > .form-control.neon-input, .input-group-lg > .input-group-text.prompt{ padding-top:.25rem; padding-bottom:.25rem; }

.ads-slot{ min-height:90px; background:rgba(255,255,255,.05); border:1px dashed rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; color:#9fb6a7; cursor:pointer; transition:all .3s ease; }
.ads-slot:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.3); transform:scale(1.02); }
.ad-content{ text-align:center; }
.ad-banner{ font-size:1.2rem; font-weight:700; margin-bottom:.5rem; }
.ad-description{ font-size:.9rem; opacity:.8; }

/* Light mode ad adjustments */
[data-theme="light"] .ads-slot{ background:rgba(0,0,0,.05); border-color:rgba(0,0,0,.15); color:#495057; }
[data-theme="light"] .ads-slot:hover{ background:rgba(0,0,0,.1); border-color:rgba(0,0,0,.3); }

/* Light mode terminal adjustments */
[data-theme="light"] .terminal{ background:rgba(0,0,0,.05); }
[data-theme="light"] .border-neon{ border-color:rgba(37,255,138,.35)!important; box-shadow: 0 0 16px rgba(37,255,138,.15), inset 0 0 32px rgba(37,255,138,.05); }

/* Article readability tweaks */
/* Dark mode: make article text brighter/greener for readability */
body:not([data-theme="light"]) article.card .card-body {
  color: var(--fg);
}
body:not([data-theme="light"]) article.card .card-body h2,
body:not([data-theme="light"]) article.card .card-body p,
body:not([data-theme="light"]) article.card .card-body li,
body:not([data-theme="light"]) article.card .card-body figcaption {
  color: #b8ffcb; /* light green text */
}
body:not([data-theme="light"]) article.card .card-body a {
  color: var(--neon);
}
/* Ensure article images render nicely */
article.card img {
  display: block;
  width: 100%;
  height: auto;
  border-color: rgba(37,255,138,.35);
}

/* Navigation Menu Styling */
.navbar-nav .nav-link{
	color: var(--muted);
	text-decoration: none;
	padding: .5rem 1rem;
	margin: 0 .25rem;
	border-radius: 4px;
	transition: all .3s ease;
	border: 1px solid transparent;
}

.navbar-nav .nav-link:hover{
	color: var(--neon);
	background: rgba(37,255,138,.08);
	border-color: rgba(37,255,138,.35);
}

.navbar-nav .nav-link.active{
	color: var(--neon);
	background: rgba(37,255,138,.12);
	border-color: var(--neon);
	box-shadow: 0 0 8px rgba(37,255,138,.3);
}

.navbar-nav .nav-link.neon-link{
	font-family: 'Share Tech Mono', monospace;
	font-size: .9rem;
	letter-spacing: .05em;
}

.glitch{ position:relative; display:inline-block; }
.glitch::before,.glitch::after{
  content:attr(data-text); position:absolute; left:0; top:0; filter:blur(.5px); opacity:.8; clip-path: polygon(0 2%, 100% 2%, 100% 28%, 0 28%);
}
.glitch::before{ transform: translate(2px, -1px); color:var(--neon); mix-blend-mode:screen; }
.glitch::after{ transform: translate(-2px, 1px); color:var(--neon-2); mix-blend-mode:screen; }

.type-caret{ display:inline-block; width:.7ch; background:var(--neon); box-shadow:0 0 8px var(--neon); animation: blink 1s step-end infinite;}
@keyframes blink{ 50%{ opacity:0; } }

.line-error{ color:var(--danger); text-shadow:0 0 6px rgba(255,59,59,.6); }
.line-muted{ color:var(--muted); }
.line-success{ color:var(--neon); font-weight:600; }
.line-data{ color:var(--fg); font-weight:500; background:rgba(37,255,138,.08); padding:.25rem .5rem; border-radius:4px; margin:.25rem 0; border-left:3px solid var(--neon); }

.progress-bar-fake{ height:10px; background:linear-gradient(90deg, var(--neon), var(--neon-2)); box-shadow:0 0 10px var(--neon); animation:load 3s linear infinite; }
@keyframes load{ 0%{ width:0; } 100%{ width:100%; } }

/* Responsive */
@media (max-width: 576px){
  .terminal-output{ font-size: .95rem; }
}

/* Mobile Responsive Navigation */
@media (max-width: 768px) {
	.navbar-nav {
		flex-direction: column;
		width: 100%;
		margin-top: 1rem;
		background: rgba(37,255,138,.08);
		border-radius: 8px;
		padding: 0.6rem;
		border: 1px solid rgba(37,255,138,.2);
		box-shadow: 0 4px 16px rgba(37,255,138,.1);
		position: relative;
		z-index: 10;
		align-items: stretch;
	}

	/* Ensure navbar container clips any internal overflow on mobile */
	header .navbar { width: 100%; overflow: visible; margin-bottom: .75rem; }
	
	.navbar-nav .nav-link {
		margin: 0.3rem 0;
		text-align: center;
		padding: 0.7rem 1rem;
		border-radius: 6px;
		font-size: 0.9rem;
		font-weight: 500;
		position: relative;
		overflow: hidden;
		border: 1px solid rgba(37,255,138,.15);
		background: rgba(37,255,138,.05);
		transition: all 0.3s ease;
		white-space: normal; /* allow wrapping if needed */
		display: block;
		width: 100%;
		box-sizing: border-box;
	}

	/* Ensure list itself doesn't clip last item */
	.navbar-nav { overflow: visible; }
	
	.navbar-nav .nav-link::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(37,255,138,.1), transparent);
		transition: left 0.5s ease;
	}
	
	.navbar-nav .nav-link:hover::before {
		left: 100%;
	}
	
	.navbar-nav .nav-link:hover {
		transform: none; /* prevent shifting outside container */
		background: rgba(37,255,138,.12);
		border-color: rgba(37,255,138,.4);
		box-shadow: 0 3px 12px rgba(37,255,138,.2);
		color: var(--neon);
	}
	
	.navbar-nav .nav-link.active {
		transform: none; /* keep item within container */
		background: rgba(37,255,138,.15);
		border-color: var(--neon);
		box-shadow: 0 3px 16px rgba(37,255,138,.3);
		color: var(--neon);
	}
	
	.navbar-nav .nav-link:active {
		transform: scale(0.98);
		transition: all 0.1s ease;
	}
}

@media (max-width: 576px) {
	.navbar-nav {
		margin-top: 0.8rem;
		padding: 0.5rem;
		background: rgba(37,255,138,.1);
		border-width: 1px;
	}
	
	.navbar-nav .nav-link {
		font-size: 0.85rem;
		padding: 0.6rem 0.8rem;
		margin: 0.25rem 0;
		border-width: 1px;
	}
	
	.navbar-nav .nav-link:hover {
		transform: none;
	}
	
	.navbar-nav .nav-link.active {
		transform: none;
	}
}

@media (max-width: 480px) {
	.navbar-nav {
		margin-top: 0.6rem;
		padding: 0.4rem;
		border-radius: 6px;
	}
	
	.navbar-nav .nav-link {
		font-size: 0.8rem;
		padding: 0.5rem 0.7rem;
		margin: 0.2rem 0;
		border-radius: 4px;
	}
	
	.navbar-nav .nav-link:hover {
		transform: none;
	}
	
	.navbar-nav .nav-link.active {
		transform: none;
	}
}