:root{
  --nf-yellow:#ffd400;
  --nf-black:#0b0b0b;
  --nf-red:#d81f14;
  --nf-cream:#fff8df;
  --nf-border:#000;
  --shadow: 0 10px 24px rgba(0,0,0,.22);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: "Futura", "Trebuchet MS", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--nf-yellow);
  color:#111;
}

.topbar{
  background: var(--nf-black);
  color:#fff;
  border-bottom: 6px solid var(--nf-red);
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 18px;
}
.logoBox{
  width:34px;
  height:34px;
  border-radius:10px;
  background: var(--nf-yellow);
  border: 3px solid #000;
  position:relative;
}
.logoBox::after{
  content:"";
  position:absolute;
  inset:9px;
  background: var(--nf-red);
  border:2px solid #000;
  border-radius:6px;
}
.brandTitle{
  font-weight:900;
  letter-spacing:.5px;
  font-size:18px;
  line-height:1.1;
}
.crumbs{
  opacity:.8;
  font-size:12px;
  margin-top:2px;
}

.wrap{
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 16px 28px;
}

.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  padding: 14px;
  background: rgba(255,255,255,.10);
  border-radius: 18px;
  border: 3px solid #000;
  box-shadow: var(--shadow);
}

.search{
  flex:1 1 360px;
  min-width: 220px;
  padding: 12px 14px;
  font-size: 14px;
  border-radius: 14px;
  border: 3px solid #000;
  background: var(--nf-cream);
  outline:none;
}

.btn{
  padding: 11px 14px;
  border-radius: 14px;
  border: 3px solid #000;
  font-weight: 900;
  letter-spacing:.4px;
  cursor:pointer;
  background: #fff;
  box-shadow: 0 6px 0 rgba(0,0,0,.18);
  user-select:none;
}
.btn:active{ transform: translateY(1px); box-shadow: 0 5px 0 rgba(0,0,0,.18); }

.btnRed{
  background: var(--nf-red);
  color:#fff;
}
.btnGhost{
  background: #fff;
}

/* NEW: disabled state (used for missing PDFs) */
.btnDisabled,
.btn:disabled{
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none !important;
  filter: grayscale(35%);
}

.hidden{ display:none !important; }

.grid{
  margin-top: 16px;
  display:grid;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  gap: 14px;
}
@media (max-width: 1050px){
  .grid{ grid-template-columns: repeat(3, minmax(180px, 1fr)); }
}
@media (max-width: 720px){
  .grid{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}
@media (max-width: 420px){
  .grid{ grid-template-columns: 1fr; }
}

.tile{
  background: var(--nf-cream);
  border: 3px solid #000;
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height: 118px;
}
.tileHead{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 10px;
}
.tileTitle{
  font-weight: 1000;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing:.6px;
}
.tileHint{
  font-size: 12px;
  opacity:.75;
  text-align:right;
  margin-top:2px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border: 2px solid #000;
  border-radius: 999px;
  padding: 7px 10px;
  background: var(--nf-yellow);
  font-weight: 900;
  width: fit-content;
}
.dot{
  width:10px;height:10px;border-radius:999px;background: var(--nf-red);border:2px solid #000;
}
.subGrid{
  display:grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 14px;
}
@media (max-width: 900px){
  .subGrid{ grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}
@media (max-width: 520px){
  .subGrid{ grid-template-columns: 1fr; }
}

.card{
  background: var(--nf-cream);
  border: 3px solid #000;
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow);
}
.cardTitle{
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.6px;
}
.cardRow{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.noteLabel{
  margin-top: 14px;
  font-weight: 1000;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing:.5px;
}
.textarea{
  width:100%;
  min-height: 140px;
  resize: vertical;
  padding: 12px;
  border-radius: 14px;
  border: 3px solid #000;
  background: #fff;
  font-size: 13px;
  line-height: 1.3;
}

.statusBox{
  margin-top: 16px;
  background: var(--nf-cream);
  border: 3px solid #000;
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow);
}
.statusTitle{
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.6px;
  font-size: 12px;
}
.statusText{
  margin-top: 6px;
  font-size: 13px;
}
.small{
  font-size: 12px;
  opacity:.8;
}