/* ---------------------------------------------------------
   RideJacked Brand Color Palette
--------------------------------------------------------- */

:root {
	--rj-blue-dark: #1E3A8A;
	--rj-blue: #3B82F6;
	--rj-dark: #111827;
	--rj-green: #2E7D32;
	--rj-amber: #F59E0B;
	--rj-red: #DC2626;
	--rj-bg-light: #F4F6F9;
	--rj-bg-white: #FFFFFF;
	--rj-gray-border: #D1D5DB;
	--rj-gray-text: #374151;
	--rj-hero-bg-light: linear-gradient(135deg, #e0e7ff, #93c5fd);
	--rj-hero-bg-dark: linear-gradient(135deg, var(--rj-dark), var(--rj-blue-dark));
}

/* ---------------------------------------------------------
   Global Layout & Typography
--------------------------------------------------------- */

body {
	padding-top: 70px;
	background: var(--rj-bg-light);
	font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--rj-gray-text);
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	color: var(--rj-dark);
}

p, li, span, label {
	color: var(--rj-gray-text);
}

a {
	color: var(--rj-blue);
	transition: color .2s ease;
}

	a:hover {
		color: var(--rj-blue-dark);
		text-decoration: none;
	}

/* ---------------------------------------------------------
   NAVBAR — Balanced Layout
--------------------------------------------------------- */

.navbar {
	background-color: var(--rj-dark);
	border: none;
}

.navbar-brand {
	font-size: 2.8rem;
	font-weight: 700;
	color: #ffffff !important;
	letter-spacing: 0.5px;
	margin-bottom: 4px;
}

/* Left block: Brand + Menu stacked */
.rj-left-block {
	float: left;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.rj-left-menu {
	display: flex;
	flex-direction: row;
	gap: 16px;
	margin: 0;
	padding: 0;
	margin-top: -4px;
}

.rj-left-menu li {
	list-style: none;
}

.rj-left-menu li a {
	color: #ffffff !important;
	font-size: 1.05rem;
}

/* Right block: Logo + Login stacked */
.rj-right-block {
	float: right;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.rj-logo {
	height: 80px;
	margin-bottom: 2px;
}

.rj-login-link {
	color: #ffffff !important;
	font-size: 1.05rem;
	margin-top: 2px;
}

.rj-login-link:hover {
	color: var(--rj-blue) !important;
}

/* Login button under the logo */
.rj-login-btn {
	margin-top: 6px;
	padding: 6px 16px;
	font-size: 0.95rem;
	border-radius: 0.5rem;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
	.rj-login-btn {
		background-color: var(--rj-blue) !important;
		border-color: var(--rj-blue-dark) !important;
		color: #ffffff !important;
	}
}

/* ---------------------------------------------------------
   Hero Section
--------------------------------------------------------- */

.hero-section {
	background: var(--rj-hero-bg-light);
	color: #fff;
	border-radius: 1rem;
	animation: fadeInUp .5s ease;
}



.hero-section p {
	opacity: 0.85;
}

/* ---------------------------------------------------------
   Content Container
--------------------------------------------------------- */

.body-content {
	background: var(--rj-bg-white);
	padding: 25px 30px;
	border-radius: 1rem;
	box-shadow: 0 2px 6px rgba(0,0,0,0.08);
	margin-bottom: 40px;
	animation: fadeInUp .5s ease;
}

/* ---------------------------------------------------------
   Cards
--------------------------------------------------------- */

.card {
	background: var(--rj-bg-white);
	border: 1px solid var(--rj-gray-border);
	border-radius: 1rem !important;
	transition: transform .2s ease, box-shadow .2s ease;
	animation: fadeInUp .5s ease;
}

.card:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.card-title {
	color: var(--rj-dark);
}

/* ---------------------------------------------------------
   Forms
--------------------------------------------------------- */

.form-group label {
	font-weight: 600;
	margin-bottom: 6px;
}

.form-control {
	border-radius: 0.5rem;
	border: 1px solid var(--rj-gray-border);
	padding: 10px;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.form-control:focus {
	border-color: var(--rj-blue);
	box-shadow: 0 0 4px rgba(59,130,246,0.4);
}

/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */

.btn {
	border-radius: 0.5rem;
	padding: 8px 18px;
	font-weight: 600;
}

.btn-primary {
	background-color: var(--rj-blue);
	border-color: var(--rj-blue-dark);
}

.btn-primary:hover {
	background-color: var(--rj-blue-dark);
}

.btn-success {
	background-color: var(--rj-green);
}

.btn-warning {
	background-color: var(--rj-amber);
}

.btn-danger {
	background-color: var(--rj-red);
}

/* ---------------------------------------------------------
   GridView Styling
--------------------------------------------------------- */

.table {
	background-color: var(--rj-bg-white);
	border-radius: 1rem;
	overflow: hidden;
}

.table th {
	background-color: #e5e7eb;
	font-weight: 600;
	padding: 12px;
}

.table td {
	padding: 10px;
	vertical-align: middle !important;
}

.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: #f9fafb;
}

.stolen-row {
	background-color: #ffe5e5 !important;
}

/* ---------------------------------------------------------
   Vehicles Page
--------------------------------------------------------- */

.vehicle-photo-thumb {
	width: 130px;
	height: 95px;
	object-fit: cover;
	border-radius: 0.5rem;
	border: 1px solid var(--rj-gray-border);
	margin-right: 10px;
}

/* ---------------------------------------------------------
   Profile Box
--------------------------------------------------------- */

.profile-box {
	padding: 20px;
	background-color: #f9fafb;
	border: 1px solid var(--rj-gray-border);
	border-radius: 1rem;
	animation: fadeInUp .5s ease;
}

/* ---------------------------------------------------------
   Sidebar
--------------------------------------------------------- */

.sidebar {
	width: 220px;
	background: var(--rj-bg-white);
	padding: 20px;
	border-radius: 1rem;
	position: fixed;
	top: 90px;
	left: 20px;
	animation: fadeInUp .5s ease;
}

	.sidebar .nav-link {
		color: var(--rj-dark);
		font-weight: 500;
		padding: 8px 0;
	}

	.sidebar .nav-link:hover {
		color: var(--rj-blue);
	}

/* ---------------------------------------------------------
   Footer
--------------------------------------------------------- */

.footer {
	margin-top: 40px;
	padding: 20px 0;
	text-align: center;
	color: #777;
	font-size: 0.9rem;
}

/* ---------------------------------------------------------
   Animations
--------------------------------------------------------- */

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ---------------------------------------------------------
   Modal Dialog
--------------------------------------------------------- */

.modal-content {
	border-radius: 1rem;
}

.modal-header {
	background: var(--rj-blue-dark);
	color: #fff;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
}

.modal-body {
	font-size: 1.05rem;
}

.modal-footer .btn-primary {
	background-color: var(--rj-blue);
	border-color: var(--rj-blue-dark);
}



/* ---------------------------------------------------------
   DARK MODE SUPPORT
--------------------------------------------------------- */

@media (prefers-color-scheme: dark) {

	body {
		background: #0f172a;
		color: #e2e8f0;
	}

	h1, h2, h3, h4, h5, h6 {
		color: #f1f5f9 !important;
	}

	p, li, span, label {
		color: #e2e8f0 !important;
	}

	.text-muted {
		color: #94a3b8 !important;
	}

	/* Navbar links */
	.rj-left-menu li a,
	.rj-login-link {
		color: #f1f5f9 !important;
	}

	/* Hero */
	.hero-section h1,
	.hero-section p {
		color: #ffffff !important;
	}

	.hero-section {
		background: var(--rj-hero-bg-dark) !important;
		color: #ffffff !important;
	}

	/* Cards & Containers */
	.card,
	.profile-box,
	.auth-card,
	.body-content {
		background: #1e293b !important;
		border-color: #334155 !important;
		color: #e2e8f0 !important;
	}

	.card-title {
		color: #f1f5f9 !important;
	}

	/* Tables */
	.table {
		background: #1e293b !important;
		color: #e2e8f0 !important;
	}

		.table th {
			background: #334155 !important;
			color: #f1f5f9 !important;
		}

	.table-striped > tbody > tr:nth-of-type(odd) {
		background: #273449 !important;
	}

	.stolen-row {
		background-color: #8b0000 !important; /* soft red */
		transition: background-color 0.35s ease-in-out;
		border-radius: 0 !important;
		color: black !important;
	}

	.table tbody tr td,
	.table tbody tr th {
		color: #ffffff !important;
	}



	.stolen-toggle-btn {
		width: 150px; /* adjust to taste */
	}

	.table-hover tbody tr {
		transition: background-color 0.25s ease-in-out;
	}

	.table-hover tbody tr:hover {
		background-color: #f2f6ff; /* soft blue highlight */
	}

	/* Forms */
	.form-control {
		background: #334155 !important;
		border-color: #475569 !important;
		color: #e2e8f0 !important;
	}

	/* Navbar */
	.navbar {
		background-color: #0f172a !important;
	}

	/* Modal (Dark Mode) */
	.modal-content {
		background: #1e293b !important;
		color: #e2e8f0 !important;
		border-color: #334155 !important;
	}

	.modal-body,
	.modal-footer {
		background: #1e293b !important;
		color: #e2e8f0 !important;
	}

	.modal-header {
		background: var(--rj-blue-dark) !important;
		color: #ffffff !important;
	}

	/*Highlights mismatched fields*/
	.field-error {
		border: 2px solid #d9534f !important; /* Bootstrap danger red */
		background-color: #fff5f5;
	}

	.label-error {
		color: #d9534f !important;
		font-weight: bold;
	}
}