:root {
	--byteflash-red: #e62e1b;
	--accent-color: var(--byteflash-red);
}

.wrap-long-content {
  overflow-wrap: break-word !important;
  word-break: break-all !important;
  max-width: 100% !important;
}

.support-image {
  height: auto;
  width: auto;
  max-width: min(100%, 550px);
  border: 1px solid grey;
  border-radius: 10px;
  display: block;
}

 .hover-grow {
	transition: transform 0.3s ease;
  }
  
  .hover-grow:hover {
	transform: scale(1.1); /* Makes the image 10% larger when hovered */
  }

.byteflash-red {
  background-color: #c70007;
  color: white;
}


.byteflash-header {
  background-color: #e3e5e7; /* Light mode: slightly darker than bg-body-tertiary with subtle blue tinge */
  color: #333333;
  border-left: 4px solid var(--byteflash-red); /* Brand connection through left border */
  border-right: 4px solid var(--byteflash-red); /* Brand connection through right border */
}

[data-bs-theme="dark"] .byteflash-header {
  background-color: #232527; /* Dark mode: deep neutral gray with blue undertone */
  color: #e0e0e0;
  border-left: 4px solid var(--byteflash-red); /* Same border treatment */
  border-right: 4px solid var(--byteflash-red); /* Same border treatment */
}

/* Generic theme-based visibility classes */
.theme-light-only {
	display: none;
}

.theme-dark-only {
	display: none;
}

[data-bs-theme="light"] .theme-light-only {
	display: block;
}

[data-bs-theme="dark"] .theme-dark-only {
	display: block;
}

/* If you need inline elements */
[data-bs-theme="light"] .theme-light-only-inline {
	display: inline-block;
}

[data-bs-theme="dark"] .theme-dark-only-inline {
	display: inline-block;
}

/* Style the accordion that is used on the download file modal */
.accordion-button:not(.collapsed) {
	background-color: #a9d39c !important; /* or any other desired color */
	color: #000000;
}

/* Hover state for buttons */
.btn.byteflash-red:hover {
  background-color: #8d0004;
  color: white;
  border-color: #8d0004;
}

/* Text-only version if needed */
.text-byteflash-red {
  color: #c70007;
}

/* Border version if needed */
.border-byteflash-red {
  border-color: #c70007;
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover {
	text-decoration: underline;
	color: inherit;
}

@media (prefers-color-scheme: dark) {
  .boost-in-dark-mode {
	filter: brightness(1.5) saturate(1.3);
  }
}

/* container for things like console.txt files */
.code-container {
	background-color: #f5f5f5; /* Light grey background */
	border: 1px solid #ddd;
	padding: 10px;
	font-family: Arial;
	white-space: pre-wrap; /* Preserve whitespace and allow wrapping */
	overflow-x: auto; /* Enables horizontal scroll if needed */
	max-height: 250px; /* Adjust as needed */
	max-width: 100%; /* Ensures it doesn't overflow */
	text-align: left;
	font-size: 12px;
	line-height: 1.3;
	word-wrap: break-word; /* Allows long words to wrap */
}

/* Fixes for table-warning classes from bootstrap, to stop text being white */
/* on hover in dark mode for table rows*/
[data-bs-theme="dark"] .table-warning:hover > td,
[data-bs-theme="dark"] .table-warning:hover > th {
  color: rgba(0, 0, 0, 0.9) !important;
}

[data-bs-theme="dark"] .table-warning:hover a {
  color: rgba(0, 0, 0, 0.9) !important;
}

[data-bs-theme="dark"] .table-danger:hover > td,
[data-bs-theme="dark"] .table-danger:hover > th {
  color: rgba(0, 0, 0, 0.9) !important;
}

[data-bs-theme="dark"] .table-danger:hover a {
  color: rgba(0, 0, 0, 0.9) !important;
}

/* Dark mode styles for code container */
[data-bs-theme="dark"] .code-container {
	background-color: #212529; /* Dark background that matches Bootstrap dark theme */
	border-color: #495057; /* Darker border for dark mode */
	color: #e9ecef; /* Light text color for contrast */
}

/


/* Dark mode font color overrides */
[data-bs-theme="dark"] .code-container font[color="000000"],
[data-bs-theme="dark"] .code-container font[color="black"],
[data-bs-theme="dark"] .code-container font[color="333333"] {
	color: #ffffff !important;
}

[data-bs-theme="dark"] .code-container font[color="red"] {
	color: #ff6b6b !important;
}

[data-bs-theme="dark"] .code-container font[color="green"] {
	color: #4ade80 !important;
}

[data-bs-theme="dark"] .code-container font[color="blue"],
[data-bs-theme="dark"] .code-container font[color="000099"] {
	color: #93c5fd !important;
}

[data-bs-theme="dark"] .code-container font[color="orange"] {
	color: #ffcb6b !important;
}

/* Catch-all for any other colors to ensure visibility in dark mode */
[data-bs-theme="dark"] .code-container font[color] {
	color: #ffffff !important;
}

/* Content wrapper for centering */
.content-wrapper {
	max-width: 1200px; /* Adjust this value to set the width */
	margin: 0 auto;
	width: 100%;
}

[data-bs-theme="dark"] .text-body-medium {
  color: rgba(255, 255, 255, 0.8) !important; /* 80% white, between default (100%) and secondary (~65%) */
}

[data-bs-theme="light"] .text-body-medium {
  color: rgba(0, 0, 0, 0.75) !important; /* For light mode */
}

[data-bs-theme="dark"] .table-primary {
  --bs-table-bg: rgba(13, 110, 253, 0.2);
  --bs-table-color: #6ea8fe;
}

[data-bs-theme="dark"] .table-success {
  --bs-table-bg: rgba(25, 135, 84, 0.2);
  --bs-table-color: #75b798;
}

[data-bs-theme="dark"] .table-warning {
  --bs-table-bg: rgba(255, 193, 7, 0.2);
  --bs-table-color: #ffda6a;
}

[data-bs-theme="dark"] .table-danger {
  --bs-table-bg: rgba(220, 53, 69, 0.2);
  --bs-table-color: #ea868f;
}

[data-bs-theme="dark"] .table-secondary {
  --bs-table-bg: rgba(108, 117, 125, 0.2);
  --bs-table-color: #a7acb1;
}

/* Custom class for tables that need black text on hover */
.table-hover-black tbody tr:hover td {
  color: rgba(0, 0, 0, 0.9) !important; /* Near black text on hover */
}

/* Make links also change color on hover */
.table-hover-black tbody tr:hover td a {
  color: rgba(0, 0, 0, 0.9) !important;
}

/* Ensure status text colors are also legible on hover */
.table-hover-black tbody tr:hover .text-success,
.table-hover-black tbody tr:hover .text-primary,
.table-hover-black tbody tr:hover .text-danger,
.table-hover-black tbody tr:hover .text-warning,
.table-hover-black tbody tr:hover .text-secondary {
  color: rgba(0, 0, 0, 0.9) !important;
  font-weight: bold;
}

[data-bs-theme="dark"] {
	--bs-body-bg: #121212;
	--bs-body-color: #e0e0e0;
	--bs-primary: var(--byteflash-red);
}

[data-bs-theme="light"] {
	--bs-primary: var(--byteflash-red);
}

/* Override bootstraps bg-body-tertiary for light mode */
[data-bs-theme="light"] .bg-body-tertiary {
  background-color: #E8E8E8 !important; /* Darker grey for light mode */
}

body {
	overflow: auto; /* Changed from 'hidden' to allow natural page scrolling */
}

.wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* Changed from fixed height to minimum height */
}

.wrapper > .d-flex {
	flex: 1;
	overflow: hidden;
}

.logo-text {
	font-weight: 700;
	font-size: 1.8rem;
	letter-spacing: -0.5px;
}

.text-byteflash {
	color: var(--byteflash-red);
}

/* Fixed sidebar */
.sidebar {
	position: fixed;
	top: 60px; /* Height of your header */
	left: 0;
	width: 320px; /* Or your preferred width */
	height: calc(100vh - 60px);
	overflow-y: auto;
	z-index: 100;
	transition: 0.3s;
}

/* Scrollable main content */
.main-content {
	margin-left: 320px; /* Match sidebar width */
	width: calc(100% - 320px);
	padding: 1rem;
	/* Removed fixed height and overflow properties to allow natural scrolling */
}

@media (min-width: 1200px) {
	.sidebar {
		width: 340px;
	}
	
	.main-content {
		margin-left: 340px;
		width: calc(100% - 340px);
	}
}

.sidebar .nav-link {
	color: var(--bs-body-color);
	border-radius: 0.375rem;
	margin-bottom: 0.25rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sidebar .nav-link:hover {
	background-color: rgba(230, 46, 27, 0.1);
}

.sidebar .nav-link.active {
	background-color: rgba(230, 46, 27, 0.2);
	color: var(--byteflash-red);
	font-weight: 500;
}

.sidebar .nav-link i {
	width: 1.25rem;
	margin-right: 0.5rem;
	text-align: center;
}

.submenu {
	padding-left: 1.5rem;
}

.sidebar-toggle-btn {
	display: none;
}

.status-indicator {
	max-width: 200px;
	margin: 0 auto;
}

.opening-hours-table {
	max-width: 450px;
	margin: 0 auto;
}

.opening-hours-table tr td:first-child {
	font-weight: 500;
}

.theme-toggle {
	cursor: pointer;
}

/* Sign styling - common properties */
.status-sign {
  position: relative;
  display: inline-block;
  padding: 1.5rem 4rem;
  font-size: 1.5rem;
  font-weight: 700;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center; /* Center the text */
}

.status-sign::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 4px solid #e0e0e0;
}

.status-sign .hook {
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 20px;
  border-top: 4px solid #e0e0e0;
  border-radius: 100% 100% 0 0;
}

/* Status dot indicator */
.status-sign::after {
  content: "●"; /* Unicode circle character */
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  font-size: 1.2rem;
}

/* Open sign specific styling */
.open-sign {
  composes: status-sign;
  background-color: #e8f4ff; /* Light blue background */
  color: #0a3b66; /* Dark blue text */
  border: 2px solid #0a3b66; /* Dark border */
}

/* For dark mode, adjust colors for visibility */
[data-bs-theme="dark"] .open-sign {
  background-color: #1a4977; /* Darker blue in dark mode */
  color: #ffffff; /* White text in dark mode */
  border-color: #76b0e8; /* Lighter border in dark mode */
}

.open-sign::before {
  background-color: #0a3b66; /* Dark blue circle */
}

[data-bs-theme="dark"] .open-sign::before {
  background-color: #76b0e8; /* Lighter blue circle in dark mode */
}

.open-sign::after {
  color: #29b473; /* Green dot for "open" */
}

[data-bs-theme="dark"] .open-sign::after {
  color: #3edc8e; /* Brighter green in dark mode */
}

/* Closed sign specific styling */
.closed-sign {
  composes: status-sign;
  background-color: #0f1e38; /* Keep the original dark background */
  color: white;
  border: 2px solid #0f1e38;
}

.closed-sign::before {
  background-color: #0f1e38; /* Match the sign background */
}

.closed-sign::after {
  color: #e62e1b; /* ByteFlash red for "closed" */
}

[data-bs-theme="dark"] .closed-sign::after {
  color: #ff4c38; /* Brighter red in dark mode */
}

.theme-logo {
	display: none;
	max-width: 200px;
	width: 100%;
}

[data-bs-theme="light"] .light-logo {
	display: inline-block;
}

[data-bs-theme="dark"] .dark-logo {
	display: inline-block;
}

/* Media queries for responsive layout */
@media (max-width: 992px) {
	.sidebar {
		left: -320px; /* Hide off-screen on mobile */
	}
	
	.sidebar.show {
		left: 0;
	}
	
	.main-content {
		margin-left: 0;
		width: 100%;
	}
	
	.sidebar-toggle-btn {
		display: block;
	}
}

/* Backdrop for mobile */
.sidebar-backdrop {
	position: fixed;
	top: 60px;
	left: 0;
	width: 100%;
	height: calc(100vh - 60px);
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 99;
	display: none;
}

.sidebar-backdrop.show {
	display: block;
}

/* Additional responsive styles */
@media (max-width: 576px) {
	.navbar-brand {
		max-width: 50%;
	}
	
	.dropdown-toggle::after {
		display: none;
	}
}

/* Credits badge styling */
.badge.bg-light {
	font-size: 0.85rem;
	padding: 0.4rem 0.6rem;
}

/* Make sure the navbar stays on top */
.navbar {
	z-index: 101; /* Ensure it's above everything */
}