/* LFMS — shared styling.
   Bootstrap 5 carries the layout; this file only adds the firm's identity and
   the semantic colours the attention rules depend on (build spec §5).
   Those four colours were checked for colour-blind separation and contrast in
   both light and dark; do not substitute them casually. */

:root {
  --lfms-ink: #16162a;
  --lfms-accent: #3f41b8;
  --lfms-accent-dark: #2f3193;
  --lfms-rail-top: #282c7d;
  --lfms-rail-bot: #171a55;

  /* attention states — colour is always accompanied by a text label */
  --lfms-ontrack: #0f7a5a;
  --lfms-quiet: #b4780c;
  --lfms-overdue: #be2a2a;
  --lfms-nobody: #86198f;

  /* ----------------------------------------------------------------------- */
  /* Surfaces, rules and text.                                              */
  /*                                                                        */
  /* These were being used before they existed: rules across the stylesheet  */
  /* read var(--line) and var(--surface-2), and since      */
  /* neither token was ever declared the fallback was doing all the work.    */
  /* Six places each carried their own copy of the value, which is the       */
  /* opposite of a design system — changing the rule colour meant finding    */
  /* every fallback. Declared here once, and the fallbacks left in place as  */
  /* belt and braces.                                                       */
  /* ----------------------------------------------------------------------- */

  --surface: #f5f6fb;      /* the page behind the cards */
  --surface-1: #ffffff;    /* a card */
  --surface-2: #f1f2f8;    /* a card header, a table head, a subtle fill */
  --line: #e2e4ef;         /* every ordinary border */
  --line-strong: #c7cade;  /* where a border has to be seen */

  --ink: #16162a;          /* body text */
  --ink-2: #6b7089;        /* supporting text; passes AA on white and on --surface-2 */
  --ink-3: #8a8fa8;        /* the quietest text that still has to be read */

  --radius: .5rem;
  --radius-sm: .35rem;
  /* Shadows are structural here, not decorative: just enough to lift a card
     off the page (design brief §2 — light shadows only where useful). */
  --shadow-sm: 0 1px 2px rgba(22, 22, 42, .05);
  --shadow-md: 0 6px 18px -10px rgba(22, 22, 42, .4);

  /* Bootstrap reads its own variables, so pointing them at the tokens above
     restyles cards, tables, borders and the page background everywhere at once
     without touching a single template. */
  --bs-body-bg: var(--surface);
  --bs-body-color: var(--ink);
  --bs-tertiary-bg: var(--surface);
  --bs-secondary-bg: var(--surface-2);
  --bs-border-color: var(--line);
  --bs-border-radius: var(--radius);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-secondary-color: var(--ink-2);
}

/* ------------------------------------------------------------------------- */
/* Shared components.                                                        */
/* ------------------------------------------------------------------------- */

.card {
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}
.card-header { border-bottom-color: var(--line); }

/* Tables: horizontal separators only. Vertical grid lines add ink without
   adding meaning, and a register is read across a row. */
.table { --bs-table-border-color: var(--line); }
.table > thead th {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--surface-2);
  border-bottom-color: var(--line);
  white-space: nowrap;
}
.table > tbody > tr:last-child > * { border-bottom-width: 0; }

.btn-primary {
  --bs-btn-bg: var(--lfms-accent);
  --bs-btn-border-color: var(--lfms-accent);
  --bs-btn-hover-bg: var(--lfms-accent-dark);
  --bs-btn-hover-border-color: var(--lfms-accent-dark);
  --bs-btn-active-bg: var(--lfms-accent-dark);
  --bs-btn-active-border-color: var(--lfms-accent-dark);
}

/* A page's name and what the page is for. Every screen opens the same way, so
   somebody landing on one from a link knows what they are looking at. */
.lfms-page { margin-bottom: 1.25rem; }
.lfms-page h1 {
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -.015em;
  margin: 0;
}
.lfms-page p {
  color: var(--ink-2);
  font-size: .875rem;
  margin: .2rem 0 0;
  /* 62ch is the right measure for a column of prose and the wrong one for a
     single line of subtitle: it wrapped mid-sentence with the width of the page
     unused beside it, which reads as broken rather than as measured. Wide enough
     for one sentence on an ordinary screen, still bounded so it does not run the
     width of a large monitor. Widened again from 90ch: the dashboard's own
     sentence was dropping its last word onto a line of its own. */
  max-width: 105ch;
}

/* An empty list is usually good news and should read as such, not as a fault
   (design brief §22). The heading says the state; the line under it says what
   that means, because "nothing here" and "nothing wrong" are not the same. */
.lfms-empty { padding: 2.25rem 1.25rem; text-align: center; }
.lfms-empty-title { font-weight: 600; font-size: .95rem; color: var(--ink); }
.lfms-empty p {
  color: var(--ink-2);
  font-size: .85rem;
  margin: .3rem auto 0;
  max-width: 46ch;
}

/* There was a dark variant of the four colours here, behind
   `prefers-color-scheme: dark`. It was doing harm rather than nothing.

   base.html pins `data-bs-theme="light"`, so the chrome — cards, tables, page
   background — is always light. The dark variants are tuned to sit on a dark
   background and are correspondingly lighter, so on any machine preferring dark
   they were being painted on white: --lfms-nobody went from a deep purple to a
   pale lavender, losing most of its contrast, and the other three likewise. The
   states that matter most were the least legible, for a large share of users,
   and nothing on screen indicated it.

   Light only until dark is done deliberately — both palettes, every page,
   checked rather than assumed. One palette that is right beats two where the
   combination that actually ships was never looked at. */

/* ------------------------------------------------------------------------- */
/* The left rail.                                                            */
/*                                                                           */
/* Eight destinations do not fit across the top of a page without crowding,   */
/* and crowding them is what pushed the labels down to a size nobody reads.   */
/* Down the side each one gets a full label, and there is room to group them, */
/* so the navigation can say what a group is for instead of listing pages.    */
/* ------------------------------------------------------------------------- */

:root { --lfms-rail-w: 15rem; }

.lfms-rail-logo {
  display: block;
  width: 100%;
  max-width: 2.75rem;
  height: auto;
}
.lfms-sub {
  color: rgba(255, 255, 255, .62);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .14em;
}

.lfms-rail {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--lfms-rail-w);
  flex-direction: column;
  background: linear-gradient(165deg, var(--lfms-rail-top), var(--lfms-rail-bot));
  padding: 1rem .6rem .6rem;
  overflow-y: auto;
  z-index: 1030;
}

.lfms-rail-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .3rem;
  text-decoration: none;
  padding: 0 .5rem;
  margin-bottom: 1.15rem;
  /* Never let a future asset wider than the rail spill into the page next to
     it — a logo should be clipped and obviously wrong, not readable text
     bleeding across the boundary into the content a reader is looking at. */
  max-width: 100%;
  overflow: hidden;
}

.lfms-rail-nav { display: flex; flex-direction: column; gap: .1rem; }

/* A group heading, not a link. Quiet enough to be scenery until you look. */
.lfms-rail-group {
  color: rgba(255, 255, 255, .38);
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
  padding: .3rem .75rem;
  margin-top: .85rem;
}

.lfms-rail-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem .75rem;
  border-radius: .4rem;
  color: rgba(255, 255, 255, .76);
  text-decoration: none;
  font-size: .875rem;
  line-height: 1.25;
  /* The active marker is a bar on the inside edge; reserving it on every row
     stops the labels shifting sideways as you move between pages. */
  box-shadow: inset 2px 0 0 transparent;
  transition: background-color .12s, color .12s;
}
.lfms-rail-link:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.lfms-rail-link.active {
  background: rgba(255, 255, 255, .13);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 2px 0 0 #fff;
}
.lfms-rail-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -2px;
}

/* Line icons, one weight throughout. They sit beside the label and never
   stand in for it (design brief §26). */
.lfms-rail-link svg,
.lfms-burger svg {
  width: 18px; height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .85;
}
.lfms-rail-link.active svg { opacity: 1; }

/* -- who is signed in --------------------------------------------------- */

.lfms-rail-foot {
  margin-top: auto;
  padding-top: .85rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.lfms-rail-who {
  display: flex; align-items: center; gap: .55rem;
  padding: .25rem .75rem .5rem;
}
.lfms-rail-avatar {
  width: 1.9rem; height: 1.9rem; flex: 0 0 1.9rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: #fff;
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 600;
}
.lfms-rail-whotext { min-width: 0; }
.lfms-rail-whotext .name {
  color: #fff; font-size: .82rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lfms-rail-whotext .role {
  color: rgba(255, 255, 255, .55); font-size: .68rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lfms-rail-foot-links {
  display: flex; flex-wrap: wrap; gap: .1rem .9rem;
  padding: 0 .75rem;
}
.lfms-rail-foot-links a,
.lfms-rail-foot-links button {
  background: none; border: 0; padding: .15rem 0;
  color: rgba(255, 255, 255, .55);
  font-size: .72rem; text-decoration: none; cursor: pointer;
}
.lfms-rail-foot-links a:hover,
.lfms-rail-foot-links button:hover { color: #fff; text-decoration: underline; }
.lfms-rail-foot-links form { display: contents; }

/* -- the content beside it ---------------------------------------------- */

.lfms-main {
  margin-left: var(--lfms-rail-w);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* -- below lg: a drawer instead ----------------------------------------- */

.lfms-topbar {
  position: sticky; top: 0; z-index: 1020;
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem .9rem;
  background: linear-gradient(110deg, var(--lfms-rail-top), var(--lfms-rail-bot));
}
.lfms-burger {
  background: none; border: 0; padding: .25rem;
  color: rgba(255, 255, 255, .85); line-height: 0; cursor: pointer;
}
.lfms-burger:hover { color: #fff; }

/* Bootstrap positions the offcanvas; the rail rules must not fight it. */
.lfms-rail-drawer { position: fixed; width: min(17rem, 84vw); }

@media (max-width: 991.98px) {
  .lfms-main { margin-left: 0; padding-left: 1rem; padding-right: 1rem; }
}

@media print {
  .lfms-rail, .lfms-topbar, .lfms-rail-drawer { display: none !important; }
  .lfms-main { margin-left: 0; padding: 0; }
}

/* Numbers that line up in columns — file numbers, dates, day counts. */
.lfms-num {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Attention badges. The label always carries the meaning; colour reinforces it. */
.lfms-state { font-size: .72rem; font-weight: 600; padding: .18rem .55rem; border-radius: 99px; }
.lfms-state-ontrack { color: var(--lfms-ontrack); background: color-mix(in srgb, var(--lfms-ontrack) 13%, transparent); }
.lfms-state-quiet   { color: var(--lfms-quiet);   background: color-mix(in srgb, var(--lfms-quiet) 15%, transparent); }
.lfms-state-overdue { color: var(--lfms-overdue); background: color-mix(in srgb, var(--lfms-overdue) 13%, transparent); }
.lfms-state-no_action   { color: var(--lfms-nobody);  background: color-mix(in srgb, var(--lfms-nobody) 13%, transparent); }
.lfms-state-unconfirmed { color: var(--lfms-quiet);   background: color-mix(in srgb, var(--lfms-quiet) 15%, transparent); }
.lfms-state-key_date    { color: var(--lfms-overdue); background: color-mix(in srgb, var(--lfms-overdue) 13%, transparent); }
.lfms-state-no_outcome  { color: var(--lfms-nobody);  background: color-mix(in srgb, var(--lfms-nobody) 13%, transparent); }

/* A missed critical date is the only irreversible failure the system reports,
   so it is the only badge that fills. No new hue: the four semantic colours
   were checked for colour-blind separation, and weight carries this instead. */
.lfms-state-missed_key_date {
  color: #fff;
  background: var(--lfms-overdue);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.lfms-phase-note {
  border-left: 3px solid var(--lfms-accent);
  background: color-mix(in srgb, var(--lfms-accent) 6%, transparent);
}

/* --- sign-in and two-factor pages (templates/two_factor/_base.html) --- */
.lfms-auth {
  min-height: 100vh;
  background: linear-gradient(160deg, var(--lfms-rail-top), var(--lfms-rail-bot));
}
.lfms-auth-logo {
  width: 100%;
  max-width: 12rem;
  height: auto;
}
.lfms-auth-col {
  width: 100%;
  max-width: 28rem;
}
.lfms-auth-sub {
  color: rgba(255, 255, 255, .6);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  margin-top: .35rem;
}
.lfms-auth .card { border: 0; border-radius: .6rem; }
.lfms-auth .btn-primary {
  background-color: var(--lfms-accent);
  border-color: var(--lfms-accent);
}
.lfms-auth .btn-primary:hover {
  background-color: var(--lfms-accent-dark);
  border-color: var(--lfms-accent-dark);
}

/* two-factor pages render their own <h1>; bring it down to card scale */
.lfms-auth .card h1 { font-size: 1.4rem; font-weight: 600; margin-bottom: .35rem; }
.lfms-auth .card > .card-body > p:first-of-type { color: var(--ink-2); font-size: .9rem; }
.lfms-auth .form-label { font-weight: 500; font-size: .875rem; }
.lfms-auth table { width: 100%; }

/* --- register and file detail --- */
.lfms-table td, .lfms-table th { padding-top: .55rem; padding-bottom: .55rem; }
.lfms-stripe { width: 4px; padding: 0 !important; }
.lfms-stripe-ontrack     { background: var(--lfms-ontrack); }
.lfms-stripe-quiet       { background: var(--lfms-quiet); }
.lfms-stripe-unconfirmed { background: var(--lfms-quiet); }
.lfms-stripe-overdue     { background: var(--lfms-overdue); }
.lfms-stripe-no_action   { background: var(--lfms-nobody); }
.lfms-stripe-no_outcome  { background: var(--lfms-nobody); }
.lfms-stripe-key_date    { background: var(--lfms-overdue); }
.lfms-stripe-missed_key_date { background: var(--lfms-overdue); box-shadow: inset 0 0 0 2px var(--lfms-overdue); }
.lfms-stripe-closed      { background: var(--line-strong); }

/* File type identity: three tints of the accent hue, never the status colours,
   so a type chip can never be mistaken for an attention state. */
/* Each file type's own colour (FileType.colour) is applied inline, assigned
   automatically from a fixed palette as the firm adds types — see
   FileType.save(). This rule carries everything that stays the same
   regardless of which type it is. */
.lfms-type { color: #fff; font-weight: 600; font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; }

.lfms-state-closed { color: var(--ink-2); background: rgba(107,112,137,.12); }

.lfms-eyebrow {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
  font-weight: 600; color: var(--ink-2);
}
.lfms-next-action { border-left: 4px solid var(--lfms-accent); }

/* --- action log --- */
.lfms-log { list-style: none; margin: 0; padding: 0; }
.lfms-log li { padding: .8rem 0; border-bottom: 1px dashed var(--line); }
.lfms-log li:last-child { border-bottom: 0; }
.lfms-log .when { font-size: .75rem; color: var(--ink-2); }
.lfms-log .did { font-weight: 500; }
.lfms-log .then { font-size: .82rem; color: var(--ink-2); margin-top: .15rem; }
.lfms-log .then strong { color: var(--lfms-ink); font-weight: 500; }

/* --- dashboard tiles --- */
.lfms-tile { border-left: 3px solid var(--tone, var(--lfms-accent)); color: inherit; transition: transform .12s, box-shadow .12s; }
.lfms-tile:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.lfms-tile-value { font-size: 1.7rem; font-weight: 500; line-height: 1.1; letter-spacing: -.03em; color: var(--tone, var(--lfms-accent)); }
.lfms-tile-accent   { --tone: var(--lfms-accent); }
.lfms-tile-neutral  { --tone: var(--line-strong); }
.lfms-tile-neutral .lfms-tile-value { color: var(--ink); }
.lfms-tile-overdue  { --tone: var(--lfms-overdue); }
.lfms-tile-quiet    { --tone: var(--lfms-quiet); }
.lfms-tile-nobody   { --tone: var(--lfms-nobody); }
/* The one tile that fills. A missed critical date is the only figure here that
   reports something already irreversible, and it should not have to compete on
   equal terms with the five beside it. */
.lfms-tile-missed {
  --tone: var(--lfms-overdue);
  background: var(--lfms-overdue);
  border-color: var(--lfms-overdue);
}
.lfms-tile-missed .lfms-eyebrow,
.lfms-tile-missed .lfms-tile-value,
.lfms-tile-missed .text-secondary { color: #fff !important; }
.lfms-tile-missed .lfms-eyebrow,
.lfms-tile-missed .text-secondary { opacity: .86; }

/* --- court diary --- */
.lfms-diary-date {
  width: 3rem; padding: .35rem 0; border-radius: .4rem;
  background: var(--lfms-accent-wash, #e8e9fb); color: var(--lfms-accent-dark);
  flex: 0 0 auto;
}

/* Provenance of a diary entry — did an adjournment produce this date, or did
   someone type it in? Without this, the two are indistinguishable in a list. */
.lfms-provenance { font-size: .72rem; color: var(--lfms-accent-dark); margin-top: .15rem; }
.lfms-provenance-new { color: var(--ink-3); }
.lfms-clash {
  font-size: .72rem; color: var(--lfms-overdue); margin-top: .2rem;
  background: color-mix(in srgb, var(--lfms-overdue) 9%, transparent);
  border-radius: .25rem; padding: .15rem .4rem; display: inline-block;
}

/* --- roles and rights --- */
.lfms-right { padding: .4rem 0; border-bottom: 1px dashed var(--line); }
.lfms-right:last-child { border-bottom: 0; }
.lfms-right-pending { opacity: .5; }
.lfms-right .form-check-label { font-size: .9rem; }
.lfms-default-chip {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 600; color: var(--lfms-accent-dark);
  background: var(--lfms-accent-wash, #e8e9fb);
  border-radius: 99px; padding: .05rem .4rem; margin-left: .3rem;
}

/* --- user administration: tabs --- */
.lfms-tabs { gap: .25rem; border-bottom: 1px solid var(--line); }
.lfms-tabs .nav-link {
  border: 1px solid transparent; border-bottom: 0; border-radius: .4rem .4rem 0 0;
  color: var(--ink-2); font-size: .875rem; padding: .45rem .9rem;
}
.lfms-tabs .nav-link:hover { color: var(--lfms-accent-dark); }
.lfms-tabs .nav-link.active {
  color: #fff; background: var(--lfms-accent); font-weight: 600;
}

.lfms-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .72rem; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: .25rem; padding: .05rem .35rem;
}

.lfms-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; margin-left: .25rem; padding: 0;
  border: 1px solid transparent; background: none;
  border-radius: .3rem; text-decoration: none; line-height: 1;
  color: var(--lfms-ink);
}
.lfms-icon-btn svg { width: 1.05rem; height: 1.05rem; }
.lfms-icon-btn:hover { color: var(--lfms-accent); }
.lfms-icon-danger:hover { color: var(--lfms-overdue); }

/* --- the dual-list transfer --- */
.lfms-transfer-list { height: 22rem; overflow-y: auto; }
.lfms-transfer-group {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--ink-3); padding: .5rem .35rem .2rem;
}
.lfms-transfer-item {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid transparent; border-radius: .3rem;
  background: none; padding: .3rem .4rem; margin-bottom: .1rem;
}
.lfms-transfer-item:hover { background: var(--surface-2); }
.lfms-transfer-item.is-selected {
  background: var(--lfms-accent-wash, #e8e9fb);
  border-color: var(--lfms-accent);
}
.lfms-transfer-item.is-locked, .lfms-transfer-item.is-pending {
  opacity: .55; cursor: not-allowed;
}
.lfms-transfer-item .lfms-code { display: inline-block; }
.lfms-transfer-label { display: block; font-size: .82rem; color: #16162a; margin-top: .1rem; }
.lfms-chip {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .07em;
  font-weight: 700; color: var(--lfms-accent-dark);
  background: var(--lfms-accent-wash, #e8e9fb);
  border-radius: 99px; padding: .02rem .35rem;
}


/* ------------------------------------------------------------------------- */
/* Billing                                                                   */
/* ------------------------------------------------------------------------- */

/* A money figure always carries its currency. Nothing in this system converts,
   so a bare number would invite the reader to add it to a different one. */
.lfms-money { white-space: nowrap; }
.lfms-money .cur {
  font-size: .72em; color: var(--ink-2); font-weight: 600;
  letter-spacing: .03em; margin-right: .15em;
}

/* The three figures on an invoice, ending on the one that decides whether
   anybody has to act. */
.lfms-position { border-left: 4px solid var(--lfms-accent); }
.lfms-outstanding { font-size: 1.15rem; font-weight: 600; }
.lfms-outstanding.is-owed { color: var(--lfms-overdue); }
.lfms-total-row th { background: var(--surface-2); }

/* Line entry: dense, because an invoice is typed in one pass and the eye has to
   stay on the row it is working in. */
.lfms-lines td, .lfms-lines th { padding: .3rem .35rem; }
.lfms-lines input, .lfms-lines select { font-size: .82rem; }

/* The receipt form's first question. Made large and unavoidable on purpose: this
   is where the firm's money and the client's money are told apart, and a small
   radio pair would be clicked past. */
.lfms-kind-card { border-left: 4px solid var(--lfms-nobody); }
.lfms-kind-choices { display: grid; gap: .5rem; }
.lfms-kind-choice {
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem;
  align-items: start;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: .7rem .85rem; cursor: pointer;
}
.lfms-kind-choice:hover { background: var(--surface-2); }
.lfms-kind-choice:has(input:checked) {
  border-color: var(--lfms-accent);
  background: color-mix(in srgb, var(--lfms-accent) 5%, transparent);
}
.lfms-kind-choice input { margin-top: .2rem; }
.lfms-kind-label { font-weight: 600; font-size: .9rem; }
.lfms-kind-note {
  grid-column: 2; color: var(--ink-2); font-size: .8rem; line-height: 1.45;
}
.lfms-money-line { font-size: 1.05rem; font-weight: 600; }

/* A billing position. Three figures across, ending on the one that matters. */
.lfms-pos-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem;
}
.lfms-pos-grid > div { min-width: 0; }

/* Money that is not the firm's, and money with no bill to sit against, are both
   set apart from the fee figures rather than listed among them. A held balance in
   the same grid as "settled" is how it ends up added to it. */
.lfms-held, .lfms-onaccount {
  border-top: 1px dashed var(--line); padding-top: .5rem;
}
.lfms-held { border-left: 3px solid var(--lfms-nobody); padding-left: .6rem; }
.lfms-onaccount { border-left: 3px solid var(--lfms-quiet); padding-left: .6rem; }
.lfms-held-note { color: var(--ink-2); font-size: .72rem; margin-top: .15rem; }

/* The waiting count on an instruction. Same shape as the diary's date block, so
   the two read as the same kind of thing: a number you scan down a column. */
.lfms-instruction-days {
  width: 3rem; flex: 0 0 3rem;
  color: var(--ink-2);
  border-right: 1px solid var(--line);
  padding-right: .5rem;
}

/* ------------------------------------------------------------------------- */
/* Billing dashboard and ageing                                              */
/* ------------------------------------------------------------------------- */

/* Four figures across, large enough to read from a step back. The brief asked
   for large readable numbers on the dashboard, and these are the four the firm
   actually asks about. */
.lfms-bigfig-row {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem;
}
@media (min-width: 576px) {
  .lfms-bigfig-row { grid-template-columns: repeat(4, 1fr); }
}
.lfms-bigfig {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem; font-weight: 600; letter-spacing: -.02em;
  line-height: 1.2; margin-top: .1rem;
}
.lfms-bigfig.is-owed { color: var(--lfms-quiet); }
.lfms-bigfig.is-overdue { color: var(--lfms-overdue); }

/* The ageing bands. Colour deepens with age rather than jumping to red at the
   end, because the point is to show a debt sliding — a band that is only red at
   ninety days tells you when it is already too late. */
.lfms-aged {
  display: grid; gap: .35rem;
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
}
.lfms-aged-band {
  border-radius: var(--radius-sm);
  padding: .4rem .5rem;
  border-left: 3px solid var(--line-strong);
  background: var(--surface-2);
  font-size: .82rem;
}
.lfms-aged-band.is-empty { opacity: .45; }
.lfms-aged-label {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-2); font-weight: 600;
}
.lfms-aged-current { border-left-color: var(--line-strong); }
.lfms-aged-d1_30   { border-left-color: var(--lfms-quiet); }
.lfms-aged-d31_60  { border-left-color: color-mix(in srgb, var(--lfms-quiet) 55%, var(--lfms-overdue)); }
.lfms-aged-d61_90  { border-left-color: color-mix(in srgb, var(--lfms-quiet) 25%, var(--lfms-overdue)); }
.lfms-aged-d90     { border-left-color: var(--lfms-overdue); }

/* The same scale as a badge, so a client's age reads the same as the band above. */
.lfms-aged-badge { color: #fff; background: var(--line-strong); }
.lfms-aged-badge.lfms-aged-d1_30  { background: var(--lfms-quiet); }
.lfms-aged-badge.lfms-aged-d31_60 { background: color-mix(in srgb, var(--lfms-quiet) 55%, var(--lfms-overdue)); }
.lfms-aged-badge.lfms-aged-d61_90 { background: color-mix(in srgb, var(--lfms-quiet) 25%, var(--lfms-overdue)); }
.lfms-aged-badge.lfms-aged-d90    { background: var(--lfms-overdue); }
.lfms-aged-badge.lfms-aged-current { background: var(--line-strong); color: var(--ink); }

/* ------------------------------------------------------------------------- */
/* Record pages: head, facts, panels.                                        */
/*                                                                           */
/* One shape for every record in the system — a file, a client, an invoice, a */
/* receipt. Where you are, what this is, the handful of facts that must never */
/* move, then panels that summarise and link onward.                         */
/*                                                                           */
/* The facts strip is the answer to a real complaint: that file details were  */
/* pushed off the page as the court record grew. Capping a panel's height     */
/* keeps the page's shape but leaves the facts buried in a box. Lifting them  */
/* above everything means nothing below can move them at all.                 */
/* ------------------------------------------------------------------------- */

.lfms-pagehead {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 1rem; margin-bottom: 1rem;
}
.lfms-pagehead-what { min-width: 0; }
.lfms-pagehead-badge {
  font-size: .62rem; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 700; margin-bottom: .35rem; display: inline-block;
}
.lfms-pagehead h1 {
  font-size: 1.6rem; font-weight: 700; letter-spacing: -.02em;
  margin: 0; line-height: 1.15;
}
.lfms-pagehead-sub {
  color: var(--ink-2); font-size: .88rem; margin-top: .3rem;
}
.lfms-pagehead-sub .sep { color: var(--line-strong); margin: 0 .45rem; }
.lfms-pagehead-actions {
  margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem;
  align-items: flex-start;
}
/* Every action is visible and labelled. The hierarchy is one primary button,
   not a shorter list — a menu only hides what people came to do. */
.lfms-pagehead-actions .btn { display: inline-flex; align-items: center; gap: .4rem; }
.lfms-pagehead-actions .lfms-icon { width: 15px; height: 15px; }

/* -- the facts strip ----------------------------------------------------- */

.lfms-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .25rem;
  background: var(--surface-1);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .9rem 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}
.lfms-fact {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .1rem .75rem .1rem 0;
  border-right: 1px solid var(--line);
  min-width: 0;
}
.lfms-fact:last-child { border-right: 0; }
.lfms-fact-body { min-width: 0; }
.lfms-fact-label {
  font-size: .64rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-2); font-weight: 600;
}
.lfms-fact-value {
  font-weight: 600; font-size: .92rem; color: var(--ink);
  display: block; text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.lfms-fact-value:hover { color: var(--lfms-accent); }
.lfms-fact-sub {
  font-size: .74rem; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Tinted tiles. The colour separates one fact from the next at a glance and
   carries no meaning of its own — the attention colours are reserved for the
   attention states and must not be diluted by decoration. */
.lfms-fact-tile {
  flex: 0 0 2rem; width: 2rem; height: 2rem;
  border-radius: .5rem;
  display: grid; place-items: center;
}
.lfms-fact-tile .lfms-icon { width: 16px; height: 16px; }
.lfms-fact-accent  { background: #e8e9fb; color: #3f41b8; }
.lfms-fact-violet  { background: #f0e9fb; color: #6d3fb8; }
.lfms-fact-teal    { background: #ddf3f1; color: #0f7a6e; }
.lfms-fact-amber   { background: #fdeedd; color: #a25a12; }
.lfms-fact-rose    { background: #fce8ea; color: #b02a37; }
.lfms-fact-slate   { background: #e9ecf3; color: #4a5168; }

/* -- panels -------------------------------------------------------------- */

.lfms-panel-head {
  display: flex; align-items: center; gap: .5rem;
  background: var(--surface-1);
  border-bottom: 1px solid var(--line);
  padding: .7rem 1rem;
}
.lfms-panel-head strong { font-size: .95rem; }
.lfms-panel-icon { color: var(--ink-2); display: inline-flex; }
.lfms-panel-icon .lfms-icon { width: 17px; height: 17px; }
.lfms-panel-count {
  font-size: .72rem; color: var(--ink-2);
  background: var(--surface-2); border-radius: 99px; padding: .05rem .45rem;
}
.lfms-panel-all {
  margin-left: auto; font-size: .8rem; text-decoration: none; font-weight: 500;
}

.lfms-icon {
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  /* A size by default, not only where one happens to be set.
     An inline <svg> with a viewBox and no dimensions expands to fill whatever
     contains it, so an icon dropped into an alert or a paragraph — anywhere
     without a rule of its own — rendered the height of the box. The contexts
     below still override this; what they no longer have to do is remember to. */
  width: 1rem; height: 1rem;
  flex: 0 0 auto;
  vertical-align: -.15em;
}

/* -- key/value grid inside a panel --------------------------------------- */

.lfms-kv {
  display: grid; grid-template-columns: auto 1fr; gap: .45rem .9rem;
  margin: 0; font-size: .85rem;
}
.lfms-kv dt {
  color: var(--ink-2); font-weight: 400; white-space: nowrap;
  display: flex; align-items: center; gap: .4rem;
}
.lfms-kv dt .lfms-icon { width: 14px; height: 14px; opacity: .6; }
.lfms-kv dd { margin: 0; font-weight: 500; min-width: 0; }
.lfms-kv-2 { grid-template-columns: auto 1fr auto 1fr; }

@media (max-width: 767.98px) {
  .lfms-kv-2 { grid-template-columns: auto 1fr; }
  .lfms-fact { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: .5rem; }
  .lfms-fact:last-child { border-bottom: 0; }
  .lfms-pagehead-actions { margin-left: 0; width: 100%; }
}

/* -- the action history table -------------------------------------------- */

/* A table rather than a log list: a record read across a row scans faster than
   one read down a stack, and the dot column gives it the shape of a timeline
   without the cost of one. */
.lfms-timeline td { vertical-align: top; }
.lfms-timeline .dot-cell { width: 1.5rem; padding-right: 0; }
.lfms-timeline .dot {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--line-strong); display: block; margin: .45rem auto 0;
}
.lfms-timeline tr:first-child .dot { background: var(--lfms-accent); }
.lfms-timeline .when { white-space: nowrap; }
.lfms-timeline .when .time { color: var(--ink-2); font-size: .74rem; display: block; }

@media print {
  .lfms-pagehead-actions { display: none; }
  .lfms-facts { break-inside: avoid; }
}

/* ------------------------------------------------------------------------- */
/* Messages                                                                  */
/*                                                                           */
/* A refusal and a confirmation looked identical apart from a colour that was */
/* never applied, because Django's "error" tag does not name a Bootstrap      */
/* class. With the colour working, the remaining job is weight: something     */
/* that stops you should not read like something that reassures you.         */
/* ------------------------------------------------------------------------- */

.lfms-message {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
}
.lfms-message > span { flex: 1 1 auto; min-width: 0; }
.lfms-message .btn-close { flex: 0 0 auto; }

/* The two that interrupt. A heavier edge and a larger icon, so a refusal is
   recognisable before it is read. */
.lfms-message-loud {
  border-left-width: 4px;
  font-weight: 500;
}
.lfms-message-loud .lfms-icon {
  width: 1.15rem; height: 1.15rem;
  margin-top: .05rem;
  stroke-width: 2;
}

/* ------------------------------------------------------------------------- */
/* The matter picker                                                        */
/*                                                                           */
/* Type-ahead in place of a <select> holding every file the firm has ever    */
/* opened. Positioned rather than a native dropdown so the result carries a  */
/* second line — the matter — which is exactly what a file number alone      */
/* cannot tell two files apart by.                                          */
/* ------------------------------------------------------------------------- */
.lfms-picker { position: relative; }

.lfms-picker-results {
  position: absolute; z-index: 20; top: 100%; left: 0; right: 0;
  margin-top: .2rem;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: .375rem;
  box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .12);
  max-height: 16rem; overflow-y: auto;
}
.lfms-picker-results:empty { display: none; border: 0; box-shadow: none; }

.lfms-picker-option {
  display: block; width: 100%; text-align: left;
  padding: .5rem .75rem; border: 0; border-bottom: 1px solid var(--bs-border-color, #eee);
  background: none; font: inherit; cursor: pointer;
}
.lfms-picker-option:last-child { border-bottom: 0; }
.lfms-picker-option:hover, .lfms-picker-option:focus { background: var(--bs-tertiary-bg, #f4f5f9); }

.lfms-picker-empty {
  padding: .6rem .75rem; font-size: .82rem; color: var(--bs-secondary-color, #6c757d);
}

/* ------------------------------------------------------------------------- */
/* The register's bulk-reassignment bar                                     */
/*                                                                           */
/* Sticky to the bottom of the viewport, so it stays reachable over a long   */
/* table rather than requiring a scroll back up once several files are      */
/* ticked.                                                                  */
/* ------------------------------------------------------------------------- */
.lfms-bulk-bar {
  position: sticky; bottom: 1rem; z-index: 15;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
  margin-top: 1rem; padding: .6rem .9rem;
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-left: 4px solid var(--lfms-accent, #3f41b8);
  border-radius: .5rem;
  box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .15);
}
.lfms-bulk-count { font-weight: 600; }