@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg: #0a1420;
  --panel: #101d2e;
  --panel-2: #142236;
  --border: #1f3349;
  --text: #dce8f2;
  --muted: #7d95a8;
  --accent: #2fd3c4;
  --accent-2: #ffb454;
  --ok: #57d16a;
  --danger: #ff6b6b;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Inter', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
body{
  margin:0;
  background: radial-gradient(circle at 85% 0%, #0d1e2f 0%, var(--bg) 45%);
  color: var(--text);
  font-family: var(--sans);
  padding: 28px 20px 60px;
}

.wrap{ max-width: 1180px; margin: 0 auto; }

header{ margin-bottom: 18px; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap; }
.eyebrow{
  font-family: var(--mono); font-size: 12px; letter-spacing: .12em;
  color: var(--accent); text-transform: uppercase; margin-bottom: 6px;
}
h1{ margin: 0 0 6px; font-size: 28px; font-weight: 700; }
.sub{ color: var(--muted); font-size: 14px; }

.export-btn{
  background: var(--accent); color: #05221f; border: none; border-radius: 8px;
  padding: 10px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: var(--sans); white-space: nowrap;
}
.export-btn:hover{ opacity: .88; }
.export-btn.secondary{ background: transparent; color: var(--muted); border: 1px solid var(--border); }
.export-btn.secondary:hover{ color: var(--accent); border-color: var(--accent); }
.header-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.header-actions a{ text-decoration:none; display:inline-flex; align-items:center; }

.tabs{ display:flex; gap:6px; margin-bottom:22px; border-bottom: 1px solid var(--border); flex-wrap:wrap; }
.tab{
  background: transparent; border: none; color: var(--muted); font-family: var(--sans);
  font-size: 14px; font-weight:600; padding: 10px 18px; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom:-1px;
}
.tab.active{ color: var(--accent); border-bottom-color: var(--accent); }
.tab:hover{ color: var(--text); }
.tab .count{ color: var(--muted); font-weight:500; font-size:12px; }
.tab.active .count{ color: var(--accent); }

.stats{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 24px; }
.stat{
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; position: relative; overflow:hidden;
}
.stat::before{ content:""; position:absolute; inset:0 auto auto 0; width:3px; height:100%; background: var(--accent); opacity:.7; }
.stat .label{ font-size:12px; color:var(--muted); margin-bottom:6px; text-transform:uppercase; letter-spacing:.03em; }
.stat .value{ font-size:22px; font-weight:700; }
.stat .value small{ font-size:13px; color: var(--muted); font-weight:500; display:block; margin-top:2px;}
.stat.top .value{ color: var(--accent); }
.stat.top2 .value{ color: var(--accent-2); }
.stat.progress::before{ background: var(--ok); }
.stat.progress .value{ color: var(--ok); }

.rank-list{ list-style:none; margin:10px 0 0; padding:0; font-size:12.5px; }
.rank-list li{ margin-bottom:6px; }
.rank-row{ display:flex; justify-content:space-between; color: var(--muted); margin-bottom:3px; }
.rank-row b{ color: var(--text); font-weight:600; }
.bar-track{ height:5px; background: rgba(255,255,255,0.06); border-radius:4px; overflow:hidden; }
.bar-fill{ height:100%; background: var(--accent); border-radius:4px; }
.stat.top2 .bar-fill{ background: var(--accent-2); }
.stat.progress .bar-fill{ background: var(--ok); }

.controls{
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom: 20px;
}
.controls input[type="text"]{
  flex: 1 1 240px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 14px; color: var(--text); font-family: var(--sans); font-size: 14px;
}
.controls input::placeholder{ color: var(--muted); }
select{
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; color: var(--text); font-family: var(--sans); font-size: 13px; min-width: 150px;
}
select:disabled{ opacity: .5; cursor: not-allowed; }
.reset-btn{
  background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 8px;
  padding: 10px 14px; font-size: 13px; cursor:pointer; font-family: var(--sans);
}
.reset-btn:hover{ color: var(--accent); border-color: var(--accent); }

.result-bar{ display:flex; justify-content:space-between; align-items:center; margin: 0 0 12px; flex-wrap:wrap; gap:8px; }
.result-count{ color: var(--muted); font-size: 13px; margin:0; }
.result-count b{ color: var(--accent); }
.view-toggle{ display:flex; gap:6px; }
.view-toggle button{
  background: var(--panel); border:1px solid var(--border); color: var(--muted);
  padding:6px 12px; border-radius:8px; font-size:12px; cursor:pointer; font-family: var(--sans);
}
.view-toggle button.active{ color: var(--bg); background: var(--accent); border-color: var(--accent); font-weight:600; }

.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.card{
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; transition: border-color .15s ease, transform .15s ease, opacity .15s ease;
  position: relative;
}
.card:hover{ border-color: var(--accent); transform: translateY(-2px); }
.card.reviewed{ border-color: rgba(87,209,106,0.5); background: linear-gradient(180deg, rgba(87,209,106,0.06), var(--panel) 40%); }
.card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:4px; }
.card h3{ margin:0; font-size:15px; font-family: var(--mono); color: var(--accent); word-break: break-word; }
.card .customer{ font-size:14px; font-weight:600; margin-bottom:10px; color: var(--text); }
.card dl{ margin:0; display:grid; grid-template-columns: 108px 1fr; gap:5px 8px; font-size:12.5px; }
.card dt{ color: var(--muted); }
.card dd{ margin:0; color: var(--text); word-break: break-word; }
.card dd.mono{ font-family: var(--mono); font-size:12px; }
.card dd a{ color: var(--accent); text-decoration:none; }
.card dd a:hover{ text-decoration:underline; }
.badge{
  display:inline-block; font-size:11px; padding:2px 8px; border-radius:20px;
  background: rgba(47,211,196,0.12); color: var(--accent); border: 1px solid rgba(47,211,196,0.3);
  margin-inline-start:6px;
}

.review-toggle{
  display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
  font-size:11.5px; color: var(--muted); border:1px solid var(--border); border-radius:20px;
  padding:4px 10px; white-space:nowrap; background: var(--bg);
}
.review-toggle input{ accent-color: var(--ok); width:14px; height:14px; cursor:pointer; }
.review-toggle.is-reviewed{ color: var(--ok); border-color: rgba(87,209,106,0.5); background: rgba(87,209,106,0.08); }
.review-toggle.is-saving{ opacity:.65; cursor:wait; }
.review-toggle.is-saving input{ cursor:wait; }

.notes-section{ margin-top:10px; border-top:1px dashed var(--border); padding-top:10px; }
.note-label{ display:flex; align-items:center; gap:4px; font-size:11px; color: var(--muted); text-transform:uppercase; letter-spacing:.03em; }
.comment-thread{
  display:flex; flex-direction:column; gap:6px; max-height:150px; overflow-y:auto;
  margin-bottom:8px; padding-inline-end:2px;
}
.comment-thread:empty{ display:none; }
.comment-item{
  background: var(--bg); border:1px solid var(--border); border-radius:10px;
  padding:6px 10px; font-size:12px; line-height:1.4;
}
.comment-item .comment-text{ color: var(--text); white-space:pre-wrap; word-break:break-word; }
.comment-item .comment-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-size:10px; color: var(--muted); margin-top:3px;
}
.comment-actions{ display:flex; gap:8px; }
.comment-edit-btn, .comment-delete-btn{
  background:none; border:none; color: var(--muted); cursor:pointer; font-size:11px; padding:0;
  font-family: var(--sans);
}
.comment-edit-btn:hover{ color: var(--accent); }
.comment-delete-btn:hover{ color: var(--danger); }
.comment-edit-row{ display:flex; gap:6px; }
.comment-edit-row input{
  flex:1; background: var(--panel); border:1px solid var(--accent); border-radius:6px;
  padding:5px 8px; font-size:12px; color: var(--text); font-family: var(--sans);
}
.comment-save-btn, .comment-cancel-btn{
  border:none; border-radius:6px; padding:0 10px; font-size:11px; cursor:pointer; font-family: var(--sans);
}
.comment-save-btn{ background: var(--accent); color:#05221f; font-weight:600; }
.comment-cancel-btn{ background: transparent; color: var(--muted); border:1px solid var(--border); }
.comment-confirm-row{ display:flex; align-items:center; gap:8px; font-size:12px; color: var(--text); flex-wrap:wrap; }
.comment-confirm-yes{
  background: var(--danger); color:#2a0a0a; border:none; border-radius:6px; padding:0 10px;
  font-size:11px; font-weight:600; cursor:pointer; font-family: var(--sans); height:22px;
}
.comment-input-row{ display:flex; gap:6px; }
.comment-input-row input{
  flex:1; background: var(--bg); border:1px solid var(--border); border-radius:6px;
  padding:7px 10px; font-size:12.5px; color: var(--text); font-family: var(--sans);
}
.comment-input-row input:focus{ outline:none; border-color: var(--accent); }
.comment-post-btn{
  background: var(--accent); color:#05221f; border:none; border-radius:6px;
  padding:0 14px; font-size:12px; font-weight:600; cursor:pointer; font-family: var(--sans); white-space:nowrap;
}
.comment-post-btn:hover{ opacity:.88; }
.comment-empty-hint{ font-size:11.5px; color: var(--muted); font-style:italic; margin-bottom:6px; }

.table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:12px; background: var(--panel); }
table.results{ width:100%; border-collapse:collapse; font-size:12.5px; min-width:1140px; }
table.results th{
  text-align:left; padding:10px 12px; color: var(--muted); font-weight:600;
  border-bottom:1px solid var(--border); white-space:nowrap; cursor:pointer; user-select:none;
  position:sticky; top:0; background: var(--panel-2);
}
table.results th:hover{ color: var(--accent); }
table.results th.sorted{ color: var(--accent); }
table.results td{ padding:9px 12px; border-bottom:1px solid var(--border); vertical-align:top; }
table.results td.mono{ font-family: var(--mono); font-size:11.5px; }
table.results tr:hover td{ background: rgba(47,211,196,0.04); }
table.results tr.reviewed td{ background: rgba(87,209,106,0.05); }
table.results a{ color: var(--accent); text-decoration:none; }
table.results input[type="checkbox"]{ accent-color: var(--ok); width:15px; height:15px; cursor:pointer; }
table.results input.note-input{
  width:160px; background: var(--bg); border:1px solid var(--border); border-radius:6px;
  padding:5px 8px; color: var(--text); font-family: var(--sans); font-size:12px;
}

.empty{
  text-align:center; color: var(--muted); padding: 60px 20px;
  border: 1px dashed var(--border); border-radius: 12px; font-size: 14px;
}

mark{ background: rgba(255,180,84,0.35); color: inherit; border-radius: 3px; padding: 0 2px; }

.site-card{
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px 18px; cursor:pointer; transition: border-color .15s ease, transform .15s ease;
}
.site-card:hover{ border-color: var(--accent); transform: translateY(-2px); }
.site-card h3{ margin:0 0 8px; font-size:16px; color: var(--text); }
.site-card .meta{ display:flex; gap:14px; font-size:12.5px; color: var(--muted); flex-wrap:wrap; }
.site-card .meta b{ color: var(--accent); }
.site-card .site-progress{ margin-top:10px; }

.back-btn{
  background: transparent; border: 1px solid var(--border); color: var(--muted); border-radius: 8px;
  padding: 8px 14px; font-size: 13px; cursor:pointer; font-family: var(--sans); margin-bottom: 16px;
  display:inline-flex; align-items:center; gap:6px;
}
.back-btn:hover{ color: var(--accent); border-color: var(--accent); }

.site-detail-header{ margin-bottom: 18px; }
.site-detail-header h2{ margin: 4px 0 6px; font-size: 22px; }
.site-detail-header .meta{ color: var(--muted); font-size: 13px; }

.persist-note{
  font-size: 12px; color: var(--muted); background: var(--panel); border: 1px dashed var(--border);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 20px; line-height:1.5;
}
.persist-note b{ color: var(--accent-2); }

@media (max-width: 860px){ .stats{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px){
  .stats{ grid-template-columns: 1fr; }
  .card dl{ grid-template-columns: 96px 1fr; }
  header{ flex-direction:column; align-items:flex-start; }
}

/* ===== additions for the ASP.NET Core app (same design tokens) ===== */

/* top navigation bar */
.topbar{
  background: var(--panel); border-bottom: 1px solid var(--border);
  margin: -28px -20px 24px; padding: 0 20px;
}
.topbar-inner{
  max-width: 1180px; margin: 0 auto; display:flex; align-items:center; gap:18px;
  padding: 10px 0; flex-wrap:wrap;
}
.brand{ text-decoration:none; display:flex; flex-direction:column; line-height:1.2; }
.brand-eyebrow{ font-family: var(--mono); font-size:10px; letter-spacing:.12em; color: var(--muted); text-transform:uppercase; }
.brand-name{ font-size:15px; font-weight:700; color: var(--accent); }
.topnav{ display:flex; gap:4px; flex:1; }
.topnav a{
  color: var(--muted); text-decoration:none; font-size:13px; font-weight:600;
  padding:7px 12px; border-radius:8px;
}
.topnav a:hover{ color: var(--text); background: var(--panel-2); }
.topnav a.active{ color: var(--accent); background: rgba(47,211,196,0.08); }
.userbox{ display:flex; align-items:center; gap:10px; }
.user-name{ font-size:12.5px; color: var(--muted); font-family: var(--mono); }
.logout-form{ margin:0; }
.logout-btn{
  background: transparent; border:1px solid var(--border); color: var(--muted); border-radius:8px;
  padding:6px 12px; font-size:12px; cursor:pointer; font-family: var(--sans);
}
.logout-btn:hover{ color: var(--accent); border-color: var(--accent); }

/* login page */
.login-body{
  display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px;
}
.login-card{
  background: var(--panel); border:1px solid var(--border); border-radius:14px;
  padding: 34px 36px; width:100%; max-width: 420px;
}
.login-card h1{ font-size:22px; }
.login-card .sub{ margin: 0 0 22px; }
.login-label{ display:block; font-size:12px; color: var(--muted); margin: 14px 0 6px; text-transform:uppercase; letter-spacing:.03em; }
.login-input{
  width:100%; background: var(--bg); border:1px solid var(--border); border-radius:8px;
  padding: 10px 14px; color: var(--text); font-family: var(--sans); font-size:14px;
}
.login-input:focus{ outline:none; border-color: var(--accent); }
.login-remember{
  display:flex; align-items:center; gap:8px; margin: 16px 0; font-size:13px; color: var(--muted);
  cursor:pointer; user-select:none;
}
.login-remember input{ accent-color: var(--accent); width:15px; height:15px; }
.login-submit{ width:100%; padding: 12px 16px; font-size:14px; }
.login-errors{ color: var(--danger); font-size:13px; }
.login-errors ul{ margin:0 0 10px; padding-inline-start: 18px; }
.login-field-error{ display:block; color: var(--danger); font-size:12px; margin-top:4px; }
.login-hint{ margin: 18px 0 0; font-size:11.5px; color: var(--muted); line-height:1.5; }

/* admin pages (Users / Import) */
.page-card{
  background: var(--panel); border:1px solid var(--border); border-radius:12px;
  padding: 20px 22px; margin-bottom: 20px;
}
.page-card h2{ margin: 0 0 4px; font-size: 17px; }
.page-card .hint{ color: var(--muted); font-size: 12.5px; margin: 0 0 14px; line-height:1.5; }
.flash{
  border-radius:10px; padding:11px 14px; font-size:13px; margin-bottom:16px; border:1px solid;
}
.flash.ok{ background: rgba(87,209,106,0.08); border-color: rgba(87,209,106,0.4); color: var(--ok); }
.flash.err{ background: rgba(255,107,107,0.08); border-color: rgba(255,107,107,0.4); color: var(--danger); }
.inline-form{ display:inline-flex; gap:6px; align-items:center; margin:0; }
.mini-btn{
  background: transparent; border:1px solid var(--border); color: var(--muted); border-radius:6px;
  padding:5px 10px; font-size:12px; cursor:pointer; font-family: var(--sans);
}
.mini-btn:hover{ color: var(--accent); border-color: var(--accent); }
.mini-btn.warn:hover{ color: var(--danger); border-color: var(--danger); }
.mini-select{ min-width:0; padding:5px 8px; font-size:12px; }
.file-input{ color: var(--muted); font-size: 13px; font-family: var(--sans); }
.file-input::file-selector-button{
  background: transparent; border:1px solid var(--border); color: var(--muted); border-radius:8px;
  padding:8px 14px; font-size:12.5px; cursor:pointer; font-family: var(--sans); margin-inline-end:10px;
}
.file-input::file-selector-button:hover{ color: var(--accent); border-color: var(--accent); }
.pill{
  display:inline-block; font-size:11px; padding:2px 10px; border-radius:20px; border:1px solid var(--border);
  color: var(--muted);
}
.pill.admin{ color: var(--accent-2); border-color: rgba(255,180,84,0.4); background: rgba(255,180,84,0.08); }
.pill.blocked{ color: var(--danger); border-color: rgba(255,107,107,0.4); background: rgba(255,107,107,0.08); }
.pill.okpill{ color: var(--ok); border-color: rgba(87,209,106,0.4); background: rgba(87,209,106,0.08); }
.preview-stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin: 14px 0; }
.preview-stat{ background: var(--bg); border:1px solid var(--border); border-radius:10px; padding:12px 14px; }
.preview-stat .label{ font-size:11px; color: var(--muted); text-transform:uppercase; letter-spacing:.03em; margin-bottom:4px; }
.preview-stat .value{ font-size:20px; font-weight:700; }
.preview-stat.new .value{ color: var(--accent); }
.preview-stat.update .value{ color: var(--accent-2); }
.preview-stat.unchanged .value{ color: var(--muted); }
.preview-stat.bad .value{ color: var(--danger); }
.sample-list{ margin:8px 0 0; padding-inline-start:18px; font-size:12.5px; color: var(--muted); }
.sample-list li{ margin-bottom:3px; }

/* role-based access and employee management */
.role-chip{
  display:inline-flex; align-items:center; min-height:24px; padding:3px 9px;
  border-radius:20px; border:1px solid var(--border); font-size:10.5px; font-weight:600;
  white-space:nowrap;
}
.role-chip.admin, .pill.admin{
  color:var(--accent-2); border-color:rgba(255,180,84,.4); background:rgba(255,180,84,.08);
}
.role-chip.wireless, .pill.wireless{
  color:var(--accent); border-color:rgba(47,211,196,.4); background:rgba(47,211,196,.08);
}
.role-chip.employee, .pill.employee{
  color:#b6c9d8; border-color:#385169; background:rgba(125,149,168,.1);
}
.pill.pending{
  color:var(--accent-2); border-color:rgba(255,180,84,.4); background:rgba(255,180,84,.08);
}

.access-state-wrap{ max-width:760px; margin:72px auto 0; padding:0 20px; }
.access-state{
  background:var(--panel); border:1px solid var(--border); border-radius:14px;
  padding:32px; text-align:left;
}
.access-state h1{ margin:14px 0 10px; font-size:26px; text-wrap:balance; }
.access-state > p{ max-width:68ch; color:var(--muted); line-height:1.65; }
.access-state strong{ color:var(--text); }
.access-details{
  margin:24px 0 18px; display:flex; gap:12px; flex-wrap:wrap;
}
.access-details div{
  flex:1 1 220px; background:var(--bg); border:1px solid var(--border);
  border-radius:10px; padding:12px 14px;
}
.access-details dt{ color:var(--muted); font-size:11px; margin-bottom:4px; }
.access-details dd{ margin:0; color:var(--text); font-family:var(--mono); font-size:12.5px; }
.access-state .access-help{ margin:0; color:var(--accent-2); font-size:12.5px; }
.access-denied-card .pill{ margin-bottom:14px; }
.access-denied-card .sub{ line-height:1.6; }
.access-denied-card .export-btn{ display:block; text-align:center; text-decoration:none; }

.employee-search{
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; margin-bottom:14px;
}
.employee-search > label{
  display:block; color:var(--text); font-size:12px; font-weight:600; margin-bottom:7px;
}
.employee-search-row{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.employee-search input[type="search"]{
  flex:1 1 300px; min-width:0; background:var(--bg); border:1px solid var(--border);
  border-radius:8px; padding:10px 13px; color:var(--text); font-family:var(--sans); font-size:13px;
}
.employee-search input[type="search"]::placeholder{ color:#91a7b8; }
.employee-search .reset-btn{ display:inline-flex; align-items:center; text-decoration:none; }
.employee-table-summary{
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
  color:var(--muted); font-size:12px; margin:0 2px 10px;
}
.employee-table-summary strong{ color:var(--text); }
.employee-table-summary .summary-note{ font-size:11.5px; }
.employee-table{ min-width:1080px; }
.employee-table th{ cursor:default; }
.employee-table th:hover{ color:var(--muted); }
.employee-identity{ display:flex; flex-direction:column; gap:3px; min-width:180px; }
.employee-identity strong{ color:var(--text); font-size:12.5px; }
.employee-identity span{ color:var(--muted); font-size:11px; }
.employee-actions{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; min-width:320px; }
.employee-actions .role-form{ flex-wrap:nowrap; }
.employee-empty{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:34px 18px; color:var(--muted); text-align:center;
}
.employee-empty strong{ color:var(--text); font-size:13px; }
.employee-empty span{ font-size:12px; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

@media (max-width: 700px){
  .role-chip{ order:3; }
  .access-state-wrap{ margin-top:36px; padding:0; }
  .access-state{ padding:24px 20px; }
  .employee-search-row > *{ width:100%; }
  .employee-search .export-btn, .employee-search .reset-btn{ justify-content:center; }
  .employee-table-summary .summary-note{ width:100%; }
}