/* ====== Admin dashboard styles ====== */
.admin-body { background: #f2f7ff; }
.admin-badge { font-family: var(--font-head); font-weight: 800; color: var(--blue-800); background: var(--blue-100); padding: 8px 16px; border-radius: 999px; }
.site-header .nav { flex-wrap: wrap; }

.count-pill { background: var(--orange); color:#fff; border-radius:999px; padding:1px 8px; font-size:.78rem; margin-left:4px; display:none; }
.count-pill.show { display:inline-block; }

/* who's signed in */
.who-badge { font-family:var(--font-head); font-weight:700; font-size:.86rem; background:#fff; border:2px solid var(--blue-100); color:var(--blue-800); padding:6px 14px; border-radius:999px; }
.who-badge .wb-role { color:var(--muted); font-weight:600; }

/* ====== grouped tab navigation ====== */
.admin-nav { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); margin-bottom:26px; }
.tab-group { background:#fff; border:1px solid var(--blue-100); border-radius:16px; padding:14px; box-shadow:var(--shadow-sm); }
.tg-label { font-family:var(--font-head); font-weight:800; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; color:var(--blue-500); margin-bottom:10px; padding-left:4px; }
.tg-tabs { display:flex; flex-direction:column; gap:6px; }
.tab-group.hidden { display:none; }
.admin-tab.hidden { display:none; }
@media (max-width:700px){
  .admin-nav { grid-template-columns:1fr; }
  .tg-tabs { flex-direction:row; flex-wrap:wrap; }
}

/* role pills */
.role-pill { display:inline-block; font-family:var(--font-head); font-weight:700; font-size:.72rem; padding:3px 10px; border-radius:999px; }
.role-pill.owner { background:#ffeec2; color:#8a5a00; }
.role-pill.manager { background:#e3f0ff; color:#0a52c7; }
.role-pill.tech { background:#e4f8ee; color:#127a48; }
.role-pill.inactive { background:#eee; color:#666; }

/* activity log */
.act-row { display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px dashed var(--blue-100); }
.act-row:last-child { border-bottom:0; }
.act-when { font-size:.8rem; color:var(--muted); white-space:nowrap; min-width:120px; }
.act-who { font-family:var(--font-head); font-weight:700; color:var(--blue-800); min-width:100px; }
.act-what { flex:1; font-size:.92rem; }

/* stat cards */
.stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:26px; }
@media (max-width:860px){ .stat-grid { grid-template-columns:repeat(2,1fr); } }
.stat { background:#fff; border:1px solid var(--blue-100); border-radius:16px; padding:20px; box-shadow:var(--shadow-sm); }
.stat .n { font-family:var(--font-display); font-size:2rem; color:var(--blue-700); line-height:1; }
.stat .l { color:var(--muted); font-weight:700; font-size:.9rem; }
.stat.green .n { color:#1a9e5f; }
.stat.orange .n { color:var(--orange); }

.panel-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
.panel-head h2 { margin:0; }

.admin-card { background:#fff; border:1px solid var(--blue-100); border-radius:16px; padding:22px; box-shadow:var(--shadow-sm); margin-bottom:18px; }

/* tables */
table.data { width:100%; border-collapse:collapse; }
table.data th, table.data td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--blue-100); font-size:.94rem; vertical-align:middle; }
table.data th { font-family:var(--font-head); color:var(--blue-800); font-size:.85rem; text-transform:uppercase; letter-spacing:.03em; }
table.data tr:hover td { background:#f7fbff; }
.mini { padding:6px 12px; font-size:.85rem; }
.chip { display:inline-block; font-family:var(--font-head); font-weight:700; font-size:.72rem; padding:3px 10px; border-radius:999px; }
.chip.detailing { background:#e3f0ff; color:#0a52c7; }
.chip.fleet { background:#fff3d6; color:#95620a; }
.chip.paid { background:#e4f8ee; color:#127a48; }
.chip.unpaid { background:#fff0dd; color:#9a5a12; }
.chip.done { background:#eee; color:#333; }

/* calendar */
.cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; gap:10px; flex-wrap:wrap; }
.cal-title { font-family:var(--font-display); font-size:1.5rem; color:var(--blue-800); }
.cal-legend { display:flex; gap:14px; flex-wrap:wrap; font-size:.85rem; font-weight:700; align-items:center; }
.legend-dot { display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:5px; vertical-align:middle; }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-dow { text-align:center; font-family:var(--font-head); font-weight:700; color:var(--muted); font-size:.8rem; padding:4px 0; }
.cal-cell { background:#fff; border:1px solid var(--blue-100); border-radius:10px; min-height:96px; padding:6px; cursor:pointer; transition:background .1s; overflow:hidden; }
.cal-cell:hover { background:#f2f8ff; }
.cal-cell.other { background:#f6f8fb; opacity:.6; }
.cal-cell.today { border:2px solid var(--blue-500); }
.cal-date { font-weight:700; font-size:.82rem; color:var(--muted); margin-bottom:4px; }
.cal-job { color:#fff; font-size:.74rem; font-weight:700; border-radius:6px; padding:2px 6px; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.cal-more { font-size:.72rem; color:var(--muted); }
@media (max-width:640px){ .cal-cell { min-height:70px; } .cal-job { font-size:.66rem; } }

/* modal */
.modal-back { position:fixed; inset:0; background:rgba(6,42,99,.5); display:flex; align-items:flex-start; justify-content:center; padding:30px 16px; z-index:200; overflow:auto; }
.modal { background:#fff; border-radius:18px; width:100%; max-width:640px; box-shadow:var(--shadow); padding:26px; }
.modal h3 { margin-top:0; }
.modal-close { float:right; border:none; background:var(--blue-100); width:36px; height:36px; border-radius:50%; cursor:pointer; font-size:1.1rem; }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:560px){ .row2 { grid-template-columns:1fr; } }
.danger { background:#e23b3b !important; color:#fff !important; box-shadow:0 6px 0 #a11 !important; }
.veh-row, .subjob { background:#f7fbff; border:1px solid var(--blue-100); border-radius:10px; padding:10px 12px; margin-bottom:8px; }
.inline-actions { display:flex; gap:8px; flex-wrap:wrap; }
.pay-select { padding:6px 8px; border-radius:8px; border:2px solid var(--blue-100); }
.empty { text-align:center; color:var(--muted); padding:34px; }
.helpbar { background:var(--blue-100); border-radius:12px; padding:12px 16px; color:var(--blue-800); font-size:.9rem; margin-bottom:16px; }

/* ====== search bars (customers, jobs) ====== */
.search-bar { display:flex; align-items:center; gap:10px; background:#fff; border:2px solid var(--blue-100); border-radius:14px; padding:6px 10px 6px 14px; margin-bottom:12px; box-shadow:var(--shadow-sm); transition:border-color .12s, box-shadow .12s; }
.search-bar:focus-within { border-color:var(--blue-500); box-shadow:0 0 0 4px rgba(26,140,255,.15); }
.search-ico { font-size:1.05rem; flex:none; opacity:.65; }
.search-bar input {
  flex:1; border:none; outline:none; background:transparent; font-family:var(--font-body);
  font-size:1rem; color:var(--ink); padding:9px 0;
}
.search-bar input::placeholder { color:var(--muted); }
.search-bar input::-webkit-search-cancel-button { cursor:pointer; }
mark { background:var(--duck); color:var(--ink); border-radius:4px; padding:0 3px; font-weight:700; }

/* ---- traffic charts ------------------------------------------------
   Deliberately CSS-only. A charting library would be another 50 KB over
   the wire, and another thing to keep working, for two simple shapes. */
.stat-row {
  display: grid; gap: 14px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.stat-row .stat {
  background: #fff; border: 1px solid var(--blue-100, #dce8f5);
  border-radius: 14px; padding: 16px 18px; text-align: center;
}
.stat-row .s-num {
  font-family: var(--font-head, inherit);
  font-size: 2rem; font-weight: 800; line-height: 1;
  color: var(--blue-700, #073b7a);
}
.stat-row .s-lab { font-size: .85rem; color: var(--muted, #4d6584); margin-top: 6px; }

/* one column per day, height proportional to the busiest day shown */
.tchart {
  display: flex; align-items: flex-end; gap: 3px;
  height: 150px; padding-top: 8px;
}
.tchart .tbar {
  flex: 1 1 0; height: 100%;
  display: flex; align-items: flex-end;
  min-width: 3px;
}
.tchart .tbar span {
  display: block; width: 100%;
  background: linear-gradient(180deg, var(--blue-500, #1a8cff), var(--blue-700, #073b7a));
  border-radius: 3px 3px 0 0;
  transition: opacity .15s;
}
.tchart .tbar:hover span { opacity: .75; }

/* the bar behind each row of the most-visited table */
.tmeter { background: var(--blue-100, #e8f4ff); border-radius: 999px; height: 10px; overflow: hidden; }
.tmeter span {
  display: block; height: 100%;
  background: var(--blue-500, #1a8cff);
  border-radius: 999px;
}