/* =========================================================================
   99 Hamilton Terrace — Client portal
   Microsoft Fluent 2 design language, GOARL navy brand ramp.
   Token values are taken verbatim from the project design spec
   (microsoft/fluentui packages/tokens, light theme).
   ========================================================================= */

:root{
  /* ---- 1. Type ------------------------------------------------------- */
  --fontFamilyBase:'Segoe UI Variable Text','Segoe UI Variable','Segoe UI',
                   -apple-system,BlinkMacSystemFont,Roboto,
                   'Helvetica Neue',sans-serif;
  --fontFamilyNumeric:'Segoe UI Variable Text','Segoe UI',-apple-system,
                   BlinkMacSystemFont,sans-serif;
  --fontFamilyMono:Consolas,'Courier New',Courier,monospace;

  --fontSizeCaption2:10px;   --lineHeightCaption2:14px;
  --fontSizeCaption1:12px;   --lineHeightCaption1:16px;
  --fontSizeBase300:14px;    --lineHeightBase300:20px;   /* Body1      */
  --fontSizeBase400:16px;    --lineHeightBase400:22px;   /* Body2      */
  --fontSizeBase500:20px;    --lineHeightBase500:26px;   /* Subtitle1  */
  --fontSizeHero700:24px;    --lineHeightHero700:32px;   /* Title3     */
  --fontSizeHero800:28px;    --lineHeightHero800:36px;   /* Title2     */
  --fontSizeHero900:32px;    --lineHeightHero900:40px;   /* Title1     */

  --fontWeightRegular:400;
  --fontWeightSemibold:600;
  --fontWeightBold:700;

  /* ---- 2. Colour — neutrals ------------------------------------------ */
  --colorNeutralForeground1:#242424;
  --colorNeutralForeground2:#424242;
  --colorNeutralForeground3:#616161;
  --colorNeutralForeground4:#707070;
  --colorNeutralForegroundDisabled:#bdbdbd;
  --colorNeutralForegroundInverted:#ffffff;

  --colorNeutralBackground1:#ffffff;
  --colorNeutralBackground2:#fafafa;
  --colorNeutralBackground3:#f5f5f5;
  --colorNeutralBackground4:#f0f0f0;
  --colorNeutralBackground1Hover:#f5f5f5;
  --colorNeutralBackground1Pressed:#e0e0e0;
  --colorSubtleBackgroundHover:#f5f5f5;
  --colorSubtleBackgroundPressed:#ebebeb;

  --colorNeutralStroke1:#d1d1d1;
  --colorNeutralStroke2:#e0e0e0;
  --colorNeutralStroke3:#f0f0f0;
  --colorNeutralStrokeAccessible:#616161;
  --colorStrokeFocus1:#ffffff;
  --colorStrokeFocus2:#000000;

  /* ---- 2. Colour — brand (GOARL navy in place of Fluent blue) --------- */
  --colorBrandBackground:#1b2a41;
  --colorBrandBackgroundHover:#24374f;
  --colorBrandBackgroundPressed:#14202f;
  --colorBrandBackgroundSelected:#24374f;
  --colorBrandForeground1:#1b2a41;
  --colorBrandForeground1Hover:#24374f;
  --colorBrandBackgroundTint:#eef1f5;
  --colorBrandStroke1:#1b2a41;
  --colorBrandAccent:#b08d57;            /* brass — two uses only, see 2.1 */
  --colorBrandForegroundInvertedMuted:#c9d2de;

  /* ---- 2. Colour — status -------------------------------------------- */
  --colorStatusSuccessForeground1:#0e700e;
  --colorStatusSuccessBackground1:#f1faf1;
  --colorStatusSuccessBorder1:#c9eac9;
  --colorStatusSuccessForeground3:#107c10;

  --colorStatusWarningForeground1:#b27c00;
  --colorStatusWarningBackground1:#fefbf4;
  --colorStatusWarningBorder1:#f9e2ae;
  --colorStatusWarningForeground3:#eaa300;

  --colorStatusDangerForeground1:#bc2f32;
  --colorStatusDangerBackground1:#fdf6f6;
  --colorStatusDangerBorder1:#f1bbbc;
  --colorStatusDangerForeground3:#d13438;

  --colorStatusSevereForeground1:#c43501;
  --colorStatusSevereBackground1:#fdf6f3;
  --colorStatusSevereBorder1:#f9dcd1;
  --colorStatusSevereForeground3:#da3b01;

  --colorStatusInfoForeground1:#0078d4;
  --colorStatusInfoBackground1:#f3f9fd;
  --colorStatusInfoBorder1:#bfddf5;
  --colorStatusInfoForeground3:#0078d4;

  --colorStatusNeutralForeground1:#616161;
  --colorStatusNeutralBackground1:#f5f5f5;
  --colorStatusNeutralBorder1:#e0e0e0;
  --colorStatusNeutralForeground3:#bdbdbd;

  /* Traffic light (RAG) — fixed mapping */
  --colorRagRedDot:#d13438;    --colorRagRedText:#bc2f32;    --colorRagRedBg:#fdf6f6;
  --colorRagAmberDot:#eaa300;  --colorRagAmberText:#b27c00;  --colorRagAmberBg:#fefbf4;
  --colorRagGreenDot:#107c10;  --colorRagGreenText:#0e700e;  --colorRagGreenBg:#f1faf1;
  --colorRagBehindDot:#0078d4; --colorRagBehindText:#0078d4; --colorRagBehindBg:#f3f9fd;
  --colorRagNoneDot:#bdbdbd;   --colorRagNoneText:#616161;   --colorRagNoneBg:#f5f5f5;

  /* ---- 3. Shape, space, elevation ------------------------------------ */
  --borderRadiusSmall:2px;
  --borderRadiusMedium:4px;
  --borderRadiusLarge:6px;
  --borderRadiusXLarge:8px;
  --borderRadiusCircular:10000px;

  --strokeWidthThin:1px;
  --strokeWidthThick:2px;

  --spacingXXS:2px;   --spacingXS:4px;    --spacingSNudge:6px;
  --spacingS:8px;     --spacingMNudge:10px; --spacingM:12px;
  --spacingL:16px;    --spacingXL:20px;   --spacingXXL:24px;
  --spacingXXXL:32px;

  --shadow2:0 0 2px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14);
  --shadow4:0 0 2px rgba(0,0,0,.12), 0 2px 4px rgba(0,0,0,.14);
  --shadow8:0 0 2px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.14);
  --shadow16:0 0 2px rgba(0,0,0,.12), 0 8px 16px rgba(0,0,0,.14);
  --shadow28:0 0 8px rgba(0,0,0,.12), 0 14px 28px rgba(0,0,0,.14);
  --shadow64:0 0 8px rgba(0,0,0,.12), 0 32px 64px rgba(0,0,0,.14);

  /* ---- 4. Motion ------------------------------------------------------ */
  --durationFaster:100ms;
  --durationNormal:200ms;
  --curveEasyEase:cubic-bezier(0.33, 0, 0.67, 1);
  --curveDecelerateMid:cubic-bezier(0.1, 0.9, 0.2, 1);

  /* ---- layout metrics ------------------------------------------------- */
  --appHeaderHeight:48px;
  --navRailWidth:240px;
  --contentMaxWidth:1240px;
}

@media (prefers-reduced-motion: reduce){
  :root{--durationFaster:0.01ms; --durationNormal:0.01ms}
}

/* =========================================================================
   Base
   ========================================================================= */
*{box-sizing:border-box}
html,body{margin:0; padding:0}

body{
  font-family:var(--fontFamilyBase);
  font-size:var(--fontSizeBase300);
  line-height:var(--lineHeightBase300);
  font-weight:var(--fontWeightRegular);
  color:var(--colorNeutralForeground1);
  background:var(--colorNeutralBackground3);
  -webkit-font-smoothing:antialiased;
}

a{
  color:var(--colorBrandForeground1);
  text-decoration:none;
  transition:color var(--durationFaster) var(--curveEasyEase);
}
a:hover{color:var(--colorBrandForeground1Hover); text-decoration:underline}

:focus-visible{
  outline:2px solid var(--colorStrokeFocus2);
  outline-offset:1px;
  border-radius:inherit;
}

/* Type presets ------------------------------------------------------- */
h1{
  font-size:var(--fontSizeHero700); line-height:var(--lineHeightHero700);
  font-weight:var(--fontWeightSemibold); color:var(--colorNeutralForeground1);
  margin:0 0 var(--spacingXS);
}
h2{
  font-size:var(--fontSizeBase400); line-height:var(--lineHeightBase400);
  font-weight:var(--fontWeightSemibold); color:var(--colorNeutralForeground1);
  margin:0 0 var(--spacingM);
}
h3{
  font-size:var(--fontSizeBase400); line-height:var(--lineHeightBase400);
  font-weight:var(--fontWeightSemibold); color:var(--colorNeutralForeground1);
  margin:0 0 var(--spacingXS);
}
p{margin:0 0 var(--spacingM)}
p:last-child{margin-bottom:0}

.lead{
  color:var(--colorNeutralForeground3);
  margin:0 0 var(--spacingL);
  max-width:96ch;
}
.muted{color:var(--colorNeutralForeground3)}
.small{
  font-size:var(--fontSizeCaption1); line-height:var(--lineHeightCaption1);
}
.num{
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap;
}

/* Inline SVG icons (spec 7) ------------------------------------------- */
.icon{
  width:16px; height:16px; flex:0 0 auto; display:block;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
}
.icon-20{width:20px; height:20px}

/* =========================================================================
   6. Application header
   ========================================================================= */
.app-header{
  height:var(--appHeaderHeight);
  background:var(--colorBrandBackground);
  color:var(--colorNeutralForegroundInverted);
  display:flex; align-items:center; gap:var(--spacingM);
  padding:0 var(--spacingL);
}
.app-header__left{
  display:flex; align-items:center; gap:var(--spacingM); min-width:0;
}
.app-header__product{
  font-size:var(--fontSizeBase300); line-height:var(--lineHeightBase300);
  font-weight:var(--fontWeightSemibold);
  color:var(--colorNeutralForegroundInverted);
  white-space:nowrap;
}
.app-header__divider{
  width:1px; height:20px; background:rgba(255,255,255,.24); flex:0 0 auto;
}
.app-header__project{
  font-size:var(--fontSizeBase300); line-height:var(--lineHeightBase300);
  color:var(--colorBrandForegroundInvertedMuted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.app-header__persona{
  margin-left:auto;
  display:flex; align-items:center; gap:var(--spacingS); min-width:0;
}
.app-header__persona form{display:flex; margin:0}
.persona-avatar{
  width:28px; height:28px; flex:0 0 auto; border-radius:var(--borderRadiusCircular);
  background:rgba(255,255,255,.16); color:var(--colorNeutralForegroundInverted);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--fontSizeCaption1); line-height:var(--lineHeightCaption1);
  font-weight:var(--fontWeightSemibold);
}
.persona-name{
  font-size:var(--fontSizeBase300); line-height:var(--lineHeightBase300);
  color:var(--colorBrandForegroundInvertedMuted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* 2.1 — brass use 1 of 2: the 2px rule under the header bar */
.brass-rule{height:2px; background:var(--colorBrandAccent)}

/* =========================================================================
   6. Shell — left nav rail beside the content
   ========================================================================= */
.shell{
  display:grid;
  grid-template-columns:var(--navRailWidth) minmax(0,1fr);
  align-items:start;
  min-height:calc(100vh - var(--appHeaderHeight) - 2px);
}

.nav-rail{
  background:var(--colorNeutralBackground1);
  border-right:var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  padding:var(--spacingM) var(--spacingS);
  display:flex; flex-direction:column; gap:var(--spacingXXS);
  position:sticky; top:0; align-self:stretch;
}
.nav-item{
  position:relative;
  display:flex; align-items:center; gap:var(--spacingMNudge);
  height:36px; padding:0 var(--spacingM);
  border-radius:var(--borderRadiusMedium);
  color:var(--colorNeutralForeground2);
  font-size:var(--fontSizeBase300); line-height:var(--lineHeightBase300);
  font-weight:var(--fontWeightRegular);
  text-decoration:none; white-space:nowrap;
  transition:background-color var(--durationFaster) var(--curveEasyEase),
             color var(--durationFaster) var(--curveEasyEase);
}
.nav-item:hover{
  background:var(--colorSubtleBackgroundHover);
  color:var(--colorNeutralForeground1);
  text-decoration:none;
}
.nav-item:active{background:var(--colorSubtleBackgroundPressed)}
.nav-item.on{
  background:var(--colorBrandBackgroundTint);
  color:var(--colorBrandForeground1);
  font-weight:var(--fontWeightSemibold);
}
/* 2.1 — brass use 2 of 2: the 3px nav selection indicator */
.nav-item.on::before{
  content:""; position:absolute; left:0; top:var(--spacingSNudge);
  bottom:var(--spacingSNudge); width:3px;
  border-radius:var(--borderRadiusSmall);
  background:var(--colorBrandAccent);
}
.nav-item .icon{color:inherit}
.nav-item__label{overflow:hidden; text-overflow:ellipsis}
.nav-badge{
  margin-left:auto;
  height:18px; min-width:18px; padding:0 var(--spacingSNudge);
  border-radius:var(--borderRadiusCircular);
  background:var(--colorBrandBackground);
  color:var(--colorNeutralForegroundInverted);
  font-size:var(--fontSizeCaption1); line-height:18px;
  font-weight:var(--fontWeightSemibold);
  font-variant-numeric:tabular-nums;
  display:inline-flex; align-items:center; justify-content:center;
}

.content{
  min-width:0;
  padding:var(--spacingXXL) var(--spacingXXXL) var(--spacingXXXL);
}
.content-inner{max-width:var(--contentMaxWidth)}

footer{
  margin-top:var(--spacingXXL);
  padding-top:var(--spacingL);
  border-top:var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  color:var(--colorNeutralForeground3);
  font-size:var(--fontSizeCaption1); line-height:var(--lineHeightCaption1);
  max-width:96ch;
}

/* =========================================================================
   6. Page header + command bar
   ========================================================================= */
.page-header{margin:0 0 var(--spacingL)}
.command-bar{
  display:flex; align-items:center; flex-wrap:nowrap;
  gap:var(--spacingS);
  min-height:32px;
  padding:0 0 var(--spacingS);
  margin:0 0 var(--spacingL);
  border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  overflow-x:auto;
  scrollbar-width:thin;
}

/* =========================================================================
   5. Controls — buttons
   ========================================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:var(--spacingS);
  height:32px; padding:0 var(--spacingM);
  border-radius:var(--borderRadiusMedium);
  font-family:inherit;
  font-size:var(--fontSizeBase300); line-height:var(--lineHeightBase300);
  font-weight:var(--fontWeightSemibold);
  cursor:pointer; white-space:nowrap; text-decoration:none;
  border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  background:var(--colorNeutralBackground1);
  color:var(--colorNeutralForeground1);
  transition:background-color var(--durationFaster) var(--curveEasyEase),
             border-color var(--durationFaster) var(--curveEasyEase),
             color var(--durationFaster) var(--curveEasyEase),
             box-shadow var(--durationFaster) var(--curveEasyEase);
}
.btn:has(.icon){padding:0 var(--spacingL)}
.btn:hover{background:var(--colorNeutralBackground1Hover); border-color:#c7c7c7;
  color:var(--colorNeutralForeground1); text-decoration:none}
.btn:active{background:var(--colorSubtleBackgroundPressed)}
.btn[disabled]{
  background:var(--colorNeutralBackground4);
  color:var(--colorNeutralForegroundDisabled);
  border-color:var(--colorNeutralStroke2); cursor:not-allowed;
}

.btn-primary{
  background:var(--colorBrandBackground); border-color:transparent;
  color:var(--colorNeutralForegroundInverted);
}
.btn-primary:hover{background:var(--colorBrandBackgroundHover);
  border-color:transparent; color:var(--colorNeutralForegroundInverted)}
.btn-primary:active{background:var(--colorBrandBackgroundPressed)}

.btn-subtle{
  background:transparent; border-color:transparent;
  color:var(--colorNeutralForeground2);
}
.btn-subtle:hover{background:var(--colorSubtleBackgroundHover);
  border-color:transparent; color:var(--colorNeutralForeground1)}
.btn-subtle:active{background:var(--colorSubtleBackgroundPressed)}

/* Subtle button sitting on the navy application header */
.btn-inverted{color:var(--colorNeutralForegroundInverted)}
.btn-inverted:hover{background:rgba(255,255,255,.10);
  color:var(--colorNeutralForegroundInverted)}
.btn-inverted:active{background:rgba(255,255,255,.16)}
.btn-inverted:focus-visible{outline-color:var(--colorStrokeFocus1)}

.btn-block{width:100%}

/* Google sign-in. Google's branding guidance asks for their mark on a
   plain white button, so this one sits outside the Fluent button recipe. */
.btn-google{
  display:flex; align-items:center; justify-content:center; gap:12px;
  height:40px; padding:0 var(--spacingL);
  background:var(--colorNeutralBackground1);
  color:var(--colorNeutralForeground1);
  border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  border-radius:var(--borderRadiusMedium);
  font-size:var(--fontSizeBase300); line-height:var(--lineHeightBase300);
  font-weight:var(--fontWeightSemibold);
  text-decoration:none; cursor:pointer;
  transition:background-color var(--durationFaster) var(--curveEasyEase),
             border-color var(--durationFaster) var(--curveEasyEase);
}
.btn-google:hover{
  background:var(--colorNeutralBackground1Hover);
  border-color:#c7c7c7; text-decoration:none;
}
.btn-google:active{background:var(--colorNeutralBackground1Pressed)}
.icon-google{width:18px; height:18px; flex:none}
.signin-note{margin-top:var(--spacingM)}

/* =========================================================================
   5. Controls — input, select, textarea
   ========================================================================= */
input[type=text],input[type=email],input[type=password],select,textarea{
  height:32px; padding:0 var(--spacingM);
  font-family:inherit;
  font-size:var(--fontSizeBase300); line-height:var(--lineHeightBase300);
  color:var(--colorNeutralForeground1);
  background:var(--colorNeutralBackground1);
  border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  border-radius:var(--borderRadiusMedium);
  transition:border-color var(--durationFaster) var(--curveEasyEase),
             box-shadow var(--durationFaster) var(--curveEasyEase);
}
textarea{height:auto; padding:var(--spacingS) var(--spacingM)}
input::placeholder,textarea::placeholder{color:var(--colorNeutralForeground4)}
input[type=text]:hover,input[type=email]:hover,input[type=password]:hover,
select:hover,textarea:hover{border-color:var(--colorNeutralStrokeAccessible)}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,
select:focus,textarea:focus{
  outline:none;
  border-color:var(--colorNeutralForeground1);
  box-shadow:inset 0 -2px 0 0 var(--colorBrandStroke1);
}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--colorStrokeFocus2);
  outline-offset:1px;
  border-color:var(--colorNeutralForeground1);
  box-shadow:inset 0 -2px 0 0 var(--colorBrandStroke1);
}

.field{display:flex; flex-direction:column; gap:var(--spacingXS)}
.field label,label.field-label{
  font-size:var(--fontSizeCaption1); line-height:var(--lineHeightCaption1);
  font-weight:var(--fontWeightSemibold);
  color:var(--colorNeutralForeground1);
}

/* =========================================================================
   6. Card
   ========================================================================= */
.card{
  background:var(--colorNeutralBackground1);
  border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  border-radius:var(--borderRadiusMedium);
  box-shadow:var(--shadow2);
  padding:var(--spacingL) var(--spacingXL);
  margin:0 0 var(--spacingL);
}
.card > h2:first-child{margin-top:0}
.card > .lead{margin-bottom:var(--spacingM)}

/* =========================================================================
   6. Stat tile row — one card, 1px dividers, no coloured boxes
   ========================================================================= */
/* Dividers are drawn on the tiles rather than as a coloured gap, so a
   trailing empty cell in the last row stays white instead of showing the
   divider colour as a block. The first tile of each row has its border
   pushed outside the container and clipped by overflow:hidden. */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:0;
  background:var(--colorNeutralBackground1);
  border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  border-radius:var(--borderRadiusMedium);
  box-shadow:var(--shadow2);
  overflow:hidden;
  margin:0 0 var(--spacingL);
}
.stat{
  background:var(--colorNeutralBackground1);
  padding:var(--spacingL) var(--spacingXL);
  border-left:var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  margin-left:calc(-1 * var(--strokeWidthThin));
}
.stat b{
  display:block;
  font-size:var(--fontSizeCaption1); line-height:var(--lineHeightCaption1);
  font-weight:var(--fontWeightRegular);
  color:var(--colorNeutralForeground3);
  text-transform:none; letter-spacing:normal;
}
.stat span{
  display:block; margin-top:var(--spacingXS);
  font-size:var(--fontSizeHero700); line-height:var(--lineHeightHero700);
  font-weight:var(--fontWeightSemibold);
  color:var(--colorNeutralForeground1);
  font-variant-numeric:tabular-nums;
}
.stat em{
  display:block; margin-top:var(--spacingXS); font-style:normal;
  font-size:var(--fontSizeCaption1); line-height:var(--lineHeightCaption1);
  color:var(--colorNeutralForeground3);
}
.stat.stat-text span{
  font-size:var(--fontSizeBase400); line-height:var(--lineHeightBase400);
}

/* =========================================================================
   Monthly cycle strip
   ========================================================================= */
.cycle{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--spacingL);
}
.cycle div{
  border-top:var(--strokeWidthThick) solid var(--colorNeutralStroke2);
  padding:var(--spacingM) 0 0;
  font-size:var(--fontSizeBase300); line-height:var(--lineHeightBase300);
  color:var(--colorNeutralForeground2);
}
.cycle div.on{border-top-color:var(--colorBrandStroke1)}
.cycle b{
  display:block; margin-bottom:var(--spacingXS);
  font-size:var(--fontSizeCaption1); line-height:var(--lineHeightCaption1);
  font-weight:var(--fontWeightSemibold);
  color:var(--colorNeutralForeground1);
  text-transform:none; letter-spacing:normal;
}

/* =========================================================================
   6. Table — DataGrid
   ========================================================================= */
.scroll{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
}
table{
  width:100%; border-collapse:collapse;
  font-size:var(--fontSizeBase300); line-height:var(--lineHeightBase300);
}
thead th{
  height:42px; padding:0 var(--spacingM);
  text-align:left; vertical-align:middle;
  background:var(--colorNeutralBackground1);
  color:var(--colorNeutralForeground1);
  font-size:var(--fontSizeCaption1); line-height:var(--lineHeightCaption1);
  font-weight:var(--fontWeightSemibold);
  text-transform:none; letter-spacing:normal; white-space:nowrap;
  border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke1);
}
thead th.num{text-align:right}
tbody td,tfoot td{
  height:44px; padding:var(--spacingM);
  vertical-align:middle;
  color:var(--colorNeutralForeground1);
  border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke3);
}
tbody tr{
  transition:background-color var(--durationFaster) var(--curveEasyEase);
}
tbody tr:hover{background:var(--colorNeutralBackground1Hover)}
tbody tr.selected,tbody tr[aria-selected="true"]{
  background:var(--colorBrandBackgroundTint);
}
tr.group td,tfoot tr.group td{
  background:var(--colorNeutralBackground2);
  font-weight:var(--fontWeightSemibold);
  color:var(--colorNeutralForeground1);
}
tbody tr.group:hover td{background:var(--colorNeutralBackground2)}
tr.sub td{color:var(--colorNeutralForeground2)}
tr.sub td:first-child + td{padding-left:var(--spacingXXL)}
td.num,th.num{font-variant-numeric:tabular-nums}
td.small{
  font-size:var(--fontSizeCaption1); line-height:var(--lineHeightCaption1);
  color:var(--colorNeutralForeground3);
}

.empty{
  color:var(--colorNeutralForeground3);
  margin:0;
}

/* =========================================================================
   2. Traffic light dot
   ========================================================================= */
.dot{
  display:inline-block; width:10px; height:10px;
  border-radius:var(--borderRadiusCircular);
  vertical-align:-1px; margin-right:var(--spacingSNudge);
  background:var(--colorRagNoneDot);
}
.dot.red{background:var(--colorRagRedDot)}
.dot.amber{background:var(--colorRagAmberDot)}
.dot.green{background:var(--colorRagGreenDot)}
.dot.behind{background:var(--colorRagBehindDot)}
.dot.none{background:var(--colorRagNoneDot)}

.key{
  display:flex; gap:var(--spacingXXL); flex-wrap:wrap;
  margin:var(--spacingL) 0 0;
  font-size:var(--fontSizeCaption1); line-height:var(--lineHeightCaption1);
  color:var(--colorNeutralForeground3);
}

/* =========================================================================
   6. Progress bar — drawn against certified progress
   ========================================================================= */
.bar{
  position:relative; height:4px; min-width:96px;
  background:var(--colorNeutralStroke2);
  border-radius:var(--borderRadiusCircular);
  margin:var(--spacingSNudge) 0;
}
.bar i{
  position:absolute; left:0; top:0; height:100%;
  border-radius:var(--borderRadiusCircular);
  background:var(--colorRagGreenDot);
}
.bar i.red{background:var(--colorRagRedDot)}
.bar i.amber{background:var(--colorRagAmberDot)}
.bar i.green{background:var(--colorRagGreenDot)}
.bar i.behind{background:var(--colorRagBehindDot)}
.bar u{
  position:absolute; top:-3px; width:2px; height:10px;
  background:var(--colorNeutralForeground1); text-decoration:none;
}
.bar-caption{
  font-size:var(--fontSizeCaption1); line-height:var(--lineHeightCaption1);
  color:var(--colorNeutralForeground3);
}

/* Approval marker on a fee account ------------------------------------ */
.tick{
  display:flex; width:fit-content;
  align-items:center; gap:var(--spacingXS);
  margin-top:var(--spacingXXS);
  font-size:var(--fontSizeCaption1); line-height:var(--lineHeightCaption1);
  color:var(--colorStatusSuccessForeground1);
}
.tick .icon{width:12px; height:12px}
.tick.warn{color:var(--colorNeutralForeground3)}

/* =========================================================================
   6. Badge / pill
   ========================================================================= */
.pill{
  display:inline-flex; align-items:center; height:18px;
  padding:0 var(--spacingS);
  border-radius:var(--borderRadiusCircular);
  font-size:var(--fontSizeCaption1); line-height:var(--lineHeightCaption1);
  font-weight:var(--fontWeightSemibold);
  white-space:nowrap;
  background:var(--colorStatusNeutralBackground1);
  color:var(--colorStatusNeutralForeground1);
}
.pill.issued,.pill.pending{
  background:var(--colorStatusWarningBackground1);
  color:var(--colorStatusWarningForeground1);
}
.pill.paid{
  background:var(--colorStatusInfoBackground1);
  color:var(--colorStatusInfoForeground1);
}
.pill.settled,.pill.approved{
  background:var(--colorStatusSuccessBackground1);
  color:var(--colorStatusSuccessForeground1);
}
.pill.rejected{
  background:var(--colorStatusDangerBackground1);
  color:var(--colorStatusDangerForeground1);
}
.pill.withdrawn,.pill.draft{
  background:var(--colorStatusNeutralBackground1);
  color:var(--colorStatusNeutralForeground1);
}

/* =========================================================================
   6. MessageBar
   ========================================================================= */
.msgbar{
  display:flex; align-items:flex-start; gap:var(--spacingS);
  padding:var(--spacingMNudge) var(--spacingM);
  border:var(--strokeWidthThin) solid var(--colorStatusNeutralBorder1);
  border-radius:var(--borderRadiusMedium);
  background:var(--colorStatusNeutralBackground1);
  color:var(--colorNeutralForeground1);
  font-size:var(--fontSizeBase300); line-height:var(--lineHeightBase300);
  margin:0 0 var(--spacingL);
}
.msgbar > .icon{margin-top:2px; color:var(--colorNeutralForeground3)}
.msgbar__body{min-width:0}
.msgbar__body p{margin:0}
.msgbar.info{
  background:var(--colorStatusNeutralBackground1);
  border-color:var(--colorStatusNeutralBorder1);
}
.msgbar.info > .icon{color:var(--colorNeutralForeground3)}
.msgbar.success{
  background:var(--colorStatusSuccessBackground1);
  border-color:var(--colorStatusSuccessBorder1);
}
.msgbar.success > .icon{color:var(--colorStatusSuccessForeground3)}
.msgbar.warning{
  background:var(--colorStatusWarningBackground1);
  border-color:var(--colorStatusWarningBorder1);
}
.msgbar.warning > .icon{color:var(--colorStatusWarningForeground3)}
.msgbar.error{
  background:var(--colorStatusDangerBackground1);
  border-color:var(--colorStatusDangerBorder1);
}
.msgbar.error > .icon{color:var(--colorStatusDangerForeground3)}

/* =========================================================================
   Filter chips — the command bar filter control
   ========================================================================= */
.chips{
  display:flex; align-items:center; gap:var(--spacingXS);
  flex-wrap:nowrap; min-width:0;
}
.chips a{
  display:inline-flex; align-items:center; height:28px;
  padding:0 var(--spacingM);
  border-radius:var(--borderRadiusMedium);
  border:var(--strokeWidthThin) solid transparent;
  background:transparent;
  color:var(--colorNeutralForeground2);
  font-size:var(--fontSizeBase300); line-height:var(--lineHeightBase300);
  white-space:nowrap; text-decoration:none;
  transition:background-color var(--durationFaster) var(--curveEasyEase),
             color var(--durationFaster) var(--curveEasyEase);
}
.chips a:hover{
  background:var(--colorSubtleBackgroundHover);
  color:var(--colorNeutralForeground1); text-decoration:none;
}
.chips a.on{
  background:var(--colorBrandBackgroundTint);
  color:var(--colorBrandForeground1);
  font-weight:var(--fontWeightSemibold);
}

/* =========================================================================
   Approvals
   ========================================================================= */
.item{
  background:var(--colorNeutralBackground1);
  border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  border-radius:var(--borderRadiusMedium);
  box-shadow:var(--shadow2);
  padding:var(--spacingL) var(--spacingXL);
  margin:0 0 var(--spacingM);
}
.item h3{margin:0 0 var(--spacingXS)}
.item .meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:var(--spacingXS);
  font-size:var(--fontSizeCaption1); line-height:var(--lineHeightCaption1);
  color:var(--colorNeutralForeground3);
  margin:0 0 var(--spacingM);
}
.item p{margin:0 0 var(--spacingM)}
.decide{
  display:flex; align-items:flex-end; gap:var(--spacingS); flex-wrap:wrap;
  border-top:var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  padding-top:var(--spacingL); margin-top:var(--spacingL);
}
.decide .field{flex:1 1 260px; min-width:220px}
.decide input[type=text]{width:100%}

/* =========================================================================
   Data room
   ========================================================================= */
.docs{list-style:none; margin:0; padding:0}
.docs li{
  display:flex; gap:var(--spacingM); align-items:baseline;
  padding:var(--spacingM) 0;
  border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke3);
}
.docs li:last-child{border-bottom:none}
.docs a{font-weight:var(--fontWeightSemibold)}
.docs .meta{
  margin-left:auto; white-space:nowrap;
  font-size:var(--fontSizeCaption1); line-height:var(--lineHeightCaption1);
  color:var(--colorNeutralForeground3);
}

/* =========================================================================
   Sign in
   ========================================================================= */
body.signin{
  display:flex; align-items:flex-start; justify-content:center;
  min-height:100vh;
}
.login{
  width:100%; max-width:380px; margin:9vh var(--spacingL);
  background:var(--colorNeutralBackground1);
  border:var(--strokeWidthThin) solid var(--colorNeutralStroke2);
  border-radius:var(--borderRadiusXLarge);
  box-shadow:var(--shadow16);
  padding:var(--spacingXXL);
}
.login h1{
  font-size:var(--fontSizeBase500); line-height:var(--lineHeightBase500);
  font-weight:var(--fontWeightSemibold); margin:0 0 var(--spacingXXS);
}
.login .lead{margin:0 0 var(--spacingXL)}
.login .field{margin:0 0 var(--spacingM)}
.login input{width:100%}
.login .btn{margin-top:var(--spacingS)}
.login .msgbar{margin:var(--spacingL) 0 0}

/* =========================================================================
   Responsive — below 900px the rail becomes a horizontal strip
   ========================================================================= */
@media (max-width:900px){
  .shell{grid-template-columns:minmax(0,1fr)}
  .nav-rail{
    position:static;
    flex-direction:row; align-items:center; gap:var(--spacingXS);
    overflow-x:auto; overscroll-behavior-x:contain;
    border-right:none;
    border-bottom:var(--strokeWidthThin) solid var(--colorNeutralStroke2);
    padding:var(--spacingS) var(--spacingM);
    scrollbar-width:thin;
  }
  .nav-item{flex:0 0 auto}
  .nav-item.on::before{
    left:var(--spacingSNudge); right:var(--spacingSNudge);
    top:auto; bottom:0; width:auto; height:3px;
  }
  .nav-badge{margin-left:var(--spacingXS)}
  .content{padding:var(--spacingXL) var(--spacingL) var(--spacingXXL)}
}

@media (max-width:640px){
  .app-header{padding:0 var(--spacingM); gap:var(--spacingS)}
  .app-header__project{display:none}
  .app-header__divider{display:none}
  .persona-name{display:none}
  .content{padding:var(--spacingL) var(--spacingM) var(--spacingXXL)}
  .card{padding:var(--spacingL)}
}

/* ---- data room rows ---- */
.docs li{gap:var(--spacingL); align-items:center}
.doc-name{display:flex; flex-direction:column; gap:2px; min-width:0;
  font-weight:var(--fontWeightSemibold); color:var(--colorNeutralForeground1)}
.doc-name .meta{margin:0; font-weight:var(--fontWeightRegular)}
.btn-download{
  flex:none; margin-left:auto; height:32px; padding:0 var(--spacingM);
  display:inline-flex; align-items:center; gap:var(--spacingS);
  background:var(--colorNeutralBackground1);
  color:var(--colorNeutralForeground1);
  border:var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  border-radius:var(--borderRadiusMedium);
  font-size:var(--fontSizeBase300); line-height:var(--lineHeightBase300);
  font-weight:var(--fontWeightSemibold); text-decoration:none;
  transition:background-color var(--durationFaster) var(--curveEasyEase),
             border-color var(--durationFaster) var(--curveEasyEase);
}
.btn-download:hover{background:var(--colorNeutralBackground1Hover);
  border-color:#c7c7c7; text-decoration:none}
.btn-download:active{background:var(--colorNeutralBackground1Pressed)}
@media (max-width:640px){
  .docs li{flex-wrap:wrap}
  .btn-download{margin-left:0}
}