/* Small, modern, consistent UI tweaks (non-breaking) */
:root{
  --primary:#2b8aef; /* blue */
  --accent:#28a745; /* green */
  --muted:#6c757d;
  --bg:#f8fafc;
  --card:#ffffff;
  --border:#e6e9ee;
  --radius:8px;
  --gap:12px;
  --text:#212529;
}
html,body{height:100%;margin:0;font-family:Inter, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;background:var(--bg);color:var(--text);}
.container{max-width:1100px;margin:24px auto;padding:18px}
/* Buttons */
button, .btn{cursor:pointer;border-radius:6px;border:none;padding:8px 12px;font-weight:600}
button.primary, .btn.primary{background:var(--primary);color:#fff}
button.positive, .btn.positive{background:var(--accent);color:#fff}
button.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
button.small{padding:6px 8px;font-size:0.9rem}
/* Inputs/selects */
input[type='text'], input[type='email'], input[type='number'], input[type='date'], select, textarea{
  border:1px solid var(--border);background:var(--card);padding:8px 10px;border-radius:6px;outline:none;transition:box-shadow .12s, border-color .12s;width:100%;box-sizing:border-box;color:var(--text)
}
input:focus, select:focus, textarea:focus{box-shadow:0 6px 18px rgba(43,138,239,0.12);border-color:var(--primary)}
label{display:block;margin-bottom:6px;font-size:0.95rem;color:var(--text)}
.form-row{display:flex;gap:12px}
.form-row .form-group{flex:1}
/* Sidebar/nav small polish */
.column{background:linear-gradient(180deg,#c92f2f,#dc482e);color:#fff;padding-top:18px}
.column{display:flex;flex-direction:column;justify-content:space-between;padding:18px 12px;position:fixed;top:0;left:0;bottom:0;width:200px;height:100vh;box-sizing:border-box}
.nav-list{display:flex;flex-direction:column;gap:8px}
.column > div:first-child{flex:1 1 auto;overflow:auto;display:flex;flex-direction:column;gap:12px}
.column img{max-height:120px;width:100%;height:auto;object-fit:contain}
.box-link{display:block;padding:10px 14px;border-radius:8px;color:#fff;text-decoration:none;font-weight:700;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.12);transition:all .14s}
.box-link:hover{background:rgba(255,255,255,0.06);transform:translateY(-1px)}
.box-link-bottom{display:block;padding:10px 14px;border-radius:8px;color:#fff;text-decoration:none;font-weight:700;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.12);transition:all .14s}
.box-link-bottom:hover{background:rgba(255,255,255,0.06);transform:translateY(-1px)}
.nav-footer{margin-top:12px;flex:0 0 auto;padding-top:8px;border-top:1px solid rgba(255,255,255,0.04);background:linear-gradient(180deg, rgba(0,0,0,0.02), transparent)}

/* Ensure main content doesn't push the page taller than the viewport and scrolls internally */
.main-content{margin-left:220px;height:100vh;overflow:auto}

@media (max-width:900px){
  .main-content{margin-left:0 !important}
  .column{position:static;width:100%;height:auto}
}
/* Tables: smaller, centered, responsive */
.table-root, table{width:100%;border-collapse:collapse;font-size:12px;table-layout:fixed}
.table-root th, .table-root td, th, td{
  padding:6px 8px;
  border:1px solid rgba(0,0,0,0.08); /* thin light grey grid */
  text-align:center;
  vertical-align:middle;
  font-size:12px;
  white-space:normal;
  word-break:break-word;
}
th{background:#fff9c4;font-weight:700;color:var(--text)}
.table-wrapper{overflow:auto}

/* Inner tables used for listing samples should also center and be compact */
.inner-table{width:100%;border-collapse:collapse}
.inner-table td{padding:4px 6px;border:none;text-align:left;vertical-align:middle;font-size:12px}

/* Ensure inner tables don't add borders that break the outer grid */
.table-root .inner-table td{border:none}

/* Quantity + Unit pairing: show on one line, wrap responsively */
.quantity-group{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}
.quantity-group label{
  margin:0;
  font-size:0.95rem;
  color:var(--muted);
  white-space:nowrap;
}
.quantity-group input[type='number']{
  flex:0 0 90px;
  max-width:140px;
  min-width:64px;
}
.quantity-group select{
  flex:0 0 120px;
  max-width:200px;
}
@media (max-width:720px){
  .quantity-group{gap:6px}
  .quantity-group input[type='number'], .quantity-group select{flex:1 1 48%;max-width:100%}
  .quantity-group label{width:100%}
}

/* Improve table body contrast for readability */
.main-table td, .inner-table td{
  color:var(--text); /* ensure table body text uses the main text color */
}

/* Ensure long tables can scroll horizontally on small screens */
.table-wrapper{overflow:auto}
@media (max-width:720px){
  table, .inner-table{font-size:11px}
}
/* Requests toolbar */
.requests-toolbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;background:var(--card);padding:12px;border-radius:8px;border:1px solid var(--border);box-shadow:0 2px 6px rgba(0,0,0,0.03);margin-bottom:14px;position:sticky;top:12px;z-index:30}
.toolbar-left{display:flex;align-items:center;gap:12px}
.toolbar-center{display:flex;justify-content:center}
.toolbar-title{margin:0;font-size:1.6rem;font-weight:700;letter-spacing:0.2px}
.toolbar-actions{display:flex;align-items:center;gap:8px}
.toolbar-actions form{margin:0}
.toolbar-right{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.filter-form{display:flex;align-items:center;gap:8px}
.filter-form select{min-width:160px}
.filter-form input{min-width:160px}
.sr-only{position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
/* Small responsive tweaks */
@media (max-width:900px){.container{padding:12px}.form-row{flex-direction:column}.column{display:none}}
@media (max-width:720px){
  .requests-toolbar{flex-direction:column;align-items:stretch;gap:10px}
  .toolbar-left{justify-content:space-between}
  .toolbar-actions{flex-wrap:wrap;gap:6px}
  .filter-form{justify-content:flex-end}
  .toolbar-title{font-size:1.25rem}
}

/* Submit button helper: place at form bottom-right and emphasize */
.form-submit{display:flex;justify-content:flex-end;margin-top:18px}
.submit-btn{padding:10px 16px;font-size:1.05rem;border-radius:10px;box-shadow:0 6px 18px rgba(43,138,239,0.18);border:none}
.submit-btn.secondary{background:#6c757d;color:#fff}
.submit-btn.primary{background:var(--primary);color:#fff}

@media (max-width:480px){
  .submit-btn{width:100%;justify-self:stretch}
  .form-submit{justify-content:stretch}
}

/* Kit guide panel (scrollable) */
.kit-guide-container{
  position:fixed;
  right:20px;
  top:80px;
  width: min(760px, 92vw);
  max-height: calc(100vh - 140px);
  overflow:auto;
  background:var(--card);
  border:1px solid var(--border);
  padding:12px;
  border-radius:8px;
  box-shadow:0 8px 20px rgba(0,0,0,0.12);
  display:none;
  z-index:2000;
}
.kit-guide-container table{width:100%;border-collapse:collapse}
.kit-guide-container th,.kit-guide-container td{padding:8px;border-bottom:1px solid var(--border);font-size:0.92rem}
.kit-guide-container th{background:#fff9c4;font-weight:700}

@media (max-width:720px){
  .kit-guide-container{right:10px;left:10px;top:70px;width:auto;max-height:calc(100vh - 100px)}
}

/* Ensure buttons and selects inside the main table are visually consistent */
.main-table button, .main-table select, .main-table .btn {
  font-size:12px; /* match table text */
  padding:6px 8px;
  line-height:1.1;
}
.main-table select{height:auto}
.inner-table button, .inner-table select { font-size:12px; padding:4px 6px }