:root{
 --nav:#062f31;--nav-hi:#0a5854;--accent:#0d746d;--accent2:#22a99d;
 --bg:#f5f7f8;--card:#fff;--ink:#182930;--muted:#718188;--line:#dce4e7;
 --danger:#c84a53;--dangerbg:#fff2f3;--warn:#b5770e;--success:#187a57;
 --shadow:0 8px 26px rgba(18,40,46,.055)
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-size:14px}
body.menu-open{overflow:hidden}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
input,select,textarea{width:100%;min-height:44px;border:1px solid #cad6da;border-radius:8px;padding:10px 12px;background:#fff;color:var(--ink);outline:none}
input:focus,select:focus,textarea:focus{border-color:#8fc3bf;box-shadow:0 0 0 3px rgba(13,116,109,.08)}
textarea{resize:vertical}
label{display:block;font-size:12px;font-weight:750;color:#40545b;margin-bottom:14px}
label input,label select,label textarea{margin-top:6px}
label small{display:block;color:var(--muted);font-weight:500;margin-top:5px}
h1{margin:0;font-size:29px;line-height:1.12;letter-spacing:-.035em}
h2{margin:0;font-size:18px;letter-spacing:-.015em}
p{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:9px 15px;border-radius:7px;border:1px solid transparent;font-weight:800;cursor:pointer}
.btn.primary{background:var(--accent);color:#fff}.btn.primary:hover{background:#095f5a}
.btn.ghost{background:#fff;color:var(--accent);border-color:#a9bfc1}
.btn.danger{background:#fff0f1;color:var(--danger);border-color:#efc4c7}
.btn.success{background:#e8f6ef;color:var(--success);border-color:#bde1cf}
.btn:disabled{opacity:.45;cursor:not-allowed}
.full{width:100%}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px}
.red{color:var(--danger)!important}.amber{color:var(--warn)!important}.green{color:var(--success)!important}
.toast{margin-bottom:14px;border:1px solid #beddd8;background:#eaf6f3;color:#185a52;border-radius:9px;padding:11px 13px;font-size:13px}

/* App shell */
.app{min-height:100vh}
.desktop-sidebar{position:fixed;inset:0 auto 0 0;width:195px;background:linear-gradient(180deg,#041f21,var(--nav));color:#fff;padding:16px 12px;display:flex;flex-direction:column;z-index:30}
.brand-lockup{display:flex;align-items:center;gap:10px;padding:0 3px 17px;border-bottom:1px solid rgba(255,255,255,.08)}
.brand-lockup img{width:52px;height:52px;border-radius:12px;object-fit:cover}
.brand-lockup strong{display:block;font-size:13px;letter-spacing:.08em}.brand-lockup strong span{color:#3cc5b9}
.brand-lockup small{display:block;font-size:7px;letter-spacing:.16em;color:#bcd0d0;margin-top:3px}
.side-nav{display:grid;gap:5px;margin-top:15px}
.side-nav a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;color:#e5eeee;font-size:13px;font-weight:700}
.side-nav a svg{width:19px;height:19px;fill:currentColor}
.side-nav a.active,.side-nav a:hover{background:var(--nav-hi);color:#fff}
.sidebar-profile{margin-top:auto;display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 4px 3px}
.recon-user-avatar{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  max-width:42px!important;
  max-height:42px!important;
  flex:0 0 42px!important;
  padding:0!important;
  margin:0!important;
  border-radius:50%!important;
  background:#22aa9e!important;
  color:#fff!important;
  font-size:16px!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-align:center!important;
  overflow:hidden!important;
}
.sidebar-profile strong{font-size:13px;margin-top:7px}.sidebar-profile small{font-size:10px;color:#c1d2d2;margin-top:2px}
.main{margin-left:195px;min-height:100vh;padding:24px 28px 46px;max-width:1580px}
.mobile-header,.mobile-menu{display:none}

/* headers */
.page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:20px}
.page-header.split{align-items:center}
.page-header p{margin:6px 0 0;font-size:13px}
.eyebrow{display:block;color:var(--accent);font-size:10px;font-weight:900;letter-spacing:.11em;margin-bottom:5px}
.button-row{display:flex;gap:8px;flex-wrap:wrap}
.back-link{display:inline-block;color:#2477a9;font-size:11px;font-weight:800;margin-bottom:13px}

/* metrics */
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.metric{display:block;background:#fff;border:1px solid var(--line);border-radius:10px;padding:15px;box-shadow:var(--shadow)}
.metric>span{display:block;color:var(--muted);font-size:11px;font-weight:750}
.metric strong{display:block;font-size:26px;margin:4px 0}
.metric strong.smaller{font-size:18px;line-height:1.1}
.metric small{display:block;color:var(--accent);font-size:10px;font-weight:750}

/* board */
.content-section{margin-top:25px}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:10px}
.section-head span{display:block;color:var(--accent);font-size:9px;font-weight:900;letter-spacing:.09em;margin-bottom:3px}
.section-head a{font-size:10px;color:var(--accent);font-weight:800}
.kanban{display:flex;gap:10px;overflow-x:auto;padding-bottom:7px}
.lane{width:250px;min-width:250px;background:#f0f3f4;border:1px solid var(--line);border-radius:8px;padding:8px}
.lane-head{display:flex;justify-content:space-between;align-items:center;padding:2px 3px 8px;text-transform:uppercase;font-size:10px}
.lane-head strong{font-weight:900}.lane-head span{font-weight:850}
.vehicle-card{display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border:1px solid #e0e7e9;border-left:3px solid #2ea8df;border-radius:7px;padding:10px;margin-bottom:7px}
.vehicle-card strong,.vehicle-card small{display:block}.vehicle-card strong{font-size:12px}.vehicle-card small{font-size:10px;color:var(--muted);margin-top:3px}
.vehicle-card.blocked{border-color:#eeb5ba;border-left-color:var(--danger)}
.tiny-avatar{width:26px;height:26px;border-radius:50%;background:#0d6b52;color:#fff;display:grid;place-items:center;font-size:8px;font-weight:900}
.lane-empty{padding:18px 8px;text-align:center;color:#98a5aa;font-size:11px}
.attention-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.attention-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:13px}
.attention-card.blocked{background:var(--dangerbg);border-color:#ecb4b8}
.attention-card strong,.attention-card span,.attention-card b,.attention-card em{display:block}
.attention-card span{font-size:11px;color:var(--muted);margin:3px 0 9px}.attention-card b{font-size:16px}.attention-card em{margin-top:7px;font-style:normal;font-size:10px;color:var(--danger);font-weight:900}

/* Vehicles */
.vehicle-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.global-search{position:relative;flex:1;max-width:720px}
.global-search svg{position:absolute;left:12px;top:12px;width:18px;height:18px;fill:#75868d;pointer-events:none}
.global-search input{padding-left:39px;padding-right:40px}
.global-search button{position:absolute;right:6px;top:5px;width:32px;height:32px;border:0;background:transparent;border-radius:7px;font-size:22px;color:#75868d;display:none}
.global-search button.show{display:block}
.filters{display:flex;gap:5px}.filters a{padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:10px;font-weight:800;color:var(--muted)}
.filters a.active{background:var(--accent);border-color:var(--accent);color:#fff}
.table-shell,.surface{background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow)}
.table-shell{overflow:auto}
.clean-table{width:100%;border-collapse:collapse}
.clean-table th,.clean-table td{padding:11px 12px;border-bottom:1px solid #edf1f2;text-align:left;font-size:12px}
.clean-table th{background:#fafbfb;color:#718188;font-size:9px;text-transform:uppercase;letter-spacing:.05em}
.primary-link{font-weight:800}.chev{text-align:center;font-size:22px}
.stage-tag,.blocked-tag,.role-badge{display:inline-block;border-radius:5px;padding:4px 7px;font-size:10px;font-weight:800}
.stage-tag{background:#e9f4fb;color:#247cae}.stage-tag.big{font-size:12px;padding:7px 10px}
.blocked-tag{background:#fff0f1;color:var(--danger);margin-left:4px}
.no-results{padding:30px;text-align:center}.no-results strong,.no-results span{display:block}.no-results span{font-size:11px;color:var(--muted);margin-top:4px}

/* vehicle detail */
.vehicle-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.vehicle-heading p{margin:5px 0 0;font-size:11px}
.tabbar{display:flex;gap:22px;border-bottom:1px solid var(--line);margin:18px 0}
.tabbar button{border:0;background:none;min-height:38px;padding:0 2px;color:var(--muted);font-size:11px;font-weight:700;cursor:pointer}
.tabbar button.active{color:#267aa8;border-bottom:2px solid #267aa8}
.tab-panel{display:none}.tab-panel.active{display:block}
.detail-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.surface{padding:17px}
.surface-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.surface-title span{font-size:10px;color:var(--muted)}
.detail-list{margin:0}
.detail-list>div{display:grid;grid-template-columns:160px 1fr;padding:8px 0;border-bottom:1px solid #edf1f2}
.detail-list dt{font-size:10px;color:var(--muted)}.detail-list dd{margin:0;font-size:12px}
.action-surface form{margin-top:13px}
.warning-box{padding:10px;border-radius:7px;background:var(--dangerbg);color:var(--danger);font-size:11px;font-weight:800;margin:12px 0}
.timeline-item{display:grid;grid-template-columns:14px 1fr;gap:8px;padding-bottom:15px}.timeline-item i{width:9px;height:9px;border-radius:50%;background:#2ea8df;margin-top:4px}
.timeline-item strong,.timeline-item span{display:block}.timeline-item strong{font-size:12px}.timeline-item span{font-size:10px;color:var(--muted);margin-top:3px}

/* reports */
.period-control{display:flex;align-items:center;gap:8px;margin-bottom:12px}.period-control select{width:180px}
.custom-range{display:flex;gap:7px;align-items:center}.custom-range input{width:150px}.hidden{display:none!important}
.report-metrics{margin-bottom:12px}
.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.report-card{min-height:280px}
.donut-row{display:flex;gap:22px;align-items:center}
.donut{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;position:relative;flex:0 0 auto}.donut:after{content:"";position:absolute;width:86px;height:86px;background:#fff;border-radius:50%}.donut>div{z-index:1;text-align:center}.donut strong,.donut span{display:block}.donut strong{font-size:22px}.donut span{font-size:10px;color:var(--muted)}
.legend{flex:1}.legend>div{display:grid;grid-template-columns:10px 1fr auto;gap:7px;align-items:center;padding:5px 0;font-size:10px}.legend i{width:8px;height:8px;border-radius:2px}
.age-row{margin-bottom:10px}.age-row>div:first-child{display:flex;justify-content:space-between;font-size:11px}.track{height:7px;background:#edf2f3;border-radius:999px;overflow:hidden;margin-top:4px}.track i{display:block;height:100%;background:var(--accent2);border-radius:999px}
.reason-list>div,.activity-feed>div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #edf1f2;font-size:11px}
.activity-feed strong,.activity-feed span{display:block}.activity-feed span{font-size:10px;color:var(--muted);margin-top:3px}.activity-feed small{font-size:9px;color:var(--muted);white-space:nowrap}
.settings-column{max-width:650px}.smtp-status{padding:14px 16px;border-radius:9px;border:1px solid;margin-bottom:12px}.smtp-status strong,.smtp-status span,.smtp-status code{display:block}.smtp-status span{font-size:11px;margin-top:4px}.smtp-status code{margin-top:10px;white-space:pre-wrap;font-size:11px}.smtp-status.ready{background:#edf8f3;border-color:#c4e5d4;color:#185f47}.smtp-status.not-ready{background:#fff7e8;border-color:#efd4a3;color:#76510d}
.settings-form,.test-card{margin-bottom:12px}.toggle-setting{display:flex;justify-content:space-between;align-items:center;padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid #edf1f2}.toggle-setting strong,.toggle-setting span{display:block}.toggle-setting span{font-size:10px;color:var(--muted);margin-top:3px}
.switch input{display:none}.switch i{display:block;width:42px;height:24px;background:#b8c4c7;border-radius:999px;position:relative;cursor:pointer}.switch i:after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}.switch input:checked+i{background:var(--accent)}.switch input:checked+i:after{left:21px}

/* users / workflow / settings */
.user-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.user-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px;box-shadow:var(--shadow)}
.user-card-head{display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;padding-bottom:12px;border-bottom:1px solid #edf1f2}
.user-card-head strong,.user-card-head>div span{display:block}
.user-card-head>div span{font-size:10px;color:var(--muted);margin-top:2px}
.user-status{display:flex;justify-content:space-between;font-size:11px;padding:11px 0}.reset-form{padding-top:8px;border-top:1px solid #edf1f2}
.workflow-settings{display:grid;grid-template-columns:1fr 340px;gap:12px}
.workflow-row{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid #edf1f2}
.step{width:30px;height:30px;border-radius:8px;background:#eaf5f3;color:var(--accent);display:grid;place-items:center;font-weight:900}
.workflow-row>div{display:flex;gap:5px}.workflow-row form{margin:0}.workflow-row button{min-width:38px;height:36px;border:1px solid var(--line);background:#fff;border-radius:6px;cursor:pointer}.workflow-row button.delete{color:var(--danger);border-color:#efc4c7}
.profile-surface{display:flex;align-items:center;gap:14px}.profile-avatar{width:58px;height:58px;min-width:58px;min-height:58px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:900;line-height:1;text-align:center;padding:0;margin:0}.profile-copy>span{font-size:9px;color:var(--muted);font-weight:800;letter-spacing:.08em}.profile-surface h2{margin-top:3px}.profile-surface p{margin:3px 0 0;font-size:11px}
.settings-action{display:flex;justify-content:space-between;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:15px;margin-top:9px;box-shadow:var(--shadow)}.settings-action strong,.settings-action span{display:block}.settings-action span{font-size:11px;color:var(--muted);margin-top:3px}.settings-action b{font-size:25px;color:#8a999e}.settings-action.logout strong{color:var(--danger)}
.form-card{max-width:720px}.form-card.two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}.span-two{grid-column:1/-1}.info-box{background:#f6f9fa;border:1px solid var(--line);border-radius:8px;padding:12px;margin:8px 0 14px}.info-box p{font-size:11px;margin:4px 0}.detected{margin-top:15px}.detected span{display:inline-block;background:#edf4f3;color:var(--accent);padding:5px 7px;border-radius:6px;margin:3px;font-size:10px}

/* auth */
.auth-shell{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at top,#eef7f5 0,#f6f8f9 42%,#f2f5f6 100%)}
.login-card{width:min(430px,100%);background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:0 16px 45px rgba(18,40,46,.08)}
.login-card img{width:82px;height:82px;border-radius:18px;display:block;margin:0 auto 17px}.login-card h1{text-align:center;font-size:25px}.login-card>p{text-align:center;font-size:12px;margin:6px 0 20px}

/* responsive */
@media(max-width:1050px){.metric-grid{grid-template-columns:1fr 1fr}.detail-layout,.report-grid{grid-template-columns:1fr}.workflow-settings{grid-template-columns:1fr}.user-grid{grid-template-columns:1fr}}
@media(max-width:760px){
 .desktop-sidebar{display:none}.main{margin-left:0;padding:78px 14px 32px}
 .mobile-header{display:flex;position:fixed;top:0;left:0;right:0;height:62px;background:#fff;border-bottom:1px solid var(--line);z-index:40;align-items:center;justify-content:space-between;padding:0 14px}
 .mobile-brand{display:flex;align-items:center;gap:9px;font-size:18px}.mobile-brand img{width:38px;height:38px;border-radius:9px}.mobile-brand strong{font-weight:900}
 .hamburger{width:42px;height:42px;border:0;background:transparent}.hamburger span{display:block;width:22px;height:2px;background:#40555c;margin:5px auto}
 .mobile-menu{display:block;position:fixed;inset:62px 0 0;z-index:50;pointer-events:none}.mobile-menu.open{pointer-events:auto}.menu-overlay{position:absolute;inset:0;border:0;background:rgba(12,27,32,.42);opacity:0}.mobile-menu.open .menu-overlay{opacity:1}
 .menu-panel{position:absolute;top:0;right:0;width:min(320px,88vw);height:100%;background:#fff;padding:16px;transform:translateX(105%);transition:.2s;box-shadow:-14px 0 35px rgba(0,0,0,.12)}.mobile-menu.open .menu-panel{transform:translateX(0)}
 .menu-profile{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:8px}.menu-profile strong,.menu-profile small{display:block}.menu-profile small{font-size:10px;color:var(--muted)}
 .menu-panel nav a{display:block;padding:12px;border-radius:8px;font-size:14px;font-weight:800}.menu-panel nav a:hover{background:#eef5f4}
 .page-header,.page-header.split{display:block}.button-row{margin-top:10px}.button-row .btn{flex:1}
 .metric-grid{grid-template-columns:1fr 1fr;gap:8px}.metric{padding:12px}.metric strong{font-size:22px}
 .kanban{scroll-snap-type:x proximity}.lane{width:calc(100vw - 42px);min-width:calc(100vw - 42px);scroll-snap-align:start}.attention-grid{grid-template-columns:1fr}
 .vehicle-controls{display:block}.filters{margin-top:8px;overflow-x:auto}
 .table-shell{background:transparent;border:0;box-shadow:none;overflow:visible}.clean-table,.clean-table thead,.clean-table tbody,.clean-table tr,.clean-table th,.clean-table td{display:block;width:100%}.clean-table thead{display:none}.clean-table tbody{display:grid;gap:8px}
 .clean-table tr{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 12px;box-shadow:var(--shadow)}.clean-table td{display:grid;grid-template-columns:34% 1fr;gap:8px;padding:7px 0;border-bottom:1px solid #edf1f2;text-align:right}.clean-table td::before{content:attr(data-label);text-align:left;color:var(--muted);font-size:9px;font-weight:900;text-transform:uppercase}.clean-table td:last-child{border:0}.clean-table .chev{display:none}
 .vehicle-heading{display:block}.vehicle-heading .stage-tag{margin-top:8px}.detail-list>div{grid-template-columns:42% 1fr}
 .period-control{flex-wrap:wrap}.period-control select{width:100%}.custom-range{width:100%}.custom-range input{flex:1}
 .donut-row{display:block}.donut{margin:0 auto 15px}.activity-feed>div{display:block}.activity-feed small{display:block;margin-top:4px}
 .form-card.two-col{grid-template-columns:1fr}.span-two{grid-column:auto}
}
@media(max-width:430px){.main{padding-left:11px;padding-right:11px}.metric-grid{gap:7px}.metric{padding:11px}.metric strong{font-size:21px}.button-row{display:grid;grid-template-columns:1fr}.button-row .btn{width:100%}}

/* ==========================================================
   ReconLane Foundation Fix v0.8.1
   These rules intentionally come last.
   ========================================================== */

/* Clean logo presentation: image itself contains no white matte/caption. */
.brand-lockup img,
.mobile-brand img{
  object-fit:cover!important;
  object-position:center!important;
  background:#062f31!important;
  border:0!important;
  box-shadow:none!important;
}

/* Isolated user avatar. No generic span selector may alter its text. */
.sidebar-profile .recon-user-avatar,
.menu-profile .recon-user-avatar,
.user-card-head .recon-user-avatar{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fff!important;
  font-size:16px!important;
  line-height:1!important;
}

/* Distinct, crisp sidebar icons. */
.side-nav a svg,
.mobile-menu-nav a svg{
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  fill:currentColor!important;
  display:block!important;
}

/* Mobile navigation uses the same ReconLane dark teal theme as desktop. */
@media(max-width:760px){
  .menu-panel{
    background:linear-gradient(180deg,#041f21,#062f31)!important;
    color:#fff!important;
    border-left:1px solid rgba(255,255,255,.06)!important;
    box-shadow:-14px 0 35px rgba(0,0,0,.28)!important;
  }

  .menu-profile{
    color:#fff!important;
    border-bottom:1px solid rgba(255,255,255,.12)!important;
    padding:4px 4px 16px!important;
    margin-bottom:10px!important;
  }

  .menu-profile strong{
    color:#fff!important;
    font-size:14px!important;
    line-height:1.2!important;
  }

  .menu-profile small{
    color:#bcd0d0!important;
    font-size:10px!important;
    margin-top:3px!important;
  }

  .mobile-menu-nav{
    display:grid!important;
    gap:5px!important;
  }

  .mobile-menu-nav a{
    display:flex!important;
    align-items:center!important;
    gap:12px!important;
    padding:11px 12px!important;
    border-radius:8px!important;
    color:#e7f0f0!important;
    font-size:14px!important;
    font-weight:750!important;
  }

  .mobile-menu-nav a:hover,
  .mobile-menu-nav a:active{
    background:#0a5854!important;
    color:#fff!important;
  }

  .mobile-menu-nav a span{
    color:inherit!important;
    font-size:inherit!important;
    font-weight:inherit!important;
  }
}


/* ReconLane v0.8.2: System Administrator + attention thresholds */
.threshold-layout{grid-template-columns:minmax(0,1fr) 350px!important}
.threshold-row{
  grid-template-columns:34px minmax(160px,1fr) minmax(250px,310px) auto!important;
}
.stage-name-block strong,.stage-name-block span{display:block}
.stage-name-block span{font-size:10px;color:var(--muted);margin-top:3px}
.threshold-form{display:flex!important;align-items:end!important;gap:7px!important}
.threshold-form label{margin:0!important;min-width:150px}
.days-input{display:grid;grid-template-columns:1fr auto;align-items:center;border:1px solid #cad6da;border-radius:8px;background:#fff;overflow:hidden;margin-top:6px}
.days-input input{border:0!important;box-shadow:none!important;margin:0!important;min-width:0}
.days-input span{padding:0 10px;color:var(--muted);font-size:11px;font-weight:700}
.threshold-form .btn{min-width:64px}
.workflow-actions{display:flex!important;gap:5px!important}
.blocked-threshold-card{margin-top:12px}
.threshold-note{font-size:10px;line-height:1.5;margin:12px 0 0}
.role-badge{white-space:nowrap}
.user-card-head>div span+span{margin-top:3px;color:#527079}

@media(max-width:1100px){
  .threshold-layout{grid-template-columns:1fr!important}
}
@media(max-width:760px){
  .threshold-row{
    grid-template-columns:34px 1fr!important;
    align-items:start!important;
  }
  .threshold-form{
    grid-column:1/-1!important;
    width:100%!important;
  }
  .threshold-form label{flex:1}
  .workflow-actions{
    grid-column:1/-1!important;
    justify-content:flex-end!important;
  }
}


/* ReconLane v0.8.7 - user management */
.user-manage-link{color:inherit}
.user-manage-link:hover{background:#f8fbfb}
.user-role-open{display:flex!important;align-items:center!important;gap:8px!important}
.user-role-open b{font-size:24px;color:#96a4a9;font-weight:500}
.manage-user-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:980px}
.protected-role{padding:14px;border:1px solid #b9ddd5;background:#eef8f5;border-radius:9px}
.protected-role strong,.protected-role span{display:block}
.protected-role strong{color:var(--accent)}
.protected-role span{color:var(--muted);font-size:11px;margin-top:4px;line-height:1.45}
.role-explainer{display:grid;gap:7px;margin:-3px 0 14px}
.role-explainer>div{padding:9px 10px;border:1px solid var(--line);border-radius:7px;background:#f7f9fa}
.role-explainer strong,.role-explainer span{display:block}
.role-explainer strong{font-size:11px}
.role-explainer span{font-size:10px;color:var(--muted);margin-top:2px}

/* Appearance */
.appearance-setting{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:9px}
.appearance-setting>div>strong,.appearance-setting>div>span{display:block}
.appearance-setting>div>span{font-size:11px;color:var(--muted);margin-top:3px}
.appearance-setting form{margin:0}
.theme-toggle{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg)}
.theme-toggle button{display:flex;align-items:center;justify-content:center;gap:6px;min-width:92px;min-height:38px;border:0;background:transparent;color:var(--muted);font-weight:750;cursor:pointer}
.theme-toggle button+button{border-left:1px solid var(--line)}
.theme-toggle button.active{background:var(--card);color:var(--accent);box-shadow:0 1px 4px rgba(15,40,45,.08)}
.theme-toggle svg{width:16px;height:16px;fill:currentColor}

/* Dark mode variables */
html[data-theme="dark"]{
  --bg:#10191d;
  --card:#182328;
  --ink:#e7eff1;
  --muted:#9aabb1;
  --line:#2b3a40;
  --shadow:0 8px 26px rgba(0,0,0,.18);
}

/* Dark mode component overrides for hard-coded light surfaces */
html[data-theme="dark"] body{background:var(--bg);color:var(--ink)}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#121d21;color:var(--ink);border-color:#34464d
}
html[data-theme="dark"] input:disabled{background:#202c31;color:#839399}
html[data-theme="dark"] .mobile-header,
html[data-theme="dark"] .metric,
html[data-theme="dark"] .surface,
html[data-theme="dark"] .table-shell,
html[data-theme="dark"] .user-card,
html[data-theme="dark"] .settings-action,
html[data-theme="dark"] .vehicle-card,
html[data-theme="dark"] .attention-card{
  background:var(--card);border-color:var(--line);color:var(--ink)
}
html[data-theme="dark"] .lane{background:#121d21;border-color:var(--line)}
html[data-theme="dark"] .clean-table th{background:#141f23;color:#94a6ac}
html[data-theme="dark"] .clean-table td,
html[data-theme="dark"] .detail-list>div,
html[data-theme="dark"] .timeline-item,
html[data-theme="dark"] .reason-list>div,
html[data-theme="dark"] .activity-feed>div,
html[data-theme="dark"] .user-card-head,
html[data-theme="dark"] .reset-form,
html[data-theme="dark"] .toggle-setting,
html[data-theme="dark"] .workflow-row{
  border-color:#2b3a40
}
html[data-theme="dark"] .filters a,
html[data-theme="dark"] .btn.ghost,
html[data-theme="dark"] .workflow-row button{
  background:#182328;color:#a9c4c5;border-color:#3b5057
}
html[data-theme="dark"] .filters a.active{background:var(--accent);color:#fff;border-color:var(--accent)}
html[data-theme="dark"] .stage-tag{background:#163348;color:#7cc6ef}
html[data-theme="dark"] .blocked-tag{background:#3a2025;color:#ef949a}
html[data-theme="dark"] .role-explainer>div{background:#121d21;border-color:var(--line)}
html[data-theme="dark"] .protected-role{background:#16302b;border-color:#285c51}
html[data-theme="dark"] .profile-surface,
html[data-theme="dark"] .appearance-setting{background:var(--card)}
html[data-theme="dark"] .theme-toggle{background:#10191d;border-color:#34464d}
html[data-theme="dark"] .theme-toggle button.active{background:#223036;color:#5ed0c5}
html[data-theme="dark"] .donut:after{background:var(--card)}
html[data-theme="dark"] .track{background:#26353a}
html[data-theme="dark"] .info-box{background:#121d21;border-color:var(--line)}
html[data-theme="dark"] .user-manage-link:hover{background:#1b292e}

@media(max-width:760px){
  .manage-user-grid{grid-template-columns:1fr}
  .appearance-setting{display:block}
  .appearance-setting form{margin-top:12px}
  .theme-toggle{width:100%}
}

.test-mode-badge{display:inline-block;margin-top:5px;padding:3px 6px;border-radius:999px;background:#e7fff8;color:#0b6a5f;font-size:7px;line-height:1;letter-spacing:.08em;font-weight:900}


/* ==========================================================
   ReconLane v0.8.8 - Dark Mode ReconLane Color Swap
   Light mode is intentionally unchanged.
   ========================================================== */

html[data-theme="dark"]{
  /* Main application canvas now uses the lighter ReconLane sidebar green. */
  --bg:#062f31;
  --card:#0a3a3b;
  --ink:#ecf5f4;
  --muted:#a8c0bf;
  --line:#165052;
  --shadow:0 8px 26px rgba(0,0,0,.22);
}

/* Desktop navigation becomes the darkest ReconLane green in dark mode. */
html[data-theme="dark"] .desktop-sidebar{
  background:#041f21!important;
  border-right:1px solid #0b4545!important;
}

/* Mobile navigation uses the same darkest green. */
@media(max-width:760px){
  html[data-theme="dark"] .menu-panel{
    background:#041f21!important;
    border-left:1px solid #0b4545!important;
  }

  html[data-theme="dark"] .mobile-header{
    background:#062f31!important;
    border-bottom-color:#165052!important;
    color:#ecf5f4!important;
  }

  html[data-theme="dark"] .mobile-brand,
  html[data-theme="dark"] .mobile-brand strong{
    color:#ecf5f4!important;
  }

  html[data-theme="dark"] .hamburger span{
    background:#d8e8e7!important;
  }
}

/* Main content takes on the lighter ReconLane green family. */
html[data-theme="dark"] body,
html[data-theme="dark"] .main{
  background:#062f31!important;
}

/* Primary content surfaces stay distinguishable from the canvas. */
html[data-theme="dark"] .metric,
html[data-theme="dark"] .surface,
html[data-theme="dark"] .table-shell,
html[data-theme="dark"] .user-card,
html[data-theme="dark"] .settings-action,
html[data-theme="dark"] .vehicle-card,
html[data-theme="dark"] .attention-card,
html[data-theme="dark"] .profile-surface,
html[data-theme="dark"] .appearance-setting{
  background:#0a3a3b!important;
  border-color:#165052!important;
  color:#ecf5f4!important;
}

/* Secondary workflow areas use a slightly deeper shade for hierarchy. */
html[data-theme="dark"] .lane,
html[data-theme="dark"] .role-explainer>div,
html[data-theme="dark"] .info-box{
  background:#082a2c!important;
  border-color:#165052!important;
}

/* Inputs should remain legible without returning to gray/black. */
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{
  background:#082a2c!important;
  color:#ecf5f4!important;
  border-color:#1e5a5b!important;
}

html[data-theme="dark"] input:disabled{
  background:#0b3435!important;
  color:#88a6a5!important;
}

/* Table/header areas remain within the green palette. */
html[data-theme="dark"] .clean-table th{
  background:#082a2c!important;
  color:#a8c0bf!important;
}

html[data-theme="dark"] .filters a,
html[data-theme="dark"] .btn.ghost,
html[data-theme="dark"] .workflow-row button{
  background:#0a3a3b!important;
  color:#b9d0cf!important;
  border-color:#1e5a5b!important;
}

html[data-theme="dark"] .filters a.active{
  background:#118078!important;
  border-color:#118078!important;
  color:#fff!important;
}

/* Keep charts/components compatible with the new green surface. */
html[data-theme="dark"] .donut:after{
  background:#0a3a3b!important;
}

html[data-theme="dark"] .track{
  background:#123f41!important;
}

html[data-theme="dark"] .theme-toggle{
  background:#082a2c!important;
  border-color:#1e5a5b!important;
}

html[data-theme="dark"] .theme-toggle button.active{
  background:#0d4b4a!important;
  color:#6ee0d4!important;
}

html[data-theme="dark"] .user-manage-link:hover{
  background:#0d4545!important;
}

/* ReconLane v0.8.9 Mobile Light App Polish */
.mobile-bottom-nav{display:none}
@media(max-width:760px){
 html[data-theme="light"] body,html[data-theme="light"] .main{background:#f2f8f6!important}
 html[data-theme="light"] .mobile-header{min-height:58px;background:#fff!important;border-bottom:1px solid #dce9e6!important;box-shadow:0 3px 14px rgba(5,48,48,.07)}
 html[data-theme="light"] .hamburger{width:40px;height:40px;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f2f8f6}
 html[data-theme="light"] .metric-grid{gap:8px}
 html[data-theme="light"] .metric{position:relative;overflow:hidden;min-height:108px;background:#fff!important;border:1px solid #d7e5e2!important;border-radius:12px!important;box-shadow:0 5px 16px rgba(7,55,55,.055);padding:14px 12px 12px!important}
 html[data-theme="light"] .metric:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#147d75}
 html[data-theme="light"] .metric-blocked:before{background:#c74a50}
 html[data-theme="light"] .metric-overdue:before{background:#c2871b}
 html[data-theme="light"] .metric-age:before{background:#2b8194}
 html[data-theme="light"] .metric-active strong{color:#0b665f}
 html[data-theme="light"] .metric-blocked strong{color:#b63e46}
 html[data-theme="light"] .metric-overdue strong{color:#a96f08}
 html[data-theme="light"] .metric-age strong{color:#176d7d}
 html[data-theme="light"] .metric small{font-weight:800}
 html[data-theme="light"] .content-section{margin-top:20px}
 html[data-theme="light"] .section-head>div>span{color:#0d756d}
 html[data-theme="light"] .workflow-subtitle{margin:2px 0 10px;color:#72868b;font-size:11px}
 html[data-theme="light"] .kanban{gap:8px;padding-bottom:4px}
 html[data-theme="light"] .lane{min-height:112px!important;background:#fff!important;border:1px solid #d6e4e1!important;border-radius:11px!important;box-shadow:0 4px 13px rgba(7,55,55,.045);position:relative;overflow:hidden}
 html[data-theme="light"] .lane:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#16877e}
 html[data-theme="light"] .lane-head{padding-left:13px}
 html[data-theme="light"] .lane-empty{min-height:68px;padding:12px!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#91a3a6!important}
 html[data-theme="light"] .lane-empty svg{width:20px;height:20px;fill:#a9bfbb}
 html[data-theme="light"] .lane-empty span{font-size:9px}
 .mobile-bottom-nav{position:fixed;z-index:60;left:0;right:0;bottom:0;min-height:64px;padding:6px 8px max(6px,env(safe-area-inset-bottom));display:flex;align-items:flex-start;justify-content:space-around;background:rgba(255,255,255,.97);border-top:1px solid #d7e5e2;box-shadow:0 -5px 18px rgba(7,48,48,.07);backdrop-filter:blur(12px)}
 .mobile-bottom-nav a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#74858a;font-size:9px;font-weight:800;text-decoration:none;min-height:50px}
 .mobile-bottom-nav svg{width:20px;height:20px;fill:currentColor}
 .mobile-bottom-nav a.active{color:#087168}
 html[data-theme="light"] .main{padding-bottom:82px!important}
 html[data-theme="dark"] .mobile-bottom-nav{background:rgba(4,31,33,.98);border-top-color:#165052;box-shadow:0 -5px 18px rgba(0,0,0,.22)}
 html[data-theme="dark"] .mobile-bottom-nav a{color:#8fa9a8}
 html[data-theme="dark"] .mobile-bottom-nav a.active{color:#6ee0d4}
 html[data-theme="dark"] .main{padding-bottom:82px!important}
}


/* ==========================================================
   ReconLane v0.9.0 - Mobile stage selector + KPI icons
   ========================================================== */

/* KPI icons work on all viewport sizes, with strongest effect on mobile. */
.metric{
  display:flex!important;
  align-items:center;
  gap:12px;
}
.metric-copy{min-width:0;flex:1}
.metric-copy>span,.metric-copy>strong,.metric-copy>small{display:block}
.metric-icon{
  width:48px;height:48px;min-width:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.metric-icon svg{width:24px;height:24px;fill:currentColor}
.metric-icon-active{background:#e8f4f1;color:#0d746d}
.metric-icon-blocked{background:#fdebed;color:#c84a53}
.metric-icon-overdue{background:#fff4df;color:#c1810a}
.metric-icon-age{background:#e8f3f5;color:#17778b}

/* Desktop keeps the normal full kanban. */
.mobile-stage-selector,.mobile-stage-panels{display:none}

@media(max-width:760px){
  /* Clean top hierarchy requested by user */
  .page-header .eyebrow{display:none!important}
  .pipeline-only-head{margin-bottom:10px!important}
  .pipeline-only-head h2,.pipeline-only-head p{display:none!important}
  .pipeline-only-head span{
    color:#0d756d!important;
    font-size:10px!important;
    font-weight:900!important;
    letter-spacing:.11em!important;
  }

  /* KPI icon/card composition */
  .metric{
    gap:9px!important;
    min-height:112px!important;
    align-items:center!important;
  }
  .metric-icon{
    width:38px;height:38px;min-width:38px;
  }
  .metric-icon svg{width:20px;height:20px}
  .metric-copy>span{font-size:10px!important}
  .metric-copy>strong{font-size:22px!important}
  .metric-copy>small{font-size:9px!important;line-height:1.25}

  /* Hide desktop horizontal kanban on phones. */
  .kanban{display:none!important}

  /* Compact stage selector */
  .mobile-stage-selector{
    display:flex;
    gap:7px;
    overflow-x:auto;
    padding:1px 1px 9px;
    margin:0 -1px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .mobile-stage-selector::-webkit-scrollbar{display:none}

  .stage-selector-btn{
    position:relative;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:6px;
    min-height:40px;
    padding:8px 12px;
    border:1px solid #d6e4e1;
    border-radius:999px;
    background:#fff;
    color:#24363c;
    box-shadow:0 3px 9px rgba(7,55,55,.045);
    font-size:11px;
    font-weight:800;
    cursor:pointer;
  }
  .stage-selector-btn b{
    color:#52696f;
    font-size:10px;
  }
  .stage-selector-btn em{
    width:19px;height:19px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:#d9414a;color:#fff;
    font-size:9px;font-style:normal;font-weight:900;
  }
  .stage-selector-btn.active{
    background:#0d746d;
    border-color:#0d746d;
    color:#fff;
  }
  .stage-selector-btn.active b{color:#fff}

  .mobile-stage-panels{display:block}
  .mobile-stage-panel{
    display:none;
    background:#fff;
    border:1px solid #d6e4e1;
    border-radius:13px;
    box-shadow:0 5px 16px rgba(7,55,55,.055);
    padding:12px;
  }
  .mobile-stage-panel.active{display:block}

  .mobile-stage-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:2px 2px 11px;
  }
  .mobile-stage-head>div:first-child{
    display:flex;align-items:center;gap:9px;
  }
  .mobile-stage-head strong{
    font-size:15px;
    text-transform:uppercase;
  }
  .mobile-stage-icon{
    width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:#e8f4f1;color:#0d746d;
  }
  .mobile-stage-icon svg{width:18px;height:18px;fill:currentColor}
  .mobile-stage-count{text-align:right}
  .mobile-stage-count b,.mobile-stage-count span{display:block}
  .mobile-stage-count b{font-size:19px;color:#0d746d}
  .mobile-stage-count span{font-size:9px;color:#7a8b90}

  .mobile-stage-vehicles{display:grid;gap:7px}
  .mobile-stage-vehicle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    min-height:62px;
    padding:10px 12px;
    background:#fff;
    border:1px solid #e0e8e9;
    border-left:3px solid #0d746d;
    border-radius:9px;
  }
  .mobile-stage-vehicle.attention{
    border-left-color:#c84a53;
    background:#fff7f7;
  }
  .mobile-stage-vehicle strong,.mobile-stage-vehicle span{display:block}
  .mobile-stage-vehicle strong{font-size:13px}
  .mobile-stage-vehicle span{margin-top:3px;font-size:10px;color:#75868c}
  .mobile-vehicle-chevron{font-size:25px;color:#778b91;font-weight:400}

  .mobile-stage-empty{
    min-height:88px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    color:#8da0a4;
  }
  .mobile-stage-empty svg{width:22px;height:22px;fill:#a9bfbb}
  .mobile-stage-empty span{font-size:10px}

  .mobile-stage-view-all{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    margin-top:8px;
    padding:9px 10px 5px;
    border-top:1px solid var(--line);
    color:var(--accent);
    font-size:10px;
    font-weight:900;
    text-align:center;
    text-decoration:none;
  }
  .mobile-stage-view-all:active{opacity:.72}

  /* Dark mode matching for new mobile pipeline */
  html[data-theme="dark"] .stage-selector-btn{
    background:#0a3a3b;
    border-color:#165052;
    color:#c7d9d8;
    box-shadow:none;
  }
  html[data-theme="dark"] .stage-selector-btn b{color:#a8c0bf}
  html[data-theme="dark"] .stage-selector-btn.active{
    background:#118078;
    border-color:#118078;
    color:#fff;
  }
  html[data-theme="dark"] .stage-selector-btn.active b{color:#fff}
  html[data-theme="dark"] .mobile-stage-panel{
    background:#0a3a3b;
    border-color:#165052;
    box-shadow:0 5px 16px rgba(0,0,0,.15);
  }
  html[data-theme="dark"] .mobile-stage-vehicle{
    background:#082a2c;
    border-color:#165052;
    border-left-color:#22a99d;
    color:#ecf5f4;
  }
  html[data-theme="dark"] .mobile-stage-vehicle.attention{
    background:#352326;
    border-left-color:#dd6971;
  }
  html[data-theme="dark"] .mobile-stage-vehicle span{color:#a8c0bf}
  html[data-theme="dark"] .mobile-stage-icon{
    background:#123f41;color:#6ee0d4;
  }
  html[data-theme="dark"] .mobile-stage-count b{color:#6ee0d4}
}


/* ReconLane v0.9.2 - clickable vehicle rows */
.vehicle-row[role="link"]{cursor:pointer}
.vehicle-row[role="link"]:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

@media(max-width:760px){
  .vehicle-row[role="link"]{
    transition:transform .08s ease, box-shadow .08s ease, border-color .08s ease;
  }
  .vehicle-row[role="link"]:active{
    transform:scale(.992);
    border-color:#9bc8c3!important;
  }
}


/* ==========================================================
   ReconLane v0.9.3 - Desktop Manager Board
   Mobile board remains independently styled below 760px.
   ========================================================== */

.desktop-dashboard-lower{display:none}
.mobile-attention-section{display:none}

@media(min-width:761px){
  /* Center useful content instead of stretching across giant monitors. */
  .dashboard-workspace{
    width:100%;
    max-width:1380px;
    margin:0 auto;
  }

  /* Slightly stronger desktop KPI presentation without affecting mobile. */
  .dashboard-workspace .metric-grid{
    gap:12px;
  }
  .dashboard-workspace .metric{
    min-height:108px;
    padding:16px 18px;
  }

  /* Denser operational Kanban. */
  .dashboard-workspace .content-section{
    margin-top:22px;
  }
  .dashboard-workspace .kanban{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(185px,1fr));
    gap:9px;
    overflow:visible;
    padding-bottom:0;
  }
  .dashboard-workspace .lane{
    width:auto;
    min-width:0;
    min-height:132px;
    max-height:390px;
    overflow-y:auto;
    background:#f2f5f5;
    padding:8px;
  }
  .dashboard-workspace .lane-head{
    position:sticky;
    top:-8px;
    z-index:2;
    background:#f2f5f5;
    padding:5px 4px 9px;
  }
  .dashboard-workspace .vehicle-card{
    padding:9px;
    margin-bottom:6px;
  }
  .dashboard-workspace .vehicle-card strong{
    font-size:11px;
  }
  .dashboard-workspace .vehicle-card small{
    font-size:9px;
  }

  /* Remove the oversized car illustrations on desktop completely. */
  .dashboard-workspace .lane-empty{
    min-height:76px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px 8px;
    color:#8c9ca1;
    font-size:10px;
  }
  .dashboard-workspace .lane-empty svg{
    display:none!important;
  }
  .dashboard-workspace .lane-empty span{
    display:block;
  }

  /* Lower manager information area. Always rendered on desktop. */
  .desktop-dashboard-lower{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:12px;
    margin-top:14px;
  }
  .desktop-dashboard-panel{
    min-width:0;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:11px;
    box-shadow:var(--shadow);
    padding:16px;
  }
  .desktop-panel-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:12px;
    padding-bottom:11px;
    border-bottom:1px solid #edf1f2;
  }
  .desktop-panel-head span{
    display:block;
    color:var(--accent);
    font-size:9px;
    font-weight:900;
    letter-spacing:.1em;
    margin-bottom:3px;
  }
  .desktop-panel-head h2{
    font-size:17px;
  }
  .desktop-panel-head>a{
    color:var(--accent);
    font-size:10px;
    font-weight:800;
  }

  .desktop-attention-list,
  .recent-activity-list{
    display:grid;
  }
  .desktop-attention-item,
  .recent-activity-item{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    padding:11px 2px;
    border-bottom:1px solid #edf1f2;
  }
  .desktop-attention-item:last-child,
  .recent-activity-item:last-child{
    border-bottom:0;
  }
  .desktop-attention-item>div:first-child,
  .recent-activity-copy{
    min-width:0;
    flex:1;
  }
  .desktop-attention-item strong,
  .desktop-attention-item span,
  .recent-activity-copy strong,
  .recent-activity-copy span{
    display:block;
  }
  .desktop-attention-item strong,
  .recent-activity-copy strong{
    font-size:11px;
  }
  .desktop-attention-item span,
  .recent-activity-copy span{
    margin-top:3px;
    color:var(--muted);
    font-size:9px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .desktop-attention-status{
    text-align:right;
    max-width:180px;
  }
  .desktop-attention-status b,
  .desktop-attention-status em{
    display:block;
  }
  .desktop-attention-status b{
    font-size:12px;
  }
  .desktop-attention-status em{
    margin-top:3px;
    color:var(--danger);
    font-size:9px;
    font-style:normal;
    font-weight:800;
  }

  .activity-dot{
    width:8px;
    height:8px;
    min-width:8px;
    border-radius:50%;
    background:var(--accent2);
  }
  .recent-activity-meta{
    min-width:88px;
    text-align:right;
  }
  .recent-activity-meta b,
  .recent-activity-meta span{
    display:block;
  }
  .recent-activity-meta b{
    color:var(--ink);
    font-size:9px;
  }
  .recent-activity-meta span{
    margin-top:3px;
    color:var(--muted);
    font-size:9px;
  }

  .desktop-empty-state{
    min-height:128px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    text-align:left;
    padding:18px;
  }
  .desktop-empty-icon{
    width:38px;
    height:38px;
    min-width:38px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#e8f4f1;
    color:var(--accent);
    font-size:18px;
    font-weight:900;
  }
  .desktop-empty-icon.activity{
    background:#eaf2f4;
    color:#357889;
  }
  .desktop-empty-state strong,
  .desktop-empty-state p{
    display:block;
  }
  .desktop-empty-state strong{
    font-size:12px;
  }
  .desktop-empty-state p{
    margin:3px 0 0;
    max-width:300px;
    font-size:10px;
  }

  /* Mobile-only attention duplicate stays hidden on desktop. */
  .mobile-attention-section{
    display:none!important;
  }

  /* Dark mode desktop board surfaces. */
  html[data-theme="dark"] .dashboard-workspace .lane,
  html[data-theme="dark"] .dashboard-workspace .lane-head{
    background:#082a2c;
  }
  html[data-theme="dark"] .desktop-dashboard-panel{
    background:#0a3a3b;
    border-color:#165052;
  }
  html[data-theme="dark"] .desktop-panel-head,
  html[data-theme="dark"] .desktop-attention-item,
  html[data-theme="dark"] .recent-activity-item{
    border-color:#165052;
  }
  html[data-theme="dark"] .desktop-empty-icon{
    background:#123f41;
    color:#6ee0d4;
  }
}

/* Preserve the existing mobile Board behavior. */
@media(max-width:760px){
  .desktop-dashboard-lower{
    display:none!important;
  }
  .mobile-attention-section{
    display:block;
  }
  .dashboard-workspace{
    width:auto;
    max-width:none;
    margin:0;
  }
}


/* ==========================================================
   ReconLane v0.9.4 - Desktop Gradient + Analytics
   Accent palette: #17ffc6 → #03448c
   Mobile styling intentionally unchanged.
   ========================================================== */

@media(min-width:761px){

  /* Ambient branded canvas, intentionally subtle for readability */
  html[data-theme="light"] body,
  html[data-theme="light"] .main{
    background:
      radial-gradient(circle at 8% 8%, rgba(23,255,198,.11), transparent 28%),
      radial-gradient(circle at 92% 82%, rgba(3,68,140,.10), transparent 34%),
      linear-gradient(135deg, rgba(23,255,198,.025), rgba(3,68,140,.025)),
      #f4f7f8!important;
  }

  /* Slight glass/polish for major dashboard surfaces */
  html[data-theme="light"] .dashboard-workspace .metric,
  html[data-theme="light"] .desktop-dashboard-panel,
  html[data-theme="light"] .dashboard-workspace .lane{
    backdrop-filter:blur(3px);
  }

  html[data-theme="light"] .dashboard-workspace .metric,
  html[data-theme="light"] .desktop-dashboard-panel{
    border-color:rgba(36,110,126,.16)!important;
    box-shadow:
      0 10px 28px rgba(18,56,74,.06),
      0 1px 0 rgba(255,255,255,.7) inset;
  }

  /* Gradient detail line across major panels */
  html[data-theme="light"] .desktop-dashboard-panel{
    position:relative;
    overflow:hidden;
  }
  html[data-theme="light"] .desktop-dashboard-panel:before{
    content:"";
    position:absolute;
    left:0;right:0;top:0;height:2px;
    background:linear-gradient(90deg,#17ffc6,#03448c);
    opacity:.5;
  }

  /* Pipeline label gets branded gradient text */
  html[data-theme="light"] .pipeline-only-head span,
  html[data-theme="light"] .desktop-panel-head>div>span{
    background:linear-gradient(90deg,#0ca98c,#03448c);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent!important;
  }

  .desktop-analytics-row{
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(320px,.85fr);
    gap:12px;
    margin-top:12px;
  }

  .analytics-panel{
    min-height:280px;
  }

  /* Horizontal stage bar chart */
  .stage-bar-chart{
    display:grid;
    gap:13px;
    padding-top:14px;
  }

  .stage-bar-row{
    display:grid;
    gap:6px;
  }

  .stage-bar-label{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-size:10px;
  }

  .stage-bar-label span{
    color:var(--ink);
    font-weight:700;
  }

  .stage-bar-label b{
    color:#03448c;
    font-size:11px;
  }

  .stage-bar-track{
    height:10px;
    border-radius:999px;
    background:#e6eff0;
    overflow:hidden;
  }

  .stage-bar-track i{
    display:block;
    height:100%;
    min-width:0;
    border-radius:999px;
    background:linear-gradient(90deg,#17ffc6 0%,#0bb7c3 48%,#03448c 100%);
    box-shadow:0 0 12px rgba(23,255,198,.15);
  }

  /* Donut */
  .age-donut-layout{
    display:grid;
    grid-template-columns:180px 1fr;
    align-items:center;
    gap:22px;
    padding-top:18px;
  }

  .age-donut{
    width:172px;
    height:172px;
    border-radius:50%;
    position:relative;
    display:grid;
    place-items:center;
    background:
      conic-gradient(
        #17ffc6 0 var(--p0),
        #08cdb8 var(--p0) calc(var(--p0) + var(--p1)),
        #1d86b7 calc(var(--p0) + var(--p1)) calc(var(--p0) + var(--p1) + var(--p2)),
        #03448c calc(var(--p0) + var(--p1) + var(--p2)) 100%
      );
  }

  .age-donut:after{
    content:"";
    position:absolute;
    width:104px;
    height:104px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 0 0 1px rgba(36,110,126,.05);
  }

  .age-donut>div{
    z-index:1;
    text-align:center;
  }

  .age-donut strong,
  .age-donut span{
    display:block;
  }

  .age-donut strong{
    font-size:26px;
    color:#18343e;
  }

  .age-donut span{
    margin-top:2px;
    color:#74878e;
    font-size:10px;
    font-weight:700;
  }

  .age-legend{
    display:grid;
    gap:10px;
  }

  .age-legend-row{
    display:grid;
    grid-template-columns:10px 1fr auto;
    gap:8px;
    align-items:center;
    padding:5px 0;
    font-size:10px;
  }

  .age-legend-row i{
    width:9px;
    height:9px;
    border-radius:3px;
  }

  .age-legend-row span{
    color:var(--muted);
  }

  .age-legend-row strong{
    color:var(--ink);
  }

  .age-legend-row.bucket-0 i{background:#17ffc6}
  .age-legend-row.bucket-1 i{background:#08cdb8}
  .age-legend-row.bucket-2 i{background:#1d86b7}
  .age-legend-row.bucket-3 i{background:#03448c}

  .analytics-empty{
    min-height:210px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:20px;
  }

  .analytics-empty-icon{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:linear-gradient(135deg,rgba(23,255,198,.17),rgba(3,68,140,.12));
    color:#0a748a;
    font-size:19px;
    margin-bottom:10px;
  }

  .analytics-empty strong{
    font-size:12px;
  }

  .analytics-empty span{
    margin-top:4px;
    color:var(--muted);
    font-size:10px;
  }

  /* Dark mode keeps its darker green canvas, charts use same accent palette */
  html[data-theme="dark"] .stage-bar-track{
    background:#123f41;
  }

  html[data-theme="dark"] .stage-bar-label b{
    color:#62d8ff;
  }

  html[data-theme="dark"] .age-donut:after{
    background:#0a3a3b;
    box-shadow:0 0 0 1px #165052;
  }

  html[data-theme="dark"] .age-donut strong{
    color:#ecf5f4;
  }

  html[data-theme="dark"] .analytics-empty-icon{
    background:linear-gradient(135deg,rgba(23,255,198,.12),rgba(3,68,140,.18));
    color:#6ee0d4;
  }
}

@media(min-width:761px) and (max-width:1100px){
  .desktop-analytics-row{
    grid-template-columns:1fr;
  }
}


/* ==========================================================
   ReconLane v0.9.5 - Desktop Dark Mode Refresh
   Palette: #44a08d -> #093637
   ========================================================== */

@media(min-width:761px){
  html[data-theme="dark"] body,
  html[data-theme="dark"] .main{
    background:
      radial-gradient(circle at 12% 7%,rgba(68,160,141,.22),transparent 30%),
      radial-gradient(circle at 89% 80%,rgba(9,54,55,.48),transparent 39%),
      linear-gradient(145deg,#174d48 0%,#10413f 43%,#093637 100%)!important;
  }

  html[data-theme="dark"] .dashboard-workspace .metric,
  html[data-theme="dark"] .desktop-dashboard-panel,
  html[data-theme="dark"] .dashboard-workspace .lane{
    background:rgba(16,65,62,.78)!important;
    border-color:rgba(68,160,141,.30)!important;
    box-shadow:0 10px 28px rgba(0,19,20,.13),inset 0 1px 0 rgba(190,235,226,.035);
  }

  html[data-theme="dark"] .desktop-dashboard-panel:before{
    background:linear-gradient(90deg,#44a08d,#286f68,#093637);
    opacity:.8;
  }

  html[data-theme="dark"] .pipeline-only-head span,
  html[data-theme="dark"] .desktop-panel-head>div>span{
    background:linear-gradient(90deg,#8bd3c4,#44a08d);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent!important;
  }

  /* KPI icon root-cause fix:
     remove oversized circular treatment and give every SVG a centered,
     consistent rounded-square container. */
  html[data-theme="dark"] .dashboard-workspace .metric-icon{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    flex:0 0 42px!important;
    padding:0!important;
    margin:0!important;
    border-radius:12px!important;
    display:grid!important;
    place-items:center!important;
    line-height:1!important;
    overflow:hidden!important;
    border:1px solid rgba(255,255,255,.07)!important;
    box-shadow:none!important;
  }

  html[data-theme="dark"] .dashboard-workspace .metric-icon svg{
    width:20px!important;
    height:20px!important;
    display:block!important;
    margin:0!important;
    fill:currentColor!important;
    stroke:none!important;
    transform:none!important;
  }

  html[data-theme="dark"] .metric-icon-active{
    color:#bceadf!important;
    background:rgba(68,160,141,.22)!important;
  }
  html[data-theme="dark"] .metric-icon-blocked{
    color:#ffc6ce!important;
    background:rgba(196,69,84,.17)!important;
  }
  html[data-theme="dark"] .metric-icon-overdue{
    color:#ffe1a4!important;
    background:rgba(197,139,39,.17)!important;
  }
  html[data-theme="dark"] .metric-icon-age{
    color:#c4e1e8!important;
    background:rgba(65,132,151,.17)!important;
  }

  html[data-theme="dark"] .stage-bar-track{background:rgba(5,39,39,.72)}
  html[data-theme="dark"] .stage-bar-track i{
    background:linear-gradient(90deg,#44a08d,#2a766e,#0d4948);
    box-shadow:0 0 12px rgba(68,160,141,.12);
  }
  html[data-theme="dark"] .stage-bar-label b{color:#96d8ca}

  html[data-theme="dark"] .age-donut{
    background:conic-gradient(
      #8bd3c4 0 var(--p0),
      #44a08d var(--p0) calc(var(--p0) + var(--p1)),
      #28776f calc(var(--p0) + var(--p1)) calc(var(--p0) + var(--p1) + var(--p2)),
      #0b4646 calc(var(--p0) + var(--p1) + var(--p2)) 100%);
  }
  html[data-theme="dark"] .age-donut:after{
    background:#0f403e;
    box-shadow:0 0 0 1px rgba(68,160,141,.24);
  }
  html[data-theme="dark"] .age-legend-row.bucket-0 i{background:#8bd3c4}
  html[data-theme="dark"] .age-legend-row.bucket-1 i{background:#44a08d}
  html[data-theme="dark"] .age-legend-row.bucket-2 i{background:#28776f}
  html[data-theme="dark"] .age-legend-row.bucket-3 i{background:#0b4646}
  html[data-theme="dark"] .analytics-empty-icon{
    background:rgba(68,160,141,.12)!important;
    border:1px solid rgba(68,160,141,.22);
    color:#94d8ca!important;
  }
}


/* ==========================================================
   ReconLane v0.9.6 - Unified KPI Icons
   Use the cleaner rounded-square treatment in light mode too.
   ========================================================== */

@media(min-width:761px){
  html[data-theme="light"] .dashboard-workspace .metric-icon{
    width:42px!important;
    height:42px!important;
    min-width:42px!important;
    flex:0 0 42px!important;
    padding:0!important;
    margin:0!important;
    border-radius:12px!important;
    display:grid!important;
    place-items:center!important;
    line-height:1!important;
    overflow:hidden!important;
    box-shadow:none!important;
    border:1px solid rgba(15,89,91,.08)!important;
  }

  html[data-theme="light"] .dashboard-workspace .metric-icon svg{
    width:20px!important;
    height:20px!important;
    display:block!important;
    margin:0!important;
    fill:currentColor!important;
    stroke:none!important;
    transform:none!important;
  }

  html[data-theme="light"] .metric-icon-active{
    color:#0d746d!important;
    background:rgba(68,160,141,.14)!important;
  }

  html[data-theme="light"] .metric-icon-blocked{
    color:#c54a59!important;
    background:rgba(197,74,89,.11)!important;
  }

  html[data-theme="light"] .metric-icon-overdue{
    color:#b77a10!important;
    background:rgba(196,137,28,.12)!important;
  }

  html[data-theme="light"] .metric-icon-age{
    color:#28778d!important;
    background:rgba(53,125,151,.11)!important;
  }
}


/* ReconLane v0.9.6 - User Activity report */
.user-activity-report .surface-title span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}

.user-activity-chart{
  display:grid;
  gap:13px;
  margin-top:5px;
}

.user-activity-row{
  display:grid;
  gap:7px;
}

.user-activity-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.user-activity-name{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.mini-user-avatar{
  width:27px;
  height:27px;
  min-width:27px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e7f4f1;
  color:#0d746d;
  font-size:10px;
  font-weight:900;
}

.user-activity-name strong{
  font-size:11px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.user-activity-head>b{
  font-size:10px;
  color:var(--muted);
  white-space:nowrap;
}

.user-activity-track{
  height:9px;
  border-radius:999px;
  overflow:hidden;
  background:#e8eff0;
}

.user-activity-track i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#44a08d,#216f6b,#093637);
}

.report-empty-state{
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  text-align:left;
}

.report-empty-state>span{
  width:36px;
  height:36px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e8f4f1;
  color:#0d746d;
  font-weight:900;
}

.report-empty-state strong,
.report-empty-state p{
  display:block;
}

.report-empty-state strong{
  font-size:11px;
}

.report-empty-state p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:10px;
}

html[data-theme="dark"] .mini-user-avatar{
  background:rgba(68,160,141,.18);
  color:#a9e1d6;
}

html[data-theme="dark"] .user-activity-track{
  background:#123f41;
}

html[data-theme="dark"] .report-empty-state>span{
  background:rgba(68,160,141,.12);
  color:#94d8ca;
}


/* ReconLane v0.9.7 - Completed Vehicles report */
.completed-vehicles-report .surface-title>div>span{
  display:block;
  margin-top:3px;
  color:var(--muted);
  font-size:10px;
}
.completed-count{
  min-width:34px;
  height:34px;
  padding:0 9px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:#e7f4f1;
  color:#0d746d;
  font-size:15px;
}
.completed-vehicle-list{display:grid}
.completed-vehicle-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 2px;
  border-bottom:1px solid #edf1f2;
  color:inherit;
}
.completed-vehicle-item:last-child{border-bottom:0}
.completed-vehicle-item>div:first-child{min-width:0;flex:1}
.completed-vehicle-item strong,
.completed-vehicle-item span{display:block}
.completed-vehicle-item>div:first-child>strong{font-size:11px}
.completed-vehicle-item>div:first-child>span{
  margin-top:3px;
  color:var(--muted);
  font-size:9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.completed-time{text-align:right;min-width:80px}
.completed-time strong{font-size:12px;color:#0d746d}
.completed-time span{margin-top:2px;color:var(--muted);font-size:9px}

html[data-theme="dark"] .completed-count{
  background:rgba(68,160,141,.18);
  color:#a9e1d6;
}
html[data-theme="dark"] .completed-vehicle-item{
  border-color:#165052;
}
html[data-theme="dark"] .completed-time strong{
  color:#94d8ca;
}

@media(max-width:760px){
  .completed-vehicle-item{align-items:flex-start}
}


/* ==========================================================
   ReconLane v0.9.8 - Mobile board regression fix
   ========================================================== */

/* Mobile KPI icons use the exact same SVG container treatment as desktop. */
@media(max-width:760px){
  .dashboard-workspace .metric-icon{
    width:36px!important;
    height:36px!important;
    min-width:36px!important;
    flex:0 0 36px!important;
    padding:0!important;
    margin:0!important;
    border-radius:11px!important;
    display:grid!important;
    place-items:center!important;
    line-height:1!important;
    overflow:hidden!important;
    box-shadow:none!important;
    border:1px solid rgba(15,89,91,.07)!important;
  }

  .dashboard-workspace .metric-icon svg{
    width:18px!important;
    height:18px!important;
    display:block!important;
    margin:0!important;
    fill:currentColor!important;
    stroke:none!important;
    transform:none!important;
  }

  html[data-theme="light"] .metric-icon-active{
    color:#0d746d!important;background:rgba(68,160,141,.14)!important;
  }
  html[data-theme="light"] .metric-icon-blocked{
    color:#c54a59!important;background:rgba(197,74,89,.11)!important;
  }
  html[data-theme="light"] .metric-icon-overdue{
    color:#b77a10!important;background:rgba(196,137,28,.12)!important;
  }
  html[data-theme="light"] .metric-icon-age{
    color:#28778d!important;background:rgba(53,125,151,.11)!important;
  }

  html[data-theme="dark"] .metric-icon-active{
    color:#bceadf!important;background:rgba(68,160,141,.22)!important;
  }
  html[data-theme="dark"] .metric-icon-blocked{
    color:#ffc6ce!important;background:rgba(196,69,84,.17)!important;
  }
  html[data-theme="dark"] .metric-icon-overdue{
    color:#ffe1a4!important;background:rgba(197,139,39,.17)!important;
  }
  html[data-theme="dark"] .metric-icon-age{
    color:#c4e1e8!important;background:rgba(65,132,151,.17)!important;
  }

  /* These charts belong to the desktop manager dashboard only.
     They were leaking into mobile beneath the selected pipeline lane. */
  .desktop-analytics-row,
  .desktop-analytics,
  .desktop-dashboard-analytics,
  .dashboard-analytics,
  .analytics-grid,
  .desktop-only{
    display:none!important;
  }
}

/* Explicit desktop restore so the charts remain available to managers on desktop. */
@media(min-width:761px){
  .desktop-analytics,
  .desktop-dashboard-analytics,
  .dashboard-analytics,
  .analytics-grid{
    display:grid;
  }
}


/* ReconLane v0.9.9 - Desktop stage cap + View All */
@media(min-width:761px){
  .lane-view-all{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:31px;
    margin-top:5px;
    padding:7px 8px 5px;
    border-top:1px solid var(--line);
    color:var(--accent);
    font-size:9px;
    font-weight:900;
    text-align:center;
  }
  .lane-view-all:hover{text-decoration:underline}
}

.stage-filter-banner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
  padding:8px 10px;
  border:1px solid #cce3df;
  border-radius:8px;
  background:#eef8f6;
  color:#38575b;
  font-size:10px;
}
.stage-filter-banner a{
  color:var(--accent);
  font-weight:800;
  white-space:nowrap;
}
html[data-theme="dark"] .stage-filter-banner{
  background:#123f3e;
  border-color:#28615c;
  color:#c3d8d5;
}