style.css

/* ==================================================
   Custom styles – Bootstrap 5.2.3 compatible
   Theme: "Data Viz Tech" – color-coded memory types
   ================================================== */

/* ----- Base & Layout ----- */
body {
	transition: background-color 0.3s, color 0.3s;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: #f8f9fa;
	/* light mode fallback */
}

.container {
	flex: 1;
}

.btn-preset {
	min-width: 70px;
	margin: 4px;
	transition: all 0.2s ease;
}

.btn-preset:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.table-responsive {
	margin-top: 1.5rem;
}

.theme-toggle {
	cursor: pointer;
	font-size: 1.5rem;
	transition: transform 0.2s;
	user-select: none;
}

.theme-toggle:hover {
	transform: scale(1.1);
}

.table td,
.table th {
	vertical-align: middle;
}

.note {
	font-size: 0.9rem;
	opacity: 0.8;
}

footer {
	margin-top: 2rem;
	padding: 1rem 0;
	text-align: center;
	border-top: 1px solid var(--bs-border-color);
}

/* ----- Light Mode (default) ----- */
body {
	background: #f1f3f5;
}

.card {
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(0, 0, 0, 0.08);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.table th {
	background: #e9ecef;
	color: #212529;
}

/* Light mode row colors (soft) */
.table-striped>tbody>tr:nth-of-type(odd) {
	background-color: rgba(0, 0, 0, 0.02);
}

.table-striped>tbody>tr:nth-of-type(even) {
	background-color: rgba(0, 0, 0, 0.05);
}

.table-hover>tbody>tr:hover {
	background-color: rgba(0, 123, 255, 0.06);
}

/* left border accents for light mode */
.table tbody tr[data-type="float"] {
	border-left: 4px solid #0dcaf0;
}

.table tbody tr[data-type="int8"] {
	border-left: 4px solid #20c997;
}

.table tbody tr[data-type="q6"] {
	border-left: 4px solid #ffc107;
}

.table tbody tr[data-type="q4"] {
	border-left: 4px solid #fd7e14;
}

.table tbody tr[data-type="q3"] {
	border-left: 4px solid #dc3545;
}

.table tbody tr[data-type="q2"] {
	border-left: 4px solid #d63384;
}

/* ----- Dark Mode (default) ----- */
html.dark-mode {
	background: #0b0e14;
	color: #f0f4f8;
}

html.dark-mode body {
	background: radial-gradient(circle at 30% 10%, #141b2b, #0b0e14 80%);
	color: #f0f4f8;
}

/* Navbar */
html.dark-mode .navbar,
html.dark-mode .bg-body-tertiary {
	background: rgba(20, 27, 43, 0.8) !important;
	backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

html.dark-mode .navbar-brand,
html.dark-mode .nav-link,
html.dark-mode .navbar-text {
	color: #f0f4f8 !important;
}

/* Card - glassmorphism */
html.dark-mode .card {
	background: rgba(28, 35, 52, 0.7);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

html.dark-mode .card-title {
	color: #f0f4f8;
}

/* Table */
html.dark-mode .table {
	color: #e9ecef;
}

html.dark-mode .table th {
	background: rgba(0, 0, 0, 0.3);
	color: #adb5bd;
	border-color: #2a3240;
}

html.dark-mode .table td {
	border-color: #2a3240;
}

/* Table rows – background alternating */
html.dark-mode .table-striped>tbody>tr:nth-of-type(odd) {
	background-color: rgba(255, 255, 255, 0.03);
}

html.dark-mode .table-striped>tbody>tr:nth-of-type(even) {
	background-color: rgba(0, 0, 0, 0.2);
}

html.dark-mode .table-hover>tbody>tr:hover {
	background-color: rgba(255, 255, 255, 0.08);
	transform: scale(0.999);
	transition: all 0.15s ease;
}

/* Color-coded left borders (dark) – applied via data-type attribute */
html.dark-mode .table tbody tr[data-type="float"] {
	border-left: 4px solid #00b4d8;
}

html.dark-mode .table tbody tr[data-type="int8"] {
	border-left: 4px solid #00b8a9;
}

html.dark-mode .table tbody tr[data-type="q6"] {
	border-left: 4px solid #f9a825;
}

html.dark-mode .table tbody tr[data-type="q4"] {
	border-left: 4px solid #fb8c00;
}

html.dark-mode .table tbody tr[data-type="q3"] {
	border-left: 4px solid #e63946;
}

html.dark-mode .table tbody tr[data-type="q2"] {
	border-left: 4px solid #d81b60;
}

/* Make all text white inside table cells */
html.dark-mode .table td,
html.dark-mode .table th {
	color: #f0f4f8 !important;
}

/* Form controls */
html.dark-mode .form-control {
	background-color: rgba(20, 27, 43, 0.8);
	border-color: #3a4355;
	color: #f0f4f8;
}

html.dark-mode .form-control:focus {
	background-color: rgba(20, 27, 43, 0.9);
	border-color: #6ea8fe;
	box-shadow: 0 0 0 0.25rem rgba(110, 168, 254, 0.25);
	color: #f0f4f8;
}

html.dark-mode .input-group-text {
	background-color: rgba(20, 27, 43, 0.8);
	border-color: #3a4355;
	color: #adb5bd;
}

/* Buttons */
html.dark-mode .btn-outline-secondary {
	color: #adb5bd;
	border-color: #3a4355;
}

html.dark-mode .btn-outline-secondary:hover {
	background-color: #3a4355;
	border-color: #6c757d;
	color: #f0f4f8;
}

html.dark-mode .btn-outline-primary {
	color: #6ea8fe;
	border-color: #6ea8fe;
}

html.dark-mode .btn-outline-primary:hover {
	background-color: #6ea8fe;
	color: #0b0e14;
	box-shadow: 0 0 20px rgba(110, 168, 254, 0.3);
}

html.dark-mode .btn-preset {
	border-color: rgba(255, 255, 255, 0.15);
	color: #ced4da;
}

html.dark-mode .btn-preset:hover {
	background: rgba(255, 255, 255, 0.05);
	border-color: #6ea8fe;
	color: #f0f4f8;
}

/* Badge */
html.dark-mode .badge.bg-secondary {
	background-color: #4a5568 !important;
}

/* Footer, text-muted, etc. */
html.dark-mode footer {
	border-top-color: #2a3240;
}

html.dark-mode .text-muted,
html.dark-mode .note,
html.dark-mode .form-text {
	color: #adb5bd !important;
}

/* Scrollbar style (optional) */
html.dark-mode ::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

html.dark-mode ::-webkit-scrollbar-track {
	background: #1a1f2b;
}

html.dark-mode ::-webkit-scrollbar-thumb {
	background: #3a4355;
	border-radius: 4px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
	background: #5a6a85;
}