:root {
	--bg-color: #f5f5f5;
	--text-color: #333;
	--container-bg: white;
	--element-bg: white;
	--element-border: #ccc;
	--shadow-color: rgba(0,0,0,0.1);
	--result-bg: #e8f4fc;
	--result-border: #3498db;
	--suggestion-bg: #eee;
	--suggestion-hover: #ddd;
	--button-bg: #3498db;
	--button-hover: #2980b9;
	--input-border: #ddd;
}

.dark-mode {
	--bg-color: #121212;
	--text-color: #1e6ce3;
	--container-bg: #1e1e1e;
	--element-bg: #2d2d2d;
	--element-border: #444;
	--shadow-color: rgba(0,0,0,0.3);
	--result-bg: #2a3a4a;
	--result-border: #1a5a8a;
	--suggestion-bg: #333;
	--suggestion-hover: #444;
	--button-bg: #1a5a8a;
	--button-hover: #134370;
	--input-border: #444;
}

body {
	font-family: 'Arial', sans-serif;
	max-width: 1200px;
	margin: 0 auto;
	padding: 20px;
	background-color: var(--bg-color);
	color: var(--text-color);
	transition: background-color 0.3s, color 0.3s;
}

h1, h2 {
	color: #2c3e50;
	text-align: center;
}

.periodic-page .container {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* Periodic Table Styles */
.periodic-table {
	display: grid;
	grid-template-columns: repeat(18, 1fr);
	gap: 5px;
	margin-bottom: 20px;
}

.element {
	border: 1px solid var(--element-border);
	padding: 5px;
	text-align: center;
	cursor: pointer;
	transition: all 0.3s;
	background-color: var(--element-bg);
	border-radius: 5px;
	min-height: 60px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.element:hover {
	transform: scale(1.1);
	box-shadow: 0 0 10px var(--shadow-color);
	z-index: 10;
}

.element.empty {
	border: none;
	background-color: transparent;
}

.element .number {
	font-size: 10px;
	text-align: left;
}

.element .symbol {
	font-size: 18px;
	font-weight: bold;
}

.element .name {
	font-size: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
}

.lanthanides, .actinides {
	display: grid;
	grid-template-columns: repeat(15, 1fr);
	gap: 5px;
	margin-top: 10px;
	margin-left: 3fr;
}

.element-info {
	display: flex;
	gap: 30px;
	margin-top: 20px;
}

.basic-info, .advanced-info, .calculator {
	flex: 1;
	padding: 15px;
	background-color: var(--container-bg);
	border-radius: 8px;
	box-shadow: 0 2px 5px var(--shadow-color);
	transition: background-color 0.3s;
}

.advanced-info {
	flex: 2;
}

/* Formula Calculator Styles */
.calculator {
	background-color: var(--container-bg);
}

.input-group {
	display: flex;
	gap: 10px;
	margin-bottom: 15px;
}

input[type="text"] {
	flex: 1;
	padding: 10px;
	border: 1px solid var(--input-border);
	border-radius: 4px;
	font-size: 16px;
	background-color: var(--container-bg);
	color: var(--text-color);
}

button {
	padding: 10px 20px;
	background-color: var(--button-bg);
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 16px;
	transition: background-color 0.3s;
}

button:hover {
	background-color: var(--button-hover);
}

.result {
	margin-top: 20px;
	padding: 15px;
	background-color: var(--result-bg);
	border-radius: 4px;
	border-left: 4px solid var(--result-border);
}

.suggestions {
	margin-top: 10px;
}

.suggestion {
	display: inline-block;
	margin-right: 10px;
	margin-bottom: 5px;
	padding: 5px 10px;
	background-color: var(--suggestion-bg);
	border-radius: 15px;
	cursor: pointer;
	font-size: 14px;
	transition: background-color 0.3s;
}

.suggestion:hover {
	background-color: var(--suggestion-hover);
}

/* Element category colors */
.alkali-metal { background-color: #ff9999; }
.alkaline-earth { background-color: #ffdead; }
.transition-metal { background-color: #ffc0c0; }
.post-transition { background-color: #cccccc; }
.metalloid { background-color: #cccc99; }
.nonmetal { background-color: #a1ffc3; }
.halogen { background-color: #ffff99; }
.noble-gas { background-color: #c0ffff; }
.lanthanide { background-color: #ffbfff; }
.actinide { background-color: #ff99cc; }
.unknown { background-color: #e8e8e8; }

/* Dark mode toggle */
/* .dark-mode-toggle { */
	/* position: fixed; */
	/* top: 20px; */
	/* right: 20px; */
	/* z-index: 100; */
	/* background-color: var(--button-bg); */
	/* color: white; */
	/* border: none; */
	/* border-radius: 50%; */
	/* width: 40px; */
	/* height: 40px; */
	/* cursor: pointer; */
	/* display: flex; */
	/* align-items: center; */
	/* justify-content: center; */
	/* font-size: 20px; */
	/* transition: background-color 0.3s; */
/* } */
.dark-mode-toggle {
  position: fixed;
  top: 2rem;
  right: 1rem;
  background: #eee;
  border: none;
  font-size: 1.5rem;
  padding: 0.5rem 0.7rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1050; /* higher than navbar */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}



.dark-mode-toggle:hover {
	background-color: var(--button-hover);
}

/* Reverse lookup button */
.reverse-lookup {
	margin-left: 10px;
	background-color: #6c757d;
}

.reverse-lookup:hover {
	background-color: #5a6268;
}

/* Tabs for calculator */
.tab-container {
	display: flex;
	margin-bottom: 15px;
}

.tab {
	padding: 8px 16px;
	cursor: pointer;
	background-color: var(--container-bg);
	border: 1px solid var(--element-border);
	border-bottom: none;
	border-radius: 5px 5px 0 0;
	margin-right: 5px;
}

.tab.active {
	background-color: var(--result-bg);
	border-bottom: 1px solid var(--result-bg);
}

.tab-content {
	display: none;
}

.tab-content.active {
	display: block;
}