/* CSS CUSTOM PROPERTIES */
:root {
    --metal-950:  #0e0f10;
    --metal-900:  #151719;
    --metal-800:  #1c1f22;
    --metal-700:  #252a2d;
    --metal-600:  #2f3538;
    --metal-500:  #3d4346;
    --metal-400:  #545d62;
    --metal-300:  #7a8a92;
    --chrome-hi:  #c8d8e0;
    --chrome-mid: #8fa4ae;
    --chrome-lo:  #4a5a62;
    --accent:     #5b9ec9;
    --accent-dim: #3a6f92;
    --text-primary:   #dce8ed;
    --text-secondary: #8fa4ae;
    --text-muted:     #55676f;
    --font-display: 'Rajdhani', sans-serif;
    --font-mono:    'Share Tech Mono', monospace;
    --shadow-inset: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.4);
    --shadow-card:  0 8px 32px rgba(0,0,0,.55), 0 2px 8px rgba(0,0,0,.4);
    --border-subtle: 1px solid rgba(255,255,255,.06);
    --border-chrome: 1px solid rgba(200,216,224,.12);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font-display);
    background-color: var(--metal-950);
    background-image:
        repeating-linear-gradient(90deg, transparent, transparent 2px,
            rgba(255,255,255,.012) 2px, rgba(255,255,255,.012) 4px),
        linear-gradient(175deg, #111416 0%, #0b0d0e 60%, #141618 100%);
    color: var(--text-primary);
    min-height: 100vh;
}
body::before {
    content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    opacity: .025;
}

/* ── Layout ── */
.page-wrapper { padding: 15px 28px 75px; position: relative; z-index: 1; max-width: 75%; margin: 0 auto; }
.custom-width  { max-width: 85%; margin: 0 auto; }

/* ── Page header ── */
.page-header { display:flex; align-items:center; gap:14px; margin-bottom:12px; padding-bottom:12px; border-bottom:var(--border-chrome); }
.page-header .logo-mark { width:65px; height:48px; border-radius:10px; background:linear-gradient(135deg,var(--metal-600),var(--metal-700)); border:var(--border-chrome); display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:var(--shadow-inset); flex-shrink:0; }
.page-header h1 { font-family:var(--font-display); font-size:1.9rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--chrome-hi); line-height:1.1; }
.page-header h1 span { display:block; font-size:.75rem; font-weight:400; letter-spacing:.14em; color:var(--text-muted); font-family:var(--font-mono); }
.page-header .social-links { margin-left:auto; display:flex; gap:12px; align-items:center; }
.page-header .social-links a { color:var(--text-muted); font-size:18px; text-decoration:none; transition:color .15s; }
.page-header .social-links a:hover { color:var(--chrome-hi); }

/* ── Navbar overrides ── */
.navbar.bg-dark { background-color: var(--metal-900) !important; border-bottom: var(--border-chrome); }
.navbar .nav-link { font-family: var(--font-display); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary) !important; transition: color .15s; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: var(--chrome-hi) !important; }

/* ── Section label ── */
.section-label { font-family:var(--font-mono); font-size:.65rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-muted); margin-bottom:10px; display:flex; align-items:center; gap:10px; }
.section-label::after { content:''; flex:1; height:1px; background:linear-gradient(90deg,var(--chrome-lo),transparent); }

/* ── Metal card ── */
.metal-card { background:linear-gradient(160deg,var(--metal-800) 0%,var(--metal-900) 100%); border:var(--border-chrome); border-radius:12px; box-shadow:var(--shadow-card); overflow:hidden; position:relative; margin-bottom:24px; animation:cardReveal .5s ease both; }
.metal-card + .metal-card { animation-delay:.1s; }
@keyframes cardReveal { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }
.metal-card::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,.10) 50%,transparent 95%); }

/* ── Bootstrap .card → metallic theme ── */
.card {
    background: linear-gradient(160deg, var(--metal-800) 0%, var(--metal-900) 100%) !important;
    border: var(--border-chrome) !important;
    border-radius: 10px !important;
    box-shadow: var(--shadow-card) !important;
    color: var(--text-primary) !important;
    overflow: hidden;
    position: relative;
}
.card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(255,255,255,.10) 50%, transparent 95%);
    pointer-events: none;
}
.card-header {
    background: linear-gradient(90deg, var(--metal-700), var(--metal-800)) !important;
    border-bottom: var(--border-chrome) !important;
    color: var(--chrome-hi) !important;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: .04em;
    padding: 10px 16px;
}
.card-header h5, .card-header .card-title { color: var(--chrome-hi) !important; font-family: var(--font-display); }
.card-body { background: transparent !important; color: var(--text-primary) !important; }
.card-footer { background: var(--metal-800) !important; border-top: var(--border-chrome) !important; }
.text-white, .text-light { color: var(--text-primary) !important; }

/* ── Card header (metal-card variant) ── */
.metal-card-header { display:flex; align-items:center; gap:10px; padding:12px 18px; background:linear-gradient(90deg,var(--metal-700),var(--metal-800)); border-bottom:var(--border-chrome); box-shadow:var(--shadow-inset); }
.metal-card-header .badge-game { font-family:var(--font-mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:4px; background:linear-gradient(135deg,var(--accent-dim),var(--accent)); color:#fff; }
.metal-card-header .card-title { font-family:var(--font-display); font-size:1rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--chrome-hi); }
.metal-card-header .card-icon { color:var(--accent); font-size:14px; }
.metal-card-header .view-all { margin-left:auto; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.12em; color:var(--text-muted); text-decoration:none; transition:color .15s; }
.metal-card-header .view-all:hover { color:var(--accent); }

/* ── Cargo banner ── */
.cargo-banner { position:relative; height:56px; overflow:hidden; display:flex; align-items:center; }
.cargo-banner-content { position:relative; z-index:2; padding:0 18px; display:flex; align-items:center; gap:14px; width:100%; }
.cargo-label { font-family:var(--font-mono); font-size:.8rem; color:var(--chrome-hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cargo-label .sep { color:var(--chrome-lo); margin:0 6px; }
.mass-pill { margin-left:auto; flex-shrink:0; font-family:var(--font-mono); font-size:.72rem; padding:3px 10px; border-radius:20px; background:rgba(91,158,201,.12); border:1px solid rgba(255,255,255,.75); color:#fff; }

/* ── Data grid ── */
.data-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.data-cell { padding:14px 18px; border-right:var(--border-subtle); border-bottom:var(--border-subtle); transition:background .2s; }
.data-cell:last-child { border-right:none; }
.data-cell:hover { background:rgba(255,255,255,.025); }
.data-cell .label { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin-bottom:5px; }
.data-cell .value { font-family:var(--font-display); font-size:.95rem; font-weight:600; color:var(--text-primary); }
.data-cell .value.accent { color:var(--accent); }

/* PROFILE CARD */
.profile-card {
    background: linear-gradient(160deg, var(--metal-800) 0%, var(--metal-900) 100%);
    border: var(--border-chrome);
    border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 18px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.profile-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(255,255,255,.10) 50%, transparent 95%);
}
.profile-main {
	width: 85.5%;
}
.profile-left {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.profile-avatar {
    width: 200px;
    height: 275px;
    border-radius: 10px;
    border: var(--border-chrome);
    object-fit: cover;
    box-shadow: 0 4px 14px rgba(0,0,0,.55);
    flex-shrink: 0;
}
.profile-right {
    background: rgba(0,0,0,.2);
    border: var(--border-subtle);
    border-radius: 8px;
    padding: 10px 14px;
    min-width: 210px;
    flex: 1;
}
.profile-right h5 {
    font-family: var(--font-display);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 6px;
}
.in-progress h5 { margin: 0; }
.current-job {
    font-family: var(--font-display);
    font-size: .82rem;
    color: var(--text-secondary);
    display: block;
    line-height: 1.6;
}
.current-job b { color: var(--chrome-hi); }

/* ── Level badge ── */
.level-badge {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 4px;
    margin-right: 6px;
    margin-bottom: 4px;
    line-height: 1.4;
}
/* Override Bootstrap colour utilities used for level-badge */
.level-badge.bg-success { background: #27ae60 !important; color: #fff !important; }
.level-badge.bg-info    { background: var(--accent) !important; color: #fff !important; }
.level-badge.bg-warning { background: #e6a817 !important; color: #111 !important; }
.level-badge.bg-danger  { background: #c0392b !important; color: #fff !important; }
.level-badge.bg-primary { background: var(--accent-dim) !important; color: #fff !important; }
.level-badge.bg-dblue-status { background: #3E4852 !important; color: #fff !important; }

/* ── Achievement badges ── */
.badge.bg-success { background-color: #27ae60 !important; }
.badge.bg-primary { background-color: var(--accent-dim) !important; }

/* ── Progress bar theming ── */
.progress {
    background-color: var(--metal-700) !important;
    border: var(--border-subtle);
    border-radius: 4px;
    overflow: hidden;
}
.progress-bar         { transition: width .6s ease; }
.progress-bar.bg-dblue { background: linear-gradient(to right, #212529, #3E4852) !important; }
.progress-bar.with-line { position: relative; }
.bg-dblue       { background: linear-gradient(to right, #212529, #3E4852) !important; }
.bg-dblue-status{ background: #3E4852 !important; }

/* Section dividers (the h4 hr rows) */
.d-flex.align-items-center hr { border-color: var(--chrome-lo); opacity: .4; }
.d-flex.align-items-center span h4 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--chrome-hi);
    margin: 0;
    white-space: nowrap;
}

/* STATS BOXES  (col-5-5 / col-md-3-5 / col-md-2-5) */
.stats-box {
    border-radius: 8px;
    padding: 10px 12px;
    margin: 4px;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--chrome-hi);
    min-width: 90px;
    border: var(--border-chrome);
    box-shadow: var(--shadow-inset);
    flex: 1;
}
.stats-box small {
    display: block;
    font-family: var(--font-mono);
    font-size: .55rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 3px;
    font-weight: 400;
}
.stats-box.green  { background: rgba(39,174,96,.15);  border-color: rgba(39,174,96,.25); }
.stats-box.blue   { background: rgba(91,158,201,.15); border-color: rgba(91,158,201,.25); }
.stats-box.yellow { background: rgba(230,168,23,.15); border-color: rgba(230,168,23,.25); }
.stats-box.red    { background: rgba(192,57,43,.15);  border-color: rgba(192,57,43,.25); }

/* Bootstrap-style col helpers for custom widths */
.col-5-5, .col-md-3-5, .col-md-2-5 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

/* ── Truck image ── */
.truck-image {
    max-width: 100%;
    border-radius: 8px;
    border: var(--border-chrome);
    cursor: pointer;
    transition: opacity .2s, box-shadow .2s;
    opacity: .9;
}
.truck-image:hover { opacity: 1; box-shadow: 0 0 14px rgba(91,158,201,.35); }

/* ── Progress bar column padding ── */
.pad-prog { padding-left: 10px; }

/* TABLE CUSTOM CLASSES  (used inside modals + home.php) */
.bg-custom-dark   { background-color: var(--metal-800) !important; }
.bg-custom-cat    { background-color: var(--metal-700) !important; color: var(--chrome-hi) !important; font-family: var(--font-mono); font-size: .65rem; letter-spacing: .12em; }
.bg-custom-head   { background-color: var(--metal-700) !important; color: var(--chrome-mid) !important; font-family: var(--font-mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.bg-custom-data   { background-color: var(--metal-800) !important; color: var(--text-primary) !important; font-family: var(--font-display); font-size: .88rem; border-bottom: 1px solid rgba(255,255,255,.05) !important; }

/* Striped rows inside dark tables */
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: rgba(255,255,255,.03); }
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: rgba(91,158,201,.07); }
.no-hover:hover > * { --bs-table-accent-bg: transparent !important; }

/* MODALS */
.modal-content,
.bg-custom-modal-dark {
    background: linear-gradient(160deg, var(--metal-800) 0%, var(--metal-900) 100%) !important;
    border: var(--border-chrome) !important;
    color: var(--text-primary) !important;
}
.modal-wide       { max-width: 860px !important; }
.modal-wide-trucks{ max-width: 100% !important; }
.mod-header {
    background: linear-gradient(90deg, var(--metal-700), var(--metal-800));
    border-bottom: var(--border-chrome);
    padding: 10px 16px;
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--chrome-hi);
    text-align: center;
}
#borderz-bottom { border-radius: 4px; margin-bottom: 8px; }

/* JOBS TABLE  (monthly jobs section) */
.table-responsive table {
    width: 100%;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: .88rem;
}
.table-responsive table thead th,
.table-responsive table th {
    background: var(--metal-700);
    color: var(--chrome-mid);
    font-family: var(--font-mono);
    font-size: .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 8px 10px;
    border-bottom: var(--border-chrome);
    white-space: nowrap;
}
.table-responsive table td {
    background: var(--metal-800);
    border-bottom: 1px solid rgba(255,255,255,.04);
    padding: 6px 10px;
    vertical-align: middle;
    color: var(--text-primary);
}
.table-responsive table tr[style*="#333333"] td,
.table-responsive table tr[style*="background-color: #333333"] td {
    background: var(--metal-700) !important;
    color: var(--chrome-hi) !important;
    font-family: var(--font-mono);
    font-size: .65rem;
    letter-spacing: .06em;
}
.table-responsive table tr[style*="#252525"] td,
.table-responsive table tr[style*="#303030"] td {
    background: var(--metal-800) !important;
}
.open-modal { cursor: pointer; }
.open-modal:hover > td { background: rgba(91,158,201,.07) !important; }

/* FORUM POST CARD (top of home.php) */
.card .card-text { color: var(--text-secondary); font-size: .9rem; line-height: 1.7; }
.alert.alert-info {
    background: rgba(91,158,201,.1);
    border: 1px solid rgba(91,158,201,.25);
    color: var(--accent);
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .05em;
}

/* NMS CINEMATIC CARD */
.nlc-strip { display:flex; align-items:stretch; border-bottom:var(--border-subtle); min-height:54px; }
.nlc-day { width:60px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; justify-content:center; border-right:var(--border-subtle); background:rgba(0,0,0,.25); }
.nlc-day-n { font-family:var(--font-display); font-size:1.2rem; font-weight:700; color:var(--text-primary); line-height:1; }
.nlc-day-l { font-family:var(--font-mono); font-size:.60rem; letter-spacing:.15em; color:var(--text-muted); margin-top:2px; margin-left: 3px; }
.nlc-mid { flex:1; padding:9px 14px; display:flex; flex-direction:column; justify-content:center; }
.nlc-sys { font-family:var(--font-display); font-size:.95rem; font-weight:700; letter-spacing:.06em; color:var(--text-primary); text-transform:uppercase; display:flex; align-items:center; gap:6px; }
.nlc-dot { display:inline-block; width:7px; height:7px; border-radius:50%; flex-shrink:0; background:#38bdf8; }
.nlc-sub { font-family:var(--font-mono); font-size:.60rem; color:var(--text-muted); letter-spacing:.07em; margin-top:3px; text-transform:uppercase; }
.nlc-badges { display:flex; align-items:center; gap:3px; padding:0 14px; flex-shrink:0; border-left:var(--border-subtle); }
.nlc-ab { font-size:.65rem; padding:2px 5px; border:1px solid rgba(255,255,255,.07); color:rgba(255,255,255,.18); border-radius:2px; line-height:1; }
.nlc-ab.on { color:var(--accent); border-color:var(--accent-dim); }
.nlc-edate { font-family:var(--font-mono); font-size:.5rem; color:var(--text-muted); letter-spacing:.07em; margin-left:6px; white-space:nowrap; }
.nlc-body { display:grid; grid-template-columns:1fr 1fr; border-bottom:var(--border-subtle); }
.nlc-bleft { padding:12px 16px; border-right:var(--border-subtle); }
.nlc-bright { padding:12px 16px; }
.nlc-col-hdr { font-family:var(--font-mono); font-size:.70rem; letter-spacing:.18em; color:var(--text-muted); text-transform:uppercase; margin-bottom:9px; }
.nlc-frow { display:flex; gap:8px; margin-bottom:7px; align-items:baseline; }
.nlc-flbl { font-family:var(--font-mono); font-size:.65rem; letter-spacing:.1em; color:var(--text-muted); text-transform:uppercase; min-width:88px; flex-shrink:0; }
.nlc-fval { font-family:var(--font-display); font-size:.65rem; font-weight:500; color:var(--text-primary); display:flex; align-items:center; gap:6px; }
.nlc-pill-lbl { font-family:var(--font-mono); font-size:.65rem; letter-spacing:.1em; color:var(--text-muted); text-transform:uppercase; margin-bottom:4px; }
.nlc-pills { display:flex; flex-wrap:wrap; gap:3px; margin-bottom:4px; }
.nlc-pill { border:1px solid rgba(255,255,255,.1); padding:2px 7px; font-family:var(--font-mono); font-size:.53rem; color:var(--text-secondary); letter-spacing:.04em; text-transform:uppercase; }
.nlc-pill.moon { border-color:rgba(91,158,201,.3); color:var(--accent); }
.nlc-pill.res  { border-color:rgba(255,255,255,.07); color:var(--text-muted); }
.nlc-stats { display:flex; flex-wrap:wrap; }
.nlc-stat { flex:1; min-width:70px; padding:7px 12px; border-right:var(--border-subtle); font-family:var(--font-mono); font-size:.65rem; letter-spacing:.1em; color:var(--text-muted); text-transform:uppercase; }
.nlc-stat:last-child { border-right:none; }
.nlc-stat span { font-family:var(--font-display); font-size:.95rem; font-weight:600; color:var(--accent); display:block; margin-bottom:1px; }
.nlc-empty { font-family:var(--font-mono); font-size:.5rem; color:var(--text-muted); letter-spacing:.08em; }
.state-empty { padding:32px 18px; text-align:center; color:var(--text-muted); font-family:var(--font-mono); font-size:.8rem; letter-spacing:.1em; }

/* PLATFORM ICONS */
.Xbox, .PC, .Switch, .Playstation {
    background-color: white;
    width: 16px;
    height: 16px;
    -webkit-mask-size: 10px!important;
    mask-size: 10px!important;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
}
.Xbox        { -webkit-mask: url(../images/xbox.svg)        no-repeat center; mask: url(../images/xbox.svg)        no-repeat center; }
.PC          { -webkit-mask: url(../images/pc.svg)          no-repeat center; mask: url(../images/pc.svg)          no-repeat center; }
.Switch      { -webkit-mask: url(../images/switch.svg)      no-repeat center; mask: url(../images/switch.svg)      no-repeat center; }
.Playstation { -webkit-mask: url(../images/playstation.svg) no-repeat center; mask: url(../images/playstation.svg) no-repeat center; }

/* RESOURCE COLOURS  (NMS pills) */
.Activated-Emeril,
.Activated-Indium,
.Activated-Quartzite  { color: #FFFFCE !important; }
.Ammonia              { color: #c5dfff !important; }
.Ancient-Bones        { color: #ffffff !important; }
.Basalt               { color: #c5dfff !important; }
.Cactus-Flesh         { color: #a3ff7b !important; }
.Cadmium              { color: #FFFFCE !important; }
.Cobalt               { color: #C5DFFF !important; }
.Copper               { color: #FFFFCE !important; }
.Crystallized-Helium  { color: #C5DFFF !important; }
.Dioxite              { color: #C5DFFF !important; }
.Emeril               { color: #ffffce !important; }
.Faecium              { color: #A3FF7B !important; }
.Frost-Crystal        { color: #A3FF7B !important; }
.Fungal-Mold          { color: #A3FF7B !important; }
.Gamma-Root           { color: #A3FF7B !important; }
.Gold                 { color: #DEB6FF !important; }
.Indium               { color: #FFFFCE !important; }
.Magnetised-Ferrite   { color: #FBF4EC !important; }
.Mordite              { color: #C5DFFF !important; }
.Paraffinium          { color: #C5DFFF !important; }
.Phosphorus           { color: #C5DFFF !important; }
.Pyrite               { color: #C5DFFF !important; }
.Quartzite            { color: #FFFFCE !important; }
.Rusted-Metal         { color: #DEB6FF !important; }
.Salt                 { color: #C5DFFF !important; }
.Salvageable-Scrap    { color: #ffffff !important; }
.Silver               { color: #DEB6FF !important; }
.Sodium               { color: #FFD667 !important; }
.Solanium             { color: #A3FF7B !important; }
.Star-Bulb            { color: #A3FF7B !important; }
.Sulphurine           { color: #C5DFFF !important; }
.Uranium              { color: #C5DFFF !important; }

/* SEASONAL / EVENT CARD */
.event-box.active {
    background-color: var(--metal-800);
    border: var(--border-chrome);
    border-radius: 10px;
    transform: translateY(-5px);
    box-shadow: var(--shadow-card);
}

/* ── Footer ── */
.site-footer {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    padding: 10px 24px;
    background: linear-gradient(90deg, var(--metal-900), var(--metal-800));
    border-top: var(--border-chrome);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}
.site-footer p {
    font-family: var(--font-mono);
    font-size: .65rem;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin: 0;
}

/* ── Misc legacy ── */
.ats-heading-footer-1, .ets-heading-footer-1 { display: none; }
.fa-truck { font-size: 15px; }

/* ── Responsive ── */
@media (max-width: 992px) {
    .page-wrapper, .custom-width { max-width: 100%; }
    .profile-left { flex-direction: column; }
    .profile-right { min-width: unset; width: 100%; }
}
@media (max-width: 640px) {
    .page-wrapper { padding: 16px 14px 56px; }
    .nlc-body { grid-template-columns: 1fr; }
    .nlc-bleft { border-right: none; border-bottom: var(--border-subtle); }
    .nlc-badges { display: none; }
    .page-header h1 { font-size: 1.3rem; }
    .stats-box { min-width: 70px; font-size: .85rem; }
}

/* ATS HOME – TWO-PANEL LAYOUT*/

/* Outer flex wrapper holding left-panel + right-panel */
.containerz {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    width: 100%;
}

/* ── Left driver panel ── */
.left-panel {
    width: 400px;
    flex-shrink: 0;
    background: linear-gradient(160deg, var(--metal-800) 0%, var(--metal-900) 100%);
    border: var(--border-chrome);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    position: relative;
}
.left-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(255,255,255,.10) 50%, transparent 95%);
}

.driver-details {
    display: block;
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--chrome-hi);
    background: linear-gradient(90deg, var(--metal-700), var(--metal-800));
    border-bottom: var(--border-chrome);
    padding: 8px 12px;
}

.panel-body.username {
    padding: 6px 12px 4px;
    border-bottom: var(--border-subtle);
}
.driver-name { margin: 0; }
.Dname {
    font-family: var(--font-display);
    font-size: .9rem;
    font-weight: 700;
    color: var(--chrome-hi);
    letter-spacing: .04em;
    margin: 0;
}

.driver-info {
    padding: 0px 2px;
}
.driver-info img {
    width: 100%;
    border-radius: 6px;
    border: var(--border-chrome);
    margin-bottom: 10px;
    object-fit: cover;
    opacity: .9;
}
.driver-info dl { margin: 0; }
.d-info {
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .06em;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 400;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}
.d-info .status,
.d-info .rating {
    font-family: var(--font-display);
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: none;
    letter-spacing: 0;
}

/* ── Training / skills section ── */
.training-policy {
    padding: 8px 10px;
    border-top: var(--border-subtle);
}

.training-row {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
}

.training-icons {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1;
}
.training-icons.ti-right {
    justify-content: flex-end;
}

.ti-image {
    width: 18px;
    height: 18px;
    object-fit: contain;
    opacity: .75;
    margin-right: 3px;
    flex-shrink: 0;
}

/* Active rank dot */
.training-icon {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    background: var(--accent);
    border: 1px solid var(--accent);
    box-shadow: 0 0 4px rgba(91,158,201,.45);
    display: inline-block;
    flex-shrink: 0;
}
/* Inactive / locked rank dot */
.training-icon.grey {
    background: var(--metal-600);
    border-color: var(--metal-500);
    box-shadow: none;
}

/* ── Truck image block ── */
.myinfo-truck {
    padding: 8px 10px 4px;
    border-top: var(--border-subtle);
}
.truck-image-wrapper { position: relative; }
.current_truck {
    font-family: var(--font-mono);
    font-size: .6rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 5px;
}
.current_truck strong { color: var(--chrome-hi); }
.myinfo-truck img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    border: var(--border-chrome);
    opacity: .92;
    transition: opacity .2s;
}
.myinfo-truck img:hover { opacity: 1; }

/* ── Embedded map block ── */
.myinfo-map {
    padding: 6px 10px 10px;
    border-top: var(--border-subtle);
}
.truck-info { padding-top: 5px; }
.online-map {
    width: 100%;
    height: 200px;
    border: var(--border-chrome);
    border-radius: 6px;
    display: block;
    background: var(--metal-900);
}

/* ── Right panel (jobs table area) ── */
.col-md-9-5 {
    flex: 1;
    min-width: 0;
}
.right-panel {
    background: linear-gradient(160deg, var(--metal-800) 0%, var(--metal-900) 100%);
    border: var(--border-chrome);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
    padding: 12px 14px 16px;
    position: relative;
}
.right-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 5%, rgba(255,255,255,.10) 50%, transparent 95%);
}

/* Month navigation buttons */
.right-panel .btn.btn-secondary {
    background: var(--metal-700);
    border: var(--border-chrome);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: .65rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 4px;
    transition: background .15s, color .15s;
    margin-right: 4px;
}
.right-panel .btn.btn-secondary:hover:not(:disabled) {
    background: var(--metal-600);
    color: var(--chrome-hi);
}
.right-panel .btn.btn-secondary:disabled {
    opacity: .4;
    cursor: default;
}

/* Jobs table inside right-panel */
.right-panel table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-family: var(--font-display);
    font-size: .88rem;
    color: var(--text-primary);
    margin-top: 10px;
}
.right-panel table thead th {
    background: var(--metal-700);
    color: var(--chrome-mid);
    font-family: var(--font-mono);
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 8px 10px;
    border-bottom: var(--border-chrome);
    text-align: center;
}
.right-panel table thead th[colspan] {
    font-family: var(--font-display);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .06em;
    color: var(--chrome-hi);
    text-align: center;
    background: var(--metal-700);
    border-bottom: var(--border-subtle);
}
.right-panel table td {
    background: var(--metal-800);
    border-bottom: 1px solid rgba(255,255,255,.04);
    padding: 6px 10px;
    vertical-align: middle;
}
/* Day divider rows */
.right-panel table tr[style*="#333333"] td {
    background: var(--metal-700) !important;
    color: var(--chrome-hi) !important;
    font-family: var(--font-mono);
    font-size: .65rem;
    letter-spacing: .06em;
    font-weight: 700;
}

/* Clickable job rows */
.open-modal-ats {
    cursor: pointer;
    transition: background .15s;
}
.open-modal-ats:hover > td {
    background: rgba(91,158,201,.07) !important;
}

/* ── Wider tooltip for hazard icons ── */
.wider-tooltip .tooltip-inner {
    max-width: 260px;
    text-align: left;
    font-family: var(--font-display);
    font-size: .8rem;
    background: var(--metal-700);
    border: var(--border-chrome);
    color: var(--text-primary);
    padding: 8px 12px;
    border-radius: 6px;
}
.wider-tooltip .tooltip-arrow::before {
    border-top-color: var(--metal-700);
}

/* ── Responsive adjustments ── */
@media (max-width: 900px) {
    .containerz { flex-direction: column; }
    .left-panel  { width: 100%; }
    .col-md-9-5  { width: 100%; }
    .online-map  { height: 220px; }
}