/* ============================================================
   MODERN TECH PALETTE - Bootstrap 5.3 Theme
   Dark Mode with Electric Blue Accents
   ============================================================ */

/* Root CSS Variables - Light Mode (default) */
:root {
	/* Primary Colors */
	--bs-primary: #007BFF;
	--bs-primary-rgb: 0, 123, 255;
	--bs-secondary: #6C757D;
	--bs-success: #28A745;
	--bs-danger: #DC3545;
	--bs-warning: #FFC107;
	--bs-info: #17A2B8;
	
	/* Background & Text */
	--bs-body-bg: #FFFFFF;
	--bs-body-color: #212529;
	--bs-border-color: #DEE2E6;
	--bs-gray-100: #F8F9FA;
	--bs-gray-200: #E9ECEF;
	--bs-gray-300: #DEE2E6;
	--bs-gray-400: #CED4DA;
	--bs-gray-500: #ADB5BD;
	--bs-gray-600: #6C757D;
	--bs-gray-700: #495057;
	--bs-gray-800: #343A40;
	--bs-gray-900: #212529;
	
	/* Typography */
	--bs-body-font-weight: 400;
	--bs-heading-font-weight: 600;
	
	/* Tech Palette Specific */
	--tech-glow-primary: rgba(0, 211, 255, 0.3);
	--tech-glow-secondary: rgba(0, 123, 255, 0.2);
}

/* Dark Mode Theme - [data-bs-theme="dark"] */
[data-bs-theme="dark"] {
	/* Primary Colors - Modern Tech Palette */
	--bs-primary: #00D4FF;
	--bs-primary-rgb: 0, 212, 255;
	--bs-secondary: #8B92A9;
	--bs-success: #32E08A;
	--bs-danger: #FF6B6B;
	--bs-warning: #FFD166;
	--bs-info: #00D4FF;
	
	/* Background & Text - Deep Charcoal with High Contrast */
	--bs-body-bg: #0B0B0B;
	--bs-body-color: #F5F5F5;
	--bs-border-color: #2A2A2A;
	--bs-gray-100: #1A1A1A;
	--bs-gray-200: #242424;
	--bs-gray-300: #2A2A2A;
	--bs-gray-400: #333333;
	--bs-gray-500: #4D4D4D;
	--bs-gray-600: #666666;
	--bs-gray-700: #808080;
	--bs-gray-800: #999999;
	--bs-gray-900: #B3B3B3;
	
	/* Typography */
	--bs-body-font-weight: 400;
	--bs-heading-font-weight: 600;
	
	/* Tech Palette Specific */
	--tech-glow-primary: rgba(0, 212, 255, 0.4);
	--tech-glow-secondary: rgba(0, 123, 255, 0.3);
	--tech-subtle-border: rgba(0, 212, 255, 0.1);
}

/* ============================================================
   STAFF NAVBAR - Theme Aware with Contrast Adjustments
   ============================================================ */

.navbar.navbar-staff { 
	background-color: var(--bs-primary) !important;
	border-bottom: 2px solid var(--tech-glow-primary);
	box-shadow: 0 4px 20px var(--tech-glow-secondary);
}

/* Light mode staff navbar text */
.navbar.navbar-staff .nav-link,
.navbar.navbar-staff .navbar-brand,
.navbar.navbar-staff .btn-link { 
	color: #FFFFFF !important;
	font-weight: 500;
}

/* Dark mode staff navbar - improved contrast */
[data-bs-theme="dark"] .navbar.navbar-staff {
	background-color: #0088B3 !important; /* Darker blue for better contrast */
}

[data-bs-theme="dark"] .navbar.navbar-staff .nav-link,
[data-bs-theme="dark"] .navbar.navbar-staff .navbar-brand,
[data-bs-theme="dark"] .navbar.navbar-staff .btn-link { 
	color: #0B0B0B !important; /* Dark text on bright blue background */
}

.navbar.navbar-staff .btn-link { 
	text-decoration: none;
	transition: all 0.3s ease;
}

.navbar.navbar-staff .btn-link:hover {
	opacity: 0.8;
	filter: brightness(0.9);
}

/* ============================================================
   FULL-VIEWPORT LAYOUT
   ============================================================ */

html, body {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: var(--bs-body-bg);
	color: var(--bs-body-color);
	font-weight: var(--bs-body-font-weight);
	transition: background-color 0.3s ease, color 0.3s ease;
}

main.container-fluid {
	flex: 1 0 auto;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

footer {
	flex-shrink: 0;
	background-color: var(--bs-gray-100);
	border-top: 1px solid var(--bs-border-color);
	transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ============================================================
   NAVBAR STYLING - Bootstrap 5.3 Compatible
   ============================================================ */

/* Brand styling */
.navbar-brand {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
}

/* Main navbar background */
.navbar {
    background-color: var(--bs-body-bg) !important;
    border-bottom: 1px solid var(--bs-border-color);
}

/* Staff navbar variant */
.navbar.navbar-staff { 
    background-color: var(--bs-primary) !important;
    border-bottom: 2px solid var(--tech-glow-primary);
    box-shadow: 0 4px 20px var(--tech-glow-secondary);
}

/* Light mode staff navbar text */
.navbar.navbar-staff .nav-link,
.navbar.navbar-staff .navbar-brand,
.navbar.navbar-staff .btn-link { 
    color: #FFFFFF !important;
    font-weight: 500;
}

/* Dark mode staff navbar - improved contrast */
[data-bs-theme="dark"] .navbar.navbar-staff {
    background-color: #0088B3 !important;
}

[data-bs-theme="dark"] .navbar.navbar-staff .nav-link,
[data-bs-theme="dark"] .navbar.navbar-staff .navbar-brand,
[data-bs-theme="dark"] .navbar.navbar-staff .btn-link { 
    color: #0B0B0B !important;
}

/* Navbar links - REMOVED display:inline-block which was breaking layout */
.navbar .nav-link {
    color: var(--bs-body-color) !important;
    font-weight: 500;
    padding: 0.5rem 1rem !important;
    border: 1px solid transparent;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    /* display: inline-block;  <-- REMOVED THIS LINE */
}

/* Navbar link hover */
.navbar .nav-link:hover {
    color: var(--bs-primary) !important;
    background-color: rgba(0, 123, 255, 0.05);
    border-color: var(--bs-primary);
    box-shadow: 0 0 8px var(--tech-glow-secondary);
}

/* Dark mode navbar hover */
[data-bs-theme="dark"] .navbar .nav-link:hover {
    background-color: rgba(0, 212, 255, 0.15);
    border-color: var(--bs-primary);
}

/* Focus state for accessibility */
.navbar .nav-link:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: 2px;
    border-color: var(--bs-primary);
}

/* Navbar button links (theme toggle, logout) */
.navbar .btn-link {
    color: var(--bs-body-color) !important;
    text-decoration: none;
    padding: 0.5rem 1rem !important;
    font-weight: 500;
}

/* Staff navbar button links */
.navbar.navbar-staff .btn-link:hover {
    opacity: 0.8;
    filter: brightness(0.9);
}

/* Sticky navbar */
.navbar.sticky-top {
    z-index: 1030;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.navbar.sticky-top.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

/* Ensure nav items stay horizontal */
.navbar-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* Small screens - revert to Bootstrap's default stacking behavior */
@media (max-width: 991.98px) {
    .navbar-nav {
        flex-direction: column;
        align-items: stretch;
    }
    
    .navbar-collapse .navbar-nav {
        margin-top: 1rem;
    }
}

/* ============================================================
   BUTTON STYLING - Sleek Design with Glow Effect
   ============================================================ */

.btn {
	font-weight: 600;
	border-radius: 0.5rem;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border: none;
	position: relative;
	overflow: hidden;
}

.btn-primary {
	background-color: var(--bs-primary);
	color: #FFFFFF;
	box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2);
}

.btn-primary:hover {
	background-color: var(--bs-primary);
	box-shadow: 0 6px 25px var(--tech-glow-primary);
	transform: translateY(-2px);
	filter: brightness(1.1);
}

.btn-primary:active {
	transform: translateY(0);
	box-shadow: 0 2px 10px var(--tech-glow-secondary);
}

.btn-primary:focus {
	box-shadow: 0 0 0 0.25rem var(--tech-glow-primary);
	outline: none;
}

.btn-secondary {
	background-color: var(--bs-gray-700);
	color: #FFFFFF;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.btn-secondary:hover {
	background-color: var(--bs-gray-600);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
	transform: translateY(-2px);
}

.btn-success, .btn-danger, .btn-warning {
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.btn-success:hover { 
	box-shadow: 0 6px 25px rgba(50, 224, 138, 0.3);
	transform: translateY(-2px);
}

.btn-danger:hover { 
	box-shadow: 0 6px 25px rgba(255, 107, 107, 0.3);
	transform: translateY(-2px);
}

.btn-warning:hover { 
	box-shadow: 0 6px 25px rgba(255, 209, 102, 0.3);
	transform: translateY(-2px);
}

.btn-outline-secondary {
	border: 2px solid var(--bs-gray-600);
	color: var(--bs-body-color);
}

.btn-outline-secondary:hover {
	background-color: var(--bs-gray-100);
	border-color: var(--bs-primary);
	box-shadow: 0 4px 15px var(--tech-glow-secondary);
}

/* ============================================================
   CARD STYLING - Modern Tech Look
   ============================================================ */

.card {
	background-color: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color);
	border-radius: 0.75rem;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card:hover {
	border-color: var(--bs-primary);
	box-shadow: 0 8px 32px var(--tech-glow-secondary);
	transform: translateY(-4px);
}

.card-header {
	background-color: var(--bs-gray-100);
	border-bottom-color: var(--bs-border-color);
	color: var(--bs-body-color);
}

.card-body {
	color: var(--bs-body-color);
}

/* Product cards with enhanced styling */
.card.product {
	border: 1px solid var(--bs-border-color);
	overflow: hidden;
	background: linear-gradient(135deg, var(--bs-body-bg) 0%, var(--bs-gray-100) 100%);
}

.card.product .card-img-top {
	object-fit: cover;
	border-bottom: 1px solid var(--bs-border-color);
	transition: transform 0.4s ease;
}

.card.product:hover .card-img-top {
	transform: scale(1.05);
}

.card.product .card-title {
	color: var(--bs-body-color);
	font-weight: 600;
}

.card.product .card-text {
	color: var(--bs-gray-600);
}

/* ============================================================
   ERROR PAGE STYLES
   ============================================================ */

.error-hero {
	background: linear-gradient(135deg, var(--bs-body-bg) 0%, var(--bs-gray-100) 100%);
	color: var(--bs-body-color);
	padding: 2rem 0;
}

[data-bs-theme="dark"] .error-hero {
	background: linear-gradient(135deg, #0B0B0B 0%, #1A1A1A 100%);
	color: #F5F5F5;
}

.error-hero .error-logo { 
	max-height: 216px;
	filter: drop-shadow(0 0 20px var(--tech-glow-primary));
	transition: filter 0.3s ease;
}

.error-hero .error-logo:hover {
	filter: drop-shadow(0 0 30px var(--tech-glow-primary));
}

.error-card { 
	margin-top: 1.75rem;
	background-color: var(--bs-body-bg);
	border: 1px solid var(--bs-border-color);
}

.error-card .product-thumb { 
	width: 96px; 
	height: 96px; 
	flex-shrink: 0;
	background-color: var(--bs-gray-100);
	border: 2px solid var(--bs-border-color);
	border-radius: 0.5rem;
}

.error-hero .btn-outline-light { 
	border-color: var(--bs-border-color);
	color: var(--bs-body-color);
	background-color: transparent;
}

.error-hero .btn-outline-light:hover { 
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
	color: #FFFFFF;
	box-shadow: 0 4px 15px var(--tech-glow-primary);
}

/* ============================================================
   FORM STYLING
   ============================================================ */

.form-control, 
.form-select {
	font-size: 1rem;
	border-radius: 0.5rem;
	background-color: var(--bs-body-bg);
	color: var(--bs-body-color);
	border: 1px solid var(--bs-border-color);
	transition: all 0.3s ease;
}

.form-control:focus,
.form-select:focus {
	background-color: var(--bs-body-bg);
	color: var(--bs-body-color);
	border-color: var(--bs-primary);
	box-shadow: 0 0 0 0.25rem var(--tech-glow-primary);
	outline: none;
}

.form-label {
	color: var(--bs-body-color);
	font-weight: 500;
}

.form-text {
	color: var(--bs-gray-600);
}

/* ============================================================
   TABLE STYLING
   ============================================================ */

.table-responsive {
	border-radius: 0.5rem;
	border: 1px solid var(--bs-border-color);
}

.table {
	color: var(--bs-body-color);
	border-color: var(--bs-border-color);
	margin-bottom: 0;
}

.table th {
	background-color: var(--bs-gray-100);
	color: var(--bs-body-color);
	font-weight: 600;
	border-color: var(--bs-border-color);
	text-transform: uppercase;
	font-size: 0.875rem;
	letter-spacing: 0.3px;
}

.table td {
	border-color: var(--bs-border-color);
	vertical-align: middle;
}

.table-hover tbody tr:hover {
	background-color: var(--bs-gray-100);
	color: var(--bs-body-color);
}

/* ============================================================
   PAGINATION STYLING
   ============================================================ */

.pagination {
	flex-wrap: wrap;
	gap: 0.5rem;
}

.page-link {
	color: var(--bs-primary);
	background-color: var(--bs-body-bg);
	border-color: var(--bs-border-color);
	font-weight: 600;
	transition: all 0.3s ease;
}

.page-link:hover {
	background-color: var(--bs-primary);
	color: #FFFFFF;
	box-shadow: 0 4px 15px var(--tech-glow-secondary);
}

.page-item.active .page-link {
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
	box-shadow: 0 4px 15px var(--tech-glow-primary);
}

.page-item.disabled .page-link {
	color: var(--bs-gray-600);
	background-color: var(--bs-gray-100);
	border-color: var(--bs-border-color);
}

/* ============================================================
   ALERT STYLING
   ============================================================ */

.alert {
	border: 1px solid var(--bs-border-color);
	border-radius: 0.5rem;
	backdrop-filter: blur(10px);
}

.alert-info {
	background-color: rgba(0, 212, 255, 0.1);
	border-color: var(--tech-glow-primary);
	color: var(--bs-body-color);
}

.alert-success {
	background-color: rgba(50, 224, 138, 0.1);
	border-color: rgba(50, 224, 138, 0.3);
	color: var(--bs-body-color);
}

.alert-danger {
	background-color: rgba(255, 107, 107, 0.1);
	border-color: rgba(255, 107, 107, 0.3);
	color: var(--bs-body-color);
}

.alert-warning {
	background-color: rgba(255, 209, 102, 0.1);
	border-color: rgba(255, 209, 102, 0.3);
	color: var(--bs-body-color);
}

/* ============================================================
   LIST GROUPS
   ============================================================ */

.list-group-item {
	padding: 1rem;
	background-color: var(--bs-body-bg);
	color: var(--bs-body-color);
	border-color: var(--bs-border-color);
	transition: all 0.3s ease;
}

.list-group-item:hover {
	background-color: var(--bs-gray-100);
	border-color: var(--bs-primary);
	box-shadow: 0 4px 12px var(--tech-glow-secondary);
	transform: translateX(4px);
}

.list-group-item.active {
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
	box-shadow: 0 4px 15px var(--tech-glow-primary);
}

/* ============================================================
   BADGES STYLING
   ============================================================ */

.badge {
	padding: 0.5rem 0.75rem;
	font-weight: 600;
	border-radius: 0.375rem;
	font-size: 0.875rem;
}

.bg-success {
	background-color: rgba(50, 224, 138, 0.2) !important;
	color: #32E08A;
}

.bg-warning {
	background-color: rgba(255, 209, 102, 0.2) !important;
	color: #FFD166;
}

/* ============================================================
   SCROLLBAR STYLING (Dark Mode)
   ============================================================ */

[data-bs-theme="dark"] ::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-track {
	background: #1A1A1A;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb {
	background: #00D4FF;
	border-radius: 4px;
}

[data-bs-theme="dark"] ::-webkit-scrollbar-thumb:hover {
	background: #00E8FF;
}

/* ============================================================
   RESPONSIVE IMPROVEMENTS
   ============================================================ */

@media (max-width: 576px) {
	.navbar-brand {
		font-size: 1.25rem;
	}
	.display-4 {
		font-size: 2rem;
	}
	.display-5 {
		font-size: 1.75rem;
	}
	main.container-fluid {
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
	}
	.btn-lg {
		padding: 0.75rem 1rem;
		font-size: 1rem;
	}
	.d-flex.flex-column.flex-sm-row {
		gap: 0.75rem !important;
	}
	.error-hero .error-logo { 
		max-height: 120px; 
	}
	.error-hero {
		padding: 1rem 0;
	}
	.form-control, 
	.form-select {
		font-size: 16px; /* Prevents iOS zoom on focus */
	}
	.list-group-item {
		padding: 0.75rem;
	}
	.list-group-item h5 {
		font-size: 1rem;
	}
}

@media (min-width: 577px) and (max-width: 768px) {
	.display-4 {
		font-size: 2.5rem;
	}
	.display-5 {
		font-size: 2rem;
	}
	.col-auto {
		max-width: 100%;
	}
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */

.btn-group {
	flex-wrap: wrap;
}