:root {
  --bg:#f4f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --border:#dbe3ee;
  --primary:#2563eb;
  --primary-2:#1d4ed8;
  --danger:#dc2626;
  --shadow:0 8px 24px rgba(15,23,42,.07);
  --radius:20px;
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--bg);
  color:var(--text);
}


body[data-page="login"]{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
}

body[data-page="login"] #app{
  width:min(720px,100%);
}

.button-small{
  padding:10px 12px;
  font-size:13px;
  min-height:40px;
}


a{text-decoration:none;color:inherit}

.wrap{
  max-width:1540px;
  margin:0 auto;
  padding:24px;
}

.topbar{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-start;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.topbar-copy{max-width:760px}

.page-lead{
  margin:12px 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
  max-width:760px;
}

.eyebrow{
  display:inline-flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.pill{
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 12px;
  font-size:12px;
  color:var(--muted);
  background:#fff;
}

h1{
  margin:0;
  font-size:34px;
  line-height:1.1;
}

.section-title{
  margin:8px 0 0 0;
  font-size:28px;
}

.session-box{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px 16px;
  box-shadow:var(--shadow);
  flex-wrap:wrap;
}

.session-label{
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.session-name{
  font-size:16px;
  font-weight:700;
}

.session-role{
  font-size:13px;
  color:var(--muted);
  margin-top:2px;
}

.actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

button,.button{
  border:none;
  border-radius:14px;
  padding:12px 16px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:.2s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.button-primary{
  background:var(--primary);
  color:#fff;
}

.button-primary:hover{
  background:var(--primary-2);
}

.button-secondary{
  background:#fff;
  color:var(--text);
  border:1px solid var(--border);
}

.button-secondary:hover{
  background:#f8fafc;
}

.button-danger{
  background:var(--danger);
  color:#fff;
  border:1px solid var(--danger);
}

.button-danger:hover{
  background:#b91c1c;
}

.button.is-current{
  border-color:#93c5fd;
  background:#eff6ff;
}

.flash{
  margin-bottom:18px;
  border-radius:18px;
  padding:14px 16px;
  border:1px solid transparent;
  font-size:14px;
  line-height:1.5;
}

.flash-success{
  background:#ecfdf5;
  border-color:#a7f3d0;
  color:#047857;
}

.flash-error{
  background:#fff1f2;
  border-color:#fecdd3;
  color:#be123c;
}

.metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:24px;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.metric{
  padding:22px;
  display:flex;
  gap:14px;
  align-items:center;
}

.icon{
  width:48px;
  height:48px;
  border-radius:16px;
  display:grid;
  place-items:center;
  font-size:20px;
  font-weight:700;
}

.icon.blue{background:#dbeafe;color:#1d4ed8}
.icon.amber{background:#fef3c7;color:#b45309}
.icon.violet{background:#ede9fe;color:#6d28d9}
.icon.rose{background:#ffe4e6;color:#be123c}

.metric small{
  display:block;
  color:var(--muted);
  margin-bottom:4px;
}

.metric strong{
  font-size:30px;
}

.grid{
  display:grid;
  grid-template-columns:1fr 1.1fr .95fr;
  gap:24px;
}

.archive-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.panel-head{
  padding:22px 22px 0;
}

.panel-head h2{
  margin:0;
  font-size:20px;
}

.panel-head p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.panel-body{
  padding:18px 22px 22px;
}

.stack{
  display:grid;
  gap:14px;
}

label{
  display:grid;
  gap:8px;
  font-size:14px;
  font-weight:600;
}

input,textarea,select{
  width:100%;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 14px;
  font:inherit;
  background:#fff;
  color:var(--text);
}

textarea{
  min-height:110px;
  resize:vertical;
}

.filters{
  display:grid;
  gap:12px;
  margin-bottom:14px;
}

[hidden]{display:none !important}

.inline-add{
  margin-top:-4px;
  margin-bottom:4px;
  padding:12px 14px;
  border:1px dashed var(--border);
  border-radius:16px;
  background:#f8fafc;
}

.inline-add label{margin:0}

.job-list,
.archive-results{
  max-height:700px;
  overflow:auto;
  padding-right:4px;
}

.job-item,
.archive-result-card{
  width:100%;
  text-align:left;
  border:1px solid var(--border);
  background:#fff;
  border-radius:18px;
  padding:16px;
  display:grid;
  gap:10px;
}

.job-item.active,
.archive-result-card.active{
  border-color:#93c5fd;
  background:#eff6ff;
}

.row-between{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.job-title{font-weight:700}
.job-subtitle{font-size:14px}

.job-meta{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  font-size:12px;
  color:var(--muted);
}

.job-list-empty{
  border:1px dashed var(--border);
  border-radius:20px;
  background:#f8fafc;
  padding:28px 20px;
  text-align:center;
}

.job-list-empty-title,
.empty-state-title{
  font-size:18px;
  font-weight:700;
  margin-bottom:8px;
}

.job-list-empty-text,
.empty-state-text{
  font-size:14px;
  color:var(--muted);
  line-height:1.6;
  max-width:420px;
  margin:0 auto;
}

.empty-state{
  border:1px dashed var(--border);
  border-radius:20px;
  background:#f8fafc;
  padding:28px 20px;
  text-align:center;
}

.badge{
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:700;
  border:1px solid transparent;
  white-space:nowrap;
}

.badge.status-new{background:#f1f5f9;color:#334155;border-color:#cbd5e1}
.badge.status-assigned{background:#dbeafe;color:#1d4ed8;border-color:#bfdbfe}
.badge.status-progress{background:#fef3c7;color:#b45309;border-color:#fde68a}
.badge.status-signoff{background:#ede9fe;color:#6d28d9;border-color:#ddd6fe}
.badge.status-submitted{background:#dcfce7;color:#15803d;border-color:#bbf7d0}
.badge.status-closed{background:#e5e7eb;color:#374151;border-color:#d1d5db}
.badge.jobtype{background:#eef2ff;color:#4338ca;border-color:#c7d2fe}

.info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:16px;
}

.info-box{
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  background:#fff;
}

.info-label{
  font-size:12px;
  color:var(--muted);
  margin-bottom:8px;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.summary{
  border:1px solid var(--border);
  border-radius:18px;
  background:#f8fafc;
  padding:16px;
  margin-bottom:16px;
}

.summary p{
  margin:0;
  color:#334155;
  font-size:14px;
  line-height:1.6;
}

.note-item,
.audit-card{
  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
  padding:14px;
}

.note-head,
.audit-head{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
  margin-bottom:8px;
}

.note-body,
.audit-body{
  color:#334155;
  font-size:14px;
  line-height:1.5;
}

.tiny{
  font-size:12px;
  color:var(--muted);
}

.mt-14{margin-top:14px}
.mb-12{margin-bottom:12px}

.site-footer{
  margin-top:24px;
  border-top:1px solid var(--border);
  padding:22px 4px 8px;
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:24px;
  align-items:start;
}

.footer-left,
.footer-right{
  display:grid;
  gap:6px;
}

.footer-title{
  font-size:15px;
  font-weight:700;
}

.footer-meta,
.footer-copy{
  font-size:13px;
  color:var(--muted);
}

.footer-gdpr-title{
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.footer-gdpr-text{
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}

.login-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at top, rgba(37,99,235,.08), transparent 38%),
    linear-gradient(180deg,#eef4ff 0%,#f8fbff 52%,#f4f7fb 100%);
}

.login-shell{
  width:min(720px,100%);
  display:grid;
  gap:18px;
}

.login-hero,
.login-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:24px;
  box-shadow:var(--shadow);
}

.login-hero{
  padding:28px 28px 20px;
  text-align:center;
  display:grid;
  gap:14px;
}

.login-hero .eyebrow{
  justify-content:center;
  margin-bottom:0;
}

.login-title{
  margin:0;
  font-size:34px;
  line-height:1.05;
  letter-spacing:-0.02em;
}

.login-copy{
  margin:0 auto;
  max-width:520px;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}

.login-card{
  padding:26px;
  display:grid;
  gap:18px;
}

.login-card .section-title{
  margin:0;
  font-size:22px;
  line-height:1.2;
}

.login-card form.stack{
  gap:16px;
}

.login-card label{
  gap:8px;
  font-size:14px;
  font-weight:600;
}

.login-card input,
.login-card select{
  height:48px;
  border-radius:14px;
  background:#fff;
}

.login-card .button{
  min-height:48px;
  border-radius:14px;
  margin-top:4px;
}

.demo-actions{
  display:grid;
  gap:14px;
}

.demo-button-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.helper-list{
  margin:0;
  padding-left:18px;
  color:var(--muted);
  display:grid;
  gap:8px;
  font-size:14px;
  line-height:1.5;
}

.inline-form{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:end;
}

.lookup-list{
  max-height:520px;
  overflow:auto;
  padding-right:4px;
}

.lookup-item{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:16px;
  background:#fff;
}

.grid-single{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

.mt-24{margin-top:24px}

.team-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.team-chip{
  border:1px solid var(--border);
  background:#f8fbff;
  border-radius:18px;
  padding:18px;
  font-weight:700;
  text-align:center;
}

.form-grid.two-up{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:16px;
}

.form-note-box{
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  background:#f8fbff;
  color:#516173;
}

.lookup-copy{
  display:grid;
  gap:4px;
}

.lookup-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

@media (max-width:1200px){
  .grid,
  .archive-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width:900px){
  .metrics{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .info-grid{
    grid-template-columns:1fr;
  }

  .session-box{
    width:100%;
    flex-direction:column;
    align-items:flex-start;
  }

  .site-footer{
    grid-template-columns:1fr;
  }

  .inline-form{
    grid-template-columns:1fr;
  }

  .team-grid{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:640px){
  .wrap{
    padding:16px;
  }

  .metrics{
    grid-template-columns:1fr;
  }

  h1{
    font-size:28px;
  }

  .login-page{
    padding:16px;
  }

  .login-shell{
    gap:14px;
  }

  .login-hero{
    padding:22px 18px 18px;
  }

  .login-card{
    padding:20px 18px;
  }

  .login-title{
    font-size:28px;
  }

  .login-copy{
    font-size:14px;
  }

  .login-card .section-title{
    font-size:20px;
  }

  .team-grid{
    grid-template-columns:1fr;
  }

.team-status-board{
  margin-bottom:24px;
}

.team-status-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:16px;
}

.team-status-card{
  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
  padding:18px;
  box-shadow:var(--shadow);
  display:grid;
  gap:16px;
  min-height:100%;
}

.team-status-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

.team-status-heading{
  display:grid;
  gap:6px;
}

.team-status-detail{
  font-size:13px;
  color:var(--muted);
  line-height:1.4;
}

.team-status-badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.team-meta-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.team-meta-item{
  border:1px solid var(--border);
  border-radius:14px;
  background:#f8fafc;
  padding:12px;
  min-height:74px;
}

.team-meta-label{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.03em;
  margin-bottom:6px;
}

.team-meta-value{
  font-size:14px;
  font-weight:600;
  color:var(--text);
  line-height:1.4;
}

.team-meta-subtle{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

.team-inline-note{
  display:inline-block;
  margin-left:6px;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}

@media (max-width:640px){
  .team-status-top{
    flex-direction:column;
    align-items:flex-start;
  }

  .team-status-badges{
    justify-content:flex-start;
  }

  .team-meta-grid{
    grid-template-columns:1fr;
  }
}

* Team status hard override */
.team-status-board{
  margin-bottom:24px !important;
}

.team-status-board .team-status-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr)) !important;
  gap:16px !important;
}

.team-status-board .team-status-card{
  display:grid !important;
  gap:16px !important;
  border:1px solid var(--border) !important;
  border-radius:18px !important;
  background:#fff !important;
  padding:18px !important;
  box-shadow:var(--shadow) !important;
}

.team-status-board .team-status-top{
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:12px !important;
}

.team-status-board .team-status-heading{
  display:grid !important;
  gap:6px !important;
}

.team-status-board .team-status-detail{
  font-size:13px !important;
  color:var(--muted) !important;
  line-height:1.4 !important;
}

.team-status-board .team-status-badges{
  display:flex !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  justify-content:flex-end !important;
}

.team-status-board .team-meta-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
}

.team-status-board .team-meta-item{
  border:1px solid var(--border) !important;
  border-radius:14px !important;
  background:#f8fafc !important;
  padding:12px !important;
  min-height:74px !important;
}

.team-status-board .team-meta-label{
  font-size:11px !important;
  color:var(--muted) !important;
  text-transform:uppercase !important;
  letter-spacing:.03em !important;
  margin-bottom:6px !important;
}

.team-status-board .team-meta-value{
  font-size:14px !important;
  font-weight:600 !important;
  color:var(--text) !important;
  line-height:1.4 !important;
}

.team-status-board .team-meta-subtle{
  margin-top:4px !important;
  font-size:12px !important;
  color:var(--muted) !important;
}

.team-status-board .team-inline-note{
  display:inline-block !important;
  margin-left:6px !important;
  font-size:12px !important;
  font-weight:600 !important;
  color:var(--muted) !important;
}

@media (max-width:640px){
  .team-status-board .team-status-top{
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  .team-status-board .team-status-badges{
    justify-content:flex-start !important;
  }

  .team-status-board .team-meta-grid{
    grid-template-columns:1fr !important;
  }
}