* { box-sizing: border-box; margin: 0; padding: 0; }
body, html { height: 100%; font-family: 'Segoe UI', Tahoma, sans-serif; background-color: #121212; color: #e0e0e0; overflow: hidden; }

/* Header & Controls */
.menu-container {
	height: 60px; background-color: #1f1f1f; display: flex; align-items: center;
	padding: 0 20px; border-bottom: 1px solid #333; gap: 10px; z-index: 1000; position: relative;
}

/* Custom Searchable Dropdown */
.search-container { position: relative; width: 350px; }

.search-input {
	width: 100%; background-color: #2c2c2c; color: white; border: 1px solid #444;
	padding: 10px 15px; border-radius: 4px; outline: none; font-size: 14px; transition: 0.2s;
}
.search-input:focus { border-color: #0078d4; box-shadow: 0 0 5px rgba(0, 120, 212, 0.3); }

.dropdown-list {
	position: absolute; top: 110%; left: 0; width: 100%; background: #1f1f1f;
	border: 1px solid #444; border-radius: 4px; max-height: 400px; overflow-y: auto;
	display: none; box-shadow: 0 10px 20px rgba(0,0,0,0.5); z-index: 9999;
}

.dropdown-item { padding: 10px 15px; cursor: pointer; border-bottom: 1px solid #333; font-size: 14px; }
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover, .dropdown-item.active { background-color: #0078d4; color: white; }
.dropdown-group-label { background: #121212; padding: 5px 15px; font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 1px; }

.btn-refresh {
	background-color: #333; color: #0078d4; border: 1px solid #444; padding: 0 15px;
	height: 38px; border-radius: 4px; cursor: pointer; font-size: 20px; display: flex; align-items: center;
}
.btn-refresh:hover { background-color: #444; color: #2b9fff; }

/* Iframe & UI */
#content-frame { width: 100%; height: calc(100vh - 60px); border: none; background-color: white; }

.loading-overlay {
	position: fixed; top: 60px; left: 0; width: 100%; height: calc(100vh - 60px);
	background: rgba(18,18,18,0.9); display: none; flex-direction: column; 
	justify-content: center; align-items: center; z-index: 50;
}
.spinner { width: 30px; height: 30px; border: 3px solid #333; border-top: 3px solid #0078d4; border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 10px; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.hidden { display: none !important; }