:root {
  --nl-bg: #f3f5f8;
  --nl-surface: #ffffff;
  --nl-text: #19212b;
  --nl-muted: #5d6875;
  --nl-border: #d6dce3;
  --nl-accent: #db1724;
  --nl-accent-hover: #b70f1c;
  --nl-page-art: url("../images/softlink-light-banner.png");
}

[data-theme="dark"] {
  --nl-bg: #0b0e12;
  --nl-surface: #171c23;
  --nl-text: #f4f6f8;
  --nl-muted: #aab4c0;
  --nl-border: #303945;
  --nl-accent: #f3313e;
  --nl-accent-hover: #ff5963;
  --nl-page-art: url("../images/softlink-dark-desktop.png");
}

html { min-height: 100%; font-size: 16px; }
body { min-height: 100vh; margin: 0; color: var(--nl-text); background: var(--nl-page-art) center / cover fixed no-repeat; transition: color .2s, background .2s; }
.navbar, .card { color: var(--nl-text); background-color: var(--nl-surface) !important; border-color: var(--nl-border) !important; }
.navbar-brand { color: var(--nl-text) !important; font-weight: 800; letter-spacing: .4px; }
.brand-wordmark { font-weight: 800; letter-spacing: .4px; white-space: nowrap; }
.brand-link { color: var(--nl-accent); }
.nav-link { color: var(--nl-muted) !important; }
.nav-link:hover { color: var(--nl-accent) !important; }
.form-control, .form-select { color: var(--nl-text); background: var(--nl-surface); border-color: var(--nl-border); }
.form-control:focus, .form-select:focus { color: var(--nl-text); background: var(--nl-surface); border-color: var(--nl-accent); box-shadow: 0 0 0 .2rem rgb(219 23 36 / 18%); }
.text-muted, .form-text { color: var(--nl-muted) !important; }
.btn-primary { border-color: var(--nl-accent); background: var(--nl-accent); }
.btn-primary:hover, .btn-primary:focus { border-color: var(--nl-accent-hover); background: var(--nl-accent-hover); }
.btn-outline-secondary { color: var(--nl-text); border-color: var(--nl-border); }
.btn-outline-secondary:hover { color: #fff; background: var(--nl-muted); }
.alert-info { color: var(--nl-text); background: color-mix(in srgb, var(--nl-surface) 80%, #76b8ee); border-color: color-mix(in srgb, var(--nl-border) 65%, #409ee8); }
.hero-panel { min-height: calc(100vh - 180px); }
.admin-card { max-width: 980px; margin: 2rem auto; padding: 2rem; border: 1px solid var(--nl-border); border-radius: 1rem; background: color-mix(in srgb, var(--nl-surface) 94%, transparent); box-shadow: 0 16px 40px rgb(0 0 0 / 20%); backdrop-filter: blur(10px); }
.touch-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.touch-action { min-height: 132px; display: flex; align-items: center; gap: 1rem; padding: 1.15rem; color: var(--nl-text); text-decoration: none; border: 1px solid var(--nl-border); border-radius: 1rem; background: color-mix(in srgb, var(--nl-surface) 92%, transparent); box-shadow: 0 8px 20px rgb(0 0 0 / 14%); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.touch-action:hover, .touch-action:focus-visible { color: var(--nl-text); border-color: var(--nl-accent); box-shadow: 0 12px 24px rgb(0 0 0 / 22%); transform: translateY(-2px); }
.touch-action:active { transform: translateY(2px) scale(.98); box-shadow: inset 0 2px 6px rgb(0 0 0 / 24%); }
.touch-action-icon { min-width: 62px; height: 62px; display: grid; place-items: center; padding: .35rem; color: #fff; background: var(--nl-accent); border-radius: .85rem; font-size: .78rem; font-weight: 800; letter-spacing: .05em; }
.touch-action strong, .touch-action small { display: block; }
.touch-action strong { font-size: 1.05rem; }
.touch-action small { margin-top: .3rem; color: var(--nl-muted); line-height: 1.25; }
.touch-action-primary { border-color: var(--nl-accent); }
.touch-compact { min-height: 42px; padding: .55rem .85rem; touch-action: manipulation; }
.tracking-console { min-height: calc(100vh - 155px); display: grid; grid-template-columns: 265px 1fr; overflow: hidden; margin: -1rem 0; color: var(--nl-text); background: var(--nl-surface); }
.tracking-sidebar { display: flex; flex-direction: column; color: #e9eff9; background: #07182f; }
.tracking-brand { padding: 1.4rem 1.25rem; color: #fff; font-weight: 800; font-size: 1.25rem; border-bottom: 1px solid rgb(255 255 255 / 12%); }
.tracking-brand span { display: block; margin-top: .18rem; color: #92a7c5; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; }
.tracking-nav { display: block; padding: .9rem 1.25rem; color: #c6d2e2; text-decoration: none; border-left: 3px solid transparent; }
.tracking-nav:hover, .tracking-nav.active { color: #fff; background: rgb(255 255 255 / 9%); border-left-color: var(--nl-accent); }
.tracking-unit-list { flex: 1; padding: 1.3rem .8rem; overflow: auto; }
.tracking-unit-list > p:first-child { margin: 0 .45rem .65rem; color: #90a3c1; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tracking-unit { width: 100%; display: flex; align-items: center; gap: .7rem; padding: .75rem; color: #eff4fb; text-align: left; background: transparent; border: 0; border-radius: .7rem; }
.tracking-unit:hover { background: rgb(255 255 255 / 9%); }.tracking-unit strong,.tracking-unit small { display:block; }.tracking-unit small { color:#94a7c4;font-size:.76rem; }.unit-status { width: 9px; height: 9px; border-radius: 50%; background: #7a8798; }.tracking-empty { color:#94a7c4!important; text-transform:none!important; letter-spacing:0!important; }
.tracking-main { min-width: 0; padding: 1.5rem; background: color-mix(in srgb, var(--nl-bg) 80%, transparent); }.tracking-topbar { display:flex; justify-content:space-between; align-items:flex-start; }.tracking-topbar h1 { margin:0; font-size:1.45rem; }.tracking-topbar p { margin:.2rem 0 1rem; color:var(--nl-muted); }.tracking-control { width:44px; height:44px; color:var(--nl-text); font-size:1.5rem; background:var(--nl-surface); border:1px solid var(--nl-border); border-radius:.8rem; }.tracking-stat-grid { display:grid; grid-template-columns:repeat(3, minmax(100px, 180px)); gap:.8rem; margin-bottom:1rem; }.tracking-stat-grid div { padding:.8rem 1rem; background:var(--nl-surface); border:1px solid var(--nl-border); border-radius:.75rem; }.tracking-stat-grid small,.tracking-stat-grid strong { display:block; }.tracking-stat-grid small { color:var(--nl-muted); }.tracking-stat-grid strong { margin-top:.15rem; font-size:1.35rem; }.tracking-map { position:relative; min-height:calc(100vh - 300px); overflow:hidden; background:#dfe8e5; border:1px solid var(--nl-border); border-radius:1rem; }.google-map { position:absolute; inset:0; z-index:2; }.map-placeholder { position:absolute; inset:0; z-index:1; }.map-placeholder iframe { width:100%; height:100%; border:0; }.map-status { position:absolute; left:50%; bottom:1.25rem; transform:translateX(-50%); display:flex; align-items:center; gap:.45rem; max-width:calc(100% - 2rem); padding:.7rem 1rem; color:#243343; text-align:center; background:rgb(255 255 255 / 92%); border-radius:.75rem; box-shadow:0 6px 18px rgb(0 0 0 / 18%); }.map-status span { color:var(--nl-accent); font-size:1.3rem; }.map-status strong { font-size:.86rem; white-space:nowrap; }.map-status small { color:#657282; font-size:.76rem; }
@media (max-width: 768px) { .tracking-console { display:block; margin:-1rem 0; }.tracking-sidebar { min-height:auto; }.tracking-unit-list { display:none; }.tracking-nav { display:inline-block; }.tracking-main { padding:1rem; }.tracking-map { min-height:420px; }.tracking-stat-grid { grid-template-columns:repeat(3,1fr); gap:.45rem; }.tracking-stat-grid div { padding:.65rem; }.map-status { flex-wrap:wrap; justify-content:center; } }
@media (max-width: 575px) { .admin-card { margin: 1rem; padding: 1.25rem; } .touch-action { min-height: 116px; } }
@media (max-width: 768px) { [data-theme="dark"] { --nl-page-art: url("../images/softlink-dark-mobile.png"); } }
.footer { color: var(--nl-muted) !important; border-color: var(--nl-border) !important; }
[data-theme="dark"] .navbar-toggler { filter: invert(1); }