/* ==========================================================================
   VeemFleet visual theme (v3012) - typography + look and feel overrides.
   Loaded AFTER style6.css: only overrides, remove this link to fully revert.
   ========================================================================== */

/* ---- Inter, self-hosted (ships can be offline) ---- */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inter/inter-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/inter/inter-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/inter/inter-600.woff2') format('woff2');
}

:root {
	--veem-font: 'Inter', 'Segoe UI', Roboto, -apple-system, sans-serif;
	--veem-text-1: #eef2fb;      /* primary values */
	--veem-text-2: #8fa0c4;      /* labels */
	--veem-text-3: #67779e;      /* units, ticks, hints */
	--veem-idle:   #67779e;      /* dash rows sitting at 0 / OFF / n-a */
	--veem-title:  #7d8bb0;      /* card titles */
	--veem-hairline: rgba(255,255,255,0.05);
	--veem-ok:     #34c98e;
	--veem-warn:   #e8c547;
	--veem-danger: #e35d6a;
	--veem-accent: #2fc6db;
}

/* ---- base typography: one family, tabular digits everywhere ---- */
body,
.main-content,
button, input, select, textarea,
.tooltip, .popover {
	font-family: var(--veem-font) !important;
	font-variant-numeric: tabular-nums;
}
b, strong, .font-weight-bold { font-weight: 600 !important; }
.font-weight-semibold { font-weight: 500 !important; }

/* ---- cards ---- */
.card { border-radius: 6px; }
.card .card-header {
	background-color: transparent !important;
	border-bottom: 1px solid var(--veem-hairline);
}
.card .card-title {
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--veem-title) !important;
}

/* ---- dashboard list rows: quiet labels, strong tabular values ---- */
.list.d-flex { border-bottom: 1px solid var(--veem-hairline) !important; }
.list .tx-gray-400,
.list .tx-gray-400 a {
	color: var(--veem-text-2) !important;
	font-weight: 400 !important;
	font-size: 12px !important;
}
.list .tx-gray-100 {
	color: var(--veem-text-1) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
}
/* idle rows (0 / 0% / OFF / n-a) read grey, live rows stay bright. The rules
   above are !important, so an inline color can never win - the idle state has
   to be a class on the row, which is also what the player toggles. */
.list.veem-idle .tx-gray-400,
.list.veem-idle .tx-gray-400 a,
.list.veem-idle .tx-gray-100 {
	color: var(--veem-idle) !important;
}
.bg-light-transparent { background: transparent !important; }

/* stats table on the logical charts page */
.table-hover .text-white { font-weight: 600; }
.table thead th { letter-spacing: 0.6px; }

/* no jumpy hover transform on table rows (style6/inline styles set one) */
.table tbody tr:hover, tr:hover { transform: none !important; }

/* ---- left menu: quiet counters, clear active state ---- */
.side-menu__label { font-size: 12px !important; letter-spacing: 0.1px; }
.side-menu h3, .side-item-category {
	font-size: 10px !important;
	letter-spacing: 1.2px;
	color: #5d6c8f !important;
	font-weight: 600 !important;
}
.badge.side-badge {
	background: transparent !important;
	color: #5d6c8f !important;
	font-size: 11px !important;
	font-weight: 500 !important;
	padding-right: 2px;
	font-variant-numeric: tabular-nums;
}
.badge.side-badge.side-badge-alert {
	background: var(--veem-danger) !important;
	color: #fff !important;
	border-radius: 8px;
	padding: 1px 7px;
	font-size: 10px !important;
}
.side-menu__item.active,
.side-menu__item.active .side-menu__label {
	color: #ffffff !important;
	font-weight: 500;
}
.side-menu__item.active {
	border-left: 2px solid var(--veem-accent);
	background: rgba(47,198,219,0.06) !important;
}

/* ---- top bar controls: equal heights, calm labels ---- */
.main-header-center .select2-selection,
.main-header-center .form-control {
	font-family: var(--veem-font) !important;
	font-size: 13px !important;
}

/* ---- header chips / badges: consistent sizing ---- */
.badge { font-family: var(--veem-font) !important; font-weight: 600; }

/* ---- flot charts: neutral ticks (grid colors come from the JS options) ---- */
.flot-chart .flot-text, .flot-text {
	color: var(--veem-text-3) !important;
	font-family: var(--veem-font) !important;
	font-size: 11px !important;
}

/* checkbox strips above charts */
.ckbox span { font-size: 12px; color: var(--veem-text-2); }

/* ---- buttons: unified small outline family already used by the header ---- */
.btn { font-family: var(--veem-font) !important; }
.btn-sm { font-size: 12px; }

/* ---- v3015 review: long localized submenu labels wrap instead of overlapping ---- */
.slide-menu a.slide-item {
	height: auto !important;
	line-height: 1.3 !important;
	white-space: normal !important;
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}

/* ---- v3015 review: auth pages (login / password flows) ---- */
.main-card-signin {
	border-radius: 12px !important;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.06) !important;
	box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}
.dark-theme .main-card-signin { background-color: #141a33 !important; }
.page-signin-style:before {
	background: linear-gradient(150deg, rgba(13,19,43,0.95), rgba(47,110,219,0.55)) !important;
}
.main-signin-header h2 { font-weight: 600; letter-spacing: .2px; }
.main-signin-header h4 {
	color: var(--veem-text-2) !important;
	font-size: 13px;
	font-weight: 400;
	margin-bottom: 22px;
}
.main-signin-header label { font-size: 12px; color: var(--veem-text-2); }
.main-signin-header .form-control {
	height: 40px;
	border-radius: 6px;
	background: rgba(255,255,255,0.04);
	border-color: rgba(255,255,255,0.10);
	color: var(--veem-text-1);
}
.main-signin-header .form-control:focus {
	border-color: var(--veem-accent);
	box-shadow: 0 0 0 2px rgba(47,198,219,0.15);
	background: rgba(255,255,255,0.05);
	color: var(--veem-text-1);
}
.btn-main-primary.btn-block {
	height: 40px;
	border-radius: 6px;
	font-weight: 600;
	letter-spacing: .3px;
	background: var(--veem-accent) !important;
	border-color: var(--veem-accent) !important;
	color: #06121d !important;
}
.btn-main-primary.btn-block:hover { filter: brightness(1.08); }
.btn-main-primary.btn-block:disabled { opacity: .45; }
.main-signin-footer p { font-size: 12px; color: var(--veem-text-3); }
.main-signin-footer a { color: var(--veem-accent) !important; }
.veem-login-points div {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	color: rgba(255,255,255,0.88);
}
.veem-login-points i { color: rgba(255,255,255,0.7); width: 22px; }

/* ---- v3017: long localized menu labels never collide with count badges ---- */
.side-menu__item {
	display: flex !important;
	align-items: center !important;
}
.side-menu__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap !important;
}
.side-menu__item .badge.side-badge {
	position: static !important;
	flex: 0 0 auto;
	margin-left: 6px;
}
.side-menu__item .angle {
	position: static !important;
	flex: 0 0 auto;
	margin-left: 4px;
}
.slide-menu a.slide-item {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between;
}
.slide-menu a.slide-item .badge.side-badge {
	position: static !important;
	flex: 0 0 auto;
	margin-left: 6px;
}