/* Reset some defaults */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: Arial, sans-serif;
    background: #1b2023;
}

input, select {
    display: block;
    margin: 10px 0;
    padding: 8px;
    width: 100%;
}

button {
    display: block;
    margin: 10px 0;
    padding: 8px;
	color: white;
	background-color: #1b2023;
    width: 100%;
}


  .container-wrapper {
    display: flex;
    justify-content: center;   /* centers horizontally */
    align-items: flex-start;   /* align tops */
    gap: 20px;                 /* spacing between containers */
    flex-wrap: wrap;           /* wrap on smaller screens */
    margin-top: 20px;
}


/* Container for centered content */
body .container {
    max-width: 500px;  /* good width for login forms */
    margin: 50px auto; /* centers and gives top/bottom spacing */
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Container for centered content, since tailwind breaks it in */
.container-selfreport {
    max-width: 500px;  /* good width for login forms */
    margin: 50px auto; /* centers and gives top/bottom spacing */
    padding: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* Optional: spacing for headings and links */
h2 {
    text-align: center;
    margin-bottom: 20px;
}

p {
    text-align: center;
}


.flash {
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.flash.success { background-color: #22c55e; color: #004085; padding: 8px; border-radius: 4px; }
.flash.error { background-color: #ef4444; color: #004085; padding: 8px; border-radius: 4px; }
.flash.danger { background-color: #f8d7da; color: #721c24; }
.flash.info { background-color: #cce5ff; color: #004085; }

body {
	margin: 0;
	font-family: Arial, sans-serif;
}

.navbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #1b2023;
	padding: 0 10px;
	color: white;
}

.navbar-left img {
	height: 40px; /* logo size */
}

.nav-links {
	display: flex;
	gap: 15px;
}

.nav-links a {
	color: white;
	text-decoration: none;
	padding: 14px 10px;
}

.nav-links a:hover {
	background-color: #575757;
	border-radius: 4px;
}

/* Hamburger menu */
.hamburger {
	display: none;
	flex-direction: column;
	cursor: pointer;
}

.hamburger span {
	height: 3px;
	width: 25px;
	background: white;
	margin: 4px 0;
	border-radius: 2px;
}

.about-container {
    display: flex;
    flex-wrap: wrap;       /* stack on smaller screens */
    gap: 20px;             /* space between containers */
    justify-content: center;
    margin: 50px auto;
}

/*  - 33% width */
.dash-item-33 {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    flex: 0 1 33%;        
    min-width: 300px;     /* optional: minimum width */
}


/* Release notes - 30% width */
.release-notes {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    flex: 0 1 30%;        /* do not grow, can shrink, base 35% */
    min-width: 300px;     /* optional: minimum width */
}


/* API description - 65% width */
.api-description {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    flex: 0 1 60%;        /* do not grow, can shrink, base 65% */
    min-width: 400px;     /* optional: ensures readability */
}

@media (max-width: 900px) {
    .release-notes,
    .api-description {
        flex: 1 1 100%;
    }
}

.rel-content {
    white-space: pre-line; /* preserves newlines */
}

/* Optional: make headings consistent */
.release-notes h2,
.api-description h2 {
    margin-top: 0;
}


/* Responsive */
@media screen and (max-width: 768px) {
	.nav-links {
		display: none;
		flex-direction: column;
		width: 90%;
		background-color: #1b2023;
		position: absolute;
		top: 60px; /* below navbar */
		right: 0;
	}

	.nav-links a {
		text-align: right;
		padding: 12px 20px;
		border-top: 1px solid #444;
	}

	.hamburger {
		display: flex;
	}

	.nav-links.active {
		display: flex;
	}
	
	.release-notes,
    .api-description {
        flex: 1 1 100%;
    }
	
	.rel-content {
    white-space: pre-line; /* preserves newlines */
	}
}