/* Filtary admin — reference dashboard layout on top of the design tokens */
.sidebar-link svg { width:18px; height:18px; flex:0 0 18px; opacity:.9 }
.sidebar-section { margin:16px 10px 8px; font-size:11px; color:#8aa0b5; letter-spacing:.04em; }

.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:18px; }
.page-head .ui-title { position:relative; padding-right:14px; }
.page-head .ui-title::before {
  content:"";
  position:absolute; right:0; top:4px; bottom:4px; width:4px;
  border-radius:99px;
  background:linear-gradient(180deg,#45A5FF,#1F6FEB);
}
.topbar-meta { display:flex; align-items:center; gap:12px; color:var(--text-muted); font-size:13px; }
.topbar-chip {
  min-height:40px; display:inline-flex; align-items:center; gap:8px;
  padding:0 12px; border:1px solid var(--border); border-radius:12px; background:#fff;
}

.kpi-card { display:flex; flex-direction:column; transition:.2s ease; }
.kpi-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }
.kpi-card .kpi-top { display:flex; justify-content:space-between; align-items:center; }
.kpi-icon { background:var(--brand-primary-soft); color:var(--brand-primary); }
.kpi-icon.is-green { background:var(--success-soft); color:var(--success); }
.kpi-icon.is-orange { background:var(--warning-soft); color:#B97900; }
.kpi-icon.is-red { background:var(--danger-soft); color:var(--danger); }
.kpi-icon.is-teal { background:var(--teal-soft); color:var(--teal); }

.donut-wrap { display:flex; align-items:center; gap:22px; min-height:220px; }
.donut {
  width:168px; height:168px; border-radius:50%;
  display:grid; place-items:center;
  position:relative;
}
.donut::after {
  content:""; width:96px; height:96px; border-radius:50%;
  background:#fff; position:absolute;
}
.donut-center { position:relative; z-index:1; text-align:center; }
.donut-center b { display:block; font-size:22px; color:var(--text-strong); }
.legend { display:grid; gap:10px; font-size:13px; }
.legend i { width:10px; height:10px; border-radius:50%; display:inline-block; margin-left:8px; }

.bar-chart { display:flex; align-items:flex-end; gap:18px; height:210px; padding:8px 8px 0; }
.bar-col { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; height:100%; justify-content:flex-end; }
.bar {
  width:28px; border-radius:8px 8px 0 0;
  background:linear-gradient(180deg,#4C8DFF,#1F6FEB);
  min-height:6px;
}
.bar-label { font-size:11px; color:var(--text-muted); }

.map-frame { height:320px; border-radius:14px; overflow:hidden; background:#E8F0F4; border:1px solid var(--border-light); }
.leaflet-container { font-family:inherit; }

.panel-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.panel-head h3 { margin:0; font-size:16px; }

.status-pill { display:inline-flex; align-items:center; min-height:24px; padding:0 10px; border-radius:999px; font-size:12px; font-weight:700; }
.st-confirmed,.st-assigned { background:var(--info-soft); color:#1A64C8; }
.st-new,.st-pending { background:var(--warning-soft); color:#B97900; }
.st-done,.st-completed,.st-paid { background:var(--success-soft); color:#12845B; }
.st-overdue,.st-rejected,.st-cancelled { background:var(--danger-soft); color:#C93E3E; }
.st-in_progress { background:var(--purple-soft); color:#6540D8; }

.page-toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px; }

.web-sidebar {
  background:
    radial-gradient(240px 160px at 100% 0%, rgba(69,165,255,.22), transparent 70%),
    linear-gradient(180deg,var(--brand-navy),var(--brand-navy-2));
}
.web-sidebar::after {
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:90px; pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(31,111,235,.12));
}
.sidebar-brand { position:relative; }
.sidebar-brand-title { letter-spacing:.01em; }
.web-topbar {
  background:rgba(255,255,255,.88);
  box-shadow:0 1px 0 var(--border-light);
}
.global-search {
  box-shadow:var(--shadow-xs);
}
.ui-table {
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.ui-table th {
  text-align:right;
  font-size:12px;
  color:var(--text-muted);
  font-weight:700;
  padding:12px 14px;
  background:var(--surface-soft);
  border-bottom:1px solid var(--border-light);
}
.ui-table td {
  padding:13px 14px;
  border-bottom:1px solid var(--border-light);
  vertical-align:middle;
}
.ui-table tbody tr:hover td { background:#F7FBFF; }
.ui-table a { color:var(--brand-primary); font-weight:700; }
.chart-panel,
.customer-360-header,
.kpi-card {
  box-shadow:var(--shadow-sm);
}
.technician-row {
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 4px;
  border-bottom:1px solid var(--border-light);
}
.technician-row:last-child { border-bottom:0; }
.technician-status {
  width:10px; height:10px; border-radius:50%;
  background:var(--gray-300);
}
.technician-status.available { background:var(--success); box-shadow:0 0 0 4px var(--success-soft); }
.technician-status.offline { background:var(--gray-400); }
.auth-kicker {
  text-align:center;
  margin:0 0 6px;
  color:var(--brand-primary);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}
@media (prefers-reduced-motion: reduce) {
  .kpi-card, .ui-btn, .ui-card--clickable { transition:none; }
}