/* AMIR FARM - HALVA OGHAB — Dark Industrial Command Center theme */

/* NOTE: several rules below (e.g. .af-overview, .af-command, .af-ai-indicator)
   set "display" unconditionally. Author CSS always wins over the browser's
   built-in [hidden] { display: none } rule, so without this override,
   toggling el.hidden via JS would have no visual effect. This rule
   guarantees [hidden] always wins inside the app. */
.af-app [hidden] {
	display: none !important;
}

@font-face {
	font-family: "AF-Yekan";
	src: url("../fonts/Yekan.woff2") format("woff2"), url("../fonts/Yekan.woff") format("woff");
	font-weight: normal;
	font-display: swap;
}

.amirfarm-ho-scope {
	--af-bg-0: #05070a;
	--af-bg-1: #0a0e14;
	--af-bg-2: #0f1620;
	--af-bg-3: #141d29;
	--af-line: rgba(63, 224, 176, 0.16);
	--af-line-strong: rgba(63, 224, 176, 0.4);
	--af-green: #39e6b0;
	--af-green-soft: rgba(57, 230, 176, 0.14);
	--af-blue: #3f8cff;
	--af-blue-soft: rgba(63, 140, 255, 0.14);
	--af-amber: #ffb545;
	--af-red: #ff5252;
	--af-text-0: #eef6f2;
	--af-text-1: #9fb4b0;
	--af-text-2: #6d8380;
	--af-radius: 10px;
	--af-height: 820px;

	position: relative;
	display: block;
	width: 100%;
	height: var(--af-height, 820px);
	min-height: 560px;
	background: var(--af-bg-0);
	color: var(--af-text-0);
	font-family: "AF-Yekan", "Segoe UI", Tahoma, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.45;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(63, 224, 176, 0.12), 0 30px 80px rgba(0, 0, 0, 0.55);
	direction: ltr;
	box-sizing: border-box;
}
.amirfarm-ho-scope *,
.amirfarm-ho-scope *::before,
.amirfarm-ho-scope *::after {
	box-sizing: border-box;
}

.amirfarm-boot {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: var(--af-text-1);
	font-size: 15px;
}
.amirfarm-boot-mark {
	color: var(--af-green);
	font-size: 20px;
	animation: af-spin 2.4s linear infinite;
	display: inline-block;
}
@keyframes af-spin {
	to {
		transform: rotate(360deg);
	}
}

.af-app {
	position: relative;
	width: 100%;
	height: 100%;
}

.af-btn {
	appearance: none;
	border: 1px solid var(--af-line);
	background: var(--af-bg-2);
	color: var(--af-text-0);
	padding: 9px 16px;
	border-radius: 7px;
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, transform 0.05s ease;
}
.af-btn:hover {
	border-color: var(--af-line-strong);
}
.af-btn:active {
	transform: translateY(1px);
}
.af-btn-primary {
	background: linear-gradient(180deg, rgba(57, 230, 176, 0.22), rgba(57, 230, 176, 0.08));
	border-color: var(--af-green);
	color: #eafff4;
}
.af-btn-ghost {
	background: transparent;
}

/* ---------------------------------------------------------- overview */

.af-overview {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 50% 20%, rgba(63, 140, 255, 0.14), transparent 55%), radial-gradient(circle at 80% 85%, rgba(57, 230, 176, 0.1), transparent 45%),
		var(--af-bg-0);
	padding: 24px;
}
.af-ov-inner {
	text-align: center;
	max-width: 620px;
}
.af-ov-logo {
	font-size: 40px;
	color: var(--af-green);
	margin-bottom: 6px;
}
.af-ov-inner h1 {
	margin: 0 0 6px;
	font-size: 34px;
	letter-spacing: 0.06em;
	font-weight: 800;
	background: linear-gradient(180deg, #ffffff, #b9e9d8);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.af-ov-sub {
	margin: 0 0 26px;
	color: var(--af-text-1);
	font-size: 13.5px;
}
.af-ov-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
	margin-bottom: 26px;
}
.af-ov-card {
	background: var(--af-bg-2);
	border: 1px solid var(--af-line);
	border-radius: var(--af-radius);
	padding: 14px 8px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.af-ov-card span {
	font-size: 10.5px;
	letter-spacing: 0.08em;
	color: var(--af-text-2);
}
.af-ov-card strong {
	font-size: 17px;
	font-weight: 700;
}
.af-ov-low {
	color: var(--af-green);
}
.af-ov-medium {
	color: var(--af-amber);
}
.af-ov-high {
	color: var(--af-red);
}
.af-enter-btn {
	padding: 13px 30px;
	font-size: 13.5px;
	margin-bottom: 22px;
}
.af-ov-sites {
	display: flex;
	gap: 10px;
	justify-content: center;
}
.af-ov-site {
	background: var(--af-bg-1);
	border: 1px dashed var(--af-line);
	border-radius: 8px;
	padding: 10px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 11.5px;
	color: var(--af-text-1);
}
.af-ov-site strong {
	color: var(--af-text-0);
	font-size: 12px;
	letter-spacing: 0.02em;
}

/* ------------------------------------------------------------ command */

.af-command {
	height: 100%;
	display: grid;
	grid-template-rows: 54px 1fr 200px;
}

.af-topbar {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 0 16px;
	border-bottom: 1px solid var(--af-line);
	background: linear-gradient(180deg, var(--af-bg-1), var(--af-bg-0));
}
.af-brand {
	display: flex;
	align-items: center;
	gap: 8px;
}
.af-brand-mark {
	color: var(--af-green);
	font-size: 20px;
}
.af-brand-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}
.af-brand-text strong {
	font-size: 13.5px;
	letter-spacing: 0.05em;
}
.af-brand-text small {
	font-size: 9.5px;
	color: var(--af-text-2);
	letter-spacing: 0.08em;
}
.af-site-tabs {
	display: flex;
	gap: 6px;
	margin-inline-start: 10px;
}
.af-site-tab {
	background: transparent;
	border: 1px solid transparent;
	color: var(--af-text-1);
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 7px 12px;
	border-radius: 6px;
	cursor: pointer;
}
.af-site-tab:hover {
	color: var(--af-text-0);
}
.af-site-tab.is-active {
	background: var(--af-green-soft);
	border-color: var(--af-line-strong);
	color: var(--af-green);
}
.af-overview-btn {
	margin-inline-start: auto;
}

.af-body {
	display: grid;
	grid-template-columns: 1fr 268px;
	min-height: 0;
}

.af-viewport-wrap {
	position: relative;
	min-height: 0;
	background: radial-gradient(circle at 50% 40%, rgba(63, 140, 255, 0.08), transparent 60%);
}
.af-viewport {
	position: absolute;
	inset: 0;
}
.af-viewport canvas {
	display: block;
	touch-action: none;
	cursor: grab;
}
.af-3d-error {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 30px;
	color: var(--af-text-1);
	font-size: 13px;
}

.af-hud {
	position: absolute;
	top: 14px;
	left: 14px;
	pointer-events: none;
}
.af-hud-card {
	background: rgba(5, 10, 14, 0.68);
	border: 1px solid var(--af-line);
	border-radius: 8px;
	padding: 10px 14px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	backdrop-filter: blur(4px);
}
.af-hud-card strong {
	font-size: 13px;
	letter-spacing: 0.03em;
}
.af-hud-card span {
	font-size: 11px;
	color: var(--af-text-1);
}
.af-hud-status {
	color: var(--af-green) !important;
	font-size: 10.5px !important;
	letter-spacing: 0.06em;
}

.af-ai-indicator {
	position: absolute;
	top: 14px;
	right: 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(5, 10, 14, 0.72);
	border: 1px solid var(--af-blue);
	color: #bcd9ff;
	font-size: 11px;
	letter-spacing: 0.05em;
	padding: 8px 12px;
	border-radius: 20px;
}
.af-ai-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--af-blue);
	box-shadow: 0 0 10px var(--af-blue);
	animation: af-pulse 1.1s ease-in-out infinite;
}
@keyframes af-pulse {
	0%,
	100% {
		opacity: 0.4;
		transform: scale(0.8);
	}
	50% {
		opacity: 1;
		transform: scale(1.15);
	}
}

.af-toolbar {
	position: absolute;
	bottom: 14px;
	left: 14px;
	display: flex;
	gap: 6px;
}
.af-tool {
	background: rgba(5, 10, 14, 0.72);
	border: 1px solid var(--af-line);
	color: var(--af-text-1);
	font-family: inherit;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 8px 12px;
	border-radius: 6px;
	cursor: pointer;
}
.af-tool:hover {
	color: var(--af-text-0);
	border-color: var(--af-line-strong);
}
.af-tool.is-active {
	background: var(--af-green-soft);
	border-color: var(--af-green);
	color: var(--af-green);
}
.af-tool-demo.is-active {
	background: rgba(255, 82, 82, 0.14);
	border-color: var(--af-red);
	color: #ffb6b6;
}

.af-drag-hint {
	position: absolute;
	bottom: 14px;
	right: 14px;
	font-size: 10px;
	color: var(--af-text-2);
	letter-spacing: 0.03em;
}

.af-smartpilot-banner {
	position: absolute;
	bottom: 60px;
	left: 50%;
	transform: translateX(-50%);
	width: min(420px, 90%);
}
.af-suggestion {
	background: rgba(10, 16, 22, 0.92);
	border: 1px solid var(--af-amber);
	border-radius: 10px;
	padding: 14px 16px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}
.af-suggestion p {
	margin: 0 0 12px;
	font-size: 12.5px;
	color: #ffe2b0;
}
.af-suggestion-actions {
	display: flex;
	gap: 8px;
}

/* ------------------------------------------------------------ side panel */

.af-command-panel {
	border-left: 1px solid var(--af-line);
	background: var(--af-bg-1);
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.af-panel-section h3 {
	margin: 0 0 10px;
	font-size: 11px;
	letter-spacing: 0.09em;
	color: var(--af-text-2);
	font-weight: 700;
}
.af-kv div {
	display: flex;
	justify-content: space-between;
	padding: 6px 0;
	border-bottom: 1px dashed rgba(63, 224, 176, 0.1);
	font-size: 12px;
}
.af-kv dt {
	color: var(--af-text-1);
	font-weight: 400;
}
.af-kv dd {
	margin: 0;
	font-weight: 700;
}
.af-mode-value {
	color: var(--af-green);
}
.af-alert-count {
	font-size: 30px;
	font-weight: 800;
	color: var(--af-amber);
	line-height: 1;
}
.af-panel-section small {
	color: var(--af-text-2);
	font-size: 10.5px;
}
.af-mode-buttons {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin-bottom: 10px;
}
.af-mode-btn {
	background: var(--af-bg-2);
	border: 1px solid var(--af-line);
	color: var(--af-text-1);
	font-family: inherit;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 9px 10px;
	border-radius: 7px;
	cursor: pointer;
	text-align: left;
}
.af-mode-btn.is-active {
	background: var(--af-green-soft);
	border-color: var(--af-green);
	color: var(--af-green);
}
.af-bulk-buttons {
	display: flex;
	gap: 6px;
}
.af-bulk-buttons .af-btn {
	flex: 1;
	font-size: 10.5px;
	padding: 8px 6px;
}

/* -------------------------------------------------------- floating panels */

.af-device-panel,
.af-pest-panel {
	position: absolute;
	top: 68px;
	right: 282px;
	width: 260px;
	z-index: 5;
}
.af-panel-card {
	background: rgba(9, 14, 19, 0.96);
	border: 1px solid var(--af-line-strong);
	border-radius: 10px;
	padding: 14px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.af-panel-card-alert {
	border-color: var(--af-red);
}
.af-panel-card-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}
.af-panel-card-head h3 {
	margin: 0;
	font-size: 12.5px;
	letter-spacing: 0.05em;
}
.af-close {
	background: transparent;
	border: none;
	color: var(--af-text-2);
	cursor: pointer;
	font-size: 13px;
}
.af-status-pill {
	display: inline-block;
	color: var(--af-green);
	font-size: 11px;
	font-weight: 700;
	margin-bottom: 10px;
}
.af-panel-actions {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}
.af-panel-actions .af-btn {
	flex: 1;
	font-size: 10.5px;
	padding: 8px 6px;
}

/* ------------------------------------------------------------- timeline */

.af-timeline {
	border-top: 1px solid var(--af-line);
	background: var(--af-bg-1);
	display: flex;
	flex-direction: column;
	min-height: 0;
}
.af-timeline-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	border-bottom: 1px solid rgba(63, 224, 176, 0.08);
}
.af-timeline-head strong {
	font-size: 11px;
	letter-spacing: 0.09em;
	color: var(--af-text-2);
}
.af-timeline-filters {
	display: flex;
	gap: 6px;
}
.af-tl-filter,
.af-tl-search {
	background: var(--af-bg-2);
	border: 1px solid var(--af-line);
	color: var(--af-text-1);
	font-family: inherit;
	font-size: 11px;
	padding: 5px 8px;
	border-radius: 6px;
}
.af-tl-search {
	width: 160px;
}
.af-timeline-list {
	overflow-y: auto;
	padding: 6px 16px 14px;
	flex: 1;
}
.af-tl-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 6px 0;
	font-size: 12px;
	border-bottom: 1px dashed rgba(63, 224, 176, 0.06);
}
.af-tl-time {
	color: var(--af-text-2);
	font-variant-numeric: tabular-nums;
	width: 40px;
	flex: none;
}
.af-tl-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--af-text-2);
	flex: none;
}
.af-tl-detection .af-tl-dot {
	background: var(--af-red);
}
.af-tl-ai .af-tl-dot {
	background: var(--af-blue);
}
.af-tl-action .af-tl-dot {
	background: var(--af-green);
}
.af-tl-system .af-tl-dot {
	background: var(--af-text-2);
}
.af-tl-text {
	color: var(--af-text-0);
}
.af-tl-text em {
	color: var(--af-text-2);
	font-style: normal;
}

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
	.af-ov-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.af-body {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr auto;
	}
	.af-command-panel {
		border-left: none;
		border-top: 1px solid var(--af-line);
		flex-direction: row;
		flex-wrap: wrap;
		max-height: 220px;
	}
	.af-panel-section {
		flex: 1 1 200px;
	}
	.af-device-panel,
	.af-pest-panel {
		right: 14px;
	}
	.af-timeline-filters {
		flex-wrap: wrap;
	}
	.af-tl-search {
		width: 120px;
	}
}