/**
 * @Author: William Berge Groensberg
 * @Date:   2026-03-03 09:18:02
 * @Last Modified by:   William Berge Groensberg
 * @Last Modified time: 2026-03-10 11:00:03
 */
:root {
	--grey: 122, 101, 99;
	--brown: 211, 165, 136;
	--pink: 229, 99, 153;
	--green: 127, 209, 185;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: "acid-green", sans-serif;
	font-weight: 400;
	letter-spacing: 3px;
	font-style: normal;
	background: rgb(var(--pink));

}

body.center-content {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40px;
}

nav {
	background-color: rgb(var(--pink));
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 48px;
	margin-top: 23px;
}

.nav-logo {
	color: white;
	font-size: 36px;
	font-weight: 700;
}

.nav-links {
	display: flex;
	align-items: center;
	gap: 60px;
}

.nav-links a {
	color: white;
	text-decoration: none;
	font-size: 42px;
	font-weight: 500;
	opacity: 0.95;
	transition: opacity 0.2s;
}

.nav-links a:hover {
	opacity: 0.7;
}

.nav-avatar {
	width: 83px;
	height: 83px;
	border-radius: 50%;
	background-color: rgb(var(--grey));
	color: rgb(var(--brown));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	font-weight: 700;
	cursor: pointer;
	/* user-select: pointer; */
}

footer {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 20px;
	margin-top: 20px;
	background-color: rgb(var(--brown));
}

footer p {
	color: white;
	text-shadow: 2px 2px rgb(var(--grey)), -2px -2px rgb(var(--grey)), 2px -2px rgb(var(--grey)), -2px 2px rgb(var(--grey));
}

footer a {
	color: rgb(var(--green));
	text-shadow: 2px 2px rgb(var(--grey)), -2px -2px rgb(var(--grey)), 2px -2px rgb(var(--grey)), -2px 2px rgb(var(--grey));
}

.register-container {
	max-width: 500px;
	width: 100%;
	margin: 40px auto;
	background: rgb(var(--green));
	padding: 40px;
	border-radius: 20px;
	border: 4px solid #323232;
	box-shadow: 8px 8px #323232;
}

.update-container {
	width: 1000px;
	margin: 40px auto;
	background: rgb(var(--green));
	padding: 40px;
	border-radius: 20px;
	border: 4px solid #323232;
	box-shadow: 8px 8px #323232;
}

.register-container h1 {
	color: white;
	font-size: 32px;
	margin-bottom: 30px;
	text-align: center;
}

.form-group {
	margin-bottom: 20px;
}

.form-group label {
	display: block;
	color: white;
	font-size: 18px;
	margin-bottom: 8px;
}

.form-group input {
	width: 100%;
	padding: 16px;
	font-size: 16px;
	border-radius: 16px;
	border: 2px solid #323232;
	background: white;
	box-shadow: 3px 3px #323232;
	transition: all 0.3s ease;
}

.form-group input:focus {
	border-color: rgb(var(--green));
	box-shadow: 4px 4px rgb(var(--green));
	outline: none;
}

.form-group input::placeholder {
	color: transparent;
}

.form-group label.floating {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: #323232;
	font-size: 16px;
	pointer-events: none;
	transition: all 0.2s ease;
	padding: 0 5px;
}

.form-group input:focus+label.floating,
.form-group input:not(:placeholder-shown)+label.floating {
	top: 0;
	font-size: 12px;
	color: #323232;
	transform: translateY(-50%);
}

.form-row {
	display: flex;
	gap: 20px;
}

.form-row .form-group {
	flex: 1;
}

.form-row .form-group input {
	width: 100%;
}

.error {
	color: white;
	background: rgba(255, 0, 0, 0.3);
	padding: 10px;
	border-radius: 8px;
	margin-bottom: 20px;
}

.update-container {
	max-width: 1000px;
	margin: 0 20;
	background: rgb(var(--green));
	padding: 40px;
	border-radius: 20px;
	border: 4px solid #323232;
	box-shadow: 8px 8px #323232;
}

.update-container h1 {
	color: white;
	font-size: 32px;
	margin-bottom: 30px;
}

.form-group {
	margin-bottom: 20px;
}

.form-group label {
	display: block;
	color: white;
	font-size: 18px;
	margin-bottom: 8px;
}

.form-group input {
	width: 100%;
	padding: 15px;
	font-size: 16px;
	border-radius: 10px;
	border: 3px solid #323232;
	background: white;
}

.error {
	color: white;
	background: rgba(255, 0, 0, 0.3);
	padding: 10px;
	border-radius: 8px;
}

.btn-back, .btn-register, .btn-save, .btn-action, .btn-add, .btn-submit, .btn-delete {
	display: inline-block;
	color: white;
	text-decoration: none;
	font-size: 16px;
	padding: 12px 24px;
	border: 3px solid #323232;
	border-radius: 8px;
	background: rgb(var(--green));
	box-shadow: 4px 4px #323232;
	font-weight: 700;
	cursor: pointer;
}

.btn-back:hover, .btn-register:hover, .btn-save:hover, .btn-action:hover, .btn-add:hover, .btn-submit:hover, .btn-delete:hover {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px #323232;
	color: rgb(var(--grey));
	background-color: white;
}

.btn-back:hover {
	transform: translate(2px, 2px);
	box-shadow: 2px 2px #323232;
	color: rgb(var(--grey));
	background-color: white;
}

.customers-table-container h2 {
	color: #323232;
	font-size: 24px;
	padding: 20px;
	margin: 0;
}

.table-header {
	display: flex;
	align-items: center;
	width: 1000px;
	margin: 0 auto 15px auto;
}

.table-header h1 {
	color: white;
	margin: 0;
	flex: 1;
}

.table-header > div:first-child {
	flex: 1;
}

.table-header .table-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.btn-action {
	padding: 10px 20px;
	font-size: 16px;
	white-space: nowrap;
}

table.customers-table {
	width: 100%;
	border-collapse: collapse;
}

.customers-table thead th {
	padding: 18px 20px;
	text-align: left;
	font-size: 20px;
	font-weight: 700;
	color: white;
	text-shadow: 2px 2px rgb(var(--grey)), -2px -2px rgb(var(--grey)), 2px -2px rgb(var(--grey)), -2px 2px rgb(var(--grey));
	background: rgb(var(--green));
}

.customers-table-container, #about_us_article {
	width: 1000px;
	margin: 40px auto;
	background: white;
	border-radius: 16px;
	border: 4px solid #323232;
	box-shadow: 6px 6px 0px #323232;
	overflow: hidden;
}

.table-header {
	display: flex;
	align-items: center;
	width: 1000px;
	margin: 0 auto 15px auto;
}

.table-header h1 {
	color: white;
	margin: 0;
}

.table-header .table-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.customers-table tbody td, #about_us_article p {
	padding: 16px 20px;
	font-size: 15px;
	font-family: "archivo-variable", sans-serif;
	font-variation-settings: "wdth" 100, "wght" 800;	
	color: #323232;
	border: none;
}

.action-btns {
	display: flex;
	gap: 8px;
}

.btn-action.btn-view {
	background: #6d5555;
	color: #323232;
}

.btn-action.btn-edit {
	background: rgb(var(--brown));
	color: white;
}

.btn-action.btn-delete {
	background: #e74c3c;
	color: white;
}

.modal {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	justify-content: center;
	align-items: center;
	z-index: 1000;
}

.modal.show {
	display: flex;
}

.modal-content {
	background: white;
	padding: 30px;
	border-radius: 16px;
	width: 500px;
	max-width: 90%;
	border: 4px solid #323232;
	box-shadow: 6px 6px #323232;
}

.modal-content h2 {
	color: #323232;
	margin-bottom: 20px;
}

.modal-content .close {
	float: right;
	font-size: 24px;
	cursor: pointer;
	color: #323232;
}

.modal-content .form-group {
	margin-bottom: 15px;
	position: relative;
}

.modal-content label {
	display: block;
	color: #323232;
	margin-bottom: 5px;
}

.modal-content input {
	width: 100%;
	padding: 16px;
	border: 2px solid #323232;
	border-radius: 16px;
	font-size: 16px;
	box-shadow: 3px 3px #323232;
}

.modal-content input:focus {
	border-color: #888;
	outline: none;
}

.modal-content input::placeholder {
	color: transparent;
}

.modal-content label.floating {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	color: #323232;
	font-size: 16px;
	pointer-events: none;
	transition: all 0.2s ease;
	padding: 0 5px;
}

.modal-content input:focus+label.floating,
.modal-content input:not(:placeholder-shown)+label.floating {
	top: 0;
	font-size: 11px;
	color: #323232;
	transform: translateY(-50%);
}

.grey_background {
	padding: 18px 20px;
	text-align: left;
	font-size: 20px;
	font-weight: 700;
	color: white;
	background: rgb(var(--grey));
}

.brown_background {
	padding: 18px 20px;
	text-align: left;
	font-size: 20px;
	font-weight: 700;
	color: white;
	text-shadow: 2px 2px rgb(var(--grey)), -2px -2px rgb(var(--grey)), 2px -2px rgb(var(--grey)), -2px 2px rgb(var(--grey));
	background: rgb(var(--brown));
}

.green_background {
	padding: 18px 20px;
	text-align: left;
	font-size: 20px;
	font-weight: 700;
	color: white;
	text-shadow: 2px 2px rgb(var(--grey)), -2px -2px rgb(var(--grey)), 2px -2px rgb(var(--grey)), -2px 2px rgb(var(--grey));
	background: rgb(var(--green));
}

.pink_background {
	padding: 18px 20px;
	text-align: left;
	font-size: 20px;
	font-weight: 700;
	color: white;
	text-shadow: 2px 2px rgb(var(--grey)), -2px -2px rgb(var(--grey)), 2px -2px rgb(var(--grey)), -2px 2px rgb(var(--grey));
	background: rgb(var(--pink));
}

.values_grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 20px;
}

.value_card{
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.value_card h3{
    margin-top: 0;
}

.no_decor {
	color: white;
	text-decoration: none;
}