/*
 * Resource Manager design system (RM-009).
 *
 * Bootstrap 5.3 underneath; this file sets the brand: typeface, colour tokens for light and dark
 * themes, the application shell (sidebar + top bar), the sign-in layout and shared components.
 *
 * Rules (PROJECT_OVERVIEW.md §11–12):
 *  - all CSS lives here; no inline style attributes or <style> blocks;
 *  - every text/background pair below meets WCAG 1.4.3 AA (4.5:1) in both themes; UI boundaries
 *    and focus indicators meet 1.4.11 (3:1). The ratios are noted where not obvious.
 */

/* ---------------------------------------------------------------------------------------------
 * Typeface: Inter (variable), self-hosted. font-display: swap keeps text visible while loading.
 * ------------------------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('../vendor/inter/inter-latin-wght-normal.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'Inter Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url('../vendor/inter/inter-latin-wght-italic.woff2') format('woff2-variations');
}

/* ---------------------------------------------------------------------------------------------
 * Tokens
 * ------------------------------------------------------------------------------------------- */
:root,
[data-bs-theme='light'] {
  --rm-primary: #4f46e5;          /* on white 6.29:1 */
  --rm-primary-hover: #4338ca;
  --rm-primary-rgb: 79, 70, 229;
  --rm-primary-subtle: #eef2ff;
  --rm-primary-text: #3730a3;     /* on --rm-primary-subtle 8.9:1 */

  --rm-bg: #f5f6fa;
  --rm-surface: #ffffff;
  --rm-surface-2: #f9fafb;
  --rm-border: #e3e6ee;
  --rm-border-strong: #8b93a7;    /* input borders: 3.3:1 on white (1.4.11) */
  --rm-text: #111827;             /* on --rm-bg 16.8:1 */
  --rm-muted: #4b5563;            /* on white 7.6:1, on --rm-bg 7.1:1 */
  --rm-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 3px rgba(16, 24, 40, 0.06);

  --rm-sidebar-bg: #0f172a;
  --rm-sidebar-text: #cbd5e1;     /* on sidebar 12.0:1 */
  --rm-sidebar-muted: #94a3b8;    /* section labels, 6.9:1 */
  --rm-sidebar-active-bg: rgba(129, 140, 248, 0.16);
  --rm-sidebar-active-text: #ffffff;
  --rm-sidebar-accent: #818cf8;

  --rm-success: #047857;          /* 5.5:1 */
  --rm-warning-text: #92400e;     /* 7.1:1 on #fffbeb */
  --rm-danger: #b91c1c;           /* 6.5:1 */

  --rm-radius: 0.625rem;
  --rm-radius-sm: 0.4rem;
}

[data-bs-theme='dark'] {
  --rm-primary: #818cf8;          /* on --rm-surface 6.5:1 */
  --rm-primary-hover: #a5b4fc;
  --rm-primary-rgb: 129, 140, 248;
  --rm-primary-subtle: #1e1b4b;
  --rm-primary-text: #c7d2fe;     /* on --rm-primary-subtle 11:1 */

  --rm-bg: #0b1120;
  --rm-surface: #111827;
  --rm-surface-2: #0f172a;
  --rm-border: #243044;
  --rm-border-strong: #6b7a93;    /* 3.6:1 on surface */
  --rm-text: #e5e7eb;             /* on --rm-bg 15.6:1 */
  --rm-muted: #a3adbd;            /* on surface 7.6:1 */
  --rm-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

  --rm-sidebar-bg: #0a0f1c;

  --rm-success: #34d399;
  --rm-warning-text: #fcd34d;
  --rm-danger: #f87171;
}

/* Map the tokens onto Bootstrap's own variables. */
:root,
[data-bs-theme] {
  --bs-body-font-family: 'Inter Variable', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bs-body-bg: var(--rm-bg);
  --bs-body-color: var(--rm-text);
  --bs-emphasis-color: var(--rm-text);
  --bs-secondary-color: var(--rm-muted);
  --bs-tertiary-bg: var(--rm-surface-2);
  --bs-border-color: var(--rm-border);
  --bs-primary: var(--rm-primary);
  --bs-primary-rgb: var(--rm-primary-rgb);
  --bs-link-color: var(--rm-primary);
  --bs-link-color-rgb: var(--rm-primary-rgb);
  --bs-link-hover-color: var(--rm-primary-hover);
  --bs-border-radius: var(--rm-radius-sm);
  --bs-border-radius-lg: var(--rm-radius);
  --bs-focus-ring-color: rgba(var(--rm-primary-rgb), 0.45);
}

body {
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

h1, .h1, h2, .h2, h3, .h3 {
  font-weight: 650;
  letter-spacing: -0.02em;
}

/* ---------------------------------------------------------------------------------------------
 * Controls
 * ------------------------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-weight: 550;
  --bs-btn-padding-x: 1rem;
  border-radius: var(--rm-radius-sm);
}

.btn-primary {
  --bs-btn-bg: var(--rm-primary);
  --bs-btn-border-color: var(--rm-primary);
  --bs-btn-hover-bg: var(--rm-primary-hover);
  --bs-btn-hover-border-color: var(--rm-primary-hover);
  --bs-btn-active-bg: var(--rm-primary-hover);
  --bs-btn-active-border-color: var(--rm-primary-hover);
  --bs-btn-disabled-bg: var(--rm-primary);
  --bs-btn-disabled-border-color: var(--rm-primary);
}

[data-bs-theme='dark'] .btn-primary {
  --bs-btn-color: #0b1120;         /* dark text on light indigo: 7.0:1 */
  --bs-btn-hover-color: #0b1120;
  --bs-btn-active-color: #0b1120;
}

.btn-outline-primary {
  --bs-btn-color: var(--rm-primary);
  --bs-btn-border-color: var(--rm-primary);
  --bs-btn-hover-bg: var(--rm-primary);
  --bs-btn-hover-border-color: var(--rm-primary);
  --bs-btn-active-bg: var(--rm-primary);
}

.form-control,
.form-select {
  border-color: var(--rm-border-strong);
  background-color: var(--rm-surface);
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--rm-primary);
  box-shadow: 0 0 0 0.2rem rgba(var(--rm-primary-rgb), 0.3);
}

.form-check-input {
  border-color: var(--rm-border-strong);
}

.form-check-input:checked {
  background-color: var(--rm-primary);
  border-color: var(--rm-primary);
}

.form-label {
  font-weight: 550;
}

/* Visible focus for everything interactive, never removed without a replacement (WCAG 2.4.7). */
:focus-visible {
  outline: 3px solid var(--rm-primary);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------------------------
 * Skip link (WCAG 2.4.1)
 * ------------------------------------------------------------------------------------------- */
.skip-link:focus {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1090;
  padding: 0.6rem 1rem;
  background: var(--rm-surface);
  color: var(--rm-text);
  border: 2px solid var(--rm-primary);
  border-radius: var(--rm-radius-sm);
  box-shadow: var(--rm-shadow);
}

#main:focus {
  outline: none;
}

/* ---------------------------------------------------------------------------------------------
 * Application shell: sidebar + top bar + content
 * ------------------------------------------------------------------------------------------- */
.app-shell {
  display: flex;
  min-height: 100vh;
}

.app-sidebar {
  --bs-offcanvas-width: 17rem;
  --bs-offcanvas-bg: var(--rm-sidebar-bg);
  --bs-offcanvas-color: var(--rm-sidebar-text);
  background: var(--rm-sidebar-bg);
  color: var(--rm-sidebar-text);
}

@media (min-width: 992px) {
  /* Bootstrap's offcanvas-lg forces background-color: transparent !important at this width;
     two classes out-rank its one, so the sidebar keeps its colour (found in RM-009 review). */
  .app-sidebar.offcanvas-lg {
    width: 16.5rem;
    flex: 0 0 16.5rem;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    background-color: var(--rm-sidebar-bg) !important;
  }

  .app-sidebar.offcanvas-lg .offcanvas-body {
    flex-grow: 1;
    padding: 1rem 0.75rem;
  }
}

.app-sidebar .offcanvas-body {
  display: flex;
  flex-direction: column;
  padding: 1rem 0.75rem;
  gap: 0.25rem;
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.6rem 1rem;
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.app-brand:hover {
  color: #fff;
}

.app-brand-mark {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
}

.app-brand-mark svg {
  width: 1.75rem;
  height: 1.75rem;
}

.app-org {
  display: block;
  margin: 0 0.25rem 0.75rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid rgba(148, 163, 184, 0.25);
  border-radius: var(--rm-radius-sm);
  color: var(--rm-sidebar-text);
  text-decoration: none;
  font-size: 0.875rem;
}

.app-org:hover {
  border-color: rgba(148, 163, 184, 0.5);
  color: #fff;
}

.app-org-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--rm-sidebar-muted);
}

.app-org-name {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: #fff;
}

.app-nav-section {
  margin: 0.75rem 0.6rem 0.25rem;
  font-size: 0.7rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--rm-sidebar-muted);
}

.app-nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.app-nav a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 2.5rem;              /* target size ≥ 24px (WCAG 2.5.8) */
  padding: 0.5rem 0.7rem;
  border-radius: var(--rm-radius-sm);
  color: var(--rm-sidebar-text);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.925rem;
}

.app-nav a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}

.app-nav a[aria-current='page'] {
  background: var(--rm-sidebar-active-bg);
  color: var(--rm-sidebar-active-text);
  box-shadow: inset 3px 0 0 var(--rm-sidebar-accent);
}

.app-nav .bi {
  font-size: 1.05rem;
  opacity: 0.9;
}

.app-sidebar-footer {
  margin-top: auto;
  padding-top: 1rem;
}

.app-sidebar :focus-visible {
  outline-color: #a5b4fc;
}

.app-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 4rem;
  padding: 0.5rem 1.5rem;
  background: color-mix(in srgb, var(--rm-surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--rm-border);
}

.app-topbar .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid transparent;
  border-radius: var(--rm-radius-sm);
  background: transparent;
  color: var(--rm-text);
}

.app-topbar .btn-icon:hover {
  background: var(--rm-surface-2);
  border-color: var(--rm-border);
}

.app-avatar {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--rm-primary-subtle);
  color: var(--rm-primary-text);
  font-weight: 700;
  font-size: 0.8rem;
}

.app-content {
  width: 100%;
  max-width: 88rem;
  margin: 0 auto;
  padding: 1.75rem 1.5rem 3rem;
}

@media (max-width: 575.98px) {
  .app-content {
    padding: 1.25rem 1rem 2.5rem;
  }

  .app-topbar {
    padding: 0.5rem 1rem;
  }
}

/* ---------------------------------------------------------------------------------------------
 * Sign-in and public pages: brand panel + form
 * ------------------------------------------------------------------------------------------- */
.auth-shell {
  display: grid;
  /* minmax(0, 1fr), not auto: grid items default to min-width: auto, so a wide child (a help
     table) would stretch the page past the viewport (WCAG 1.4.10; found by TC-0015). */
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
}

.auth-panel,
.auth-card {
  min-width: 0;
}

@media (min-width: 992px) {
  .auth-shell {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}

.auth-brand {
  display: none;
  position: relative;
  overflow: hidden;
  padding: 3rem;
  background: radial-gradient(60rem 40rem at 10% -10%, #6366f1 0%, transparent 60%),
    linear-gradient(145deg, #312e81 0%, #4338ca 55%, #6d28d9 100%);
  color: #fff;                     /* on #4338ca 7.9:1, on #6d28d9 7.0:1 */
}

@media (min-width: 992px) {
  .auth-brand {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}

.auth-brand .app-brand {
  padding: 0;
  font-size: 1.2rem;
}

/* RM-083: on the coloured sign-in panel the mark sits on a white tile, so the indigo bar shows. */
.auth-brand .app-brand-mark {
  border-radius: 0.55rem;
  background: #fff;
}

.auth-brand .app-brand-mark svg {
  width: 1.4rem;
  height: 1.4rem;
}

.auth-brand h2 {
  font-size: 2.1rem;
  line-height: 1.15;
  font-weight: 700;
  max-width: 28rem;
}

.auth-brand-lead {
  font-size: 1.05rem;
  color: #e0e7ff;                  /* 10:1 on the panel */
  max-width: 30rem;
}

.auth-features {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1rem;
}

.auth-features li {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  color: #eef2ff;
}

.auth-features .bi {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.14);
}

.auth-brand-footer {
  font-size: 0.85rem;
  color: #c7d2fe;                  /* 7.2:1 */
}

.auth-panel {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--rm-surface);
}

.auth-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
}

.auth-panel-header .app-brand {
  color: var(--rm-text);
  padding: 0;
}

@media (min-width: 992px) {
  .auth-panel-header .app-brand {
    visibility: hidden;            /* the brand panel already shows it */
  }
}

.auth-panel-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.auth-card {
  width: 100%;
  max-width: 28rem;
}

.auth-card-wide {
  max-width: 36rem;
}

.auth-card h1 {
  font-size: 1.75rem;
}

.auth-panel-footer {
  padding: 1.25rem 1.5rem;
  font-size: 0.85rem;
  color: var(--rm-muted);
}

/* ---------------------------------------------------------------------------------------------
 * Components
 * ------------------------------------------------------------------------------------------- */
.page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.page-header h1 {
  margin-bottom: 0.25rem;
  font-size: 1.65rem;
}

.page-header p {
  margin: 0;
  color: var(--rm-muted);
}

.page-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.breadcrumb-back {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
  text-decoration: none;
}

.card {
  --bs-card-bg: var(--rm-surface);
  --bs-card-border-color: var(--rm-border);
  --bs-card-border-radius: var(--rm-radius);
  box-shadow: var(--rm-shadow);
}

.card-header {
  background: transparent;
  font-weight: 600;
}

.table {
  --bs-table-bg: transparent;
  margin-bottom: 0;
}

.table > thead th {
  font-size: 0.75rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--rm-muted);
  background: var(--rm-surface-2);
  border-bottom-color: var(--rm-border);
  white-space: nowrap;
}

.table > :not(caption) > * > * {
  padding: 0.8rem 1rem;
}

.card > .table-responsive:first-child .table > thead th:first-child {
  border-top-left-radius: var(--rm-radius);
}

.stat-card {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.stat-icon {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: var(--rm-primary-subtle);
  color: var(--rm-primary-text);
  font-size: 1.25rem;
}

.feature-card {
  height: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.feature-card:hover {
  border-color: rgba(var(--rm-primary-rgb), 0.45);
}

.feature-card .badge {
  font-weight: 600;
}

.badge-soon {
  background: var(--rm-surface-2);
  color: var(--rm-muted);
  border: 1px solid var(--rm-border);
}

.badge-role {
  background: var(--rm-primary-subtle);
  color: var(--rm-primary-text);
  font-weight: 600;
}

.empty-state {
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--rm-muted);
}

.empty-state .bi {
  display: block;
  font-size: 2.25rem;
  margin-bottom: 0.75rem;
  color: var(--rm-primary);
}

/* Links inside the form error summary: link blue on the danger alert is 3.36:1, below AA. Use the
   alert's own emphasis colour (well above 7:1), bold and underlined (RM-006). */
.error-summary a {
  color: var(--bs-danger-text-emphasis);
  font-weight: 600;
  text-decoration: underline;
}

.alert {
  border-radius: var(--rm-radius-sm);
}

/* ---------------------------------------------------------------------------------------------
 * Online help
 * ------------------------------------------------------------------------------------------- */
.help-layout {
  display: grid;
  gap: 2rem;
}

@media (min-width: 992px) {
  .help-layout {
    grid-template-columns: 16rem minmax(0, 1fr);
  }
}

.help-toc {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
}

.help-toc a {
  display: block;
  padding: 0.35rem 0.6rem;
  border-radius: var(--rm-radius-sm);
  color: var(--rm-text);
  text-decoration: none;
  font-size: 0.925rem;
}

.help-toc a:hover {
  background: var(--rm-surface-2);
}

.help-toc a[aria-current='page'] {
  background: var(--rm-primary-subtle);
  color: var(--rm-primary-text);
  font-weight: 600;
}

.help-article {
  max-width: 46rem;
  line-height: 1.65;
}

.help-article h1 {
  font-size: 2rem;
}

.help-article h2 {
  margin-top: 2rem;
  font-size: 1.3rem;
}

.help-article h3 {
  margin-top: 1.5rem;
  font-size: 1.1rem;
}

.help-article code {
  color: var(--rm-primary-text);
  background: var(--rm-primary-subtle);
  padding: 0.1rem 0.35rem;
  border-radius: 0.3rem;
}

.help-article blockquote {
  margin: 1.25rem 0;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--rm-primary);
  background: var(--rm-surface-2);
  border-radius: 0 var(--rm-radius-sm) var(--rm-radius-sm) 0;
}

.table-scroll {
  overflow-x: auto;
  margin: 1rem 0;
}

.help-article table {
  width: 100%;
  margin: 1rem 0;
  border-collapse: collapse;
}

.help-article th,
.help-article td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rm-border);
  text-align: left;
}

/* ---------------------------------------------------------------------------------------------
 * Settings
 * ------------------------------------------------------------------------------------------- */
.settings-layout {
  display: grid;
  gap: 2rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 992px) {
  .settings-layout {
    grid-template-columns: 13rem minmax(0, 1fr);
  }

  .settings-toc {
    position: sticky;
    top: 5rem;
    align-self: start;
  }
}

.settings-toc-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--rm-muted);
  margin: 0 0 0.5rem 0.6rem;
}

.settings-form section {
  scroll-margin-top: 5rem;
}

.setting-row {
  display: grid;
  gap: 0.75rem 2rem;
  grid-template-columns: minmax(0, 1fr);
  padding: 1.1rem 1.25rem;
  border-top: 1px solid var(--rm-border);
}

.setting-row:first-child {
  border-top: 0;
}

@media (min-width: 768px) {
  .setting-row {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
  }
}

.setting-text .form-label {
  font-weight: 600;
  margin-bottom: 0.15rem;
}

.setting-scopes {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  color: var(--rm-muted);
}

.setting-lock {
  margin-top: 0.5rem;
  font-size: 0.875rem;
}

/* Keep a focused field clear of the sticky save bar (WCAG 2.4.11 Focus Not Obscured). */
html:has(.settings-savebar) {
  scroll-padding-bottom: 6rem;
}

.settings-savebar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.85rem 1.25rem;
  margin-top: 1rem;
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  box-shadow: 0 -4px 12px rgba(16, 24, 40, 0.06);
}

/* ---------------------------------------------------------------------------------------------
 * Entity pages (clients, later projects): header with avatar, section links, contact cards
 * ------------------------------------------------------------------------------------------- */
.entity-header {
  margin-bottom: 1rem;
}

.entity-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--rm-radius);
  background: var(--rm-primary-subtle);
  color: var(--rm-primary-text);
  font-weight: 700;
  font-size: 1.25rem;
}

.entity-avatar-sm {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1rem;
}

.entity-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0.25rem 0 0;
}

.entity-meta:empty {
  display: none;
}

.entity-tabs {
  border-bottom: 1px solid var(--rm-border);
  gap: 1.25rem;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.entity-tabs .nav-link {
  color: var(--rm-muted);
  white-space: nowrap;
  padding-left: 0;
  padding-right: 0;
}

.entity-tabs .nav-link:hover {
  color: var(--rm-text);
}

.entity-tabs .nav-link.active {
  color: var(--rm-primary-text);
  font-weight: 600;
}

.form-narrow {
  max-width: 40rem;
}

.danger-zone {
  border-color: var(--rm-border);
}

.contact-list {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.contact-card.is-editing {
  border-color: var(--rm-primary);
  box-shadow: 0 0 0 1px var(--rm-primary);
}

.contact-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  font-size: 0.9rem;
}

.contact-lines a {
  overflow-wrap: anywhere;
}

.min-w-0 {
  min-width: 0;
}

.code-pill {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: var(--rm-radius-sm);
  background: var(--rm-surface-2);
  border: 1px solid var(--rm-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
}

/* Scoped settings (client, project, task) */
.setting-own {
  margin: 0.5rem 0 0 1.75rem;
}

.setting-own.is-inherited {
  opacity: 0.6;
}

.setting-locked {
  color: var(--rm-muted);
  font-weight: 500;
}

/* ---------------------------------------------------------------------------------------------
 * Projects: budget bars, detail lists, status badges
 * ------------------------------------------------------------------------------------------- */
.budget-list {
  display: grid;
  gap: 1.25rem;
}

.budget-row dt {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--rm-muted);
  margin-bottom: 0.25rem;
}

.budget-row dd {
  margin: 0;
}

.budget-figures {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1.25rem;
  margin-bottom: 0.5rem;
}

.budget-total {
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.budget-bar {
  display: block;
  width: 100%;
  height: 0.5rem;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--rm-surface-2);
  appearance: none;
}

.budget-bar::-webkit-progress-bar {
  background: var(--rm-surface-2);
  border-radius: 999px;
}

.budget-bar::-webkit-progress-value {
  background: var(--rm-primary);
  border-radius: 999px;
}

.budget-bar::-moz-progress-bar {
  background: var(--rm-primary);
  border-radius: 999px;
}

.budget-bar.is-over::-webkit-progress-value {
  background: var(--rm-danger);
}

.budget-bar.is-over::-moz-progress-bar {
  background: var(--rm-danger);
}

.detail-list {
  display: grid;
  grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
  gap: 0.6rem 1rem;
}

.detail-list dt {
  color: var(--rm-muted);
  font-weight: 500;
}

.detail-list dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .detail-list {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem;
  }

  .detail-list dd {
    margin-bottom: 0.6rem;
  }
}

.text-prewrap {
  white-space: pre-wrap;
}

.status-badge {
  font-weight: 600;
}

.table td .code-pill {
  font-size: 0.8rem;
}

/* Visually hidden text inside a scrolling table (e.g. an "Actions" header) is absolutely
   positioned; without a positioned scroll container it escapes it and widens the page on phones
   (WCAG 1.4.10 reflow). */
.table-responsive {
  position: relative;
}

/* ---------------------------------------------------------------------------------------------
 * Timesheet (RM-014): week header, grid, actions, entry editor
 * ------------------------------------------------------------------------------------------- */
.ts-week-label {
  font-size: 1.05rem;
  color: var(--rm-muted);
}

.ts-week-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.ts-week-nav .btn.active {
  background: var(--rm-primary-subtle);
  color: var(--rm-primary-text);
  border-color: var(--rm-primary);
}

.ts-goto .form-control {
  width: auto;
}

.ts-status {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  border-radius: var(--rm-radius);
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-left: 4px solid var(--rm-primary);
}

.ts-status-submitted {
  border-left-color: #b45309;
}

.ts-status-approved,
.ts-status-locked,
.ts-status-exported {
  border-left-color: var(--rm-success);
}

.ts-total strong {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.ts-grid {
  min-width: 44rem;
  font-variant-numeric: tabular-nums;
}

.ts-grid th,
.ts-grid td {
  vertical-align: middle;
}

.ts-line-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--rm-surface);
  min-width: 11rem;
  max-width: 18rem;
  box-shadow: 1px 0 0 var(--rm-border);
}

.ts-grid thead .ts-line-col,
.ts-grid tfoot .ts-line-col {
  background: var(--rm-surface-2);
}

.ts-line-client {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--rm-muted);
}

.ts-line-project {
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.ts-line-task {
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--rm-muted);
}

.ts-day {
  text-align: center;
  min-width: 3.9rem;
}

.ts-day-name {
  display: block;
}

.ts-day-date {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.ts-day.is-today {
  color: var(--rm-primary-text);
  box-shadow: inset 0 -3px 0 var(--rm-primary);
}

.ts-grid .is-weekend {
  background: color-mix(in srgb, var(--rm-surface-2) 70%, transparent);
}

.ts-cell-td {
  text-align: center;
  padding: 0.35rem !important;
}

.ts-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  border-radius: var(--rm-radius-sm);
  border: 1px dashed var(--rm-border-strong);
  color: var(--rm-muted);
  text-decoration: none;
  font-weight: 600;
}

.ts-cell:hover {
  border-color: var(--rm-primary);
  color: var(--rm-primary-text);
  background: var(--rm-primary-subtle);
}

.ts-cell.has-time {
  border-style: solid;
  border-color: transparent;
  background: var(--rm-primary-subtle);
  color: var(--rm-primary-text);
}

.ts-cell.is-current {
  outline: 2px solid var(--rm-primary);
  outline-offset: 1px;
}

.ts-ooh {
  font-size: 0.75rem;
}

.ts-total-col {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

.ts-grid tfoot td,
.ts-grid tfoot th {
  background: var(--rm-surface-2);
  font-weight: 700;
  text-align: center;
}

.ts-grid tfoot .ts-line-col {
  text-align: left;
}

.ts-week-total {
  font-size: 1.05rem;
  color: var(--rm-primary-text);
}

.ts-actions {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  margin-top: 1rem;
}

@media (min-width: 768px) {
  .ts-actions {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

@media (min-width: 1400px) {
  .ts-editor {
    position: sticky;
    top: 5rem;
  }
}

.ts-editor h2:focus {
  outline: none;
}

.ts-editor h2:focus-visible {
  outline: 2px solid var(--rm-primary);
  outline-offset: 2px;
}

.ts-entry-list {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.ts-entry {
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
}

.ts-entry.is-current {
  border-color: var(--rm-primary);
  background: var(--rm-primary-subtle);
}

.ts-entry-main {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.5rem;
  min-width: 0;
}

.ts-entry-comment {
  flex-basis: 100%;
  overflow-wrap: anywhere;
}

.ts-entry-summary {
  flex-basis: 100%;
  font-size: 0.8125rem;
  color: var(--rm-muted);
}

.ts-entry-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Legends styled as labels (Bootstrap sizes a bare legend like a heading). */
legend.form-label {
  font-size: 1rem;
  font-weight: 600;
  float: none;
}

.ts-treatment {
  padding: 0.75rem;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  background: var(--rm-surface-2);
}

.ts-summary {
  margin: 0.75rem 0 0;
  font-weight: 600;
  color: var(--rm-text);
}

.ts-hours {
  max-width: 10rem;
  font-size: 1.15rem;
  font-weight: 600;
}

/* Dashboard: this week's timesheet */
.week-card .card-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

.week-card-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1 1 16rem;
}

.week-card-stats {
  display: flex;
  gap: 2rem;
  margin: 0;
}

.week-card-stats dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rm-muted);
}

.week-card-stats dd {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Bootstrap's secondary outline text (#6c757d) is 4.34:1 on the page background, below AA; use the
   muted token (7.1:1 on the page, 7.6:1 on white) and a 3:1 border (WCAG 1.4.3, 1.4.11). */
.btn-outline-secondary {
  --bs-btn-color: var(--rm-muted);
  --bs-btn-border-color: var(--rm-border-strong);
}

/* Likewise Bootstrap's danger outline (#dc3545) is 4.19:1 on the page background; the danger
   token is 6.5:1. Hover and active keep Bootstrap's filled red with white text. */
.btn-outline-danger {
  --bs-btn-color: var(--rm-danger);
  --bs-btn-border-color: var(--rm-danger);
}

/* Timesheet: several days at once, and typing hours into the grid (RM-015) */
.ts-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  min-height: 2rem;
}

.ts-quick {
  width: 3.5rem;
  min-height: 2.75rem;
  margin: 0 auto;
  padding: 0.25rem;
  text-align: center;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ts-cell.is-locked {
  cursor: default;
}

.ts-day-picks {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0.35rem;
}

.ts-day-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.35rem 0;
  min-height: 2.75rem;
  line-height: 1.15;
}

.ts-day-pick-name {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.ts-day-pick-date {
  font-size: 1rem;
  font-weight: 700;
}

.ts-day-shortcuts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.ts-day-shortcuts .btn-link {
  padding-left: 0;
  padding-right: 0.75rem;
}

/* Approvals and history (RM-016) */
.approvals-select {
  width: 2.75rem;
}

.approvals-table .badge {
  font-weight: 600;
}

.approval-totals {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
}

.approval-totals dt {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--rm-muted);
}

.approval-totals dd {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.approval-entries {
  border-top: 0;
}

.approval-entry {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: 0.5rem 1.25rem;
  padding: 0.85rem 1.25rem;
  border-top: 1px solid var(--rm-border);
}

.approval-entry:first-child {
  border-top: 0;
}

.approval-entry.needs-look {
  box-shadow: inset 3px 0 0 #b45309;
}

.approval-entry-when {
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
}

.approval-entry-what p:first-child {
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .approval-entry {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 1200px) {
  .approval-decision {
    position: sticky;
    top: 5rem;
  }
}

.timeline {
  display: grid;
  gap: 0.85rem;
}

.timeline-item {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: 0.5rem;
}

.timeline-item > .bi {
  color: var(--rm-muted);
  font-size: 1.1rem;
}

.timeline-approved > .bi {
  color: var(--rm-success);
}

.timeline-rejected > .bi,
.timeline-reopened > .bi {
  color: #b45309;
}

.history-list {
  display: grid;
  gap: 0.75rem;
}

.history-week {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem 1rem;
  align-items: center;
}

.history-week-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.history-week-hours {
  font-size: 1.25rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.history-week-timeline {
  grid-column: 1 / -1;
}

.history-week-timeline summary {
  color: var(--rm-primary-text);
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

/* Timesheet day panel (RM-017) */
.ts-grid input.ts-quick.is-locked {
  background-color: var(--rm-surface-2);
  cursor: default;
}

.ts-dp-entries {
  display: grid;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.ts-dp-entry {
  padding: 0.75rem;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
}

.ts-dp-entries .ts-dp-entry:only-child {
  padding: 0;
  border: 0;
}

.ts-dp-entry.is-invalid {
  border-color: var(--rm-danger);
}

.ts-dp-entries .ts-dp-entry:only-child.is-invalid textarea {
  border-color: var(--rm-danger);
}

.ts-dp-entry-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.5rem;
}

.ts-dp-entry-head:has(h3[hidden]) {
  justify-content: flex-end;
  margin-bottom: 0;
}

.ts-dp-copy summary {
  color: var(--rm-primary-text);
  font-weight: 600;
  cursor: pointer;
}

.ts-cell-td {
  position: relative;
}

.ts-ooh-mark {
  position: absolute;
  bottom: 0.55rem;
  right: calc(50% - 1.6rem);
  font-size: 0.7rem;
  color: var(--rm-primary-text);
  pointer-events: none;
}

.ts-grid input.ts-quick.is-current {
  border-color: var(--rm-primary);
  box-shadow: 0 0 0 2px var(--rm-primary-subtle);
}

.ts-grid input.ts-quick.is-dirty {
  background-image: radial-gradient(circle at calc(100% - 6px) 6px, #b45309 3px, transparent 3.5px);
}

.ts-grid input.ts-quick.is-invalid {
  border-color: var(--rm-danger);
  background-image: radial-gradient(circle at calc(100% - 6px) 6px, var(--rm-danger) 3px, transparent 3.5px);
}

.ts-dp-hours strong {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
  margin-left: 0.35rem;
}

.ts-savebar {
  margin-top: 1rem;
}

.ts-another-hint {
  padding: 0.6rem 0.75rem;
  border-radius: var(--rm-radius-sm);
  background: var(--rm-primary-subtle);
  color: var(--rm-primary-text);
  font-size: 0.9rem;
}

/* People (RM-020) */
.people-invite {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 1rem;
  padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--rm-border);
}

.people-invite:first-child {
  border-top: 0;
}

.people-checks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.25rem 1.5rem;
}

/* Working time on the timesheet (RM-021) */
.ts-day-holiday {
  display: block;
  font-size: 0.75rem;
  color: #b45309;
}

.ts-holidays {
  font-size: 0.875rem;
  color: var(--rm-muted);
}

/* Working time admin (RM-021) */
.wt-days {
  display: grid;
  grid-template-columns: repeat(7, minmax(4.25rem, 1fr));
  gap: 0.5rem;
}

@media (max-width: 575.98px) {
  .wt-days {
    grid-template-columns: repeat(4, 1fr);
  }
}

.wt-holidays li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}

.wt-holiday-date {
  min-width: 6.5rem;
  font-variant-numeric: tabular-nums;
  color: var(--rm-muted);
}

/* Leave balances (RM-022) */
.leave-remaining {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.leave-remaining-value {
  margin: 0;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--rm-primary-text);
  font-variant-numeric: tabular-nums;
}

.leave-remaining-value.is-negative {
  color: var(--bs-danger-text-emphasis);
}

.leave-breakdown > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
}

.leave-breakdown dt {
  font-weight: 600;
}

.leave-breakdown dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.leave-table td {
  font-variant-numeric: tabular-nums;
}

/* Leave requests and the team calendar (RM-023) */
.leave-status-pending {
  background: #fff4d6;
  color: #7a4a00;
}

.leave-status-approved {
  background: #dcf5e6;
  color: #135c33;
}

.leave-status-declined {
  background: #fde2e1;
  color: #8a1c17;
}

.leave-status-cancelled {
  background: var(--rm-surface-2);
  color: var(--rm-muted);
}

.leave-requests li,
.leave-history li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--bs-border-color);
}

.leave-history li {
  display: block;
}

.leave-requests li:last-child,
.leave-history li:last-child {
  border-bottom: 0;
}

.leave-calendar th,
.leave-calendar td {
  text-align: center;
  vertical-align: middle;
  min-width: 2rem;
  padding: 0.35rem 0.15rem;
  font-size: 0.8125rem;
}

.leave-calendar .leave-cal-name {
  text-align: left;
  min-width: 10rem;
  padding-left: 1rem;
  position: sticky;
  left: 0;
  background: var(--bs-body-bg);
  z-index: 1;
}

.leave-calendar abbr {
  text-decoration: none;
  cursor: default;
}

.leave-cal-day.is-weekend,
.leave-cal-day.is-holiday,
.leave-cal-cell.is-off,
.leave-cal-swatch.is-off {
  background: var(--rm-surface-2);
}

.leave-cal-cell.has-leave,
.leave-cal-swatch.has-leave {
  background: var(--rm-primary-subtle);
  color: var(--rm-primary-text);
  font-weight: 700;
}

.leave-cal-cell.is-pending,
.leave-cal-swatch.is-pending {
  background: #fff4d6;
  color: #7a4a00;
}

.leave-cal-swatch {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  border: 1px solid var(--bs-border-color);
  vertical-align: middle;
}

/* Sickness (RM-024) */
.leave-private {
  padding: 0.75rem 1rem;
  border-radius: var(--rm-radius);
  background: var(--rm-surface-2);
  color: var(--rm-muted);
  font-size: 0.875rem;
}

.leave-private-fields {
  padding: 1rem;
  margin-bottom: 1rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: var(--rm-radius);
}

.leave-cal-cell.is-absent,
.leave-cal-swatch.is-absent {
  background: #fde2e1;
  color: #8a1c17;
}

.text-pre-wrap {
  white-space: pre-wrap;
}

/* One-to-ones (RM-025) */
.review-agenda li {
  padding: 0.25rem 0;
}

.review-actions li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}

.review-actions li:last-child {
  border-bottom: 0;
}

/* Policies (RM-026) */
.policy-steps {
  padding-left: 1.25rem;
}

.policy-steps li {
  padding: 0.25rem 0 0.75rem;
}

/* Billing (RM-028) */
.billing-figure,
.billing-table td {
  font-variant-numeric: tabular-nums;
}

/* Exports (RM-029) */
.export-pos {
  width: 7rem;
}

/* Export columns in order by dragging (RM-053) */
.export-columns.is-enhanced .export-pos {
  display: none;
}

.export-grip {
  display: inline-block;
  padding: 0.25rem 0.375rem;
  cursor: grab;
  touch-action: none;
  color: var(--bs-secondary-color);
}

.export-columns tr.is-dragging {
  outline: 2px solid var(--bs-primary);
  outline-offset: -2px;
  background-color: var(--bs-tertiary-bg);
}

.export-columns tr.is-dragging .export-grip {
  cursor: grabbing;
}

/* What each export column holds (RM-056): shown under the name without JavaScript; with it, a
   popup from the ⓘ that stays while the pointer is over it (WCAG 1.4.13). */
.export-explain {
  max-width: 34rem;
  margin-top: 0.125rem;
}

.js .export-columns .export-explain {
  display: none;
}

.js .export-columns .export-explain.is-open {
  display: block;
  position: fixed;
  z-index: 1080;
  max-width: min(22rem, calc(100vw - 2rem));
  margin: 0;
  padding: 0.5rem 0.75rem;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  box-shadow: var(--bs-box-shadow);
  font-size: 0.875rem;
}

/* Resourcing (RM-030) */
.resource-grid th,
.resource-grid td {
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

.resource-grid .resource-name {
  min-width: 11rem;
  position: sticky;
  left: 0;
  background: var(--bs-body-bg);
  z-index: 1;
}

.resource-cell {
  padding: 0.25rem;
  text-align: center;
  min-width: 5.5rem;
}

.resource-cell a {
  display: block;
  padding: 0.4rem 0.25rem;
  border-radius: 0.375rem;
  color: inherit;
  text-decoration: none;
  min-height: 2.75rem;
}

.resource-cell a:hover,
.resource-cell a:focus-visible {
  outline: 2px solid var(--rm-primary);
  outline-offset: -2px;
}

.resource-cell.is-part a,
.resource-swatch.is-part {
  background: var(--rm-primary-subtle);
}

.resource-cell.is-full a,
.resource-swatch.is-full {
  background: #c9c6f6;
}

.resource-cell.is-over a,
.resource-swatch.is-over {
  background: #fde2e1;
  color: #8a1c17;
}

.resource-hours {
  display: block;
  font-weight: 600;
}

.resource-cap {
  font-weight: 400;
  color: var(--rm-muted);
}

.resource-tentative,
.resource-over {
  display: block;
  font-size: 0.75rem;
}

.resource-tentative-cell {
  background-image: repeating-linear-gradient(135deg, transparent, transparent 6px, rgba(122, 74, 0, 0.08) 6px, rgba(122, 74, 0, 0.08) 12px);
}

.resource-swatch {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  border-radius: 0.25rem;
  vertical-align: middle;
  border: 1px solid var(--bs-border-color);
}

/* Drafts from bookings (RM-031) */
.ts-drafts {
  border-left: 4px solid var(--rm-primary);
}

.ts-drafts .draft-hours {
  width: 5.5rem;
}

/* The week day by day (RM-067): the day down the left, its rows in one set of columns. */
.ts-days {
  min-width: 46rem;
}

.ts-days td,
.ts-days th {
  vertical-align: middle;
}

.ts-days .ts-days-day {
  width: 9rem;
  vertical-align: top;
  background-color: var(--bs-tertiary-bg);
  border-right: 1px solid var(--bs-border-color);
}

.ts-days tbody.ts-days-group {
  border-top: 2px solid var(--bs-border-color);
}

.ts-days .ts-days-name {
  display: block;
  font-weight: 600;
}

.ts-days .ts-days-recorded {
  display: block;
  font-size: 0.875rem;
  color: var(--bs-secondary-color);
}

.ts-days .ts-days-hours {
  width: 7rem;
}

.ts-days .ts-days-actions {
  width: 1%;
  white-space: nowrap;
}

.ts-days .ts-days-actions form {
  display: inline-block;
  margin-left: 0.25rem;
}

/* Reports (RM-032) */
.report-table td,
.report-table thead th {
  white-space: nowrap;
}

/* Client comments (RM-035) */
.cc-list {
  display: grid;
  gap: 0.75rem;
}

.cc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1rem;
}

.cc-original {
  padding: 0.5rem 0.75rem;
  border-radius: var(--bs-border-radius);
  background: var(--bs-tertiary-bg);
}

/* Report filters (RM-034) */
.report-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
}

.report-filters .form-select {
  max-width: 18rem;
}

/* Call-off balances (RM-033) */
.calloff-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem 1.5rem;
  margin-bottom: 1rem;
}

.calloff-figures dt {
  font-weight: 400;
  color: var(--rm-muted);
  font-size: 0.875rem;
}

.calloff-figures dd {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

/* ---------------------------------------------------------------------------------------------
 * Resourcing calendar (RM-037)
 * ------------------------------------------------------------------------------------------- */

.rc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.rc-range {
  font-weight: 600;
  margin-left: 0.25rem;
}

.rc {
  overflow: hidden;
}

.rc-scroll {
  overflow-x: auto;
}

.rc-row {
  display: grid;
  grid-template-rows: 1.875rem 1.25rem;
  border-bottom: 1px solid var(--rm-border);
  position: relative;
}

.rc-head {
  grid-template-rows: auto;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--rm-surface);
}

.rc-name {
  grid-column: 1;
  grid-row: 1 / -1;
  position: sticky;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  background: var(--rm-surface);
  border-right: 1px solid var(--rm-border);
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rc-head .rc-name {
  color: var(--rm-muted);
  font-size: 0.8125rem;
  font-weight: 500;
}

.rc-day {
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0.25rem 0 0.375rem;
  font-size: 0.75rem;
  line-height: 1.15;
  color: var(--rm-muted);
  border-left: 1px solid var(--rm-border);
  min-width: 0;
  overflow: hidden;
}

.rc-month {
  font-weight: 700;
  color: var(--rm-text);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.rc-dom {
  font-weight: 600;
  color: var(--rm-text);
}

.rc-day.is-today .rc-dom {
  color: #fff;
  background: var(--rm-primary);
  border-radius: 999px;
  padding: 0 0.35rem;
}

[data-bs-theme='dark'] .rc-day.is-today .rc-dom {
  color: #111827;
}

.rc-span-12 .rc-day {
  overflow: visible;
  align-items: flex-start;
  padding-left: 0.25rem;
}

.rc-week-label {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  font-weight: 600;
  color: var(--rm-text);
}

.rc-cell {
  grid-row: 1 / -1;
  border-left: 1px solid var(--rm-border);
  min-width: 0;
}

.rc-day.is-weekend,
.rc-cell.is-weekend {
  background: var(--rm-surface-2);
}

.rc-cell.is-today {
  background: rgba(var(--rm-primary-rgb), 0.07);
}

.rc-cell.is-off {
  background: repeating-linear-gradient(135deg, transparent 0 6px, rgba(127, 127, 127, 0.12) 6px 8px);
}

[data-manage='1'] .rc-cell {
  cursor: crosshair;
}

.rc-select {
  grid-row: 1 / -1;
  z-index: 1;
  margin: 2px 1px;
  border: 2px dashed var(--rm-primary);
  border-radius: var(--rm-radius-sm);
  background: rgba(var(--rm-primary-rgb), 0.12);
  pointer-events: none;
}

.rc-bar {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 3px 1px;
  padding: 0 0.4rem;
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: var(--rm-radius-sm);
  font-size: 0.75rem;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

button.rc-bar {
  cursor: grab;
}

.rc-bar:focus-visible {
  outline: 3px solid var(--rm-primary);
  outline-offset: 1px;
  z-index: 2;
}

.rc-bar-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* RM-092 (K13): leave and sickness on the calendar: neutral, hatched, never dragged. */
.rc-absence {
  color: var(--bs-body-color);
  background-color: var(--bs-secondary-bg);
  background-image: repeating-linear-gradient(45deg, transparent 0 6px, rgba(var(--bs-body-color-rgb), 0.06) 6px 10px);
  border-color: var(--bs-border-color);
  border-left-color: var(--bs-secondary-color);
  cursor: default;
}

a.rc-absence {
  cursor: pointer;
}

a.rc-absence:hover {
  text-decoration: underline;
}

.rc-absence.is-sick {
  border-left-color: var(--bs-danger-text-emphasis);
}

.rc-bar.is-tentative {
  border-style: dashed;
  border-left-style: solid;
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(255, 255, 255, 0.55) 6px 10px);
}

[data-bs-theme='dark'] .rc-bar.is-tentative {
  background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0, 0, 0, 0.35) 6px 10px);
}

.rc-bar.is-cut-left {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.rc-bar.is-cut-right {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.rc-bar.is-dragging {
  z-index: 4;
  cursor: grabbing;
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.25);
  opacity: 0.92;
}

.rc-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.5rem;
  cursor: ew-resize;
}

.rc-handle-start {
  left: -4px;
}

.rc-handle-end {
  right: 0;
}

.rc-handle::after {
  content: '';
  position: absolute;
  top: 25%;
  bottom: 25%;
  left: 40%;
  width: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0;
}

.rc-bar:hover .rc-handle::after,
.rc-bar:focus-visible .rc-handle::after {
  opacity: 0.5;
}

.rc-span-12 .rc-bar {
  padding: 0 0.15rem;
  font-size: 0.6875rem;
}

.rc-total {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.125rem;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  color: var(--rm-muted);
  pointer-events: none;
}

.rc-total.is-full {
  color: var(--rm-success);
  font-weight: 600;
}

.rc-total.is-over {
  color: var(--rm-danger);
  font-weight: 700;
}

.rc-swatch {
  display: inline-block;
  width: 1.5rem;
  height: 0.75rem;
  vertical-align: middle;
  border-radius: 3px;
  border: 1px dashed #2563eb;
  border-left: 4px solid #2563eb;
  background: #dbeafe repeating-linear-gradient(135deg, transparent 0 4px, rgba(255, 255, 255, 0.6) 4px 7px);
}

/* RM-092: the key's swatch for leave and sickness, as the bars. */
.rc-swatch.rc-absence {
  border: 1px solid var(--bs-border-color);
  border-left: 4px solid var(--bs-secondary-color);
  background: var(--bs-secondary-bg) repeating-linear-gradient(45deg, transparent 0 4px, rgba(var(--bs-body-color-rgb), 0.08) 4px 7px);
}

.rc-tip {
  position: absolute;
  z-index: 1080;
  max-width: 20rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
  background: var(--rm-surface);
  color: var(--rm-text);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.18);
  font-size: 0.8125rem;
  line-height: 1.35;
}

.rc-tip-client {
  color: var(--rm-muted);
  font-size: 0.75rem;
}

.rc-tip-project {
  font-weight: 600;
}

.rc-tip-when {
  margin-top: 0.25rem;
}

.rc-tip-status {
  color: var(--rm-warning-text);
  font-weight: 600;
}

[data-bs-theme='dark'] .rc-tip-status {
  color: #fbbf24;
}

.rc-tip-note {
  margin-top: 0.25rem;
  color: var(--rm-muted);
  font-style: italic;
}

.rc-dialog {
  width: min(32rem, calc(100vw - 2rem));
  padding: 1.25rem;
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius);
  background: var(--rm-surface);
  color: var(--rm-text);
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.25);
}

.rc-dialog::backdrop {
  background: rgba(15, 23, 42, 0.35);
}

.rc-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 0.25rem;
}

.rc-c-0 {
  background-color: #dbeafe;
  border-color: #2563eb;
  color: #1e3a8a;
}

[data-bs-theme='dark'] .rc-c-0 {
  background-color: #172554;
  border-color: #60a5fa;
  color: #dbeafe;
}

.rc-c-1 {
  background-color: #dcfce7;
  border-color: #16a34a;
  color: #14532d;
}

[data-bs-theme='dark'] .rc-c-1 {
  background-color: #052e16;
  border-color: #4ade80;
  color: #dcfce7;
}

.rc-c-2 {
  background-color: #fef3c7;
  border-color: #d97706;
  color: #78350f;
}

[data-bs-theme='dark'] .rc-c-2 {
  background-color: #451a03;
  border-color: #fbbf24;
  color: #fef3c7;
}

.rc-c-3 {
  background-color: #ede9fe;
  border-color: #7c3aed;
  color: #4c1d95;
}

[data-bs-theme='dark'] .rc-c-3 {
  background-color: #2e1065;
  border-color: #a78bfa;
  color: #ede9fe;
}

.rc-c-4 {
  background-color: #fce7f3;
  border-color: #db2777;
  color: #831843;
}

[data-bs-theme='dark'] .rc-c-4 {
  background-color: #500724;
  border-color: #f472b6;
  color: #fce7f3;
}

.rc-c-5 {
  background-color: #ccfbf1;
  border-color: #0d9488;
  color: #134e4a;
}

[data-bs-theme='dark'] .rc-c-5 {
  background-color: #042f2e;
  border-color: #2dd4bf;
  color: #ccfbf1;
}

.rc-c-6 {
  background-color: #ffedd5;
  border-color: #ea580c;
  color: #7c2d12;
}

[data-bs-theme='dark'] .rc-c-6 {
  background-color: #431407;
  border-color: #fb923c;
  color: #ffedd5;
}

.rc-c-7 {
  background-color: #e2e8f0;
  border-color: #475569;
  color: #0f172a;
}

[data-bs-theme='dark'] .rc-c-7 {
  background-color: #1e293b;
  border-color: #94a3b8;
  color: #e2e8f0;
}

/* Columns: the name, then one per day (classes, because inline styles are not allowed). */

.rc-span-1.rc-from-monday .rc-row {
  grid-template-columns: var(--rc-name, 11rem) repeat(1, minmax(7rem, 1fr) minmax(7rem, 1fr) minmax(7rem, 1fr) minmax(7rem, 1fr) minmax(7rem, 1fr) minmax(3.5rem, 0.5fr) minmax(3.5rem, 0.5fr));
}

.rc-span-1.rc-from-sunday .rc-row {
  grid-template-columns: var(--rc-name, 11rem) repeat(1, minmax(3.5rem, 0.5fr) minmax(7rem, 1fr) minmax(7rem, 1fr) minmax(7rem, 1fr) minmax(7rem, 1fr) minmax(7rem, 1fr) minmax(3.5rem, 0.5fr));
}

.rc-span-1.rc-from-saturday .rc-row {
  grid-template-columns: var(--rc-name, 11rem) repeat(1, minmax(3.5rem, 0.5fr) minmax(3.5rem, 0.5fr) minmax(7rem, 1fr) minmax(7rem, 1fr) minmax(7rem, 1fr) minmax(7rem, 1fr) minmax(7rem, 1fr));
}

.rc-span-4.rc-from-monday .rc-row {
  grid-template-columns: var(--rc-name, 11rem) repeat(4, minmax(2.6rem, 1fr) minmax(2.6rem, 1fr) minmax(2.6rem, 1fr) minmax(2.6rem, 1fr) minmax(2.6rem, 1fr) minmax(1.4rem, 0.5fr) minmax(1.4rem, 0.5fr));
}

.rc-span-4.rc-from-sunday .rc-row {
  grid-template-columns: var(--rc-name, 11rem) repeat(4, minmax(1.4rem, 0.5fr) minmax(2.6rem, 1fr) minmax(2.6rem, 1fr) minmax(2.6rem, 1fr) minmax(2.6rem, 1fr) minmax(2.6rem, 1fr) minmax(1.4rem, 0.5fr));
}

.rc-span-4.rc-from-saturday .rc-row {
  grid-template-columns: var(--rc-name, 11rem) repeat(4, minmax(1.4rem, 0.5fr) minmax(1.4rem, 0.5fr) minmax(2.6rem, 1fr) minmax(2.6rem, 1fr) minmax(2.6rem, 1fr) minmax(2.6rem, 1fr) minmax(2.6rem, 1fr));
}

.rc-span-12.rc-from-monday .rc-row {
  grid-template-columns: var(--rc-name, 11rem) repeat(12, minmax(0.9rem, 1fr) minmax(0.9rem, 1fr) minmax(0.9rem, 1fr) minmax(0.9rem, 1fr) minmax(0.9rem, 1fr) minmax(0.5rem, 0.5fr) minmax(0.5rem, 0.5fr));
}

.rc-span-12.rc-from-sunday .rc-row {
  grid-template-columns: var(--rc-name, 11rem) repeat(12, minmax(0.5rem, 0.5fr) minmax(0.9rem, 1fr) minmax(0.9rem, 1fr) minmax(0.9rem, 1fr) minmax(0.9rem, 1fr) minmax(0.9rem, 1fr) minmax(0.5rem, 0.5fr));
}

.rc-span-12.rc-from-saturday .rc-row {
  grid-template-columns: var(--rc-name, 11rem) repeat(12, minmax(0.5rem, 0.5fr) minmax(0.5rem, 0.5fr) minmax(0.9rem, 1fr) minmax(0.9rem, 1fr) minmax(0.9rem, 1fr) minmax(0.9rem, 1fr) minmax(0.9rem, 1fr));
}

.rc-cs-2 { grid-column-start: 2; }

.rc-cs-3 { grid-column-start: 3; }

.rc-cs-4 { grid-column-start: 4; }

.rc-cs-5 { grid-column-start: 5; }

.rc-cs-6 { grid-column-start: 6; }

.rc-cs-7 { grid-column-start: 7; }

.rc-cs-8 { grid-column-start: 8; }

.rc-cs-9 { grid-column-start: 9; }

.rc-cs-10 { grid-column-start: 10; }

.rc-cs-11 { grid-column-start: 11; }

.rc-cs-12 { grid-column-start: 12; }

.rc-cs-13 { grid-column-start: 13; }

.rc-cs-14 { grid-column-start: 14; }

.rc-cs-15 { grid-column-start: 15; }

.rc-cs-16 { grid-column-start: 16; }

.rc-cs-17 { grid-column-start: 17; }

.rc-cs-18 { grid-column-start: 18; }

.rc-cs-19 { grid-column-start: 19; }

.rc-cs-20 { grid-column-start: 20; }

.rc-cs-21 { grid-column-start: 21; }

.rc-cs-22 { grid-column-start: 22; }

.rc-cs-23 { grid-column-start: 23; }

.rc-cs-24 { grid-column-start: 24; }

.rc-cs-25 { grid-column-start: 25; }

.rc-cs-26 { grid-column-start: 26; }

.rc-cs-27 { grid-column-start: 27; }

.rc-cs-28 { grid-column-start: 28; }

.rc-cs-29 { grid-column-start: 29; }

.rc-cs-30 { grid-column-start: 30; }

.rc-cs-31 { grid-column-start: 31; }

.rc-cs-32 { grid-column-start: 32; }

.rc-cs-33 { grid-column-start: 33; }

.rc-cs-34 { grid-column-start: 34; }

.rc-cs-35 { grid-column-start: 35; }

.rc-cs-36 { grid-column-start: 36; }

.rc-cs-37 { grid-column-start: 37; }

.rc-cs-38 { grid-column-start: 38; }

.rc-cs-39 { grid-column-start: 39; }

.rc-cs-40 { grid-column-start: 40; }

.rc-cs-41 { grid-column-start: 41; }

.rc-cs-42 { grid-column-start: 42; }

.rc-cs-43 { grid-column-start: 43; }

.rc-cs-44 { grid-column-start: 44; }

.rc-cs-45 { grid-column-start: 45; }

.rc-cs-46 { grid-column-start: 46; }

.rc-cs-47 { grid-column-start: 47; }

.rc-cs-48 { grid-column-start: 48; }

.rc-cs-49 { grid-column-start: 49; }

.rc-cs-50 { grid-column-start: 50; }

.rc-cs-51 { grid-column-start: 51; }

.rc-cs-52 { grid-column-start: 52; }

.rc-cs-53 { grid-column-start: 53; }

.rc-cs-54 { grid-column-start: 54; }

.rc-cs-55 { grid-column-start: 55; }

.rc-cs-56 { grid-column-start: 56; }

.rc-cs-57 { grid-column-start: 57; }

.rc-cs-58 { grid-column-start: 58; }

.rc-cs-59 { grid-column-start: 59; }

.rc-cs-60 { grid-column-start: 60; }

.rc-cs-61 { grid-column-start: 61; }

.rc-cs-62 { grid-column-start: 62; }

.rc-cs-63 { grid-column-start: 63; }

.rc-cs-64 { grid-column-start: 64; }

.rc-cs-65 { grid-column-start: 65; }

.rc-cs-66 { grid-column-start: 66; }

.rc-cs-67 { grid-column-start: 67; }

.rc-cs-68 { grid-column-start: 68; }

.rc-cs-69 { grid-column-start: 69; }

.rc-cs-70 { grid-column-start: 70; }

.rc-cs-71 { grid-column-start: 71; }

.rc-cs-72 { grid-column-start: 72; }

.rc-cs-73 { grid-column-start: 73; }

.rc-cs-74 { grid-column-start: 74; }

.rc-cs-75 { grid-column-start: 75; }

.rc-cs-76 { grid-column-start: 76; }

.rc-cs-77 { grid-column-start: 77; }

.rc-cs-78 { grid-column-start: 78; }

.rc-cs-79 { grid-column-start: 79; }

.rc-cs-80 { grid-column-start: 80; }

.rc-cs-81 { grid-column-start: 81; }

.rc-cs-82 { grid-column-start: 82; }

.rc-cs-83 { grid-column-start: 83; }

.rc-cs-84 { grid-column-start: 84; }

.rc-cs-85 { grid-column-start: 85; }

.rc-ce-3 { grid-column-end: 3; }

.rc-ce-4 { grid-column-end: 4; }

.rc-ce-5 { grid-column-end: 5; }

.rc-ce-6 { grid-column-end: 6; }

.rc-ce-7 { grid-column-end: 7; }

.rc-ce-8 { grid-column-end: 8; }

.rc-ce-9 { grid-column-end: 9; }

.rc-ce-10 { grid-column-end: 10; }

.rc-ce-11 { grid-column-end: 11; }

.rc-ce-12 { grid-column-end: 12; }

.rc-ce-13 { grid-column-end: 13; }

.rc-ce-14 { grid-column-end: 14; }

.rc-ce-15 { grid-column-end: 15; }

.rc-ce-16 { grid-column-end: 16; }

.rc-ce-17 { grid-column-end: 17; }

.rc-ce-18 { grid-column-end: 18; }

.rc-ce-19 { grid-column-end: 19; }

.rc-ce-20 { grid-column-end: 20; }

.rc-ce-21 { grid-column-end: 21; }

.rc-ce-22 { grid-column-end: 22; }

.rc-ce-23 { grid-column-end: 23; }

.rc-ce-24 { grid-column-end: 24; }

.rc-ce-25 { grid-column-end: 25; }

.rc-ce-26 { grid-column-end: 26; }

.rc-ce-27 { grid-column-end: 27; }

.rc-ce-28 { grid-column-end: 28; }

.rc-ce-29 { grid-column-end: 29; }

.rc-ce-30 { grid-column-end: 30; }

.rc-ce-31 { grid-column-end: 31; }

.rc-ce-32 { grid-column-end: 32; }

.rc-ce-33 { grid-column-end: 33; }

.rc-ce-34 { grid-column-end: 34; }

.rc-ce-35 { grid-column-end: 35; }

.rc-ce-36 { grid-column-end: 36; }

.rc-ce-37 { grid-column-end: 37; }

.rc-ce-38 { grid-column-end: 38; }

.rc-ce-39 { grid-column-end: 39; }

.rc-ce-40 { grid-column-end: 40; }

.rc-ce-41 { grid-column-end: 41; }

.rc-ce-42 { grid-column-end: 42; }

.rc-ce-43 { grid-column-end: 43; }

.rc-ce-44 { grid-column-end: 44; }

.rc-ce-45 { grid-column-end: 45; }

.rc-ce-46 { grid-column-end: 46; }

.rc-ce-47 { grid-column-end: 47; }

.rc-ce-48 { grid-column-end: 48; }

.rc-ce-49 { grid-column-end: 49; }

.rc-ce-50 { grid-column-end: 50; }

.rc-ce-51 { grid-column-end: 51; }

.rc-ce-52 { grid-column-end: 52; }

.rc-ce-53 { grid-column-end: 53; }

.rc-ce-54 { grid-column-end: 54; }

.rc-ce-55 { grid-column-end: 55; }

.rc-ce-56 { grid-column-end: 56; }

.rc-ce-57 { grid-column-end: 57; }

.rc-ce-58 { grid-column-end: 58; }

.rc-ce-59 { grid-column-end: 59; }

.rc-ce-60 { grid-column-end: 60; }

.rc-ce-61 { grid-column-end: 61; }

.rc-ce-62 { grid-column-end: 62; }

.rc-ce-63 { grid-column-end: 63; }

.rc-ce-64 { grid-column-end: 64; }

.rc-ce-65 { grid-column-end: 65; }

.rc-ce-66 { grid-column-end: 66; }

.rc-ce-67 { grid-column-end: 67; }

.rc-ce-68 { grid-column-end: 68; }

.rc-ce-69 { grid-column-end: 69; }

.rc-ce-70 { grid-column-end: 70; }

.rc-ce-71 { grid-column-end: 71; }

.rc-ce-72 { grid-column-end: 72; }

.rc-ce-73 { grid-column-end: 73; }

.rc-ce-74 { grid-column-end: 74; }

.rc-ce-75 { grid-column-end: 75; }

.rc-ce-76 { grid-column-end: 76; }

.rc-ce-77 { grid-column-end: 77; }

.rc-ce-78 { grid-column-end: 78; }

.rc-ce-79 { grid-column-end: 79; }

.rc-ce-80 { grid-column-end: 80; }

.rc-ce-81 { grid-column-end: 81; }

.rc-ce-82 { grid-column-end: 82; }

.rc-ce-83 { grid-column-end: 83; }

.rc-ce-84 { grid-column-end: 84; }

.rc-ce-85 { grid-column-end: 85; }

.rc-ce-86 { grid-column-end: 86; }

.rc-r-1 { grid-row-start: 1; }

.rc-r-2 { grid-row-start: 2; }

.rc-r-3 { grid-row-start: 3; }

.rc-r-4 { grid-row-start: 4; }

.rc-r-5 { grid-row-start: 5; }

.rc-r-6 { grid-row-start: 6; }

.rc-r-7 { grid-row-start: 7; }

.rc-r-8 { grid-row-start: 8; }

.rc-r-9 { grid-row-start: 9; }

.rc-r-10 { grid-row-start: 10; }

.rc-r-11 { grid-row-start: 11; }

.rc-r-12 { grid-row-start: 12; }

.rc-r-13 { grid-row-start: 13; }

.rc-lanes-1 { grid-template-rows: repeat(1, 1.875rem) 1.25rem; }

.rc-lanes-2 { grid-template-rows: repeat(2, 1.875rem) 1.25rem; }

.rc-lanes-3 { grid-template-rows: repeat(3, 1.875rem) 1.25rem; }

.rc-lanes-4 { grid-template-rows: repeat(4, 1.875rem) 1.25rem; }

.rc-lanes-5 { grid-template-rows: repeat(5, 1.875rem) 1.25rem; }

.rc-lanes-6 { grid-template-rows: repeat(6, 1.875rem) 1.25rem; }

.rc-lanes-7 { grid-template-rows: repeat(7, 1.875rem) 1.25rem; }

.rc-lanes-8 { grid-template-rows: repeat(8, 1.875rem) 1.25rem; }

.rc-lanes-9 { grid-template-rows: repeat(9, 1.875rem) 1.25rem; }

.rc-lanes-10 { grid-template-rows: repeat(10, 1.875rem) 1.25rem; }

.rc-lanes-11 { grid-template-rows: repeat(11, 1.875rem) 1.25rem; }

.rc-lanes-12 { grid-template-rows: repeat(12, 1.875rem) 1.25rem; }

@media (max-width: 575.98px) {
  .rc {
    --rc-name: 7.5rem;
  }

  .rc-name {
    font-size: 0.8125rem;
  }
}

/* Booked time in the timesheet grid (RM-038). Recorded and booked are told apart by more than
   colour: booked time has a dashed edge, an hourglass and words for screen readers. */
.ts-cell-td.is-recorded .ts-quick,
.ts-cell-td.is-recorded .ts-cell.has-time {
  background-color: #ecfdf5;
  border-color: #6ee7b7;
}

[data-bs-theme='dark'] .ts-cell-td.is-recorded .ts-quick,
[data-bs-theme='dark'] .ts-cell-td.is-recorded .ts-cell.has-time {
  background-color: #052e1f;
  border-color: #047857;
}

.ts-cell-td.is-booked {
  background-image: linear-gradient(#fffbeb, #fffbeb);
  background-clip: content-box;
}

.ts-cell-td.is-booked:not(.is-recorded) .ts-quick,
.ts-cell-td.is-booked:not(.is-recorded) .ts-cell {
  border-style: dashed;
  border-color: #d97706;
}

[data-bs-theme='dark'] .ts-cell-td.is-booked {
  background-image: linear-gradient(#2a1a03, #2a1a03);
}

.ts-booked {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  margin-top: 0.25rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--rm-warning-text);
}

[data-bs-theme='dark'] .ts-booked {
  color: #fbbf24;
}

.ts-booked-row .ts-line-client {
  color: var(--rm-warning-text);
}

/* RM-094 (L15): leave and sickness lines on the timesheet, read-only and hatched like the calendar. */
.ts-leave-row td,
.ts-leave-row th {
  background-color: var(--bs-secondary-bg);
}

.ts-leave-cell {
  display: block;
  padding: 0.35rem 0;
  text-align: center;
  color: var(--bs-secondary-color);
  font-style: italic;
  cursor: default;
}

.ts-swatch {
  display: inline-block;
  width: 1.25rem;
  height: 0.75rem;
  vertical-align: middle;
  border-radius: 3px;
  border: 1px solid #6ee7b7;
  background: #ecfdf5;
}

.ts-swatch.is-booked {
  border: 1px dashed #d97706;
  background: #fffbeb;
}

.ts-draft-retry {
  background: #fff7ed;
  border-left: 3px solid var(--rm-danger);
}

.ts-draft-retry .invalid-feedback {
  color: #991b1b; /* 7.6:1 on the row's #fff7ed */
}

[data-bs-theme='dark'] .ts-draft-retry .invalid-feedback {
  color: #fca5a5;
}

[data-bs-theme='dark'] .ts-draft-retry {
  background: #2a1203;
}

/* Who is away today on the home page (RM-039): one compact line, never a list to scroll. */
.today-card .card-body {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.today-heading {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
}

.today-away {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1 1 auto;
}

.today-away li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.today-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--rm-primary-subtle);
  color: var(--rm-primary-text);
  font-size: 0.6875rem;
  font-weight: 700;
}

.today-link {
  margin-left: auto;
  font-size: 0.875rem;
  white-space: nowrap;
}

/* Two-step sign-in (RM-041) */
.two-step-steps li {
  margin-bottom: 0.75rem;
}

.two-step-qr-wrap {
  margin: 0.75rem 0 0;
}

.two-step-qr {
  display: block;
  width: 12.5rem;
  height: 12.5rem;
  padding: 0.5rem;
  background: #fff; /* a QR code needs a light background in dark mode too */
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-sm);
}

.two-step-key {
  font-size: 0.9375rem;
  letter-spacing: 0.05em;
  word-break: break-all;
}

.two-step-confirm {
  max-width: 20rem;
}

.recovery-codes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.5rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.0625rem;
}

/* Respect reduced motion (WCAG 2.3.3, good practice). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* Sign in with Microsoft (RM-042): "or" between the password form and the Microsoft button */
.sign-in-or {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.25rem 0;
    color: var(--bs-secondary-color);
    font-size: .875rem;
}
.sign-in-or::before,
.sign-in-or::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--bs-border-color);
}

/* Platform administration (RM-043): organisation status, with an icon and text */
.platform-status {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .8125rem;
    font-weight: 600;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}
.platform-status.is-active { background: #dcfce7; color: #14532d; }
.platform-status.is-suspended { background: #fef3c7; color: #78350f; }
.platform-status.is-closed { background: #fee2e2; color: #7f1d1d; }
[data-bs-theme="dark"] .platform-status.is-active { background: #14532d; color: #dcfce7; }
[data-bs-theme="dark"] .platform-status.is-suspended { background: #78350f; color: #fef3c7; }
[data-bs-theme="dark"] .platform-status.is-closed { background: #7f1d1d; color: #fee2e2; }

/* Data imports (RM-044): row outcomes, with an icon and text */
.import-status { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }
.import-status.is-created { color: #166534; }
.import-status.is-skipped { color: var(--bs-secondary-color); }
.import-status.is-error { color: #991b1b; }
[data-bs-theme="dark"] .import-status.is-created { color: #86efac; }
[data-bs-theme="dark"] .import-status.is-error { color: #fca5a5; }
.import-rows { max-height: 28rem; overflow: auto; }

/* The timesheet calendar (RM-045): lines as rows, days as columns, entries as blocks */
.tc-card { overflow: hidden; }
.tc-scroll { overflow-x: auto; }
.tc { width: 100%; min-width: 56rem; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.tc col.tc-col-line, .tc .tc-line-head { width: 13rem; }
.tc-line-head, .tc-day-head { background: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); padding: .5rem .6rem; font-size: .8125rem; text-align: left; vertical-align: top; font-weight: 400; }
.tc-day-head { border-left: 1px solid var(--bs-border-color-translucent); }
.tc-day-head > span { display: block; }
.tc-day-head.is-today { box-shadow: inset 0 3px 0 var(--bs-primary); }
.tc-dow { font-weight: 700; }
.tc-date { color: var(--bs-secondary-color); }
.tc-day-total { font-variant-numeric: tabular-nums; font-weight: 600; }
.tc-off { font-size: .75rem; color: var(--bs-secondary-color); }
.tc-line-name { padding: .55rem .6rem; border-bottom: 1px solid var(--bs-border-color-translucent); text-align: left; vertical-align: top; font-weight: 400; }
.tc-line-name > span { display: block; }
.tc-project { font-weight: 600; overflow-wrap: anywhere; }
.tc-task { font-size: .8125rem; color: var(--bs-secondary-color); }
.tc-cell { padding: .3rem; height: 4.5rem; vertical-align: top; border-left: 1px solid var(--bs-border-color-translucent); border-bottom: 1px solid var(--bs-border-color-translucent); touch-action: pan-y; user-select: none; }
.tc-stack { display: flex; flex-direction: column; gap: .25rem; height: 100%; }
.tc-cell.is-weekend, .tc-day-head.is-weekend { background: var(--bs-secondary-bg); }
.tc-cell.is-off { background-image: repeating-linear-gradient(135deg, transparent 0 6px, var(--bs-border-color-translucent) 6px 7px); }
.tc-cell.is-selected { background: var(--bs-primary-bg-subtle); outline: 2px dashed var(--bs-primary); outline-offset: -3px; }
.tc-cell.is-target { outline: 2px solid var(--bs-primary); outline-offset: -3px; }
.tc-entry { position: relative; display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: 100%; padding: .3rem 1rem .3rem .45rem; border: 1px solid #86c39b; border-left: 4px solid #198754; border-radius: .4rem; background: #e8f5ec; color: #0f3d22; font-size: .8125rem; cursor: grab; touch-action: none; }
.tc-entry:focus-visible { outline: 3px solid var(--bs-primary); outline-offset: 2px; }
.tc-entry:disabled { cursor: default; opacity: 1; }
.tc-entry.is-timed { border-left-color: #0d6efd; }
.tc-hours { font-weight: 700; font-variant-numeric: tabular-nums; }
.tc-times { font-size: .75rem; }
.tc-comment { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.tc-handle { position: absolute; top: 0; right: 0; bottom: 0; width: .8rem; cursor: ew-resize; border-radius: 0 .4rem .4rem 0; background: linear-gradient(90deg, transparent, rgba(25, 135, 84, .35)); }
.tc-booked { display: inline-flex; align-items: center; gap: .25rem; font-size: .8125rem; color: #7a4a00; background: #fff4d6; border: 1px dashed #c98a00; border-radius: .4rem; padding: .15rem .4rem; }
.tc-add { margin-top: auto; align-self: flex-end; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px dashed var(--bs-border-color); background: transparent; color: var(--bs-secondary-color); display: inline-flex; align-items: center; justify-content: center; }
.tc-add:hover, .tc-add:focus-visible { border-style: solid; color: var(--bs-primary); border-color: var(--bs-primary); }
.tc-hint { padding: .5rem .75rem; border-top: 1px solid var(--bs-border-color-translucent); }
.tc-dialog { border: 0; border-radius: .75rem; padding: 1.25rem; width: min(34rem, calc(100vw - 2rem)); box-shadow: 0 1rem 3rem rgba(0, 0, 0, .25); background: var(--bs-body-bg); color: var(--bs-body-color); }
.tc-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.tc-days { display: flex; flex-wrap: wrap; gap: .25rem .5rem; }
[data-bs-theme="dark"] .tc-entry { background: #12341f; color: #d9f2e1; border-color: #2f7a4b; }
[data-bs-theme="dark"] .tc-booked { background: #3d2c05; color: #ffe2a3; border-color: #c98a00; }
.ts-view-switch .btn { white-space: nowrap; }

/* RM-049: the Administration area's way back, and link lists on the landing and home pages */
.app-area-switch {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .5rem;
    padding: .45rem .75rem;
    border-radius: .5rem;
    color: inherit;
    text-decoration: none;
    font-size: .875rem;
    opacity: .9;
}
.app-area-switch:hover,
.app-area-switch:focus-visible { background: rgba(255, 255, 255, .08); opacity: 1; }
.app-area-title {
    margin: .25rem .75rem .5rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.admin-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    font-weight: 500;
}
.admin-link .bi { color: var(--bs-secondary-color); }

/* RM-050: the set-up guide, a stage bar across the top for whoever sets the organisation up */
.setup-guide {
    margin: -.5rem 0 1.5rem;
    padding: .75rem 1rem 1rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .75rem;
    background: var(--bs-body-bg);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.setup-guide-head { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.setup-guide-title { font-size: 1rem; font-weight: 700; margin: 0; }
.setup-guide-count { font-size: .8125rem; color: var(--bs-secondary-color); }
.setup-guide-hide { text-decoration: none; }
.setup-stages {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    list-style: none;
    margin: .75rem 0;
    padding: 0;
    counter-reset: none;
}
.setup-stage { flex: 1 1 9rem; }
.setup-stage a {
    display: flex;
    align-items: center;
    gap: .5rem;
    height: 100%;
    padding: .45rem .6rem;
    border-radius: .5rem;
    border: 1px solid var(--bs-border-color);
    color: var(--bs-body-color);
    text-decoration: none;
    font-size: .875rem;
    background: var(--bs-tertiary-bg);
}
.setup-stage a:hover { border-color: var(--bs-primary); }
.setup-stage-mark {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    border: 2px solid var(--bs-secondary-color);
    font-size: .75rem;
    font-weight: 700;
}
.setup-stage.is-done .setup-stage-mark { background: #198754; border-color: #198754; color: #fff; }
.setup-stage.is-current a { border: 2px solid var(--bs-primary); background: var(--bs-primary-bg-subtle); font-weight: 600; }
.setup-stage.is-current .setup-stage-mark { border-color: var(--bs-primary); color: var(--bs-primary); }
.setup-optional { font-weight: 400; color: var(--bs-secondary-color); font-size: .75rem; }
.setup-panel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.setup-panel-text { flex: 1 1 22rem; }
.setup-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* ---------------------------------------------------------------------------------------------
 * RM-071: the day and booked-time panels float over the week on wide screens, so the grid keeps
 * its full width; app.js moves a panel to the left when it would cover the day being worked on
 * (WCAG 2.4.11). On narrower screens they sit under the week, as before.
 * ------------------------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .ts-editor.ts-float {
    position: fixed;
    top: 5rem;
    right: 1.25rem;
    left: auto;
    z-index: 1025;
    width: min(28rem, 36vw);
    max-height: calc(100vh - 6.25rem);
    overflow-y: auto;
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.18), 0 2px 6px rgba(16, 24, 40, 0.08);
  }

  /* The day panel stops short of the save bar at the foot of the screen. */
  .ts-panel.ts-float {
    max-height: calc(100vh - 11rem);
  }

  .ts-editor.ts-float.is-left {
    right: auto;
    left: 18rem; /* clear of the sidebar */
  }
}

/* A visually hidden caption sticks out of a scrolling table by a pixel, which gave every grid a
   vertical scroll bar. These boxes only ever scroll sideways. */
.table-responsive,
.tc-scroll {
  overflow-y: hidden;
}

/* RM-096: except boxes that are meant to scroll down, such as a long list of import results. */
.table-responsive.import-rows {
  overflow-y: auto;
}

a.tc-booked { text-decoration: none; }
a.tc-booked:hover { border-style: solid; }
.tc-booked-from { display: block; font-size: .75rem; color: var(--rm-warning-text); }

/* RM-073: the projects list as a tree of clients, projects and tasks. */
.proj-tree { display: grid; gap: .75rem; }
.proj-client { overflow: hidden; }
.proj-client-head { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.1rem; cursor: pointer; list-style: none; }
.proj-client-head::-webkit-details-marker { display: none; }
.proj-client-head:hover { background: var(--bs-tertiary-bg); }
.proj-client-head:focus-visible { outline: 2px solid var(--rm-primary); outline-offset: -2px; }
.proj-client-name { font-weight: 600; font-size: 1.05rem; }
.proj-client[open] > .proj-client-head { border-bottom: 1px solid var(--bs-border-color); }
.proj-chevron { display: inline-block; transition: transform .15s ease; }
.proj-client[open] > .proj-client-head .proj-chevron,
.proj-toggle[aria-expanded="true"] .proj-chevron { transform: rotate(90deg); }
.proj-toggle { padding: 0 .25rem; line-height: 1.5; color: var(--bs-body-color); }
.proj-toggle-space { display: inline-block; width: 1.6rem; flex: 0 0 auto; }
.proj-table > :not(caption) > .proj-tasks > tr > td { background: var(--bs-tertiary-bg); }
.proj-task td:first-child { padding-left: 3.25rem; }
.proj-task.is-closed a { color: var(--bs-secondary-color); }
@media (prefers-reduced-motion: reduce) { .proj-chevron { transition: none; } }

/* RM-075: the booked work in the booked-time panel, a level per row, changed in place. */
.booked-work { display: grid; gap: .35rem; }
.booked-work-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: .5rem; }
.booked-work-label { margin: 0; font-size: .8125rem; color: var(--bs-secondary-color); }
.booked-work-text { text-align: left; border: 1px solid transparent; border-radius: var(--rm-radius-sm, .375rem); background: none; padding: .25rem .5rem; font-weight: 600; color: var(--bs-body-color); overflow-wrap: anywhere; }
.booked-work-text:hover { border-color: var(--bs-border-color); background: var(--bs-tertiary-bg); }
.booked-work-text:focus-visible { outline: 2px solid var(--rm-primary); outline-offset: 1px; }
.booked-work-text .bi { color: var(--bs-secondary-color); font-size: .8em; }