/* ---------------------------------------------------------------------------
   WNC Allocate — layout and components
   Uses only the tokens declared in brand.css.
   --------------------------------------------------------------------------- */

/* ---- Application frame --------------------------------------------------- */

.app {
  display: grid;
  grid-template-columns: 232px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas: "brand top" "nav main";
  min-height: 100vh;
}

.brandbar {
  grid-area: brand;
  background: var(--wnc-blue);
  color: var(--paper);
  padding: 12px 16px;
  border-bottom: 1px solid var(--wnc-blue);
}

/* The official logo is not reproduced here. Guideline page 7: "Always use the
   original West Northamptonshire Council logo artwork, completely unaltered...
   Never type up your own 'West Northamptonshire Council' logo. Do not create
   logos for teams... or for projects." So this is a labelled placeholder that
   the real SVG from Communications drops into. */
.logoslot {
  border: 1px dashed rgba(255,255,255,0.55);
  border-radius: var(--radius);
  padding: 6px 8px;
  font-size: var(--size-tiny);
  color: var(--paper);
  line-height: 1.25;
}
.logoslot b { display: block; font-size: var(--size-small); font-weight: 700; }

.topbar {
  grid-area: top;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: var(--gap);
  padding: 10px 20px;
  flex-wrap: wrap;
}
.topbar .grow { flex: 1 1 auto; }
.appname { font-size: 18px; font-weight: 700; color: var(--wnc-blue); }
.appname span { font-weight: 400; color: var(--ink-soft); font-size: var(--size-small); }

.nav {
  grid-area: nav;
  background: var(--paper);
  border-right: 1px solid var(--line);
  padding: 12px 0 40px 0;
}
.nav a {
  display: block;
  padding: 9px 16px 9px 13px;
  color: var(--ink);
  text-decoration: none;
  border-left: 3px solid transparent;
  font-size: var(--size-small);
}
.nav a:hover { background: var(--pale); }
.nav a[aria-current="page"] {
  border-left-color: var(--wnc-green);
  background: var(--pale-2);
  font-weight: 700;
  color: var(--wnc-blue);
}
.nav .navgroup {
  padding: 14px 16px 4px 16px;
  font-size: var(--size-tiny);
  color: var(--ink-soft);
  font-weight: 700;
  border-top: 1px solid var(--line);
  margin-top: 8px;
}
.nav .navgroup:first-child { border-top: 0; margin-top: 0; }

.main { grid-area: main; padding: 20px 24px 64px 24px; min-width: 0; }

.pagehead { margin-bottom: 18px; }
.pagehead p { color: var(--ink-soft); font-size: var(--size-small); margin: 0; }

/* ---- Cards, grids ------------------------------------------------------- */

.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: var(--gap);
}
.card > h2, .card > h3 { margin-top: 0; }
.card .hint { color: var(--ink-soft); font-size: var(--size-small); }

.grid { display: grid; gap: var(--gap); }
.grid > * { min-width: 0; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .g3, .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 760px)  { .g2, .g3, .g4 { grid-template-columns: minmax(0, 1fr); } }

/* ---- Key figures -------------------------------------------------------- */

.kpi {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--wnc-blue);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.kpi .n { font-size: 28px; font-weight: 700; color: var(--wnc-blue); line-height: 1.15; }
.kpi .l { font-size: var(--size-tiny); color: var(--ink-soft); }
.kpi.good { border-left-color: var(--wnc-green); }
.kpi.good .n { color: var(--wnc-green); }
.kpi.warn { border-left-color: var(--wnc-yellow); }
.kpi.warn .n { color: var(--ink); }
.kpi.bad  { border-left-color: var(--wnc-red-light); }
.kpi.bad .n { color: var(--wnc-red-light); }

/* ---- Tables ------------------------------------------------------------- */

table { border-collapse: collapse; width: 100%; font-size: var(--size-small); }
caption { text-align: left; font-size: var(--size-small); color: var(--ink-soft); padding-bottom: 6px; }
th, td { text-align: left; padding: 7px 9px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { background: var(--wnc-blue); color: var(--paper); font-weight: 700; border-bottom: 0; }
tbody tr:nth-child(even) { background: var(--pale); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tablewrap { overflow-x: auto; }

/* ---- Controls ----------------------------------------------------------- */

button, .btn {
  font-family: var(--font-body);
  font-size: var(--size-small);
  padding: 7px 13px;
  border-radius: var(--radius);
  border: 1px solid var(--wnc-blue);
  background: var(--wnc-blue);
  color: var(--paper);
  cursor: pointer;
}
button:hover, .btn:hover { background: var(--wnc-blue-light); border-color: var(--wnc-blue-light); }
button.secondary {
  background: var(--paper);
  color: var(--wnc-blue);
}
button.secondary:hover { background: var(--pale-2); }
button.go { background: var(--wnc-green); border-color: var(--wnc-green); }
button.go:hover { background: var(--wnc-green-light); border-color: var(--wnc-green-light); }
button.danger { background: var(--wnc-red-light); border-color: var(--wnc-red-light); }
button.danger:hover { background: var(--wnc-red); border-color: var(--wnc-red); }
button.small { padding: 3px 8px; font-size: var(--size-tiny); }
button[disabled] { opacity: 0.45; cursor: not-allowed; }

label { display: block; font-size: var(--size-tiny); color: var(--ink-soft); margin-bottom: 3px; }
input, select, textarea {
  font-family: var(--font-body);
  font-size: var(--size-small);
  padding: 6px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  width: 100%;
}
.field { margin-bottom: 10px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.row > .field { flex: 1 1 150px; margin-bottom: 0; }
.toolbar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: var(--gap);
}

/* ---- Tags. Council / Department / Funding ------------------------------- */

.tag {
  display: inline-block;
  font-size: var(--size-tiny);
  padding: 1px 7px 1px 5px;
  border: 1px solid var(--line-strong);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--paper);   /* text sits on white, never on the palette */
  color: var(--ink);
  margin: 0 4px 4px 0;
  white-space: nowrap;
}
.tag.council    { border-left-color: var(--wnc-blue); }
.tag.department { border-left-color: var(--wnc-cyan); }
.tag.funding    { border-left-color: var(--wnc-yellow); }
.tag.capital    { border-left-color: var(--wnc-green); }
.tag.revenue    { border-left-color: var(--wnc-pink); }

.pill {
  display: inline-block; font-size: var(--size-tiny);
  padding: 1px 8px; border-radius: 10px; border: 1px solid var(--line-strong);
  background: var(--paper); color: var(--ink); white-space: nowrap;
}
.pill.ok    { border-color: var(--wnc-green);      color: var(--wnc-green); }
.pill.risk  { border-color: var(--wnc-red-light);  color: var(--wnc-red-light); }
.pill.hold  { border-color: var(--wnc-black-50);   color: var(--ink-soft); }

/* ---- Notices ------------------------------------------------------------ */

.notice {
  border: 1px solid var(--line-strong);
  border-left: 4px solid var(--wnc-blue);
  background: var(--pale);
  border-radius: var(--radius);
  padding: 10px 13px;
  font-size: var(--size-small);
  margin-bottom: var(--gap);
}
.notice.alert { border-left-color: var(--wnc-red-light); }
.notice.good  { border-left-color: var(--wnc-green); }
.notice.sim   { border-left-color: var(--wnc-yellow); }
.notice h4 { margin: 0 0 4px 0; }
.notice p:last-child { margin-bottom: 0; }

/* ---- Schedule board ----------------------------------------------------- */

.board { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
table.sched { font-size: var(--size-tiny); min-width: 900px; }
table.sched th, table.sched td { padding: 0; border: 1px solid var(--line); }
table.sched thead th { padding: 5px 6px; font-size: var(--size-tiny); font-weight: 700; }
table.sched thead th.wknd { background: var(--wnc-blue-light); }
table.sched th.who {
  position: sticky; left: 0; z-index: 2;
  background: var(--paper); color: var(--ink);
  text-align: left; padding: 5px 8px; min-width: 210px; border-right: 2px solid var(--line-strong);
}
table.sched thead th.who { background: var(--wnc-blue); color: var(--paper); z-index: 3; }
table.sched th.who .role { display: block; color: var(--ink-soft); font-weight: 400; }
table.sched td.cell { text-align: center; }

.cellbtn {
  display: block; width: 100%; border: 0; border-radius: 0;
  background: var(--paper); color: var(--ink);
  padding: 7px 2px; font-size: var(--size-tiny); cursor: pointer;
  font-variant-numeric: tabular-nums;
  position: relative;   /* keeps any hidden label inside the scroll box */
}
.cellbtn:hover { background: var(--pale-2); }
.cellbtn .u { display: block; font-size: 10.5px; color: var(--ink-soft); }

/* Utilisation bands. Declared on the class alone so that the same colours can
   be used for the key without the key looking like an interactive cell. Every
   band also prints its number and carries a visually hidden text label, so
   colour is never the only signal. */
.b0    { background: var(--paper); }
.b1    { background: #EAF3EC; }                 /* light, comfortable */
.b2    { background: #D6EADC; }                 /* well used          */
.b3    { background: var(--wnc-yellow); }       /* at capacity        */
.b4    { background: var(--wnc-pink); font-weight: 700; } /* over     */
.leave { background: repeating-linear-gradient(45deg, var(--pale-2), var(--pale-2) 5px, var(--paper) 5px, var(--paper) 10px); color: var(--ink-soft); }
.clash { background: var(--wnc-red-light); color: var(--paper); font-weight: 700; }
.clash .u { color: var(--paper); }
.cellbtn.sel   { outline: 3px solid var(--wnc-green); outline-offset: -3px; }

.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--size-tiny); margin-top: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 15px; height: 15px; border: 1px solid var(--line-strong); border-radius: 2px; display: inline-block; flex: 0 0 auto; }

/* ---- Gantt -------------------------------------------------------------- */

.gantt { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); padding: 12px; overflow-x: auto; }
.gantt .grow { display: grid; grid-template-columns: 190px 1fr; gap: 8px; align-items: center; margin-bottom: 6px; min-width: 760px; }
.gantt .glabel { font-size: var(--size-tiny); }
.gantt .glabel small { color: var(--ink-soft); }
.gantt .gtrack { position: relative; height: 20px; background: var(--pale); border: 1px solid var(--line); border-radius: 2px; }
.gantt .gbar { position: absolute; top: 2px; bottom: 2px; border-radius: 2px; }
.gantt .gbar.phase { background: var(--wnc-blue); }
.gantt .gbar.stage { background: var(--wnc-cyan); }
.gantt .gbar.done  { background: var(--wnc-green); }
.gantt .gms { position: absolute; top: -1px; width: 2px; bottom: -1px; background: var(--wnc-red-light); }
.gantt .gaxis { display: grid; grid-template-columns: 190px 1fr; gap: 8px; font-size: 11px; color: var(--ink-soft); min-width: 760px; }
.gantt .gaxis div:last-child { display: flex; justify-content: space-between; }

/* ---- Charts ------------------------------------------------------------- */

.chart { width: 100%; height: auto; display: block; }
figure { margin: 0; }
figcaption { font-size: var(--size-tiny); color: var(--ink-soft); margin-top: 6px; }

/* ---- Dialog ------------------------------------------------------------- */

dialog {
  border: 1px solid var(--line-strong);
  border-top: 4px solid var(--wnc-blue);
  border-radius: var(--radius);
  padding: 0;
  width: min(620px, 94vw);
  color: var(--ink);
  background: var(--paper);
}
dialog::backdrop { background: rgba(0,0,0,0.45); }
dialog .dhead { padding: 14px 18px 0 18px; }
dialog .dbody { padding: 10px 18px; max-height: 62vh; overflow-y: auto; }
dialog .dfoot { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 10px; justify-content: flex-end; background: var(--pale); }

/* ---- Game --------------------------------------------------------------- */

.badges { display: flex; gap: 8px; flex-wrap: wrap; }
.badge {
  border: 1px solid var(--line-strong); border-left: 4px solid var(--wnc-yellow);
  border-radius: var(--radius); padding: 7px 10px; background: var(--paper);
  font-size: var(--size-tiny); min-width: 150px;
}
.badge b { display: block; font-size: var(--size-small); }
.badge.locked { border-left-color: var(--line-strong); color: var(--ink-soft); }
.meter { height: 12px; background: var(--pale-2); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--wnc-green); }

/* ---- Feed --------------------------------------------------------------- */

.msg { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; background: var(--paper); }
.msg .meta { font-size: var(--size-tiny); color: var(--ink-soft); margin-bottom: 4px; }
.msg .body { font-size: var(--size-small); }
.msg .detect { margin-top: 8px; border-top: 1px dashed var(--line-strong); padding-top: 8px; font-size: var(--size-small); }
.msg.accepted { border-left: 4px solid var(--wnc-green); }
.msg.dismissed { border-left: 4px solid var(--wnc-black-50); color: var(--ink-soft); }
.msg.pending { border-left: 4px solid var(--wnc-yellow); }

.stack { display: flex; flex-direction: column; gap: 6px; }
.inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--ink-soft); }
.small { font-size: var(--size-small); }
.tiny { font-size: var(--size-tiny); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
hr { border: 0; border-top: 1px solid var(--line); margin: 14px 0; }

footer.foot {
  grid-area: main;
  align-self: end;
}
.sitefoot {
  border-top: 1px solid var(--line);
  margin-top: 24px; padding-top: 12px;
  font-size: var(--size-tiny); color: var(--ink-soft);
}

/* ---- Narrow windows -----------------------------------------------------
   The grid tracks must be allowed to shrink below the content, otherwise a
   wide table pushes the whole page sideways instead of scrolling inside its
   own box. Everything below either sets min-width to zero or collapses the
   two column frame into one.
   ------------------------------------------------------------------- */

.app > * { min-width: 0; }
.topbar, .nav, .main, .brandbar { min-width: 0; }
.topbar #userbox { min-width: 0; }
.topbar select { max-width: 46vw; }
.card, .notice, .toolbar, .board, .gantt, .tablewrap { max-width: 100%; }

@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr;
    grid-template-areas: "brand" "top" "nav" "main";
  }
  .nav {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 0 0 6px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    overflow-x: auto;
  }
  .nav .navgroup {
    width: 100%;
    border-top: 0;
    margin-top: 4px;
    padding: 8px 12px 0 12px;
  }
  .nav a {
    border-left: 0;
    border-bottom: 3px solid transparent;
    padding: 7px 12px;
    white-space: nowrap;
  }
  .nav a[aria-current="page"] {
    border-left-color: transparent;
    border-bottom-color: var(--wnc-green);
  }
  .main { padding: 14px 12px 48px 12px; }
  .topbar select { max-width: 60vw; }
  /* The sticky name column takes too much of a small screen, and a sticky cell
     inside a horizontally scrolled table extends the page scroll width in
     Chromium. Both problems go away by letting it scroll with the rest. */
  table.sched th.who { min-width: 150px; position: static; }
  table.sched thead th.who { position: static; }
}