:root {
  --background: #1a1a1a;
  --surface: #232323;
  --surface-raised: #2a2a2a;
  --surface-input: #171719;
  --border: #3a3a3a;
  --text: #e8e7e7;
  --text-strong: #ffffff;
  --text-muted: #a3a3a3;
  --brand: #f37c20;
  --brand-light: #f8b13a;
  --sidebar: #111113;
  --danger: #ffb4aa;
  --danger-surface: #38201e;
  --success: #bdeec7;
  --sidebar-width: 270px;
  --content-width: 1180px;
  color-scheme: dark;
}

html[data-theme="light"] {
  --background: #f8f9fa;
  --surface: #ffffff;
  --surface-raised: #eceef0;
  --surface-input: #f4f5f6;
  --border: #d5d8dc;
  --text: #383c40;
  --text-strong: #171a1d;
  --text-muted: #6b7178;
  --sidebar: #e7e9eb;
  --danger: #a43127;
  --danger-surface: #fff0ee;
  --success: #216e3a;
  color-scheme: light;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--text);
  background: var(--background);
  font-family: "Open Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 8px 12px;
  color: #171717;
  background: var(--brand-light);
  border-radius: 5px;
  transform: translateY(-150%);
}

.skip-link:focus {
  color: #171717;
  transform: translateY(0);
}

a {
  color: var(--brand-light);
}

a:hover {
  color: var(--brand);
}

:is(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--brand-light);
  outline-offset: 3px;
}

.application-main {
  width: min(var(--content-width), calc(100% - var(--sidebar-width)));
  min-width: 0;
  margin-left: var(--sidebar-width);
  padding: 64px 54px 100px;
}

.authentication-shell {
  display: grid;
  place-items: center;
  padding: 28px;
}

.authentication-shell .application-main {
  width: min(100%, 520px);
  margin: 0;
  padding: 34px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.authentication-logo {
  display: block;
  width: min(220px, 70%);
  margin: 0 0 30px;
}

.application-topbar {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 22px;
  pointer-events: none;
}

.topbar-logo,
.menu-toggle {
  display: none;
}

.topbar-logo--light {
  display: none;
}

/* Two marks are rendered and one is hidden per theme. This needs the extra
   class to outrank `.brand-mark { display: block }` further down the file --
   equal specificity would let source order decide, which is how both logos
   came to show at once in dark mode. */
.brand-mark.brand-mark--light {
  display: none;
}

html[data-theme="light"] .topbar-logo--dark {
  display: none;
}

html[data-theme="light"] .brand-mark.brand-mark--dark {
  display: none;
}

html[data-theme="light"] .brand-mark.brand-mark--light {
  display: block;
}

.account-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  pointer-events: auto;
}

.account-name {
  max-width: 260px;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-actions form {
  margin: 0;
}

.signout-button {
  min-height: auto;
  padding: 8px 17px;
  color: var(--text);
  background: rgba(17, 17, 19, 0.9);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.signout-button:hover {
  color: var(--text-strong);
  background: var(--sidebar);
  border-color: var(--brand);
}

.application-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 55;
  display: flex;
  width: var(--sidebar-width);
  height: 100vh;
  flex-direction: column;
  padding: 26px 22px 40px;
  overflow: hidden;
  color: var(--text);
  background: var(--sidebar);
  border-right: 1px solid #000;
}

.brand-link {
  display: block;
  flex: 0 0 auto;
  margin-bottom: 30px;
  text-decoration: none;
}

.navigation-sections {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  scrollbar-width: thin;
}

.navigation-system {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--work-hairline, #2a2a30);
}

.brand-mark {
  display: block;
  width: 150px;
  max-width: 100%;
}

.brand-subtitle {
  display: block;
  margin-top: 7px;
  color: #85858c;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.navigation-section {
  margin: 0 0 22px;
}

.navigation-heading {
  margin: 0 0 7px;
  padding: 0;
  color: var(--brand);
  border: 0;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

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

.navigation-list li {
  margin: 1px 0;
}

.navigation-link {
  display: block;
  padding: 8px 10px;
  color: #d8d8dc;
  border-left: 2px solid transparent;
  border-radius: 4px;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
}

.navigation-link:hover {
  color: var(--text-strong);
  background: rgba(243, 124, 32, 0.08);
}

.navigation-link.active {
  color: var(--text-strong);
  background: rgba(243, 124, 32, 0.14);
  border-left-color: var(--brand);
}

.navigation-overlay {
  display: none;
}

.theme-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  flex: 0 0 auto;
  gap: 5px;
  margin-top: 14px;
  padding-top: 14px;
  background: var(--sidebar);
  border-top: 1px solid var(--border);
}

.theme-switcher-button {
  min-width: 0;
  min-height: 34px;
  padding: 6px 4px;
  overflow: hidden;
  color: var(--text-muted);
  background: var(--surface-input);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
  text-overflow: ellipsis;
  text-transform: uppercase;
}

.theme-switcher-button:hover {
  color: var(--text-strong);
  background: var(--surface-raised);
}

.theme-switcher-button.active {
  color: #171717;
  background: var(--brand-light);
  border-color: var(--brand);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

h1,
h2,
h3 {
  color: var(--text-strong);
  font-family: Poppins, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.3;
}

h1 {
  margin: 0 0 22px;
  padding-bottom: 17px;
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--brand), var(--brand-light) 55%, transparent) 1;
  font-size: clamp(1.8rem, 4vw, 2.35rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

h2 {
  margin: 2.3em 0 0.8em;
  padding-top: 0.7em;
  color: var(--brand-light);
  border-top: 1px solid var(--border);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

h3 {
  margin: 1.7em 0 0.65em;
  font-size: 1.03rem;
}

p,
li {
  color: var(--text);
}

small {
  color: var(--text-muted);
}

strong {
  color: var(--text-strong);
}

hr {
  margin: 2.4em 0;
  border: 0;
  border-top: 1px solid var(--border);
}

blockquote {
  margin: 1.5em 0;
  padding: 1em 1.3em;
  color: var(--text-muted);
  background: var(--surface);
  border-left: 3px solid var(--brand);
  border-radius: 0 7px 7px 0;
}

blockquote p {
  margin: 0;
  color: inherit;
}

table {
  width: 100%;
  margin: 1.5em 0;
  border-collapse: collapse;
  font-size: 0.88rem;
}

th,
td {
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  border: 1px solid var(--border);
}

th {
  color: var(--brand-light);
  background: var(--surface-raised);
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

tbody tr:nth-child(even) td {
  background: #202020;
}

code,
pre {
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

code {
  padding: 0.12em 0.4em;
  color: var(--brand-light);
  background: var(--surface-raised);
  border-radius: 4px;
}

pre {
  padding: 16px 18px;
  overflow-x: auto;
  color: #d6d6d6;
  background: var(--sidebar);
  border: 1px solid var(--border);
  border-radius: 8px;
}

pre code {
  padding: 0;
  color: inherit;
  background: none;
}

.application-main > section {
  margin: 24px 0;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.application-main > section > :first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

button,
input[type="submit"],
.button {
  min-height: 42px;
  padding: 9px 15px;
  color: #171717;
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 7px;
  font: 700 0.78rem Poppins, Inter, sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
}

button:hover,
input[type="submit"]:hover,
.button:hover {
  color: #171717;
  background: var(--brand-light);
}

button:disabled,
input[type="submit"]:disabled {
  color: #929296;
  background: #3a3a3d;
  border-color: #4b4b4f;
  cursor: not-allowed;
  opacity: 0.8;
}

input:not([type="checkbox"], [type="radio"], [type="submit"]),
select,
textarea {
  max-width: 100%;
  min-height: 42px;
  padding: 9px 10px;
  color: var(--text);
  background: var(--surface-input);
  border: 1px solid #4a4a4e;
  border-radius: 6px;
  font: inherit;
}

textarea {
  min-height: 100px;
  resize: vertical;
}

label {
  color: var(--text);
  font-weight: 700;
}

form {
  margin-block: 14px;
}

.flash-messages:empty {
  display: none;
}

.flash-message {
  margin: 0 0 20px;
  padding: 13px 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.flash-message--notice {
  color: var(--success);
  border-color: #356941;
}

.flash-message--alert {
  color: var(--danger);
  background: var(--danger-surface);
  border-color: #8d4039;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--brand-light);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.user-access-list {
  display: grid;
  gap: 16px;
  margin-top: 30px;
}

.user-access-card {
  padding: 21px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.user-access-heading,
.access-form-summary {
  display: flex;
  align-items: center;
  gap: 18px;
}

.user-access-heading {
  justify-content: space-between;
}

.user-access-heading h2 {
  margin: 0;
  padding: 0;
  color: var(--text-strong);
  border: 0;
  font-size: 1.05rem;
  text-transform: none;
}

.user-access-heading p {
  margin: 3px 0 0;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.status-pill {
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.status-pill--active {
  color: var(--success);
  background: #20442a;
}

.status-pill--inactive {
  color: var(--danger);
  background: #542a26;
}

.access-form-summary {
  flex-wrap: wrap;
  align-items: end;
}

.field {
  display: grid;
  gap: 5px;
}

.field--checkbox {
  display: flex;
  align-items: center;
  min-height: 42px;
}

.field-hint {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.employee-link {
  margin: 0 0 8px auto;
  color: var(--text-muted);
  font-size: 0.84rem;
}

.capability-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 14px;
  margin: 18px 0;
  padding: 15px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.capability-grid legend {
  padding-inline: 7px;
  color: var(--brand-light);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.capability-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
}

.inline-notice {
  padding: 11px 13px;
  color: var(--text-muted);
  background: var(--surface-input);
  border-left: 3px solid var(--brand);
  border-radius: 4px;
}

.access-history code {
  display: inline-block;
  max-width: 360px;
  overflow-wrap: anywhere;
  white-space: normal;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.connection-health-grid {
  display: grid;
  gap: 18px;
  margin-top: 30px;
}

.sync-progress-panel {
  border-color: #6c5da0;
  box-shadow: 0 0 0 1px rgba(213, 206, 255, 0.08), 0 18px 44px rgba(0, 0, 0, 0.18);
}

.sync-progress-panel--failed {
  border-color: #8e463f;
}

.sync-progress-panel--succeeded {
  border-color: #39734a;
}

.sync-progress-track {
  height: 9px;
  margin: 20px 0 16px;
  overflow: hidden;
  background: #141416;
  border-radius: 999px;
}

.sync-progress-track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
  border-radius: inherit;
  transition: width 0.25s ease;
}

.sync-progress-resources {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
}

.sync-progress-resource {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  background: var(--surface-input);
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 0.8rem;
}

.connection-health-card {
  min-width: 0;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.connection-health-card--syncing {
  border-color: #6c5da0;
  box-shadow: inset 4px 0 #7669ae;
}

.connection-health-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.connection-health-heading h2 {
  margin: 0;
  padding: 0;
  color: var(--text-strong);
  border: 0;
  font-size: 1.18rem;
  text-transform: none;
}

.status-pill--degraded,
.status-pill--disconnected {
  color: var(--danger);
  background: #542a26;
}

.health-warning,
.health-error {
  margin: 16px 0;
  padding: 12px 14px;
  color: #ffe09c;
  background: #332b19;
  border-left: 3px solid var(--brand-light);
  border-radius: 4px;
}

.health-error {
  color: var(--danger);
  background: var(--danger-surface);
  border-left-color: #b9564c;
}

.health-error summary,
.recent-failures summary {
  font-weight: 800;
  cursor: pointer;
}

.health-error p {
  margin-bottom: 0;
  overflow-wrap: anywhere;
}

.resource-health-table {
  margin-bottom: 16px;
}

.run-status,
.freshness-status {
  display: inline-block;
  margin-right: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.run-status--succeeded,
.freshness-status--fresh {
  color: var(--success);
  background: #20442a;
}

.run-status--running {
  color: #d5ceff;
  background: #373053;
}

.run-status--queued {
  color: #dedede;
  background: #414145;
}

.run-status--synced {
  color: var(--success);
  background: #20442a;
}

.run-status--waiting {
  color: #ffe09c;
  background: #4a3d1c;
}

.run-status--failed,
.freshness-status--stale {
  color: var(--danger);
  background: #542a26;
}

.recent-failures {
  margin: 14px 0;
  color: var(--text-muted);
}

.recent-failures ul {
  margin-bottom: 0;
}

.recent-failures li {
  margin-bottom: 7px;
  color: var(--text-muted);
}

.health-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.health-actions form {
  margin: 0;
}

.secondary-button {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 15px;
  color: var(--text);
  background: transparent;
  border: 1px solid #5b5b60;
  border-radius: 7px;
  font: 700 0.78rem Poppins, Inter, sans-serif;
  text-decoration: none;
}

.secondary-button:hover {
  color: var(--text-strong);
  background: var(--surface-raised);
  border-color: var(--text-muted);
}

.health-action-note {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.sync-health--submitting .connection-health-card {
  opacity: 0.86;
}

.empty-state {
  margin-top: 28px;
  padding: 30px;
  text-align: center;
  background: var(--surface);
  border: 1px dashed #525257;
  border-radius: 10px;
}

.exception-filters {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.exception-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin: 26px 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.exception-summary h2 {
  margin: 0;
  padding: 0;
  color: var(--text-strong);
  border: 0;
  font-size: 1.05rem;
  text-transform: none;
}

.exception-summary-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-left: auto;
}

.repository-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
  margin: 26px 0;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.repository-summary h2 {
  margin: 0;
  padding: 0;
  color: var(--text-strong);
  border: 0;
  font-size: 1.05rem;
  text-transform: none;
}

.repository-summary p:last-of-type {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.repository-summary-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-left: auto;
}

.exception-list {
  display: grid;
  gap: 16px;
}

.exception-card {
  min-width: 0;
  padding: 21px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 10px;
}

.exception-card--critical {
  border-left-color: #d65e55;
}

.exception-card--warning {
  border-left-color: var(--brand-light);
}

.exception-card--info {
  border-left-color: #7672bd;
}

.exception-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.exception-heading h2 {
  margin: 0;
  padding: 0;
  color: var(--text-strong);
  border: 0;
  font-size: 1.08rem;
  text-transform: none;
}

.severity-pill--critical {
  color: var(--danger);
  background: #542a26;
}

.severity-pill--warning {
  color: #ffe09c;
  background: #514016;
}

.severity-pill--info {
  color: #d5ceff;
  background: #373053;
}

.exception-metadata,
.exception-details dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin: 17px 0;
}

.exception-metadata div,
.exception-details dl div {
  min-width: 0;
}

.exception-metadata dt,
.exception-details dt {
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.exception-metadata dd,
.exception-details dd {
  margin: 2px 0 0;
  overflow-wrap: anywhere;
}

.exception-details {
  margin: 14px 0;
}

.exception-details summary {
  color: var(--text-muted);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}

.exception-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 18px;
  padding-top: 17px;
  border-top: 1px solid var(--border);
}

.exception-note-field {
  grid-column: 1 / -1;
}

.exception-form > input[type="submit"] {
  justify-self: start;
}

.handbook-main {
  --content-width: 1320px;
}

.handbook-hero {
  max-width: 860px;
  margin-bottom: 30px;
}

.handbook-hero h1 {
  margin: 5px 0 8px;
}

.handbook-hero > p:last-child {
  margin: 0;
  color: var(--text-muted);
}

.handbook-reader-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 24px;
  align-items: start;
}

.handbook-reader {
  min-width: 0;
  padding: 26px 30px 42px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.handbook-document-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}

.handbook-document-meta {
  margin: 4px 0 0;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.handbook-document {
  max-width: 880px;
}

.handbook-document > :first-child {
  margin-top: 0;
}

.handbook-document h1 {
  margin-top: 0;
}

.handbook-document img {
  max-width: 100%;
}

.handbook-role-navigation {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 105px);
  padding: 20px;
  overflow-y: auto;
  background: rgba(35, 35, 35, 0.78);
  border: 1px solid rgba(105, 105, 110, 0.5);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.handbook-navigation-heading {
  padding: 2px 2px 17px;
  border-bottom: 1px solid var(--border);
}

.handbook-navigation-heading h2 {
  margin: 0;
  padding: 0;
  color: var(--text-strong);
  border: 0;
  font-size: 1.12rem;
  text-transform: none;
}

.handbook-navigation-heading > p:last-child {
  margin: 6px 0 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}

.handbook-role-list {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.handbook-role-group {
  padding: 13px;
  background: rgba(18, 18, 20, 0.48);
  border: 1px solid var(--border);
  border-radius: 9px;
}

.handbook-role-group--assigned {
  background: rgba(243, 124, 32, 0.08);
  border-color: rgba(243, 124, 32, 0.72);
}

.handbook-role-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.handbook-role-heading h3 {
  margin: 0;
  color: var(--text-strong);
  font-size: 0.88rem;
}

.handbook-role-heading span {
  padding: 3px 7px;
  color: #171717;
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
  border-radius: 999px;
  font: 800 0.58rem Poppins, Inter, sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.handbook-role-group nav {
  display: grid;
  gap: 3px;
}

.handbook-document-link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px;
  color: var(--text-muted);
  border-left: 2px solid transparent;
  border-radius: 5px;
  font-size: 0.78rem;
  line-height: 1.35;
  text-decoration: none;
}

.handbook-document-link:hover {
  color: var(--text-strong);
  background: rgba(243, 124, 32, 0.08);
}

.handbook-document-link.active {
  color: var(--text-strong);
  background: rgba(243, 124, 32, 0.14);
  border-left-color: var(--brand);
}

.handbook-document-link small {
  flex: 0 0 auto;
  font-size: 0.64rem;
}

.mapping-suggestion {
  margin-bottom: 0.5em;
  padding: 0.75em;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.mapping-suggestion--mismatch {
  background: var(--danger-surface);
  border-color: #b9564c;
  border-width: 2px;
}

.mapping-suggestion__warning,
.mapped-link__warning,
.manual-link__warning {
  color: var(--danger);
  font-weight: bold;
}

.mapping-suggestion__warning {
  margin: 0 0 0.25em;
}

.mapped-links {
  width: 100%;
  border-collapse: collapse;
}

.mapped-link__external-id {
  color: var(--text-muted);
  font-size: 0.85em;
}

.mapped-link--mismatch {
  background: var(--danger-surface);
}

.mapped-links__note {
  color: var(--text-muted);
  font-size: 0.9em;
}

.dashboard-hero {
  max-width: 760px;
  margin-bottom: 38px;
}

.dashboard-hero h1 {
  margin: 12px 0 8px;
}

.dashboard-hero > p:last-child {
  margin: 0;
  color: var(--text-muted);
  font-size: 1.03rem;
}

.application-main > .dashboard-home > .dashboard-section {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.dashboard-section-heading {
  margin-bottom: 16px;
}

.dashboard-section-heading h2 {
  margin: 0;
  padding: 0;
  color: var(--text-strong);
  border: 0;
  font-size: 1.3rem;
}

.dashboard-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}

.dashboard-card {
  display: flex;
  min-height: 220px;
  flex-direction: column;
  padding: 22px;
  color: var(--text);
  background: linear-gradient(145deg, var(--surface-raised), var(--surface));
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 160ms ease, transform 160ms ease, box-shadow 160ms ease;
}

.dashboard-card:hover {
  color: var(--text);
  border-color: var(--brand);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

.dashboard-card--featured {
  border-color: rgba(243, 124, 32, 0.6);
  background:
    linear-gradient(145deg, rgba(243, 124, 32, 0.12), transparent 58%),
    var(--surface);
}

.dashboard-card-kicker {
  color: var(--brand-light);
  font: 700 0.7rem Poppins, Inter, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dashboard-card h3 {
  margin: 10px 0 8px;
  color: var(--text-strong);
  font-size: 1.1rem;
}

.dashboard-card p {
  margin: 0 0 22px;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.dashboard-card-action {
  margin-top: auto;
  color: var(--brand-light);
  font: 700 0.78rem Poppins, Inter, sans-serif;
}

/* Card-based time-off workspace, carried over from the techteam experience. */
.time-off-main {
  --content-width: 1240px;
}

.time-off-app {
  line-height: 1.5;
}

.time-off-hero,
.time-off-section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.time-off-hero {
  margin-bottom: 34px;
}

.time-off-hero h1 {
  margin: 6px 0 7px;
  padding: 0;
  border: 0;
}

.time-off-hero > div > p:last-child {
  max-width: 680px;
  margin: 0;
  color: var(--text-muted);
}

.time-off-badge {
  display: inline-block;
  margin: 0;
  padding: 7px 18px;
  color: #171717;
  background: var(--brand);
  border-radius: 999px;
  font: 800 0.72rem Poppins, Inter, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.time-off-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 15px;
  color: #171717;
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: 7px;
  font: 700 0.78rem Poppins, Inter, sans-serif;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
}

.time-off-button:hover {
  color: #171717;
  background: var(--brand-light);
}

.time-off-button--secondary {
  color: var(--text);
  background: transparent;
  border-color: #5b5b60;
}

.time-off-button--secondary:hover {
  color: var(--text-strong);
  background: var(--surface-raised);
  border-color: var(--text-muted);
}

.time-off-button--new {
  gap: 8px;
  color: var(--brand);
  background: transparent;
  border-color: var(--brand);
  border-width: 2px;
}

.time-off-button--new:hover {
  color: #171717;
  background: linear-gradient(90deg, var(--brand), var(--brand-light));
  border-color: var(--brand-light);
}

.time-off-button-icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.time-off-button--danger {
  color: var(--danger);
  background: transparent;
  border-color: #8d4039;
}

.time-off-button--danger:hover {
  color: var(--text-strong);
  background: #5a2723;
  border-color: #b9564c;
}

.application-main > .time-off-app > .time-off-section {
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.time-off-section + .time-off-section {
  margin-top: 42px !important;
  padding-top: 34px !important;
  border-top: 1px solid var(--border) !important;
}

.time-off-section-heading {
  align-items: center;
  margin-bottom: 16px;
}

.time-off-section-heading h2 {
  margin: 0;
  padding: 0;
  color: var(--text-strong);
  border: 0;
  font-size: 1.3rem;
}

.time-off-eyebrow {
  margin: 0 0 3px;
  color: var(--brand-light);
  font: 700 0.7rem Poppins, Inter, sans-serif;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.time-off-balance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.time-off-balance-card {
  padding: 18px;
  background: linear-gradient(145deg, #2c2c2f, #212123);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.time-off-balance-card p {
  margin: 0;
}

.time-off-balance-type {
  color: var(--brand-light);
  font: 700 0.78rem Poppins, Inter, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.time-off-balance-value {
  margin-top: 12px !important;
  color: var(--text-strong);
  font: 800 1.8rem Poppins, Inter, sans-serif;
}

.time-off-balance-label {
  color: var(--text-muted);
  font-size: 0.78rem;
}

.time-off-balance-details {
  display: flex;
  gap: 28px;
  margin: 16px 0 0;
  padding-top: 11px;
  border-top: 1px solid var(--border);
}

.time-off-balance-details dt {
  color: var(--text-muted);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.time-off-balance-details dd {
  margin: 2px 0 0;
  color: var(--text-strong);
  font-weight: 700;
}

.time-off-request-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 14px;
}

.time-off-request-card {
  min-width: 0;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.time-off-card-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.time-off-card-heading h3 {
  margin: 0;
  font: 700 1rem Poppins, Inter, sans-serif;
}

.time-off-card-heading h3 a {
  color: var(--text-strong);
  text-decoration: none;
}

.time-off-card-heading h3 a:hover {
  color: var(--brand-light);
}

.time-off-card-meta,
.time-off-card-detail {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.time-off-card-meta {
  margin: 8px 0;
}

.time-off-state {
  display: inline-block;
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  font: 700 0.68rem Poppins, Inter, sans-serif;
  white-space: nowrap;
}

.time-off-state--pending,
.time-off-state--cancellation_requested {
  color: #ffe09c;
  background: #514016;
}

.time-off-state--approved {
  color: var(--success);
  background: #20442a;
}

.time-off-state--rejected,
.time-off-state--cancelled {
  color: var(--danger);
  background: #542a26;
}

.time-off-state--withdrawn {
  color: #d0d0d0;
  background: #444;
}

.time-off-calendar-note {
  color: #ffe09c;
  font-size: 0.88rem;
}

.time-off-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.time-off-actions form {
  margin: 0;
}

.time-off-actions .time-off-button {
  min-height: 36px;
  padding: 7px 11px;
  font-size: 0.7rem;
}

.time-off-empty {
  margin: 0;
  padding: 16px;
  color: var(--text-muted);
  border: 1px dashed #47474b;
  border-radius: 8px;
}

.time-off-empty p {
  margin-top: 0;
}

.time-off-ledger > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  list-style: none;
}

.time-off-ledger > summary::-webkit-details-marker {
  display: none;
}

.time-off-ledger > summary strong {
  display: block;
  font: 700 1rem Poppins, Inter, sans-serif;
}

.time-off-ledger-toggle {
  color: var(--brand-light);
  font-size: 0.78rem;
  font-weight: 700;
}

.time-off-ledger[open] .time-off-ledger-toggle {
  font-size: 0;
}

.time-off-ledger[open] .time-off-ledger-toggle::after {
  content: "Hide activity";
  font-size: 0.78rem;
}

.time-off-ledger-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.time-off-ledger-entry {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 18px;
  background: var(--surface-input);
  border: 1px solid var(--border);
  border-radius: 8px;
}

.time-off-ledger-entry p {
  margin: 0;
}

.time-off-ledger-reason {
  color: var(--text-strong);
  font-weight: 700;
}

.time-off-ledger-change {
  color: var(--danger);
  font: 800 1rem Poppins, Inter, sans-serif;
  white-space: nowrap;
}

.time-off-ledger-change--positive {
  color: var(--success);
}

.time-off-ledger-change span {
  color: var(--text-muted);
  font-size: 0.7rem;
  font-weight: 600;
}

html[data-theme="light"] .application-sidebar {
  border-right-color: #cdd1d5;
  box-shadow: 8px 0 28px rgba(31, 39, 47, 0.05);
}

html[data-theme="light"] .brand-subtitle,
html[data-theme="light"] .navigation-link {
  color: var(--text-muted);
}

html[data-theme="light"] .navigation-link:hover,
html[data-theme="light"] .navigation-link.active {
  color: var(--text-strong);
}

html[data-theme="light"] .signout-button {
  color: var(--text);
  background: rgba(255, 255, 255, 0.92);
}

html[data-theme="light"] tbody tr:nth-child(even) td {
  background: #f5f6f7;
}

html[data-theme="light"] pre {
  color: #edf0f2;
  background: #24272a;
  border-color: #3c4248;
}

html[data-theme="light"] button:disabled,
html[data-theme="light"] input[type="submit"]:disabled {
  color: #7b8289;
  background: #e3e5e7;
  border-color: #cdd1d5;
}

html[data-theme="light"] input:not([type="checkbox"], [type="radio"], [type="submit"]),
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  border-color: #b8bec4;
}

html[data-theme="light"] .status-pill--active,
html[data-theme="light"] .run-status--succeeded,
html[data-theme="light"] .run-status--synced,
html[data-theme="light"] .freshness-status--fresh,
html[data-theme="light"] .time-off-state--approved {
  color: #195e31;
  background: #dff2e4;
}

html[data-theme="light"] .status-pill--inactive,
html[data-theme="light"] .status-pill--degraded,
html[data-theme="light"] .status-pill--disconnected,
html[data-theme="light"] .run-status--failed,
html[data-theme="light"] .freshness-status--stale,
html[data-theme="light"] .severity-pill--critical,
html[data-theme="light"] .time-off-state--rejected,
html[data-theme="light"] .time-off-state--cancelled {
  color: #982c23;
  background: #f9dfdc;
}

html[data-theme="light"] .run-status--running,
html[data-theme="light"] .severity-pill--info {
  color: #50458d;
  background: #e9e5fa;
}

html[data-theme="light"] .run-status--queued,
html[data-theme="light"] .time-off-state--withdrawn {
  color: #596068;
  background: #e5e7e9;
}

html[data-theme="light"] .run-status--waiting,
html[data-theme="light"] .severity-pill--warning,
html[data-theme="light"] .time-off-state--pending,
html[data-theme="light"] .time-off-state--cancellation_requested {
  color: #785b12;
  background: #faedc5;
}

html[data-theme="light"] .health-warning,
html[data-theme="light"] .time-off-calendar-note {
  color: #725411;
}

html[data-theme="light"] .health-warning {
  background: #fff4d6;
}

html[data-theme="light"] .sync-progress-track {
  background: #dde0e3;
}

html[data-theme="light"] .handbook-role-navigation {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(174, 181, 188, 0.7);
  box-shadow: 0 18px 50px rgba(31, 39, 47, 0.1);
}

html[data-theme="light"] .handbook-role-group {
  background: rgba(242, 244, 246, 0.82);
}

html[data-theme="light"] .time-off-balance-card {
  background: linear-gradient(145deg, #ffffff, #eceef0);
}

html[data-theme="light"] .secondary-button {
  border-color: #a9b0b7;
}

html[data-theme="light"] .empty-state,
html[data-theme="light"] .time-off-empty {
  border-color: #aab1b8;
}

@media (max-width: 1100px) {
  .handbook-reader-layout {
    grid-template-columns: 1fr;
  }

  .handbook-role-navigation {
    position: static;
    order: -1;
    max-height: none;
  }

  .handbook-role-list {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

@media (max-width: 900px) {
  .application-topbar {
    left: 0;
    height: 58px;
    padding: 8px 14px;
    background: var(--sidebar);
    border-bottom: 1px solid #000;
    pointer-events: auto;
  }

  html[data-theme="light"] .application-topbar {
    border-bottom-color: #cdd1d5;
  }

  .menu-toggle {
    display: flex;
    width: 42px;
    height: 42px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px;
    background: transparent;
    border: 0;
  }

  .menu-toggle:hover {
    background: rgba(243, 124, 32, 0.1);
  }

  .menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text);
    border-radius: 2px;
  }

  .topbar-logo {
    display: block;
    width: 84px;
    height: auto;
  }

  .topbar-logo--light {
    display: none;
  }

  html[data-theme="light"] .topbar-logo--dark {
    display: none;
  }

  html[data-theme="light"] .topbar-logo--light {
    display: block;
  }

  .account-actions {
    min-width: 0;
    margin-left: auto;
  }

  .account-name {
    display: none;
  }

  .application-sidebar {
    top: 58px;
    width: min(300px, 85vw);
    height: calc(100vh - 58px);
    transform: translateX(-105%);
    transition: transform 0.25s ease;
  }

  .application-sidebar .brand-link {
    display: none;
  }

  .navigation-open .application-sidebar {
    transform: translateX(0);
  }

  .navigation-overlay {
    position: fixed;
    inset: 58px 0 0;
    z-index: 50;
    width: auto;
    height: auto;
    padding: 0;
    background: rgba(0, 0, 0, 0.6);
    border: 0;
    border-radius: 0;
  }

  .navigation-overlay:hover {
    background: rgba(0, 0, 0, 0.6);
  }

  .navigation-open .navigation-overlay {
    display: block;
  }

  .application-main {
    width: 100%;
    margin-left: 0;
    padding: 88px 22px 80px;
  }

  table {
    display: block;
    overflow-x: auto;
  }

  .time-off-hero,
  .time-off-section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .time-off-section-heading > .time-off-button {
    align-self: flex-start;
  }
}

@media (max-width: 560px) {
  .signout-button {
    padding-inline: 12px;
  }

  .application-main {
    padding-inline: 16px;
  }

  .application-main > section {
    padding: 17px;
  }

  h1 {
    font-size: 1.65rem;
  }

  .user-access-heading,
  .access-form-summary {
    align-items: stretch;
    flex-direction: column;
  }

  .employee-link {
    margin-left: 0;
  }

  .exception-filters,
  .exception-form {
    display: grid;
    grid-template-columns: 1fr;
  }

  .time-off-card-heading,
  .time-off-ledger > summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .time-off-ledger-entry {
    gap: 8px;
    flex-direction: column;
  }

  .handbook-reader {
    padding: 20px;
  }

  .handbook-document-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Submenu under a section item, shown only while that section is current.
   Indented against a rule so the hierarchy reads without another heading. */
.navigation-sublist {
  list-style: none;
  margin: 4px 0 0;
  padding: 0 0 0 12px;
  border-left: 1px solid var(--work-hairline, #2a2a30);
}

.navigation-sublink {
  display: block;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.86rem;
  color: #a9a9b2;
  text-decoration: none;
}

.navigation-sublink:hover {
  color: #f2f2f5;
}

.navigation-sublink.active {
  color: #f2f2f5;
  font-weight: 600;
}