:root{
	--color-bg: #07161e; /* dark navy */
	--color-surface: #0d212a; /* card surface */
	--color-primary: #75d715; /* green accent */
	--color-accent: #2dd4bf; /* teal */
	--color-secondary: #6b7280; /* muted gray */
	--color-success: #22c55e;
	--color-info: #2dd4bf;
	--color-warning: #ffc107;
	--color-light: #f8fafc;
	--color-dark: #021214;
	--color-muted: #94a3b8; /* muted text */
	--color-text: #e6eef3; /* main text */
	--color-danger: #ff6b6b;
}

/* Local Roboto font faces (served from /static/fonts/roboto/) */
@font-face{
	font-family: 'Roboto';
	src: url('../fonts/roboto/Roboto-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: 'Roboto';
	src: url('../fonts/roboto/Roboto-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: 'Roboto';
	src: url('../fonts/roboto/Roboto-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: 'Roboto';
	src: url('../fonts/roboto/Roboto-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* Material Symbols (local) */
@font-face{
	font-family: 'Material Symbols Outlined';
	src: url('../fonts/material-symbols/outlined/MaterialSymbolsOutlined-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: 'Material Symbols Rounded';
	src: url('../fonts/material-symbols/rounded/MaterialSymbolsRounded_36pt-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face{
	font-family: 'Material Symbols Sharp';
	src: url('../fonts/material-symbols/sharp/MaterialSymbolsSharp_36pt-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Helper classes to use Material Symbols in templates */
.material-symbols-outlined, .material-symbols-rounded, .material-symbols-sharp {
	speak: none;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	display: inline-block;
	line-height: 1;
	vertical-align: middle;
	font-size: 1.25rem;
	transform: translateY(0.05em);
}
.material-symbols-outlined { font-family: 'Material Symbols Outlined'; }
.material-symbols-rounded { font-family: 'Material Symbols Rounded'; }
.material-symbols-sharp { font-family: 'Material Symbols Sharp'; }

body{
		background: linear-gradient(180deg,var(--color-bg), #071022);
		color: var(--color-text);
		font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	min-height: 100vh;
}

.card{
	background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
	border: 1px solid rgba(255,255,255,0.06);
	color: var(--color-text);
	box-shadow: 0 12px 30px rgba(2,6,23,0.65);
	padding: 1rem;
}

a{ color: var(--color-accent); }

/* Simple form tweaks */
form input, form button, form select, form textarea{
	border-radius: 6px;
}

/* Form tweaks kept via Bootstrap utilities; removed auth-specific helpers */
.btn-primary{ border-radius: 10px; padding: 10px 16px; }
.link-primary{ color: var(--color-accent); }

/* Navbar styles (customize Bootstrap .navbar) */
.navbar{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-bottom: 1px solid rgba(255,255,255,0.04);
  padding: 0.45rem 0;
}
.navbar .navbar-brand{ color: var(--color-text); font-weight:700; display:flex; align-items:center; }
.navbar .navbar-brand img{ height:34px; width:auto; display:block; }
.navbar .nav-link{ color: var(--color-text); opacity:0.92; margin-left:0.4rem; }
.navbar .nav-link:hover{ color: var(--color-accent); }

/* Ensure active nav link is visually distinct */
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
	color: var(--color-accent) !important;
	font-weight: 600;
}

/* Ensure card headings and body text are readable */
.card h2, .card h3, .card .card-title { color: var(--color-text); }
 .card p { color: var(--color-text); opacity: 0.95; }

 /* Force higher-contrast for muted and small text inside cards */
 .text-muted{
	 color: var(--color-text) !important;
	 opacity: 0.88 !important;
 }

 /* Ensure card titles are fully visible */
 .card .card-title { color: var(--color-text) !important; opacity: 1 !important; }

/* Improve global muted text visibility (overrides Bootstrap .text-muted where needed) */
/* Improve global muted text visibility (overrides Bootstrap .text-muted where needed) */
body .text-muted { color: var(--color-text); opacity: 0.72; }
/* Ensure card muted text is more visible */
.card .text-muted { color: rgba(230,238,243,0.88); }

/* Dashboard welcome specific - high contrast */
.lead { color: var(--color-text); opacity: 0.95; }
.text-body { color: var(--color-text) !important; }

/* Ensure card body spacing and readable text */
.card .card-body{ padding: 1.25rem; }
.card small, .card .lead { color: var(--color-text); opacity: 0.95; }

/* Make paragraph spacing and visibility clearer */
.card p { font-size: 1rem; line-height: 1.6; }

/* Style cards that use Bootstrap's border-start utility */
.card.border-start{
	background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));
	border: 1px solid rgba(255,255,255,0.04);
	border-radius:10px;
}
.card.border-start .card-body{ padding:1.25rem; }
.card .display-6{ font-size:2rem; font-weight:700; color:var(--color-text); }
.card .list-unstyled > li{ color: rgba(230,238,243,0.95); }
.card .list-unstyled > li .text-muted{ color: rgba(230,238,243,0.7); }
/* Ensure cards have breathing room from footer and each other */
.card{ margin-bottom: 1.25rem; }

/* Badges for statuses (use Bootstrap .badge classes) */
.badge.bg-warning{ background-color: #ffc107 !important; color:#042018 !important; font-weight:700; }
.badge.bg-success{ background-color: #22c55e !important; color:#042018 !important; font-weight:700; }
/* visual left border handled by utilities .border-start and color classes */

/* Global form control theming (apply to Bootstrap classes without adding new classes) */
input.form-control, textarea.form-control, select.form-select, .form-select, .form-control {
	background: rgba(255,255,255,0.02) !important;
	color: var(--color-text) !important;
	border: 1px solid rgba(255,255,255,0.06) !important;
	box-shadow: none !important;
}

/* Placeholder & muted text inside controls */
input.form-control::placeholder, textarea.form-control::placeholder { color: var(--color-muted); opacity: 0.9; }

/* Focus states — use site accent */
input.form-control:focus, textarea.form-control:focus, select.form-select:focus {
	background: rgba(255,255,255,0.02) !important;
	color: var(--color-text) !important;
	border-color: var(--color-accent) !important;
	box-shadow: 0 0 0 .15rem rgba(45,212,191,0.08) !important;
	outline: none !important;
}

/* Checkboxes & radios: better contrast on dark bg */
.form-check-input {
	background-color: transparent !important;
	border: 1px solid rgba(255,255,255,0.08) !important;
}
.form-check-input:checked {
	background-color: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
}

.btn-defaults, /* helper class placeholder - not used directly */
/* Buttons default adjustments to match palette (do not override .btn-primary) */
.btn-outline-secondary, .btn-outline-light {
	color: var(--color-text) !important;
	border-color: rgba(255,255,255,0.06) !important;
	background: transparent !important;
}
.btn:hover, .btn:focus { color: var(--color-text) !important; }

/* Themed Bootstrap button variants (site palette) */
.btn-primary { background: var(--color-primary) !important; color: #022018 !important; border-color: rgba(0,0,0,0.12) !important; }
.btn-secondary { background: var(--color-secondary) !important; color: var(--color-text) !important; border-color: rgba(0,0,0,0.08) !important; }
.btn-success { background: var(--color-success) !important; color: #022018 !important; border-color: rgba(0,0,0,0.08) !important; }
.btn-info { background: var(--color-info) !important; color: #022018 !important; border-color: rgba(0,0,0,0.08) !important; }
.btn-warning { background: var(--color-warning) !important; color: #042018 !important; border-color: rgba(0,0,0,0.08) !important; }
.btn.btn-danger { background: var(--color-danger) !important; color: #ffffff !important; border-color: rgba(0,0,0,0.08) !important; }
.btn-light {
	background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)) !important;
	color: var(--color-text) !important;
	border-color: rgba(255,255,255,0.08) !important;
	box-shadow: 0 6px 14px rgba(2,6,23,0.22) !important;
}
.btn-dark { background: var(--color-dark) !important; color: var(--color-text) !important; border-color: rgba(255,255,255,0.04) !important; }

/* Outline variants: show colored border/text, fill on hover */
.btn-outline-primary { color: var(--color-primary) !important; border-color: rgba(117,215,21,0.95) !important; background: transparent !important; }
.btn-outline-secondary { color: var(--color-secondary) !important; border-color: rgba(107,114,128,0.9) !important; background: transparent !important; }
.btn-outline-success { color: var(--color-success) !important; border-color: rgba(34,197,94,0.95) !important; background: transparent !important; }
.btn-outline-info { color: var(--color-info) !important; border-color: rgba(45,212,191,0.95) !important; background: transparent !important; }
.btn-outline-warning { color: var(--color-warning) !important; border-color: rgba(255,193,7,0.95) !important; background: transparent !important; }
.btn-outline-danger { color: var(--color-danger) !important; border-color: rgba(255,107,107,0.95) !important; background: transparent !important; }
.btn-outline-light { color: var(--color-light) !important; border-color: rgba(255,255,255,0.18) !important; background: transparent !important; }
.btn-outline-dark { color: var(--color-light) !important; border-color: rgba(255,255,255,0.14) !important; background: transparent !important; transition: background .12s ease, color .12s ease, box-shadow .12s ease; }

/* Hover / focus behavior for filled variants */
.btn-primary:hover, .btn-secondary:hover, .btn-success:hover, .btn-info:hover, .btn-warning:hover, .btn-danger:hover, .btn-light:hover, .btn-dark:hover {
	filter: brightness(0.96);
	transform: translateY(-1px);
}
.btn-primary:focus, .btn-secondary:focus, .btn-success:focus, .btn-info:focus, .btn-warning:focus, .btn-danger:focus, .btn-light:focus, .btn-dark:focus {
	box-shadow: 0 0 0 .12rem rgba(45,212,191,0.08);
	outline: none;
}

/* Hover behavior for outline variants: fill with color */
.btn-outline-primary:hover { background: var(--color-primary) !important; color: #022018 !important; }
.btn-outline-secondary:hover { background: var(--color-secondary) !important; color: var(--color-text) !important; }
.btn-outline-success:hover { background: var(--color-success) !important; color: #022018 !important; }
.btn-outline-info:hover { background: var(--color-info) !important; color: #022018 !important; }
.btn-outline-warning:hover { background: var(--color-warning) !important; color: #042018 !important; }
.btn-outline-danger:hover { background: var(--color-danger) !important; color: #ffffff !important; }
.btn-outline-light:hover { background: var(--color-light) !important; color: #042018 !important; }
.btn-outline-dark:hover { background: rgba(255,255,255,0.06) !important; color: var(--color-text) !important; border-color: rgba(255,255,255,0.18) !important; }
.btn-outline-dark:focus, .btn-outline-dark.focus { box-shadow: 0 0 0 .12rem rgba(255,255,255,0.06); }

/* Disabled */
.btn:disabled, .btn.disabled { opacity: 0.5 !important; pointer-events: none !important; }

/* Alerts: theme to site palette */
.alert{
	background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	color: var(--color-text) !important;
	border: 1px solid rgba(255,255,255,0.04);
	box-shadow: 0 6px 18px rgba(2,6,23,0.45);
}
.alert .btn-close{filter:invert(1);opacity:0.85}

.alert-primary{ background: var(--color-primary) !important; color: #022018 !important; border-color: rgba(0,0,0,0.12) !important; }
.alert-success{ background: var(--color-success) !important; color: #022018 !important; border-color: rgba(0,0,0,0.08) !important; }
.alert-info{ background: var(--color-info) !important; color: #022018 !important; border-color: rgba(0,0,0,0.08) !important; }
.alert-warning{ background: var(--color-warning) !important; color: #042018 !important; border-color: rgba(0,0,0,0.08) !important; }
.alert-danger, .alert-error{ background: var(--color-danger) !important; color: #ffffff !important; border-color: rgba(0,0,0,0.08) !important; }

/* Slightly muted variant for secondary/info messages */
.alert-secondary{ background: rgba(255,255,255,0.03) !important; color: var(--color-text) !important; border-color: rgba(255,255,255,0.04) !important; }


/* DataTables Buttons: use Bootstrap classes via DataTables `className` (no custom .dt-button styles) */

/* Style native select dropdown options where supported */
select.form-select option, select.form-select optgroup {
	background-color: var(--color-surface) !important;
	color: var(--color-text) !important;
}

/* Improve appearance of the select control and its dropdown arrow in some browsers */
select.form-select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--color-text) 50%), linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
	background-position: calc(100% - 1rem) calc(1em + 2px), calc(100% - .7rem) calc(1em + 2px);
	background-size: .45em .45em, .45em .45em;
	background-repeat: no-repeat;
}

/* For IE/Edge: invert default dropdown icon for visibility */
select.form-select::-ms-expand { filter: invert(1); }

/* Global: force selects and their options to use site colors for readability
   Applies to native selects and Bootstrap .form-select to avoid white-on-white
   dropdown issues when the browser paints the dropdown with default styles. */
select, select.form-select, .form-select {
	color: var(--color-text) !important;
	background-color: transparent !important;
}
select option, select optgroup, select.form-select option, select.form-select optgroup {
	color: var(--color-text) !important;
	background-color: var(--color-surface) !important;
}

/* Some browsers (WebKit) require explicit styling on the dropdown pseudo-element */
select::-webkit-dropdown-button, select::-webkit-outer-spin-button, select::-webkit-inner-spin-button {
	color: var(--color-text) !important;
}

@media (max-width:767px){
	.card .display-6{ font-size:1.6rem; }
}

/* Target exact pagination markup the inspector returned and add gaps on small screens */
@media (max-width:480px) {
	nav[aria-label="pagination"] {
		width: 100% !important;
		display: flex !important;
		justify-content: center !important;
	}

	nav[aria-label="pagination"] > ul.pagination {
		display: flex !important;
		flex-wrap: wrap !important;
		gap: 0.6rem !important;
		justify-content: center !important;
		padding-left: 0 !important;
		margin: 0.25rem 0 !important;
	}

	nav[aria-label="pagination"] > ul.pagination > li.page-item,
	nav[aria-label="pagination"] > ul.pagination > li.dt-paging-button.page-item {
		display: inline-flex !important;
		margin: 0 !important;
		vertical-align: middle !important;
	}

	nav[aria-label="pagination"] > ul.pagination > li > .page-link {
		padding: 0.28rem 0.5rem !important;
		min-width: 36px !important;
		font-size: 0.88rem !important;
		text-align: center !important;
		white-space: nowrap !important;
	}
}

/* Fallback: horizontal scroll if still cramped on very small screens */
.dataTables_wrapper .dataTables_paginate {
	overflow-x: auto !important;
	-webkit-overflow-scrolling: touch !important;
}

/* Larger screens */
@media(min-width:768px){
	/* adjust navbar spacing */
	.navbar{ padding: 0.6rem 0; }
}

@media(min-width:992px){
	/* On larger screens keep form widths reasonable via grid columns */
}

/* Footer styles: keep at bottom and slightly more visible */
/* Footer now uses only Bootstrap utilities; removed custom .site-footer rules */

@media(min-width:768px){
	.navbar{ padding: 0.6rem 0; }
}

/* Pagination fix for DataTables on very small screens
   Isolated file so main.css can be reverted safely. */

@media (max-width:480px) {
  nav[aria-label="pagination"] {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  nav[aria-label="pagination"] > ul.pagination {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.6rem !important;
    justify-content: center !important;
    padding-left: 0 !important;
    margin: 0.25rem 0 !important;
  }

  nav[aria-label="pagination"] > ul.pagination > li.page-item,
  nav[aria-label="pagination"] > ul.pagination > li.dt-paging-button.page-item {
    display: inline-flex !important;
    margin: 0 !important;
    vertical-align: middle !important;
  }

  nav[aria-label="pagination"] > ul.pagination > li > .page-link {
    padding: 0.28rem 0.5rem !important;
    min-width: 36px !important;
    font-size: 0.88rem !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  /* Horizontal scroll fallback */
  .dataTables_wrapper .dataTables_paginate {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Override Bootstrap's .bg-light to match dark theme (use site dark color subtly)
	 This makes cards and elements using bg-light fit the non-light palette. */
.bg-light {
	background: linear-gradient(180deg, rgba(2,18,20,0.06), rgba(2,18,20,0.04)) !important;
	color: var(--color-text) !important;
	border-color: rgba(255,255,255,0.04) !important;
}

/* Ensure diagram cards (vehicle/tank) are same visual size and center their canvases */
.diagram-card .card-body{
	min-height: 360px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:flex-start;
	gap:0.5rem;
}
.diagram-card canvas{ display:block; width:400px; height:280px; }