/*
 * Shared modernization styles. Loaded on every page via head_.php
 * (root/account/client; admin and haulage delegate to those).
 * Targets shared structural IDs/classes every page already has
 * (#kt_aside, #kt_brand, #kt_content, .login-aside, .wrapper) rather than
 * opt-in classes, so this reaches every page with zero HTML edits beyond
 * the toggle button markup added to each role's aside.php.
 */

/* ---- App-wide logistics doodle background (content area only) ------
   A subtle, low-opacity tiled line-art pattern filling otherwise-empty
   page space. Deliberately NOT applied to the sidebar itself (tried
   that, it read as visual noise on top of the nav. A plain, confident
   dark color reads as more premium there). */
#kt_content,
.login-aside {
	position: relative;
}
#kt_content::before,
.login-aside::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../../media/svg/illustrations/logistics-doodle-pattern.svg");
	background-repeat: repeat;
	background-size: 340px 340px;
	opacity: 0.05;
	pointer-events: none;
	/* Negative, not 0: a real (default: static) in-flow child always
	   paints above a z-index:0 positioned sibling in CSS's stacking
	   order, but NOT above one with z-index:0 if that sibling comes
	   first in the stacking order categories. Rather than force every
	   child of #kt_content into position:relative to fix that (tried
	   that with `#kt_content > * { position: relative }`: its ID-based
	   specificity beat the theme's `.subheader-fixed .subheader {
	   position: fixed }` class-based rule, silently downgrading the
	   subheader to position:relative and shifting the whole page 150px
	   right, a real, confirmed regression), negative z-index puts this
	   pseudo-element behind ALL normal in-flow content unconditionally,
	   with zero changes needed to any child's position/z-index. */
	z-index: -1;
}
.login-aside::before {
	filter: invert(1);
	opacity: 0.08;
}

/* ================================================================
   Sidebar: deep, confident charcoal-black with a purple accent system
   ================================================================ */
#kt_aside {
	background: linear-gradient(180deg, #1a1726 0%, #100e18 100%);
	box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.05);
}

/* Brand/logo band: a distinct white strip at the top, separated from
   the dark nav below by a visible seam, so the logo reads as sitting
   "above" the nav rather than embedded in it. */
#kt_brand {
	background-color: #ffffff;
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
	position: relative;
	z-index: 2;
}
.jt-aside-toggle-btn {
	color: #29156e;
	opacity: 0.65;
	transition: opacity 0.2s ease;
	flex-shrink: 0;
}
.jt-aside-toggle-btn:hover {
	opacity: 1;
}

/* This build's compiled theme CSS never shipped a dark aside variant.
   Every color below is hand-written to stay legible on the new
   background. Accent matches this app's existing brand purple
   (#29156e, already used on buttons/headers) rather than the theme's
   stock blue. */
#kt_aside .aside-menu .menu-nav > .menu-item > .menu-link {
	border-radius: 0;
	transition: background-color 0.15s ease;
}
#kt_aside .aside-menu .menu-nav > .menu-item > .menu-link .menu-text,
#kt_aside .aside-menu .menu-nav > .menu-item > .menu-link .menu-icon,
#kt_aside .aside-menu .menu-nav > .menu-item > .menu-link .menu-arrow {
	color: rgba(255, 255, 255, 0.62);
	transition: color 0.15s ease;
}
#kt_aside .aside-menu .menu-nav > .menu-item > .menu-link:hover {
	background-color: rgba(255, 255, 255, 0.05);
}
#kt_aside .aside-menu .menu-nav > .menu-item > .menu-link:hover .menu-text,
#kt_aside .aside-menu .menu-nav > .menu-item > .menu-link:hover .menu-icon,
#kt_aside .aside-menu .menu-nav > .menu-item > .menu-link:hover .menu-arrow {
	color: #ffffff;
}
#kt_aside .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link,
#kt_aside .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link {
	background-color: rgba(133, 96, 255, 0.16);
	box-shadow: inset 3px 0 0 #8560ff;
}
#kt_aside .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text,
#kt_aside .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-icon,
#kt_aside .aside-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-arrow,
#kt_aside .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-text,
#kt_aside .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-icon,
#kt_aside .aside-menu .menu-nav > .menu-item.menu-item-open > .menu-link .menu-arrow {
	color: #ffffff;
}
#kt_aside .aside-menu .menu-nav .menu-item-parent .menu-text {
	color: rgba(255, 255, 255, 0.35);
	font-size: 0.75rem;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}
#kt_aside .aside-menu .menu-nav .menu-submenu .menu-link .menu-text {
	color: rgba(255, 255, 255, 0.58);
}
#kt_aside .aside-menu .menu-nav .menu-submenu .menu-link:hover .menu-text {
	color: #ffffff;
}
#kt_aside .aside-menu .menu-nav .menu-bullet.menu-bullet-dot span {
	background-color: rgba(255, 255, 255, 0.3);
}
#kt_aside .aside-menu .menu-nav .menu-link:hover .menu-bullet.menu-bullet-dot span {
	background-color: #ffffff;
}

/* ---- Collapse / expand (icon rail) ---------------------------------
   The theme ships an `.aside-minimize` body class (used by its own
   broken KTLayoutAsideToggle, see jt-aside-toggle.js) but this build's
   compiled CSS never actually implements the width-shrink for it (only
   some hover-submenu bookkeeping), confirmed by grepping
   style.bundle.css for `.aside-minimize .aside`/`.wrapper` and finding
   no width/padding rule at all. So the real collapse behavior is
   written here in full, matching the existing `.aside-fixed .wrapper {
   padding-left: 150px }` / `.aside { width: 150px }` pattern with a
   second, narrower value. Both #kt_aside and .wrapper already carry the
   theme's own `transition: all`, so this animates smoothly for free. */
@media (min-width: 992px) {
	body.aside-minimize #kt_aside {
		width: 80px;
	}
	body.aside-minimize.aside-fixed .wrapper {
		padding-left: 80px;
	}
}
body.aside-minimize #kt_brand {
	justify-content: center;
}
body.aside-minimize .brand-logo {
	display: none;
}
body.aside-minimize .aside-menu .menu-nav > .menu-item > .menu-link {
	justify-content: center;
	padding-left: 0;
	padding-right: 0;
}
body.aside-minimize .aside-menu .menu-nav > .menu-item > .menu-link .menu-text,
body.aside-minimize .aside-menu .menu-nav > .menu-item > .menu-link .menu-arrow {
	display: none;
}
body.aside-minimize .aside-menu .menu-nav > .menu-item > .menu-link .menu-icon {
	margin: 0;
	flex: 0 0 auto;
}
/* Submenu-bearing items (Commercial/Haulage Module) simply hide their
   submenu while collapsed rather than attempting a flyout. The
   theme's aside submenus are inline/static (push content down, not
   position:absolute), so a flyout isn't something this build supports
   without building that positioning from scratch. Expand the sidebar to
   reach those sub-items; this is the same tradeoff most icon-rail admin
   panels make. */
body.aside-minimize .aside-menu .menu-nav > .menu-item .menu-submenu {
	display: none !important;
}

/* ---- Breadcrumb: current-page crumb --------------------------------
   Every sub_header.php now always appends the current $page_title as
   the final, non-link crumb. */
.jt-breadcrumb-current {
	color: #3f4254;
	font-weight: 700;
}

/* ================================================================
   Typography: Inter instead of the theme's stock Poppins
   ================================================================
   "Poppins" is hardcoded (not a CSS variable) in dozens of places
   throughout the compiled style.bundle.css, several dozen selectors
   deep, not something safely chased rule-by-rule. Overriding the
   handful of selectors below covers body text via inheritance (the
   vast majority of everything on every page) plus the specific
   components most likely to declare their own explicit font-family
   rather than inherit it. assets/plugins/global/plugins.bundle.js's
   own ApexCharts label text (.apexcharts-*) is the one place this
   deliberately doesn't reach: that rule is !important and scoped to
   chart labels only, not worth fighting. */
body,
h1, h2, h3, h4, h5, h6,
.btn,
.form-control,
.card-title, .card-label,
table, th, td,
input, select, textarea,
.breadcrumb, label,
.menu-text {
	font-family: 'Inter', Helvetica, Arial, sans-serif;
}

/* ================================================================
   Buttons: brand purple instead of the theme's stock blue
   ================================================================
   Scoped to buttons specifically (the concrete complaint was
   "white and blue button theming"): .text-primary/.bg-primary/
   .label-light-primary etc. carry semantic meaning across many
   already-tested pages (status badges, active-state highlights) and
   aren't touched here. */
/* The compiled bundle carries two separate .btn-primary rule blocks:
   a general Bootstrap-style one (.btn-primary, specificity 0,0,1,0) and
   a Keenthemes "solid button" one (.btn.btn-primary, specificity
   0,0,2,0). The second, more specific one is what real buttons in
   this app actually match (they all carry both classes), so it's the
   one that has to be overridden; matching only the first left every
   real button still blue. */
.btn-primary,
.btn.btn-primary {
	background-color: #29156e;
	border-color: #29156e;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-primary.focus {
	background-color: #3d2296;
	border-color: #3d2296;
	box-shadow: 0 0 0 0.2rem rgba(41, 21, 110, 0.25);
}
.btn-primary.disabled, .btn-primary:disabled,
.btn.btn-primary.disabled, .btn.btn-primary:disabled {
	background-color: #29156e;
	border-color: #29156e;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.btn.btn-primary:not(:disabled):not(.disabled):active,
.btn.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle,
.show > .btn.btn-primary.dropdown-toggle {
	background-color: #1f0f57;
	border-color: #1f0f57;
}
.btn.btn-light-primary {
	color: #ffffff;
	background-color: #3d2296;
	border-color: transparent;
}
.btn.btn-light-primary:hover:not(.disabled):not(:disabled),
.btn.btn-light-primary:focus:not(.disabled):not(:disabled),
.btn.btn-light-primary.focus:not(.disabled):not(:disabled) {
	color: #ffffff;
	background-color: #29156e;
}

/* ================================================================
   Cards: a visible border instead of a shadow floating on white
   ================================================================ */
.card.card-custom {
	border: 1px solid #E4E6EF;
	box-shadow: none;
}

/* ---- Job-ending action cards (Close Job / Dispatch to Haulage etc.):
   a subtle left accent in the same orange already used app-wide for
   "needs attention" (the ATA-overdue text color), signaling "final,
   think before you click" without the alarm-red of an error state. */
.jt-job-actions-card {
	border-left: 3px solid #FFA800 !important;
}

/* ---- Truncation utility ---------------------------------------------
   Opt-in (class="jt-truncate") for long text that shouldn't force a
   column/card wider than it should be. The title attribute carries the
   full text back on hover. */
.jt-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: block;
	max-width: 100%;
}

/* ================================================================
   Dashboard rebuild: section labels + stat pills
   ================================================================
   Built for the Commercial Dashboard's redesign but generic enough to
   reuse on any dashboard (admin/haulage/account). Every figure and
   link these wrap is unchanged from the original markup, only the
   presentation around them changed. */
.jt-section-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #7e8299;
	margin: 2rem 0 1rem;
}
.jt-section-label:first-child {
	margin-top: 0;
}
.jt-section-label .jt-section-label__icon {
	color: #29156e;
	font-size: 1.1rem;
	line-height: 1;
}

.jt-stat-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}
.jt-stat-pill {
	display: block;
	border-radius: 0.5rem;
	padding: 0.9rem 1rem;
	text-decoration: none;
	border-left: 4px solid transparent;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.jt-stat-pill:hover {
	text-decoration: none;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.jt-stat-pill__value {
	display: block;
	font-size: 1.4rem;
	font-weight: 800;
	line-height: 1.2;
	color: #1e1e2d;
}
.jt-stat-pill__label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	color: #5e6278;
	margin-top: 0.15rem;
}
/* Opaque, not translucent: this pill grid intentionally overlaps the
   bottom of the chart above it (the original design's own `mt-n25`),
   and a translucent tint let the chart bleed through underneath,
   confirmed live, looked broken rather than like a floating card. */
.jt-stat-pill--info { background: #E1F0FF; border-left-color: #17a2b8; }
.jt-stat-pill--warning { background: #FFF4DE; border-left-color: #ffa800; }
.jt-stat-pill--danger { background: #FFE2E5; border-left-color: #f64e60; }
.jt-stat-pill--success { background: #C9F7F5; border-left-color: #1bc5bd; }
.jt-stat-pill--dark { background: #ECEEF5; border-left-color: #181c32; }
.jt-stat-pill--alert {
	box-shadow: 0 0 0 1px rgba(246, 78, 96, 0.3) inset;
}

/* ---- Payments: 2-column grid instead of one long vertical list ---- */
.jt-payment-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.25rem 1.25rem;
}
.jt-payment-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid #F3F6F9;
}
.jt-payment-row:last-child {
	border-bottom: none;
}
.jt-payment-row__label {
	font-weight: 700;
	font-size: 0.95rem;
	color: #3f4254;
	text-decoration: none;
}
.jt-payment-row__label:hover {
	color: #29156e;
	text-decoration: none;
}
.jt-payment-row__amount {
	font-weight: 800;
	font-size: 0.85rem;
	white-space: nowrap;
	padding: 0.35rem 0.65rem;
	border-radius: 0.42rem;
}

/* ---- Attention-needed job cards (the two "urgent" list widgets) ---
   Restructured from one long run-on sentence per job into a small
   labeled grid, so BOL/Client/ETA/Status are each their own scannable
   field instead of a wall of "Key: value | Key: value" text. Same
   data, same fields, same links/buttons, just organized. */
.jt-job-alert-card {
	border-radius: 0.5rem;
	padding: 1rem 1.25rem;
	margin-bottom: 0.75rem;
}
.jt-job-alert-card--warning { background: #FFF4DE; }
.jt-job-alert-card--danger { background: #FFE2E5; }
.jt-job-alert-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 0.5rem;
}
.jt-job-alert-card__jobno {
	font-weight: 800;
	font-size: 1.05rem;
	color: #1e1e2d;
}
.jt-job-alert-card__fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 0.35rem 1rem;
}
.jt-job-alert-card__field {
	min-width: 0;
}
.jt-job-alert-card__field-label {
	display: block;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #7e8299;
}
.jt-job-alert-card__field-value {
	display: block;
	font-size: 0.85rem;
	font-weight: 600;
	color: #3f4254;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ---- Breadcrumb separator: chevron instead of a dot -------------
   Every breadcrumb app-wide already carries .breadcrumb-dot (the
   theme's own bullet-separator variant); overriding its own :after
   rule here rather than swapping the class in 5 different sub_header.php
   files. */
.breadcrumb.breadcrumb-dot .breadcrumb-item:after {
	content: "\203A";
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	color: #b5b5c3;
}

/* ---- Toast notifications (replaces the old full-width inline
   alert banner every page used to render at the top of the content
   area). See assets/js/custom/jt-toast.js for the trigger element
   this styles, and server/definitions.php / definitions1.php for
   where that trigger element is emitted. */
.jt-toast-container {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 2000;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 380px;
	pointer-events: none;
}

.jt-toast {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: 0 10px 30px rgba(24, 28, 50, 0.14), 0 2px 8px rgba(24, 28, 50, 0.08);
	border-left: 4px solid transparent;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	font-size: 0.925rem;
	font-weight: 500;
	color: #3f4254;
	pointer-events: auto;
}

.jt-toast--visible {
	opacity: 1;
	transform: translateY(0);
}

.jt-toast--success {
	border-left-color: #17C671;
}
.jt-toast--success .jt-toast__icon {
	color: #17C671;
	background: #E7F9F0;
}

.jt-toast--danger {
	border-left-color: #F64E60;
}
.jt-toast--danger .jt-toast__icon {
	color: #F64E60;
	background: #FDECEE;
}

/* Between the two. Some outcomes are neither: a save that went through but
   wants a second look, and a refusal that is not an error on anyone's part.
   Both used to come out as a green tick, which said the opposite. */
.jt-toast--warning {
	border-left-color: #E0900A;
}
.jt-toast--warning .jt-toast__icon {
	color: #E0900A;
	background: #FFF6E5;
}

.jt-toast__icon {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	margin-top: 1px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
}

.jt-toast__message {
	flex: 1 1 auto;
	line-height: 1.45;
	padding-top: 3px;
}
.jt-toast__message br {
	content: "";
	display: block;
	margin-top: 2px;
}

.jt-toast__close {
	flex-shrink: 0;
	border: none;
	background: transparent;
	font-size: 20px;
	line-height: 1;
	color: #b5b5c3;
	cursor: pointer;
	padding: 0 2px;
}
.jt-toast__close:hover {
	color: #7e8299;
}

@media (max-width: 576px) {
	.jt-toast-container {
		left: 16px;
		right: 16px;
		bottom: 16px;
		max-width: none;
	}
}

/* ---- Modal alert (replaces window.alert()); see
   assets/js/custom/jt-modal-alert.js for the trigger. */
.jt-alert-modal__icon {
	width: 64px;
	height: 64px;
	margin: 0 auto 1rem;
	border-radius: 50%;
	background: #FFF4DE;
	color: #FFA800;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.75rem;
}

.jt-alert-modal__message {
	font-size: 1.05rem;
	color: #3f4254;
	padding: 0 1rem;
	white-space: pre-line;
	text-align: left;
}

/* ================================================================
   PART 2 -- Dashboard tiles, buttons, badges: rebuilt flat.
   ================================================================
   This section originally added gradients, glow shadows and motion
   (glass tiles, a shifting gradient button, glowing focus rings,
   floating orbs). Reviewed against the same real reference the auth
   pages were rebuilt against (see PART 3) and it was the same wrong
   instinct: TheRegister's own stat cards are plain white, bordered,
   with a small colored icon and a bold value -- never a colored
   gradient tile. Its buttons are a flat solid fill, no glow, no lift.
   Rebuilt to match that discipline. Same class names as before
   (.jt-tile, .jt-tile--purple, etc) so admin/index.php and
   haulage_dashboard.php didn't need to change at all -- only what
   these classes render as changed.
   ================================================================ */

:root {
	--jt-radius-sm: 6px;
	--jt-radius-md: 8px;
}

/* ---- Buttons: flat solid fill, small radius, no gradient/glow/lift. */
.btn-primary,
.btn.btn-primary {
	background: #29156e;
	border: none;
	border-radius: var(--jt-radius-sm);
	transition: background-color 0.12s ease;
}
.btn-primary:hover,
.btn-primary:focus,
.btn.btn-primary:hover,
.btn.btn-primary:focus {
	background: #1f0f57;
}
.btn-primary:not(:disabled):not(.disabled):active,
.btn.btn-primary:not(:disabled):not(.disabled):active {
	background: #170b40;
}

/* ================================================================
   Dashboard stat cards -- replaces the flat bg-primary/bg-dark/
   bg-success solid-color tile grid (Super Admin Module on
   admin/index.php, the equivalent grid on haulage_dashboard.php).
   White card, thin border, small icon in the variant's color, bold
   value -- the same shape as every other stat card in this app
   (.jt-stat-pill), just for a clickable link instead of a plain figure.
   ================================================================ */
.jt-tile-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1rem;
}
.jt-tile {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.25rem 1.5rem;
	background: #ffffff;
	border: 1px solid #E4E6EF;
	border-radius: var(--jt-radius-md);
	text-decoration: none;
	transition: border-color 0.12s ease;
}
.jt-tile:hover {
	text-decoration: none;
}
.jt-tile__icon {
	font-size: 1.4rem;
	line-height: 1;
}
/* Bootstrap's .text-white utility is itself !important -- these need
   to be at least as specific to actually win and show the variant
   color instead of white-on-white. */
.jt-tile__icon i {
	color: inherit !important;
}
.jt-tile__label {
	font-size: 0.8rem;
	font-weight: 600;
	color: #7e8299;
}
.jt-tile__value {
	font-size: 1.6rem;
	font-weight: 800;
	color: #1e1e2d;
	line-height: 1.2;
}
.jt-tile__value-unit {
	font-size: 0.8rem;
	font-weight: 600;
	color: #7e8299;
	margin-left: 0.35rem;
}

.jt-tile--purple { color: #29156e; }
.jt-tile--purple:hover { border-color: #29156e; }
.jt-tile--blue   { color: #2563eb; }
.jt-tile--blue:hover   { border-color: #2563eb; }
.jt-tile--teal   { color: #16a34a; }
.jt-tile--teal:hover   { border-color: #16a34a; }
.jt-tile--orange { color: #d97706; }
.jt-tile--orange:hover { border-color: #d97706; }
.jt-tile--pink   { color: #db2777; }
.jt-tile--pink:hover   { border-color: #db2777; }
.jt-tile--slate  { color: #475569; }
.jt-tile--slate:hover  { border-color: #475569; }

/* ---- Badges/labels: flat soft-tint pills (no gradient), for the
   status badges already used throughout list views. Opt-in
   (.jt-badge-glow) rather than overriding .label-* globally -- those
   classes carry real semantic meaning across many already-tested
   pages and a blanket override risks an unreviewed regression
   somewhere this pass didn't look. */
.jt-badge-glow {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.25rem 0.7rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
}
.jt-badge-glow--success { background: #F0FDF4; color: #16A34A; border: 1px solid #86EFAC; }
.jt-badge-glow--warning { background: #FFFBEB; color: #D97706; border: 1px solid #FCD34D; }
.jt-badge-glow--danger  { background: #FEF2F2; color: #DC2626; border: 1px solid #FCA5A5; }
.jt-badge-glow--info    { background: #EFF6FF; color: #2563EB; border: 1px solid #BFDBFE; }
.jt-badge-glow--purple  { background: #F5F3FC; color: #29156e; border: 1px solid #C9BFEA; }

/* ---- Avatar-initial circles (DataTables "symbol" widgets, e.g.
   admin/user.php's user list): flat near-black, matching this app's
   sidebar tone, not a gradient. */
.symbol.symbol-circle .symbol-label,
.symbol-40.symbol-circle {
	background: #1a1726 !important;
	color: #ffffff !important;
}

/* ================================================================
   Tables: subtle hover highlight + refined header, applied globally
   -- every list page in the app uses the same `.table` base classes,
   so this reaches all of them with no per-page changes.
   ================================================================ */
table.table thead th {
	border-bottom-width: 1px !important;
	color: #7e8299;
	font-size: 0.78rem;
	letter-spacing: 0.03em;
}
table.table tbody tr {
	transition: background-color 0.12s ease;
}
table.table tbody tr:hover {
	background-color: #F8F7FC;
}


/* ================================================================
   PART 3 -- Auth pages, rebuilt from scratch a second time.
   ================================================================
   The first version of this section (gradient mesh background,
   floating glow orbs, glassmorphic card) missed the mark -- reviewed
   against a real reference the user pointed to (their own product,
   TheRegister, a Next.js app) and rebuilt to actually match its
   design language instead: plain white page, one bordered white card
   with a restrained shadow, small border radii (6-8px, not 16-24px),
   flat solid colors with soft-tint backgrounds for status/badges,
   NO gradients anywhere, NO glow shadows, NO decorative motion. This
   is the same restraint shadcn/ui and most serious SaaS products
   apply -- "impressive" here means precise and considered, not
   visually loud. Kept JobTracker's own purple as the accent (not
   TheRegister's red -- the pattern is what's being copied, not their
   brand color), and kept the earlier Part 2 gradient/tile treatment
   fully separate and untouched -- this only affects auth pages
   (login.php, signup.php, recoverpw.php, set_password.php,
   signup_pending.php), not the rest of the app.
   ================================================================ */
:root {
	--jt-auth-page-bg: #FFFFFF;
	--jt-auth-card-bg: #FFFFFF;
	--jt-auth-border: #E4E4E7;
	--jt-auth-border-light: #F0F0F0;
	--jt-auth-text: #111111;
	--jt-auth-text-sec: #52525B;
	--jt-auth-text-mut: #71717A;
	--jt-auth-accent: #29156e;
	--jt-auth-accent-hover: #1f0f57;
	--jt-auth-accent-bg: #F5F3FC;
	--jt-auth-accent-bdr: #C9BFEA;
	--jt-auth-radius-sm: 6px;
	--jt-auth-radius-md: 8px;
}

.jt-auth-page {
	min-height: 100vh;
	width: 100%;
	display: flex;
	flex-direction: column;
	background: var(--jt-auth-page-bg);
}
.jt-auth-page__topbar {
	padding: 2rem 2.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.jt-auth-page__brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}
.jt-auth-page__brand img {
	height: 32px;
	width: auto;
}
.jt-auth-page__back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-left: auto;
	color: var(--jt-auth-text-sec);
	font-size: 0.8125rem;
	text-decoration: none;
	background: none;
	border: none;
}
.jt-auth-page__back:hover {
	color: var(--jt-auth-text);
	text-decoration: none;
}
.jt-auth-page__body {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}
.jt-auth-page__footer {
	padding: 1rem 2.5rem;
	border-top: 1px solid var(--jt-auth-border);
	text-align: center;
}
.jt-auth-page__footer p {
	font-size: 0.75rem;
	color: var(--jt-auth-text-mut);
	margin: 0;
}

.jt-auth-card {
	width: 100%;
	max-width: 440px;
	background: var(--jt-auth-card-bg);
	border: 1px solid var(--jt-auth-border);
	border-radius: var(--jt-auth-radius-md);
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
	padding: 2rem 2.25rem;
}
.jt-auth-card__heading {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--jt-auth-text);
	margin-bottom: 0.4rem;
}
.jt-auth-card__subheading {
	font-size: 0.8125rem;
	color: var(--jt-auth-text-sec);
	line-height: 1.5;
	margin-bottom: 1.5rem;
}

.jt-auth-field {
	margin-bottom: 1rem;
}
.jt-auth-field label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--jt-auth-text);
	margin-bottom: 0.4rem;
}
.jt-auth-input-wrap {
	position: relative;
}
.jt-auth-input-wrap .jt-auth-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--jt-auth-text-mut);
	font-size: 0.95rem;
	pointer-events: none;
}
.jt-auth-input-wrap input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6rem 0.75rem 0.6rem 2.25rem;
	border-radius: var(--jt-auth-radius-sm);
	border: 1px solid var(--jt-auth-border);
	background: var(--jt-auth-card-bg);
	font-size: 0.875rem;
	color: var(--jt-auth-text);
	transition: border-color 0.12s ease;
}
.jt-auth-input-wrap input:focus {
	outline: none;
	border-color: var(--jt-auth-accent);
}
.jt-auth-input-wrap .jt-auth-toggle-pw {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	border: none;
	background: transparent;
	color: var(--jt-auth-text-mut);
	font-size: 0.75rem;
	font-weight: 500;
	padding: 0.35rem 0.55rem;
	cursor: pointer;
	border-radius: 4px;
}
.jt-auth-input-wrap .jt-auth-toggle-pw:hover {
	color: var(--jt-auth-accent);
}
.jt-auth-input-wrap.is-invalid input {
	border-color: #F64E60;
}
.jt-auth-field__hint {
	margin-top: 0.4rem;
	font-size: 0.75rem;
	color: var(--jt-auth-text-mut);
}
.jt-auth-field__error {
	margin-top: 0.4rem;
	font-size: 0.75rem;
	color: #F64E60;
	display: none;
}
.jt-auth-field--invalid .jt-auth-field__error {
	display: block;
}
.jt-auth-field--invalid .jt-auth-field__hint {
	display: none;
}

.jt-auth-banner {
	margin-bottom: 1.25rem;
	padding: 0.75rem 1rem;
	border-radius: var(--jt-auth-radius-sm);
	font-size: 0.8125rem;
	line-height: 1.5;
}
.jt-auth-banner--success {
	background: #E8FFF3;
	color: #0F9D58;
	border: 1px solid #C3F3DB;
}
.jt-auth-banner--danger {
	background: #FFF5F8;
	color: #F64E60;
	border: 1px solid #FFE2E5;
}
.jt-auth-banner--warning {
	background: #FFF8DD;
	color: #B7791F;
	border: 1px solid #FFEEBA;
}

.jt-auth-row-between {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1rem;
}
.jt-auth-link {
	color: var(--jt-auth-accent);
	font-weight: 600;
	font-size: 0.8125rem;
	text-decoration: none;
}
.jt-auth-link:hover {
	color: var(--jt-auth-accent-hover);
	text-decoration: underline;
}

.jt-auth-submit {
	width: 100%;
	padding: 0.65rem 1rem;
	border: none;
	border-radius: var(--jt-auth-radius-sm);
	background: var(--jt-auth-accent);
	color: #ffffff;
	font-weight: 500;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background-color 0.12s ease;
}
.jt-auth-submit:hover {
	background: var(--jt-auth-accent-hover);
}
.jt-auth-submit:disabled {
	background: #D4D4D8;
	color: #71717A;
	cursor: not-allowed;
}

.jt-auth-footer {
	text-align: center;
	margin-top: 1.25rem;
	font-size: 0.8125rem;
	color: var(--jt-auth-text-sec);
}
.jt-auth-note {
	text-align: center;
	font-size: 0.75rem;
	color: var(--jt-auth-text-mut);
	margin-top: 0.85rem;
	line-height: 1.5;
}

/* Status card variants (verify/pending/error states on
   signup_pending.php) -- soft-tint background + matching border,
   same pattern as TheRegister's Badge component's color map. */
.jt-auth-status-icon {
	width: 56px;
	height: 56px;
	margin: 0 auto 1.1rem;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
}
.jt-auth-status-icon--info    { background: #EFF6FF; color: #2563EB; }
.jt-auth-status-icon--success { background: #F0FDF4; color: #16A34A; }
.jt-auth-status-icon--warning { background: #FFFBEB; color: #D97706; }

/* ================================================================
   PART 4 -- Auth split-screen: form on the left, a black branded
   visual panel on the right. Direct feedback: bring back the
   split-screen structure (not the old purple-gradient/cartoon-
   illustration version), on login.php/signup.php/recoverpw.php only
   -- .jt-auth-page (no modifier) stays single-column, still used by
   set_password.php and signup_pending.php, which don't need the
   marketing panel repeated mid-flow.
   ================================================================ */
.jt-auth-page--split {
	flex-direction: row;
	align-items: stretch;
}
.jt-auth-page--split .jt-auth-page__col {
	flex: 0 0 60%;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.jt-auth-page--split .jt-auth-page__body {
	flex: 1;
}

.jt-auth-visual {
	flex: 0 0 40%;
	min-width: 0;
	position: relative;
	overflow: hidden;
	background: #0F0F0F;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem;
}
.jt-auth-visual__pattern {
	position: absolute;
	inset: 0;
	background-image: url("../../media/svg/illustrations/logistics-doodle-pattern.svg");
	background-repeat: repeat;
	background-size: 340px 340px;
	opacity: 0.06;
	filter: invert(1);
	pointer-events: none;
}
.jt-auth-visual__content {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 380px;
}
.jt-auth-visual__icon {
	font-size: 3rem;
	color: #ffffff;
	margin-bottom: 1.5rem;
}
.jt-auth-visual__title {
	font-size: 1.75rem;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: 1rem;
}
.jt-auth-visual__title span {
	font-weight: 400;
	color: rgba(255, 255, 255, 0.55);
}
.jt-auth-visual__title-logo {
	height: 1.7em;
	width: auto;
	vertical-align: middle;
	border-radius: 5px;
	margin-left: 0.4em;
	position: relative;
	top: -0.05em;
}
.jt-auth-visual__tagline {
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 991px) {
	.jt-auth-page--split {
		flex-direction: column;
	}
	.jt-auth-visual {
		display: none;
	}
}

/* ============================================================
   Field hints (server/field_hint.php)
   ============================================================
   The small "?" beside a label, and the panel it opens. Its own tooltip
   theme on purpose: these carry a sentence, while the tooltips on table-row
   icon buttons carry one word, and widening those would be wrong. */

.jt-hint {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	margin-left: 5px;
	border-radius: 50%;
	background: #E7E9EE;
	color: #6B7280;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
	cursor: help;
	vertical-align: middle;
	/* A label is often bold; the mark must not inherit that and read as
	   part of the field's name. */
	font-weight: 700 !important;
	transition: background-color .15s ease, color .15s ease;
}
.jt-hint:hover,
.jt-hint:focus {
	background: #F26A1B;
	color: #fff;
	outline: none;
}
.jt-hint:focus-visible {
	box-shadow: 0 0 0 3px rgba(242, 106, 27, .25);
}

.tooltip.tooltip-hint {
	opacity: 1;
}
.tooltip.tooltip-hint .tooltip-inner {
	max-width: 290px;
	padding: 11px 13px;
	background: #14161A;
	color: #F6F7F9;
	/* Left, not centred: centred text is fine for one word and unreadable
	   for a sentence. */
	text-align: left;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.55;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(20, 22, 26, .22);
}
.tooltip.tooltip-hint.bs-tooltip-top .arrow::before,
.tooltip.tooltip-hint.bs-tooltip-auto[x-placement^="top"] .arrow::before {
	border-top-color: #14161A;
}
.tooltip.tooltip-hint.bs-tooltip-bottom .arrow::before,
.tooltip.tooltip-hint.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
	border-bottom-color: #14161A;
}
.tooltip.tooltip-hint.bs-tooltip-left .arrow::before,
.tooltip.tooltip-hint.bs-tooltip-auto[x-placement^="left"] .arrow::before {
	border-left-color: #14161A;
}
.tooltip.tooltip-hint.bs-tooltip-right .arrow::before,
.tooltip.tooltip-hint.bs-tooltip-auto[x-placement^="right"] .arrow::before {
	border-right-color: #14161A;
}