/* Shell: fixed left sidebar, content on the right.
   Desktop only, on purpose - these screens carry wide tables of figures, the
   same call as NSW Ops Control. There is no responsive collapse; a phone gets
   a plain message instead of a squashed table nobody can read. */

.shell {
  display: grid;
  grid-template-columns: 232px 1fr;
  min-height: 100vh;
  min-width: 1100px;
}


.side {
  background: var(--brand);
  color: var(--white);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.side .brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
  font-weight: 200;
  letter-spacing: -.01em;
}
.side .brand b { font-weight: 600; }
/* THE REAL MARK, not a drawn circle. app/assets/mark.png, taken from the
   dashboards portal's own assets so the two apps carry the same company mark.
   It is solid Incognitus red on a transparent background, which is why it
   still reads on the navy sidebar - the wordmark logo.png could not, its type
   is black. That one goes on the sign-in card, which is light. */
.side .brand .mark { height: 20px; width: auto; display: inline-block; vertical-align: -3px; }

/* #nav holds the groups, so the gap has to live here - the sidebar's own gap
   only separates brand / nav / who. */
#nav { display: flex; flex-direction: column; gap: 20px; }

.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group .eyebrow { color: rgba(255, 255, 255, .42); margin-bottom: 6px; }

.nav-item {
  text-align: left;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, .78);
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 13px;
}
.nav-item:hover { background: rgba(255, 255, 255, .08); color: var(--white); border: none; }
.nav-item.on { background: rgba(255, 255, 255, .14); color: var(--white); font-weight: 600; }

/* The document type is a heading, not a destination - you always land on a
   region, never on "Customer invoices" as a whole. */
.nav-head {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .92);
  padding: 12px 10px 4px;
}
.nav-group .nav-head:first-child { padding-top: 2px; }
.nav-item.nav-sub { padding-left: 22px; font-size: 13px; }

/* Projects / Recorded invoices switch above a region screen. */
.segbar { display: flex; gap: 6px; margin-bottom: 22px; align-items: center; }
/* Reload sits apart from the tabs: it is not a place you go, it is a thing
   you do, and the one that costs a round trip to SAP. */
.segbar .reload { margin-left: auto; }
.segbar .reload:disabled { opacity: .5; cursor: default; }
.seg {
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 13px;
  background: var(--white);
}
.seg.on { background: var(--brand); border-color: var(--brand); color: var(--white); font-weight: 600; }

.side .who {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 14px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.side .who strong { font-weight: 600; }
.side .who span { color: rgba(255, 255, 255, .55); }

/* min-width: 0 is load-bearing. A 1fr grid track sizes to min-content by
   default, so a wide table pushes the whole page sideways however much
   overflow:auto sits inside it.

   NO max-width. There was a 1400px cap here, which left a third of a wide
   screen empty - Andres, 22 Sep 2026: "mira todo el espacio que tengo al lado
   derecho". A cap is the right instinct for PROSE, where a line running to
   1900px is genuinely hard to read, but this portal is tables of figures and
   they only get better with room. So the cap moves to the prose itself (see
   .sub and .note below) and the data fills the screen. */
.main { padding: 30px 34px 60px; min-width: 0; }

/* The prose keeps its measure. A sentence of explanation under a heading is
   read left to right; a table is not. 78ch is about eleven words a line. */
.main .sub, .main .note, .main .empty, .main .warn { max-width: 78ch; }

.booting { padding: 60px; color: var(--grey); }

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  background: var(--ink);
  color: var(--white);
  padding: 12px 16px;
  border-radius: 10px;
  box-shadow: var(--shadow);
  max-width: 420px;
  z-index: 50;
}

/* Below the desktop width the shell is hidden and this shows instead. */
.toosmall { display: none; }

@media (max-width: 1099px) {
  .shell { display: none !important; }
  .toosmall {
    display: block;
    padding: 40px 24px;
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
  }
  .toosmall h1 { margin-bottom: 10px; }
}

/* ---- sign in ------------------------------------------------------------- */

.signin {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  padding: 24px;
}

.signin-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, .6);
  padding: 34px 36px 30px;
  max-width: 420px;
  width: 100%;
}
.signin-card .brand { color: var(--ink); margin-bottom: 16px; font-size: 17px; }
/* The full wordmark, on the one screen with a light background behind it.
   Sized by height so the 520x199 asset cannot stretch. */
.signin-card .logo { display: block; height: 56px; width: auto; margin-bottom: 18px; }
.signin-card p { color: var(--ink2); margin: 0 0 22px; }
.signin-actions { display: flex; gap: 8px; }

.side .who .signout {
  margin-top: 10px;
  align-self: flex-start;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .28);
  color: rgba(255, 255, 255, .85);
  padding: 4px 12px;
  font-size: 12px;
}
.side .who .signout:hover { background: rgba(255, 255, 255, .1); color: var(--white); }

/* On a narrower desktop the CHROME gives way, not the content. Below 1400px
   the sidebar loses 32px and the content gutters lose 10px each, which is
   exactly the room the invoice table needs to keep all eight of its columns
   on screen at 1280.

   This is the right way round: a sidebar is mostly whitespace and reads fine
   32px narrower, whereas a table that does not fit hides its Status column
   inside a scroll box - and Status is one of the two things somebody opens
   that screen to change. Measured, not guessed: there is a test that fails
   if the table stops fitting. */
@media (max-width: 1399px) {
  .shell { grid-template-columns: 200px 1fr; }
  .main { padding-left: 20px; padding-right: 20px; }
  .side { padding-left: 12px; padding-right: 12px; }
}

/* NOTE ON THE ORDER: this block lives at the END of the file on purpose. It
   was first written up beside .side, where it did nothing - `.main { padding:
   30px 34px 60px }` appears further down, and a later declaration of equal
   specificity wins whether or not the earlier one is inside a media query.
   The sidebar narrowed, the gutters did not, and the table stayed 6px too
   wide. */