/* ================================================================
   ETHICS EXPRESS RIDER PORTAL — CSS
   Color scheme: Redmine-inspired blue (#628db6 header, white body)
   ================================================================ */

:root {
  --hdr-top:        #3e6a8c;
  --hdr-project:    #628db6;
  --hdr-dark:       #507aa6;
  --sidebar-bg:     #fff;
  --sidebar-border: #c8d9e6;
  --body-bg:        #ffffff;
  --page-bg:        #f4f7fa;
  --border:         #d0dce8;
  --border-lt:      #e4edf4;
  --text:           #333333;
  --text-sm:        #555555;
  --text-xs:        #777777;
  --link:           #1168a0;
  --sidebar-w:      210px;
  --topbar-h:       36px;
  --radius:         4px;
  --font:           'Segoe UI', Arial, sans-serif;
  /* Status palette */
  --green:  #2e8b57;  --green-bg:  #d4f0e3;
  --orange: #c97a00;  --orange-bg: #fef3ce;
  --red:    #c0392b;  --red-bg:    #fde8e8;
  --blue:   #1168a0;  --blue-bg:   #ddeef8;
  --purple: #7c3aed;  --purple-bg: #ede9fe;
  --teal:   #0e7490;  --teal-bg:   #e0f3f7;
  --grey:   #555555;  --grey-bg:   #eaecef;
}

/* ── RESET ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 13px; }
body { font-family: var(--font); background: var(--page-bg); color: var(--text); min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--sidebar-bg); }
::-webkit-scrollbar-thumb { background: #b0c8de; border-radius: 3px; }

/* ── TOP NAV ────────────────────────────────────────────────────── */
.top-nav {
  background: var(--hdr-top);
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; flex-shrink: 0;
}
.top-nav-brand { color: #fff; font-weight: 700; font-size: 13px; margin-right: 4px; }
.top-nav-sep   { color: rgba(255,255,255,.4); margin: 0 6px; }
.top-nav-left  { display: flex; align-items: center; }
.top-nav-right { display: flex; align-items: center; gap: 12px; font-size: 12px; color: rgba(255,255,255,.85); }
.top-nav-link  { color: rgba(255,255,255,.85); font-size: 12px; padding: 3px 9px; border-radius: 3px; }
.top-nav-link:hover { background: rgba(255,255,255,.15); color: #fff; text-decoration: none; }

/* ── PROJECT HEADER ─────────────────────────────────────────────── */
.project-header {
  background: linear-gradient(to bottom, var(--hdr-project), var(--hdr-dark));
  padding: 10px 16px 9px;
  border-bottom: 2px solid #3d6b8a;
  flex-shrink: 0;
}
.project-title { font-size: 18px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25); }

/* ── TAB NAV ────────────────────────────────────────────────────── */
.tab-nav {
  background: var(--hdr-dark);
  display: flex; align-items: flex-end;
  padding: 0 16px;
  border-bottom: 1px solid #3d6b8a;
  flex-shrink: 0; overflow-x: auto;
}
.tab-nav-item {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 7px 13px; font-size: 12.5px;
  color: rgba(255,255,255,.78);
  border: 1px solid transparent; border-bottom: none;
  border-radius: 3px 3px 0 0;
  margin-bottom: -1px; white-space: nowrap; cursor: pointer;
  transition: background .12s;
}
.tab-nav-item:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.tab-nav-item.active {
  background: var(--body-bg); color: var(--text);
  border-color: #3d6b8a; border-bottom-color: var(--body-bg); font-weight: 600;
}
.tab-alert-badge { background: var(--red); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 8px; }

/* ── LAYOUT ─────────────────────────────────────────────────────── */
.layout-body { display: flex; flex: 1; min-height: 0; }

/* ── SIDEBAR ────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  padding: 10px 0; overflow-y: auto;
}
.sidebar-section { margin-bottom: 4px; }
.sidebar-section-title {
  font-size: 10px; font-weight: 700; letter-spacing: .9px;
  text-transform: uppercase; color: var(--text-xs);
  padding: 8px 14px 4px; border-bottom: 1px solid var(--sidebar-border);
  margin-bottom: 2px;
}
.sidebar-item {
  display: block; padding: 7px 14px;
  font-size: 12.5px; color: var(--text); font-weight: 500;
  text-decoration: none; transition: background .12s;
}
.sidebar-item:hover { background: rgba(0,0,0,.05); color: var(--text); text-decoration: none; }
.sidebar-item.active {
  background: linear-gradient(to right,#d6e8f5,#e8f3fb);
  color: #1e4a7a;
  font-weight: 700;
  border-left: 3px solid var(--hdr-project);
}
.sidebar-item svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .65; }
.sidebar-badge { margin-left: auto; background: var(--red); color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 8px; }

/* ── MAIN CONTENT ───────────────────────────────────────────────── */
.main-content { flex: 1; padding: 14px 18px 40px; min-width: 0; overflow-x: hidden; }

/* ── BREADCRUMB ─────────────────────────────────────────────────── */
.page-breadcrumb { font-size: 11px; color: var(--text-xs); margin-bottom: 12px; }
.page-breadcrumb a { color: var(--link); }

/* ── FLASH ──────────────────────────────────────────────────────── */
.flash { padding: 8px 14px; border-radius: var(--radius); font-size: 12.5px; margin-bottom: 10px; border: 1px solid; }
.flash-success { background: var(--green-bg); border-color: #a3d9be; color: #1a5c35; }
.flash-error   { background: var(--red-bg);   border-color: #f0a8a8; color: #7a1a1a; }

/* ── SECTION BOX ────────────────────────────────────────────────── */
.section-box { background: var(--body-bg); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 14px; overflow: hidden; }
.section-head {
  background: linear-gradient(to bottom, #e8f0f8, #dce7f2);
  border-bottom: 1px solid var(--border);
  padding: 7px 12px; font-size: 13px; font-weight: 600; color: #334e6a;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  flex-wrap: wrap;
}
.section-head > * { flex-shrink: 0; }
.section-body { padding: 12px 14px; }

/* ── KPI GRID ───────────────────────────────────────────────────── */
.kpi-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.kpi-card {
  flex: 1; min-width: 160px;
  background: var(--body-bg); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px 14px;
  border-top: 3px solid transparent;
  display: flex; align-items: center; gap: 10px;
}
.kpi-card.c-blue   { border-top-color: var(--hdr-project); }
.kpi-card.c-green  { border-top-color: var(--green); }
.kpi-card.c-orange { border-top-color: var(--orange); }
.kpi-card.c-red    { border-top-color: var(--red); }
.kpi-card.c-teal   { border-top-color: var(--teal); }
.kpi-card.c-purple { border-top-color: var(--purple); }
.kpi-card.c-gray   { border-top-color: #94a3b8; }
.kpi-icon.c-gray   { background: #f1f5f9; color: #64748b; }
.kpi-icon { width: 36px; height: 36px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kpi-icon svg { width: 18px; height: 18px; }
.kpi-icon.c-blue   { background: var(--blue-bg);   color: var(--hdr-project); }
.kpi-icon.c-green  { background: var(--green-bg);  color: var(--green); }
.kpi-icon.c-orange { background: var(--orange-bg); color: var(--orange); }
.kpi-icon.c-red    { background: var(--red-bg);    color: var(--red); }
.kpi-icon.c-teal   { background: var(--teal-bg);   color: var(--teal); }
.kpi-icon.c-purple { background: var(--purple-bg); color: var(--purple); }
.kpi-label { display: block; font-size: 11px; color: var(--text-xs); margin-bottom: 1px; }
.kpi-value { display: block; font-size: 22px; font-weight: 700; line-height: 1.1; color: var(--text); }
.kpi-sub   { display: block; font-size: 11px; color: var(--text-xs); margin-top: 1px; }
.kpi-sub.up   { color: var(--green); }
.kpi-sub.down { color: var(--red); }

/* Finance KPI (text only, no icon) */
.fin-kpi-row { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.fin-kpi { flex: 1; padding: 14px 18px; border-right: 1px solid var(--border); }
.fin-kpi:last-child { border-right: none; }
.fin-kpi-val  { font-size: 22px; font-weight: 700; display: block; }
.fin-kpi-val.blue   { color: var(--hdr-project); }
.fin-kpi-val.orange { color: var(--orange); }
.fin-kpi-val.teal   { color: var(--teal); }
.fin-kpi-val.red    { color: var(--red); }
.fin-kpi-label { font-size: 11.5px; color: var(--text-xs); margin-top: 2px; }
.fin-kpi-sub   { font-size: 11px; color: var(--red); margin-top: 2px; }

/* Analytics KPI (text centered) */
.ana-kpi-row { display: flex; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 14px; }
.ana-kpi { flex: 1; padding: 14px 18px; border-right: 1px solid var(--border); text-align: center; }
.ana-kpi:last-child { border-right: none; }
.ana-kpi-val   { font-size: 26px; font-weight: 700; display: block; }
.ana-kpi-label { font-size: 11.5px; color: var(--text-xs); margin-top: 3px; }

/* ── DATA TABLE ─────────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; }
table.data-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.data-tbl thead tr {
  background: linear-gradient(to bottom, #e8f0f8, #dce7f2);
  border-bottom: 2px solid var(--border);
}
table.data-tbl th {
  padding: 7px 10px; font-size: 11.5px; font-weight: 700;
  color: #334e6a; text-align: left; white-space: nowrap;
  border-right: 1px solid var(--border);
}
table.data-tbl th:last-child { border-right: none; }
table.data-tbl td {
  padding: 7px 10px; vertical-align: middle; color: var(--text-sm);
  border-bottom: 1px solid var(--border-lt);
  border-right: 1px solid var(--border-lt);
}
table.data-tbl td:last-child { border-right: none; }
table.data-tbl tbody tr:nth-child(odd)  { background: #f7fafd; }
table.data-tbl tbody tr:nth-child(even) { background: var(--body-bg); }
table.data-tbl tbody tr:hover { background: #e8f0f8; }
table.data-tbl tbody tr:last-child td  { border-bottom: none; }

/* Rider cell with avatar */
.rider-cell { display: flex; align-items: center; gap: 7px; }
.rider-av {
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: #d0e2f0; color: var(--hdr-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.rider-code { font-size: 10px; color: var(--text-xs); }

/* ── TABLE CONTROLS ─────────────────────────────────────────────── */
.tbl-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tbl-title { font-size: 13px; font-weight: 600; color: #334e6a; }

/* ── BADGES ─────────────────────────────────────────────────────── */
.badge { display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px; white-space: nowrap; }
/* Rider status */
.b-online    { background: var(--green-bg);  color: #1a7a42; }
.b-transit   { background: var(--blue-bg);   color: var(--blue); }
.b-idle      { background: var(--orange-bg); color: var(--orange); }
.b-offline   { background: var(--grey-bg);   color: var(--grey); }
.b-returning { background: var(--purple-bg); color: var(--purple); }
/* SLA */
.b-ontime  { background: var(--green-bg);  color: #1a7a42;       font-size: 10px; padding: 1px 6px; border-radius: 3px; }
.b-atrisk  { background: var(--orange-bg); color: var(--orange);  font-size: 10px; padding: 1px 6px; border-radius: 3px; }
.b-breach  { background: var(--red-bg);    color: var(--red);     font-size: 10px; padding: 1px 6px; border-radius: 3px; }
/* Attendance */
.b-present  { background: var(--green-bg);  color: #1a7a42; }
.b-late     { background: var(--orange-bg); color: var(--orange); }
.b-absent   { background: var(--red-bg);    color: var(--red); }
.b-upcoming { background: var(--blue-bg);   color: var(--blue); }
/* Order */
.b-delivered { background: var(--green-bg);  color: #1a7a42; }
.b-intransit { background: var(--blue-bg);   color: var(--blue); }
.b-delayed   { background: var(--orange-bg); color: var(--orange); }
.b-failed    { background: var(--red-bg);    color: var(--red); }
.b-attempted { background: var(--purple-bg); color: var(--purple); }
.b-pending   { background: var(--grey-bg);   color: var(--grey); }
.b-assigned  { background: var(--teal-bg);   color: var(--teal); }
/* COD Settlement */
.b-overdue  { background: var(--red-bg);    color: var(--red); }
.b-settled  { background: var(--green-bg);  color: #1a7a42; }
/* Doc status */
.b-expired  { background: var(--red-bg);    color: var(--red); }
.b-valid    { background: var(--green-bg);  color: #1a7a42; }
.b-review   { background: var(--orange-bg); color: var(--orange); }
.b-rejected { background: var(--grey-bg);   color: var(--grey); }
/* Priority */
.p-high   { background: var(--red-bg);    color: var(--red);    font-size: 10px; padding: 1px 6px; font-weight: 700; border-radius: 3px; }
.p-medium { background: var(--orange-bg); color: var(--orange); font-size: 10px; padding: 1px 6px; font-weight: 700; border-radius: 3px; }
.p-low    { background: var(--grey-bg);   color: var(--grey);   font-size: 10px; padding: 1px 6px; font-weight: 700; border-radius: 3px; }

/* ── BUTTONS ────────────────────────────────────────────────────── */
.btn { display: inline-block; padding: 5px 12px; font-size: 12px; font-weight: 600; border-radius: 3px; cursor: pointer; border: 1px solid; font-family: var(--font); text-decoration: none; white-space: nowrap; transition: filter .12s; }
.btn:hover { filter: brightness(.92); text-decoration: none; }
.btn-primary { background: linear-gradient(to bottom,#5c9bcc,#4a87b8); color:#fff; border-color:#3d6b8a; }
.btn-success { background: linear-gradient(to bottom,#3da862,#2e8b50); color:#fff; border-color:#246b3f; }
.btn-danger  { background: linear-gradient(to bottom,#e05a5a,#c0392b); color:#fff; border-color:#9b2d22; }
.btn-outline { background: linear-gradient(to bottom,#f6f8fa,#ecf0f4); color:var(--text-sm); border-color:var(--border); }
.btn-sm { padding: 3px 9px; font-size: 11px; }
.btn-xs { padding: 2px 7px; font-size: 11px; }
.btn-settle { background: linear-gradient(to bottom,#3da862,#2e8b50); color:#fff; border: 1px solid #246b3f; border-radius: 3px; padding: 3px 10px; font-size: 11.5px; font-weight: 700; cursor:pointer; font-family:var(--font); }
.btn-settle:hover { filter: brightness(.9); }
.btn-resolve { background: var(--green-bg); border: 1px solid #a3d9be; color: #1a5c35; border-radius: 3px; padding: 2px 8px; cursor: pointer; font-size: 11px; font-weight: 700; font-family: var(--font); }
.btn-resolve:hover { background: #a3d9be; }

/* ── FORMS ──────────────────────────────────────────────────────── */
.form-control {
  background: #fff; border: 1px solid #b0c8de; border-radius: 3px;
  padding: 5px 8px; font-size: 12.5px; color: var(--text);
  font-family: var(--font); outline: none;
}
.form-control:focus { border-color: var(--hdr-project); box-shadow: 0 0 0 2px rgba(98,141,182,.2); }
.form-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--text-sm); margin-bottom: 3px; }
.form-group { margin-bottom: 12px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* ── DASHBOARD GRID ─────────────────────────────────────────────── */
.dash-mid    { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 14px; }
.dash-bottom { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 14px; }

/* ── ISSUE TABLE (dashboard) ────────────────────────────────────── */
table.issue-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.issue-tbl th { background: linear-gradient(to bottom,#e8f0f8,#dce7f2); border: 1px solid var(--border); padding: 5px 10px; font-size: 11.5px; font-weight: 700; color: #334e6a; }
table.issue-tbl th:first-child { text-align: left; }
table.issue-tbl th:not(:first-child) { text-align: right; }
table.issue-tbl td { border: 1px solid var(--border-lt); padding: 5px 10px; }
table.issue-tbl td:not(:first-child) { text-align: right; }
table.issue-tbl tr:nth-child(odd)  { background: #f7fafd; }
table.issue-tbl tr:nth-child(even) { background: var(--body-bg); }
table.issue-tbl .total-row { background: #e3eef8 !important; font-weight: 700; }
table.issue-tbl a { color: var(--link); }

/* ── ALERT CARDS ────────────────────────────────────────────────── */
.alert-banner {
  background: #fff8e1; border: 1px solid #f0c060;
  border-left: 4px solid #f59e0b; border-radius: var(--radius);
  padding: 8px 14px; display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: #7c5200; margin-bottom: 12px;
}
.alert-banner svg { width: 14px; height: 14px; flex-shrink: 0; }
.alert-banner a { margin-left: auto; color: var(--link); font-size: 12px; }

.alert-card { background: var(--body-bg); border: 1px solid var(--border); border-radius: 3px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.alert-card.high   { border-left: 3px solid var(--red); }
.alert-card.medium { border-left: 3px solid var(--orange); }
.alert-body { flex: 1; }
.alert-title  { font-size: 13px; font-weight: 600; }
.alert-detail { font-size: 12px; color: var(--text-sm); margin-top: 2px; }
.alert-rider  { color: var(--link); font-size: 11.5px; }
.alert-meta   { text-align: right; font-size: 11px; color: var(--text-xs); flex-shrink: 0; }

.alert-mini { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 3px; border-left: 2px solid; margin-bottom: 5px; font-size: 12px; }
.am-high   { border-color: var(--red);    background: #fef5f5; }
.am-medium { border-color: var(--orange); background: #fffbf0; }
.am-type   { font-weight: 600; flex-shrink: 0; }
.am-rider  { color: var(--link); flex: 1; }
.am-time   { font-size: 10px; color: var(--text-xs); flex-shrink: 0; }

/* ── PROGRESS ───────────────────────────────────────────────────── */
.progress-row { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 7px; }
.progress-label { width: 120px; flex-shrink: 0; color: var(--text-sm); }
.progress-bar   { flex: 1; height: 10px; background: #e4edf4; border-radius: 5px; overflow: hidden; border: 1px solid var(--border); }
.progress-fill  { height: 100%; border-radius: 5px; transition: width 1s ease; }
.progress-val   { width: 35px; text-align: right; font-weight: 600; color: var(--text); font-size: 11.5px; }

/* ── DONUT CHART ────────────────────────────────────────────────── */
.donut-wrap { display: flex; align-items: center; gap: 16px; }
.donut-svg  { width: 90px; height: 90px; flex-shrink: 0; transform: rotate(-90deg); }
.legend     { display: flex; flex-direction: column; gap: 5px; }
.legend-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-sm); }
.dot        { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }

/* ── SHIFT STATS ────────────────────────────────────────────────── */
.shift-stats { display: flex; justify-content: space-around; padding: 12px 0; }
.shift-stat { text-align: center; }
.ss-num   { display: block; font-size: 28px; font-weight: 700; }
.ss-label { display: block; font-size: 11px; color: var(--text-xs); margin-top: 2px; }

/* ── TAB FILTER BUTTONS ─────────────────────────────────────────── */
.tab-filter { display: flex; gap: 4px; flex-wrap: wrap; }
.tf-btn { padding: 3px 11px; border-radius: 3px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); background: linear-gradient(to bottom,#f6f8fa,#ecf0f4); color: var(--text-sm); cursor: pointer; text-decoration: none; display: inline-block; }
.tf-btn:hover { border-color: var(--hdr-project); color: var(--link); text-decoration: none; }
.tf-btn.active { background: linear-gradient(to bottom,var(--hdr-project),var(--hdr-dark)); color: #fff; border-color: #3d6b8a; }

/* ── ANALYTICS ──────────────────────────────────────────────────── */
.charts-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.bar-chart { display: flex; align-items: flex-end; gap: 6px; height: 130px; padding: 0 4px; }
.bar-col   { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: 1; }
.bar       { width: 100%; border-radius: 2px 2px 0 0; min-height: 4px; transition: height .4s ease; }
.bar-val   { font-size: 10px; font-weight: 600; color: var(--text-sm); }
.bar-lbl   { font-size: 10px; color: var(--text-xs); }
.audit-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.audit-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--border-lt); }
.audit-tbl tr:last-child td { border-bottom: none; }
.audit-tbl td:first-child { color: var(--text-sm); }
.audit-tbl td:nth-child(2) { font-weight: 600; }
.audit-val-good    { color: var(--green); }
.audit-val-review  { color: var(--orange); }
.audit-val-monitor { color: var(--blue); }
.a-tag { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 3px; }
.a-good    { background: var(--green-bg);  color: #1a7a42; }
.a-review  { background: var(--orange-bg); color: var(--orange); }
.a-monitor { background: var(--blue-bg);   color: var(--blue); }

/* ── COMPLIANCE ─────────────────────────────────────────────────── */
.comp-stats { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.comp-stat  { flex: 1; min-width: 110px; border-radius: var(--radius); padding: 10px 14px; border: 1px solid; }
.cs-danger  { background: var(--red-bg);    border-color: #f0a8a8; }
.cs-warning { background: var(--orange-bg); border-color: #f0d080; }
.cs-info    { background: var(--blue-bg);   border-color: #b0c8de; }
.cs-success { background: var(--green-bg);  border-color: #a3d9be; }
.cs-num     { display: block; font-size: 24px; font-weight: 700; }
.cs-label   { display: block; font-size: 11px; color: var(--text-xs); margin-top: 2px; }

/* ── LIVE MAP ───────────────────────────────────────────────────── */
.map-layout { display: grid; grid-template-columns: 300px 1fr; gap: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; min-height: 520px; }
.map-sidebar { border-right: 1px solid var(--border); overflow-y: auto; }
.map-sidebar-hdr { background: linear-gradient(to bottom,#e8f0f8,#dce7f2); border-bottom: 1px solid var(--border); padding: 8px 12px; display: flex; align-items: center; justify-content: space-between; }
.map-sidebar-hdr span { font-weight: 600; font-size: 13px; color: #334e6a; }
.live-dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; display: inline-block; margin-right: 4px; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
.map-search { padding: 8px; border-bottom: 1px solid var(--border-lt); }
.map-search input { width: 100%; }
.rider-map-item { padding: 8px 12px; border-bottom: 1px solid var(--border-lt); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.rider-map-item:hover { background: #f0f6fb; }
.rmi-dot  { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.rmi-info { flex: 1; }
.rmi-name { font-weight: 600; font-size: 12.5px; color: var(--text); display: block; }
.rmi-sub  { font-size: 11px; color: var(--text-xs); }
.map-canvas { background: #1a2332; position: relative; overflow: hidden; }
.map-dot { position: absolute; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 700; transition: transform .2s; }
.map-dot:hover { transform: scale(1.3); z-index: 10; }
.map-dot span { position: absolute; top: -14px; font-size: 9px; color: #ddd; white-space: nowrap; }
.map-badge { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 5px; }
.map-badge-item { background: rgba(0,0,0,.6); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 3px; display: flex; align-items: center; gap: 5px; }

/* ── ROUTE ──────────────────────────────────────────────────────── */
.alloc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 14px; }
.alloc-card { border: 2px solid var(--border); border-radius: var(--radius); padding: 14px; text-align: center; cursor: pointer; background: var(--body-bg); transition: border-color .15s, background .15s; }
.alloc-card:hover, .alloc-card.active { border-color: var(--hdr-project); background: #e8f0f8; }
.alloc-icon  { font-size: 22px; margin-bottom: 4px; }
.alloc-name  { font-size: 12.5px; font-weight: 600; color: var(--text); }
.alloc-desc  { font-size: 10.5px; color: var(--text-xs); margin-top: 2px; }

/* ── RIDER DETAIL ───────────────────────────────────────────────── */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.detail-row  { display: flex; border-bottom: 1px solid var(--border-lt); padding: 6px 0; font-size: 12.5px; }
.detail-row:last-child { border-bottom: none; }
.detail-row dt { width: 140px; flex-shrink: 0; font-weight: 600; color: var(--text-sm); }
.detail-row dd { color: var(--text); }

/* ── FOOTER ─────────────────────────────────────────────────────── */
.site-footer { background: #f0f4f7; border-top: 1px solid var(--border); padding: 6px 16px; font-size: 11px; color: #888; text-align: center; flex-shrink: 0; }

/* ── LIVE TAG ───────────────────────────────────────────────────── */
.live-tag { font-size: 10px; font-weight: 700; color: var(--green); background: var(--green-bg); padding: 1px 6px; border-radius: 8px; }

/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .dash-mid    { grid-template-columns: 1fr; }
  .dash-bottom { grid-template-columns: 1fr 1fr; }
  .charts-row  { grid-template-columns: 1fr; }
  .alloc-grid  { grid-template-columns: 1fr 1fr; }
  .map-layout  { grid-template-columns: 1fr; }
  .map-canvas  { min-height: 300px; }
}
@media (max-width: 700px) {
  .sidebar { display: none; }
  .kpi-row { flex-direction: column; }
  .kpi-card { min-width: unset; }
  .fin-kpi-row, .ana-kpi-row { flex-direction: column; }
  .fin-kpi, .ana-kpi { border-right: none; border-bottom: 1px solid var(--border); }
  .dash-bottom { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .main-content { padding: 10px 10px 30px; }
}

/* ================================================================
   ADDITIONS v16+ — Toast, Modal, Grid, Notification, Sidebar toggle
   ================================================================ */

/* ── Sidebar toggle + sticky layout ──────────────────────────── */
.sidebar-toggle{background:none;border:none;color:rgba(255,255,255,.85);font-size:16px;cursor:pointer;padding:3px 8px;border-radius:3px;line-height:1;margin-right:4px}
.sidebar-toggle:hover{background:rgba(255,255,255,.15)}
.sidebar.collapsed{width:0;padding:0;overflow:hidden}
.layout-body{display:flex;flex:1;overflow:hidden;min-height:0}
.main-content{flex:1;padding:14px 18px 20px;min-width:0;overflow-y:auto}
.top-nav{position:sticky;top:0;z-index:200;flex-shrink:0}
.project-header{position:sticky;top:36px;z-index:199;flex-shrink:0}
.tab-nav{position:sticky;top:82px;z-index:198;flex-shrink:0}
body{height:100vh;overflow:hidden;display:flex;flex-direction:column}
.site-footer{flex-shrink:0}

/* ── SVG size safety ─────────────────────────────────────────── */
svg:not([width]):not([height]):not(.donut-svg):not(.leaflet-zoom-animated){width:16px;height:16px;flex-shrink:0}
.alert-banner svg{width:14px;height:14px;flex-shrink:0;stroke:#f59e0b}
.kpi-icon svg{width:18px;height:18px}

/* ── Toast notification (WMS-style) ──────────────────────────── */
@keyframes eeSlideIn{from{transform:translateX(110%);opacity:0}to{transform:none;opacity:1}}
@keyframes eeSlideOut{from{transform:none;opacity:1}to{transform:translateX(110%);opacity:0}}
.ee-toast{position:fixed;top:70px;right:22px;z-index:99999;display:flex;align-items:center;gap:10px;
  padding:11px 14px;border-radius:8px;font-size:12.5px;font-weight:600;font-family:inherit;
  box-shadow:0 6px 24px rgba(0,0,0,.15);animation:eeSlideIn .3s cubic-bezier(.22,1,.36,1);
  min-width:260px;max-width:400px;border-left:4px solid}
.ee-toast-close{background:none;border:none;cursor:pointer;font-size:15px;opacity:.6;padding:0;margin-left:auto}
.ee-toast-close:hover{opacity:1}

/* ── Confirm Modal ───────────────────────────────────────────── */
.ee-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:50000;display:flex;align-items:center;justify-content:center;display:none}
.ee-modal-overlay.open{display:flex}
.ee-modal{background:#fff;border-radius:10px;padding:28px 28px 22px;max-width:380px;width:90%;box-shadow:0 8px 40px rgba(0,0,0,.2);text-align:center}
.ee-modal-icon{font-size:40px;margin-bottom:12px}
.ee-modal-title{font-size:16px;font-weight:700;color:#1e3a5f;margin-bottom:8px}
.ee-modal-msg{font-size:13px;color:#666;margin-bottom:20px;line-height:1.5}
.ee-modal-btns{display:flex;gap:10px;justify-content:center}
.ee-modal-btns button{padding:8px 22px;border-radius:6px;font-size:13px;font-weight:700;cursor:pointer;border:1px solid;font-family:inherit}
.ee-btn-yes{background:linear-gradient(to bottom,#e05a5a,#c0392b);color:#fff;border-color:#9b2d22}
.ee-btn-no {background:linear-gradient(to bottom,#f6f8fa,#ecf0f4);color:#555;border-color:#d0dce8}

/* ── Notification Bell ───────────────────────────────────────── */
.notif-btn{position:relative;cursor:pointer;padding:4px 8px;border-radius:4px;color:rgba(255,255,255,.85);font-size:15px;display:flex;align-items:center}
.notif-btn:hover{background:rgba(255,255,255,.15)}
.notif-dot{position:absolute;top:3px;right:5px;width:8px;height:8px;background:#ef4444;border-radius:50%;border:1.5px solid #3e6a8c;display:none}
.notif-dot.active{display:block}
.notif-dropdown{position:absolute;top:calc(100% + 6px);right:0;width:320px;background:#fff;border:1px solid #d0dce8;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.14);z-index:1000;display:none}
.notif-dropdown.open{display:block}
.notif-hdr{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #e4edf4}
.notif-hdr-title{font-size:13px;font-weight:700;color:#1e3a5f}
.notif-mark-all{font-size:11px;color:#1168a0;cursor:pointer;background:none;border:none;font-family:inherit}
.notif-item{display:flex;gap:10px;padding:10px 14px;border-bottom:1px solid #f0f4f8;cursor:pointer;transition:background .12s}
.notif-item:hover{background:#f5f9ff}
.notif-item.unread{background:#f0f7ff}
.notif-icon-wrap{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:14px}
.ni-red{background:#fde8e8} .ni-orange{background:#fef3ce} .ni-blue{background:#ddeef8} .ni-green{background:#d4f0e3}
.notif-content{flex:1;min-width:0}
.notif-text{font-size:12.5px;font-weight:600;color:#2c3e50;line-height:1.3}
.notif-time{font-size:11px;color:#999;margin-top:2px}
.notif-footer{padding:10px 14px;text-align:center}
.notif-footer a{font-size:12px;color:#1168a0;font-weight:600}

/* ── Grid toolbar (search + filters inline) ──────────────────── */
.grid-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:8px 10px;background:#f4f7fa;border-bottom:1px solid var(--border)}
.grid-search{flex:1;min-width:180px;max-width:280px;padding:5px 8px 5px 28px;border:1px solid #b0c8de;border-radius:3px;font-size:12.5px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 8px center}
.grid-search:focus{outline:none;border-color:#628db6;box-shadow:0 0 0 2px rgba(98,141,182,.15)}
.grid-select{padding:5px 8px;border:1px solid #b0c8de;border-radius:3px;font-size:12.5px;background:#fff;color:#333}
.grid-select:focus{outline:none;border-color:#628db6}
.btn-csv{padding:5px 12px;background:linear-gradient(to bottom,#3da862,#2e8b50);color:#fff;border:1px solid #246b3f;border-radius:3px;font-size:11.5px;font-weight:600;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.btn-csv:hover{filter:brightness(.92);color:#fff;text-decoration:none}

/* ── Grid pagination ─────────────────────────────────────────── */
.grid-pagination{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;background:#f4f7fa;border-top:1px solid var(--border);font-size:12px;color:#666;flex-wrap:wrap;gap:6px}
.pg-btns{display:flex;gap:3px}
.pg-btn{padding:3px 9px;border:1px solid #c8ddf0;border-radius:3px;font-size:11.5px;cursor:pointer;background:#fff;color:#3e6fa3;text-decoration:none;display:inline-block}
.pg-btn:hover{background:#e8f0f8;text-decoration:none}
.pg-btn.active{background:#628db6;color:#fff;border-color:#507aa6;font-weight:700}
.pg-btn.disabled{opacity:.35;pointer-events:none}

/* ── Data table sortable headers ─────────────────────────────── */
.data-tbl th.sort-asc::after{content:" ▲";font-size:9px;color:#628db6}
.data-tbl th.sort-desc::after{content:" ▼";font-size:9px;color:#628db6}
.data-tbl th[onclick]{cursor:pointer}
.data-tbl th[onclick]:hover{background:linear-gradient(to bottom,#ddeaf8,#cfe0f5)}

/* ── Tooltip ─────────────────────────────────────────────────── */
[data-tip]{position:relative;cursor:help}
[data-tip]::after{content:attr(data-tip);display:none;position:absolute;bottom:120%;left:50%;transform:translateX(-50%);background:#1e3a5f;color:#fff;font-size:11px;padding:4px 8px;border-radius:4px;white-space:nowrap;z-index:100;pointer-events:none;box-shadow:0 2px 6px rgba(0,0,0,.2)}
[data-tip]:hover::after{display:block}

/* ── Required field validation ───────────────────────────────── */
.field-error{color:#c0392b;font-size:11px;margin-top:2px;display:block}
.form-control.input-error{border-color:#e05a5a;box-shadow:0 0 0 2px rgba(224,90,90,.15)}
.form-control.input-ok{border-color:#2e8b57}

/* ── Page Quick Search (top bar) ─────────────────────────────── */
.quick-search-wrap{position:relative;margin-right:4px}
.quick-search-input{width:170px;padding:4px 8px 4px 26px;border:1px solid rgba(255,255,255,.3);border-radius:3px;background:rgba(255,255,255,.12);color:#fff;font-size:12px;font-family:inherit;outline:none;transition:width .2s,background .2s}
.quick-search-input::placeholder{color:rgba(255,255,255,.55)}
.quick-search-input:focus{width:220px;background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}
.quick-search-icon{position:absolute;left:7px;top:50%;transform:translateY(-50%);font-size:12px;color:rgba(255,255,255,.6);pointer-events:none}
.quick-results{position:absolute;top:calc(100% + 4px);left:0;width:280px;background:#fff;border:1px solid #d0dce8;border-radius:6px;box-shadow:0 6px 20px rgba(0,0,0,.15);z-index:1000;display:none;max-height:280px;overflow-y:auto}
.quick-results.open{display:block}
.qr-item{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;border-bottom:1px solid #f0f4f8;text-decoration:none;color:#333}
.qr-item:hover{background:#f0f7ff;text-decoration:none}
.qr-icon{font-size:14px;width:20px;text-align:center;flex-shrink:0}
.qr-label{font-size:12.5px;font-weight:600;color:#1e3a5f}
.qr-sub{font-size:11px;color:#888;margin-top:1px}
.qr-empty{padding:14px 12px;font-size:12px;color:#999;text-align:center}

/* ── Section label in sidebar ────────────────────────────────── */
.sidebar-section-title{ font-size:10px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:#4a6a8a; padding:10px 14px 4px; border-bottom:1px solid #1f3347; margin-bottom:2px; }

/* ── My Account page simple ─────────────────────────────────── */
.account-card{background:#fff;border:1px solid var(--border);border-radius:6px;padding:20px 24px;max-width:480px;margin:0 auto}
.account-avatar{width:56px;height:56px;border-radius:50%;background:#d0e2f0;color:#3e6a8c;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;margin:0 auto 14px}

/* ── Responsive fixes ────────────────────────────────────────── */
@media(max-width:960px){
  .tab-nav{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .tab-nav::-webkit-scrollbar{height:0}
  .kpi-row{flex-wrap:wrap}
  .kpi-card{min-width:140px}
}
@media(max-width:700px){
  .sidebar{display:none}
  .sidebar.mobile-open{display:block;position:fixed;left:0;top:0;height:100vh;z-index:500;width:210px;box-shadow:4px 0 16px rgba(0,0,0,.5)}
  .kpi-row{flex-direction:column}
  .fin-kpi-row,.ana-kpi-row{flex-direction:column}
  .main-content{padding:10px 10px 20px}
  .tab-nav{font-size:11.5px}
  .tab-nav-item{padding:5px 8px}
  .project-header .project-title{font-size:14px}
  .quick-search-wrap{display:none}
}

/* ── Search Input with Clear Button ── */
.ee-search-wrap{position:relative;display:inline-flex;align-items:center;flex-shrink:0}
.ee-search-wrap .ee-search-icon{position:absolute;left:9px;color:#94a3b8;font-size:14px;pointer-events:none}
.ee-search-wrap .ee-search-input{padding:6px 30px 6px 30px;border:1.5px solid #cbd5e1;border-radius:7px;
  width:220px;font-size:12.5px;font-family:inherit;background:#fff;color:#1e3a5f;outline:none;
  transition:border-color .15s,box-shadow .15s}
.ee-search-wrap .ee-search-input:focus{border-color:var(--hdr-project);box-shadow:0 0 0 3px rgba(98,141,182,.12)}
.ee-search-wrap .ee-search-input::placeholder{color:#b0bcc4}
.ee-search-wrap .ee-search-input.has-val{border-color:var(--hdr-project)}
.ee-search-clear{position:absolute;right:7px;width:18px;height:18px;border-radius:50%;background:#e2e8f0;
  border:none;cursor:pointer;display:none;align-items:center;justify-content:center;
  font-size:11px;color:#64748b;line-height:1;padding:0;transition:background .12s,color .12s}
.ee-search-clear:hover{background:#fecaca;color:#dc2626}
.ee-search-wrap.has-query .ee-search-clear{display:flex}
.ee-search-count{font-size:11px;color:var(--hdr-project);font-weight:600;white-space:nowrap;margin-left:6px}

/* ── Toggle Switch (Active/Inactive) ── */
.ee-toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none}
.ee-toggle input{display:none}
.ee-toggle-track{width:38px;height:20px;border-radius:10px;background:#cbd5e1;position:relative;transition:background .2s}
.ee-toggle-thumb{width:16px;height:16px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;
  transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.ee-toggle input:checked ~ .ee-toggle-track{background:#27ae60}
.ee-toggle input:checked ~ .ee-toggle-track .ee-toggle-thumb{transform:translateX(18px)}
.ee-toggle-label{font-size:12.5px;font-weight:600;color:#555}

/* ── Tooltips (enhanced) ── */
[data-tip]{position:relative}
[data-tip]::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%);background:#1e3a5f;color:#fff;font-size:11px;padding:5px 9px;
  border-radius:5px;white-space:nowrap;z-index:9999;pointer-events:none;
  box-shadow:0 3px 8px rgba(0,0,0,.25);opacity:0;transition:opacity .15s;display:block}
[data-tip]::before{content:'';position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);
  border:4px solid transparent;border-top-color:#1e3a5f;z-index:9999;opacity:0;transition:opacity .15s;display:block}
[data-tip]:hover::after,[data-tip]:hover::before{opacity:1}
[data-tip-right]::after{left:auto;right:0;transform:none}
[data-tip-left]::after{left:0;transform:none}

/* ── Sidebar Accordion Groups (v19b) ── */
.sb-group { border-bottom: 1px solid var(--sidebar-border); }
.sb-group-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; cursor: pointer;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: #4a6a8a;
  background: #e0eaf4;
  border-bottom: 1px solid var(--sidebar-border);
  user-select: none;
}
.sb-group-hdr:hover { background: #d0e2f0; color: #1e3a5f; }
.sb-arrow { font-size: 9px; transition: transform .2s; display: inline-block; }
.sb-group-body { display: none; }
.sb-group.open .sb-group-body { display: block; }
.sb-group.open .sb-arrow { transform: rotate(0deg); }
.sb-group:not(.open) .sb-arrow { transform: rotate(-90deg); }

/* ── Grid search toolbar alignment fix ── */
.grid-toolbar {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 12px;
  background: #f4f7fa;
  border-bottom: 1px solid var(--border);
}
.grid-toolbar form { display: contents; }

/* ── Alloc card — remove focus outline black line ── */
.alloc-card { outline: none !important; -webkit-tap-highlight-color: transparent; }
.alloc-card:focus { outline: none !important; box-shadow: 0 0 0 3px rgba(98,141,182,.25) !important; }

/* ── LOGIN PAGE ─────────────────────────────────────────────────── */
body.login-page {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; background: linear-gradient(135deg, #1e3a5f 0%, #3e6a8c 50%, #628db6 100%);
  font-family: var(--font);
}
.login-wrapper { width: 100%; max-width: 400px; padding: 16px; }
.login-box {
  background: #fff; border-radius: 10px; padding: 40px 36px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.login-logo { text-align: center; margin-bottom: 28px; }
.brand-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; background: var(--hdr-top); color: #fff;
  border-radius: 12px; font-size: 20px; font-weight: 800; margin-bottom: 12px;
}
.login-logo h2 { font-size: 22px; font-weight: 700; color: #1e3a5f; margin-bottom: 4px; }
.login-logo p  { font-size: 12px; color: #888; }
.login-form .form-group { margin-bottom: 18px; }
.login-form label { display: block; font-size: 12px; font-weight: 600; color: #555; margin-bottom: 6px; }
.login-form input {
  width: 100%; padding: 10px 12px; border: 1.5px solid #d0dce8;
  border-radius: 6px; font-size: 13px; color: #333; transition: border-color .2s;
  outline: none; font-family: var(--font);
}
.login-form input:focus { border-color: var(--hdr-top); box-shadow: 0 0 0 3px rgba(62,106,140,.12); }
.btn-login {
  width: 100%; padding: 11px; background: var(--hdr-top); color: #fff;
  border: none; border-radius: 6px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: var(--font); transition: background .2s;
}
.btn-login:hover { background: #1e3a5f; }
.login-error {
  background: #fde8e8; color: #c0392b; border: 1px solid #f5c6c6;
  border-radius: 6px; padding: 10px 12px; font-size: 12px; margin-bottom: 16px;
}
.login-footer { text-align: center; font-size: 11px; color: #aaa; margin-top: 24px; }

/* ═══════════════════════════════════════════════════════════════
   VIRTUAL LOGIN — Hub switcher in top nav bar
   ═══════════════════════════════════════════════════════════════ */
.vl-wrap { position: relative; margin-right: 4px; }

.vl-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 3px; cursor: pointer;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.88); font-size: 12px; font-family: var(--font);
  font-weight: 600; transition: background .15s; white-space: nowrap;
  line-height: 1.4;
}
.vl-btn:hover { background: rgba(255,255,255,.22); }
.vl-btn-active {
  background: var(--hdr-project); border-color: #7aabcc;
  color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.18);
}
.vl-btn-active:hover { background: #5a7fa8; }
.vl-icon  { font-size: 13px; }
.vl-label { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.vl-badge {
  background: #f59e0b; color: #1e3a5f; font-size: 9px; font-weight: 800;
  padding: 1px 5px; border-radius: 3px; letter-spacing: .5px;
}
.vl-caret { font-size: 9px; opacity: .7; }

/* Dropdown panel */
.vl-dd {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 260px; max-width: 320px;
  background: #fff; border: 1px solid var(--border); border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,.16); z-index: 9100;
  overflow: hidden;
}
.vl-dd.open { display: block; }

.vl-dd-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--hdr-dark);
  border-bottom: 1px solid var(--border);
}
.vl-dd-hdr span {
  font-size: 13px; font-weight: 700; color: #fff;
}
.vl-dd-hdr small { font-size: 10px; color: rgba(255,255,255,.6); }

.vl-dd-list { max-height: 260px; overflow-y: auto; }

.vl-hub-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; cursor: pointer; border-bottom: 1px solid #f4f7fa;
  text-decoration: none; color: inherit; transition: background .1s;
}
.vl-hub-item:hover { background: #f0f7ff; }
.vl-hub-item.vl-hub-active { background: #e8f0f8; }

.vl-hub-icon {
  width: 32px; height: 32px; border-radius: 6px;
  background: var(--blue-bg); display: flex; align-items: center;
  justify-content: center; font-size: 15px; flex-shrink: 0;
}
.vl-hub-icon.primary { background: var(--green-bg); }

.vl-hub-name  { font-size: 12.5px; font-weight: 700; color: #1e3a5f; }
.vl-hub-sub   { font-size: 11px; color: #888; margin-top: 1px; }
.vl-hub-right { margin-left: auto; display: flex; align-items: center; gap: 5px; }
.vl-primary-tag {
  font-size: 9px; font-weight: 800; color: var(--green);
  background: var(--green-bg); padding: 1px 5px; border-radius: 3px;
  letter-spacing: .4px;
}
.vl-check { font-size: 14px; color: var(--green); font-weight: 800; }

.vl-loading { padding: 18px; text-align: center; font-size: 12px; color: #888; }
.vl-empty   { padding: 18px; text-align: center; font-size: 12px; color: #888; }

.vl-dd-footer {
  padding: 8px 14px; border-top: 1px solid var(--border-lt);
  background: #fafbfc;
}
.vl-clear-btn {
  width: 100%; padding: 6px; background: var(--red-bg); border: 1px solid #f0a8a8;
  border-radius: 4px; color: var(--red); font-size: 11.5px; font-weight: 700;
  cursor: pointer; font-family: var(--font); transition: background .15s;
}
.vl-clear-btn:hover { background: #f5c6c6; }

/* Active hub session badge shown next to "Logged in as" */
.vl-session-badge {
  display: inline-block; margin-left: 6px;
  background: var(--hdr-project); color: #fff;
  font-size: 10px; font-weight: 700; padding: 1px 7px;
  border-radius: 3px; letter-spacing: .3px;
}