:root{
  --aggie-blue:#003B5C;
  --aggie-blue-2:#00558C;
  --aggie-gold:#FDB515;
  --ink:#172033;
  --muted:#657084;
  --bg:#f4f7fb;
  --card:#ffffff;
  --red:#d92d20;
  --green:#16803c;
  --yellow:#f6c343;
  --purple:#6f42c1;
  --blue:#2f80ed;
  --shadow:0 12px 30px rgba(0,0,0,.10);
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial, Helvetica, sans-serif;background:var(--bg);color:var(--ink)}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 26px;background:linear-gradient(135deg,var(--aggie-blue),#061b2b);color:white;box-shadow:var(--shadow)}
.brand{display:flex;gap:16px;align-items:center}
.seal{width:62px;height:62px;border-radius:16px;background:var(--aggie-gold);color:var(--aggie-blue);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;border:3px solid white}
h1{font-size:24px;margin:0}
.topbar p{margin:4px 0 0;color:#dce9f5}
.user-panel{display:grid;grid-template-columns:auto auto;gap:6px 10px;align-items:center;font-size:13px}
select,input,textarea{border:1px solid #cfd7e6;border-radius:8px;padding:9px 10px;font:inherit;background:white}
button{border:0;border-radius:10px;background:var(--aggie-blue);color:white;padding:10px 14px;font-weight:700;cursor:pointer}
button:hover{background:var(--aggie-blue-2)}
button.ghost{background:#e8eef7;color:var(--aggie-blue)}
main{max-width:1440px;margin:0 auto;padding:22px}
.hero{display:flex;justify-content:space-between;gap:20px;align-items:center;background:linear-gradient(90deg,#fff,#edf6ff);border-left:8px solid var(--aggie-gold);border-radius:18px;padding:20px;box-shadow:var(--shadow)}
.hero h2{margin:0 0 6px;font-size:24px}
.hero-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.kpis{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:14px;margin:20px 0}
.kpi{background:var(--card);padding:18px;border-radius:18px;box-shadow:var(--shadow);border-top:5px solid var(--aggie-blue)}
.kpi .num{font-size:30px;font-weight:900;margin-top:6px}
.kpi.red{border-color:var(--red)} .kpi.gold{border-color:var(--aggie-gold)} .kpi.green{border-color:var(--green)}
.dashboard-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:18px}
.card{background:var(--card);padding:18px;border-radius:18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 12px}
.bar{display:grid;grid-template-columns:130px 1fr 46px;gap:8px;align-items:center;margin:9px 0}
.bar-track{height:18px;background:#e8eef7;border-radius:20px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--aggie-blue),var(--aggie-gold));border-radius:20px}
.redflag{border-left:5px solid var(--red);padding:10px;margin:8px 0;background:#fff5f5;border-radius:8px}
.note{padding:10px;margin:8px 0;background:#f4f8ff;border-left:5px solid var(--aggie-blue);border-radius:8px}
.table-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px}
.table-toolbar input{width:360px;max-width:100%}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0 14px;color:var(--muted);font-size:13px}
.dot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:6px}
.final{background:var(--green)}.progress{background:var(--yellow)}.revision{background:var(--red)}.startover{background:var(--blue)}.admin{background:var(--purple)}.agcom{background:var(--aggie-blue)}
.table-wrap{overflow:auto}
table{border-collapse:collapse;width:100%;min-width:1160px}
th,td{text-align:left;border-bottom:1px solid #e7edf6;padding:10px;vertical-align:top;font-size:14px}
th{background:#eef5fb;color:var(--aggie-blue);position:sticky;top:0;z-index:1}
tr.overdue{background:#fff6f5}
.badge{display:inline-block;padding:5px 9px;border-radius:999px;color:#111;font-weight:700;font-size:12px}
.status-Final-Review{background:#c6efce}.status-In-Progress{background:#fff2cc}.status-Revisions{background:#f8cbad}.status-Start-Over{background:#ddebf7}.status-Admin-Review{background:#e4dfec}.status-Sent-to-AgCom{background:#bdd7ee}
.status-Submitted-to-ISD,.status-ISD-Review{background:#e8eef7}
.status-Approved{background:#c6efce}
.priority-Critical,.priority-Urgent{background:#ffe0dd;color:#8b1a10}
dialog{border:0;border-radius:18px;box-shadow:0 28px 80px rgba(0,0,0,.35);width:min(980px,96vw);padding:0}
dialog form{padding:22px}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
label{display:flex;flex-direction:column;gap:6px;font-weight:700;color:#29364a}
textarea{resize:vertical}
.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
footer{text-align:center;color:#657084;padding:24px}
.action-row{display:flex;gap:6px;flex-wrap:wrap}
.small{font-size:12px;padding:6px 8px}
@media(max-width:900px){
  .topbar,.hero{flex-direction:column;align-items:flex-start}
  .dashboard-grid,.kpis,.form-grid{grid-template-columns:1fr}
  .user-panel{grid-template-columns:1fr}
}



/* Login Gate */
.login-screen{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at top left, rgba(253,181,21,.22), transparent 34%),
    linear-gradient(135deg, var(--aggie-blue), #061b2b 70%);
}
.login-screen.hidden{display:none}
.login-card{
  width:min(760px, 96vw);
  background:#fff;
  border-radius:24px;
  box-shadow:0 30px 90px rgba(0,0,0,.35);
  overflow:hidden;
  border-top:8px solid var(--aggie-gold);
}
.login-brand{
  display:flex;
  align-items:center;
  gap:16px;
  padding:24px;
  background:linear-gradient(90deg, #f7fbff, #fff);
}
.login-brand h1{color:var(--aggie-blue);margin:0;font-size:26px}
.login-brand p{margin:4px 0 0;color:var(--muted)}
.login-seal{box-shadow:0 8px 24px rgba(0,59,92,.2)}
.login-form{
  padding:0 24px 24px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.login-form h2,
.login-form .login-help,
.login-form .login-error,
.login-form button,
.login-form .security-note{
  grid-column:1/-1;
}
.login-form h2{margin:0;color:var(--aggie-blue)}
.login-help,.security-note{color:var(--muted);margin:0}
.login-error{
  color:#8b1a10;
  background:#fff1f0;
  border-left:5px solid var(--red);
  padding:10px;
  border-radius:8px;
  display:none;
}
.current-user{
  grid-column:1/-1;
  color:#fff;
  font-size:13px;
  padding:6px 0;
}
.current-user strong{color:var(--aggie-gold)}
@media(max-width:700px){
  .login-form{grid-template-columns:1fr}
}


/* ISED Dashboard */
.ised-dashboard{
  border-top:6px solid var(--aggie-gold);
  margin:18px 0;
}
.section-help{
  margin:4px 0 0;
  color:var(--muted);
}
.ised-controls{
  display:flex;
  gap:8px;
  align-items:center;
}
.ised-controls label{
  display:block;
  font-size:13px;
  color:var(--muted);
}
.ised-kpis{
  display:grid;
  grid-template-columns:repeat(6,minmax(130px,1fr));
  gap:12px;
  margin:14px 0;
}
.ised-kpi{
  background:#f7fbff;
  border:1px solid #dce9f5;
  border-left:5px solid var(--aggie-blue);
  border-radius:14px;
  padding:12px;
}
.ised-kpi.red{border-left-color:var(--red)}
.ised-kpi.gold{border-left-color:var(--aggie-gold)}
.ised-kpi.green{border-left-color:var(--green)}
.ised-kpi.purple{border-left-color:var(--purple)}
.ised-kpi .num{
  font-size:24px;
  font-weight:900;
  margin-top:4px;
}
.card.nested{
  box-shadow:none;
  border:1px solid #e7edf6;
  background:#fbfdff;
}
.card.nested h4{
  margin:0 0 10px;
  color:var(--aggie-blue);
}
.queue-item{
  padding:10px;
  margin:8px 0;
  border-radius:10px;
  border-left:5px solid var(--aggie-blue);
  background:#fff;
}
.queue-item.overdue{border-left-color:var(--red);background:#fff7f6}
.queue-item.admin{border-left-color:var(--purple)}
.queue-item.agcom{border-left-color:var(--green)}
@media(max-width:1100px){
  .ised-kpis{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  .ised-kpis{grid-template-columns:1fr}
  .ised-controls{align-items:flex-start; flex-direction:column;}
}


/* QA Update: login usability and logo layout */
.logo-pair{display:flex;align-items:center;gap:14px;flex-shrink:0}
.logo-pair img{display:block;object-fit:contain;background:white;border-radius:10px}
.top-logos img:first-child{width:58px;height:58px;padding:4px}
.top-logos img:last-child{width:245px;height:58px;padding:6px}
.login-logos{align-self:flex-start;gap:10px;flex-wrap:wrap}
.login-logos img:first-child{width:74px;height:74px;padding:5px;border:1px solid #e7edf6}
.login-logos img:last-child{width:320px;max-width:100%;height:74px;padding:8px;border:1px solid #e7edf6}
.login-screen{align-items:flex-start;overflow-y:auto;min-height:100vh;padding:28px 18px}
.login-card{margin:auto 0;max-height:none;overflow:visible}
.login-form{padding-bottom:28px}
.login-form label{min-width:0}
.login-form input,.login-form select{width:100%;min-height:42px}
@media(max-height:760px){
  .login-screen{align-items:flex-start;padding-top:14px;padding-bottom:14px}
  .login-brand{padding:16px}
  .login-form{gap:10px;padding:0 16px 16px}
  .login-form h2{font-size:20px}
}
@media(max-width:900px){
  .top-logos img:last-child{width:190px}
  .login-brand{flex-direction:column;align-items:flex-start}
}
@media(max-width:560px){
  .top-logos{flex-wrap:wrap}
  .top-logos img:last-child{width:100%;max-width:260px}
  .login-logos img:last-child{width:100%;height:auto;max-height:90px}
}

.app-error{position:sticky;top:0;z-index:10000;background:#fff1f0;border-bottom:3px solid var(--red);color:#8b1a10;padding:10px 18px;font-size:14px}