:root{font:16px/1.5 system-ui,sans-serif;color:#142c48;background:#f3f6fa;--navy:#10283f;--gold:#ecc15d;--muted:#66788d}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button,a.button{cursor:pointer;border:1px solid #d7e1ed;border-radius:12px;background:white;color:#183b70;padding:11px 18px;font-weight:650;text-decoration:none}button:hover,a.button:hover{filter:brightness(.96)}button:disabled{opacity:.5;cursor:not-allowed}.gold{background:var(--gold);color:#132a43;border-color:var(--gold)}header{background:var(--navy);color:white;padding:20px max(24px,calc((100vw - 1440px)/2));display:flex;align-items:center;gap:24px}header img{width:125px;height:55px;object-fit:contain}.brand{font-size:19px;font-weight:750}.brand small{display:block;font-size:11px;letter-spacing:2px;color:var(--gold)}.account{margin-left:auto;display:flex;align-items:center;gap:16px}.account span{font-size:13px}nav{display:flex;gap:8px;max-width:1440px;margin:22px auto 0;padding:0 24px}nav button.active{background:var(--navy);color:white}main{max-width:1440px;margin:32px auto;padding:0 24px 40px}h1{font-size:36px;letter-spacing:-1px;margin:0 0 8px}h2{margin-top:0}p{color:var(--muted)}.heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:24px}.heading p{margin:0}.eyebrow{color:#aa7a19;font-size:12px;font-weight:800;letter-spacing:2px}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:24px}.card,.panel{background:white;border:1px solid #dde5ef;border-radius:18px;padding:24px}.card small{color:var(--muted)}.card strong{display:block;font-size:32px}.card:first-child{background:var(--navy);color:white}.card:first-child small{color:#c6d5e6}.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}.toolbar input{max-width:380px}.agent{font-size:13px;margin-left:auto}.good{color:#107559}.bad{color:#a13a38}.tablebox{overflow:auto;max-height:65vh}table{border-collapse:collapse;width:100%;text-align:left}th{position:sticky;top:0;background:#f5f7fa;font-size:12px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}td,th{padding:17px 14px;border-bottom:1px solid #edf0f5}td small{display:block;font-size:12px;color:var(--muted);max-width:350px;overflow-wrap:anywhere}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions button,.actions a{font-size:13px;padding:8px 12px}.badge{display:inline-block;border-radius:20px;padding:4px 10px;background:#edf2f8;font-size:13px;white-space:nowrap}.badge.ACTIVE{background:#e0f4eb;color:#107559}.badge.SUSPENDED,.badge.FAILED,.badge.UNKNOWN{background:#ffebe7;color:#983d2c}.badge.RUNNING,.badge.QUEUED,.badge.PENDING{background:#fff3cf;color:#8c6711}input{display:block;width:100%;border:1px solid #cfdae7;border-radius:10px;padding:12px 14px;background:white;color:#142c48}label{display:block;font-weight:600;font-size:14px;margin-bottom:18px}label input{margin-top:7px}dialog{border:1px solid #dce5ef;border-radius:20px;padding:30px;width:min(560px,94vw);max-height:90vh;overflow:auto}dialog::backdrop{background:#10283f99;backdrop-filter:blur(3px)}.error{color:#a23232;min-height:24px}.login{max-width:450px;margin:10vh auto;padding:32px}.login img{width:160px;background:var(--navy);border-radius:10px;padding:10px}.login button{width:100%}.foot{font-size:12px;margin-top:24px;color:var(--muted)}#toast{position:fixed;bottom:24px;right:24px;max-width:450px;background:var(--navy);color:white;border-radius:14px;padding:0;z-index:20}#toast:not(:empty){padding:16px 22px}.empty{padding:40px;text-align:center}a{color:#204d85}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #d6a32b;outline-offset:3px}@media(max-width:760px){header{padding:16px;gap:12px}.account span{display:none}.brand{font-size:16px}header img{width:85px}.heading{align-items:flex-start;flex-direction:column}h1{font-size:28px}.metrics{gap:8px}.card{padding:15px}.card strong{font-size:25px}main{padding:0 14px}nav{padding:0 14px}.panel{padding:15px}.agent{margin-left:0}td{min-width:160px}td:last-child{min-width:280px}}
/* The shared access page uses the same visual identity as the ERP login. */
.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background: linear-gradient(145deg, #243650 0%, #132a5e 100%);
  color: #1e293b;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
.login-page .login {
  width: min(460px, 100%);
  max-width: 460px;
  min-width: 0;
  margin: 0;
  padding: 36px;
  border: 1px solid #e6eaf2;
  border-top: 3px solid #c89b3c;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 48px #08132330;
}
.login-page .login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
}
.login-page .login-logo svg {
  display: block;
  width: 250px;
  max-width: 100%;
  height: 74px;
}
.login-page .login-eyebrow {
  display: block;
  text-align: center;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.login-page h1 {
  margin: 14px 0 10px;
  color: #132a5e;
  font-size: 32px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -.035em;
  text-align: center;
}
.login-page .login-subtitle {
  margin: 14px 0;
  color: #64748b;
  font-size: 14px;
  text-align: center;
}
.login-page form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 30px;
}
.login-page label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  color: #1e293b;
  font-size: 14px;
  font-weight: 700;
}
.login-page input {
  min-width: 0;
  height: 50px;
  margin: 0;
  padding: 0 14px;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  color: #1e293b;
  font-size: 16px;
}
.login-page input:focus {
  border-color: #1f3c88;
  outline: 3px solid #1f3c881a;
  outline-offset: 0;
}
.login-page .error {
  min-height: 16px;
  margin: 0;
  color: #b91c1c;
  font-size: 13px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.login-page .login-submit {
  min-height: 48px;
  padding: 12px 18px;
  border: 0;
  border-radius: 10px;
  background: #1f3c88;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
}
.login-page .login-submit:hover { background: #132a5e; filter: none; }
.login-page .login-submit:disabled { opacity: .65; cursor: wait; }
.login-page .login-submit:focus-visible,
.login-page summary:focus-visible {
  outline: 3px solid #c89b3c;
  outline-offset: 4px;
}
.login-page .login-recovery { margin-top: 20px; text-align: center; font-size: 14px; }
.login-page .login-recovery summary { cursor: pointer; color: #1f3c88; }
.login-page .login-recovery summary:hover { text-decoration: underline; }
.login-page .login-recovery p { color: #64748b; line-height: 1.5; overflow-wrap: anywhere; }
.login-page .login-footer {
  display: block;
  margin-top: 25px;
  color: #64748b;
  font-size: 12px;
  text-align: center;
}
@media (max-width: 480px) {
  .login-page { padding: 20px 14px; }
  .login-page .login { padding: 28px 22px; border-radius: 18px; }
}
@media (min-width: 600px) and (max-height: 850px) {
  .login-page { padding: 20px; }
  .login-page .login { padding: 26px 32px; }
  .login-page .login-logo { margin-bottom: 16px; }
  .login-page form { margin-top: 22px; gap: 12px; }
  .login-page .login-footer { margin-top: 18px; }
}