/* Jay Group Portal — shared layout. Load portal-tokens.css before this file (_portal_styles_core.html). */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* Content media: avoid overflow on small viewports (scoped to replaced elements) */
img,
video {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

body {
  margin: 0;
  font-family: var(--jp-font-sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--jp-text);
  background: var(--jp-navy-800);
}

a {
  color: var(--jp-blue);
}

a:hover {
  color: var(--jp-blue-hover);
}

/* ----- Login ----- */

.jp-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: radial-gradient(120% 100% at 50% 0%, #132a52 0%, var(--jp-navy-900) 45%, var(--jp-navy-950) 100%);
}

.jp-login-card {
  width: 100%;
  max-width: 400px;
  background: var(--jp-surface);
  border-radius: var(--jp-radius-lg);
  padding: 40px 36px 32px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--jp-shadow-lg);
  text-align: center;
}

.jp-login-logo {
  width: 180px;
  height: auto;
  margin: 0 auto 24px;
  display: block;
}

.jp-login-title {
  margin: 0 0 8px;
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--jp-text);
}

.jp-login-sub {
  margin: 0 0 24px;
  font-size: 0.875rem;
  color: var(--jp-text-muted);
}

.jp-login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
}

.jp-input {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #cfd6e0;
  border-radius: var(--jp-radius-sm);
  font-size: 0.9375rem;
  font-family: inherit;
  background: var(--jp-surface-subtle);
  color: var(--jp-text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.jp-input:focus {
  outline: none;
  border-color: var(--jp-blue);
  box-shadow: 0 0 0 3px rgba(47, 101, 217, 0.18);
  background: var(--jp-surface);
}

.jp-password-hints,
.um-password-hints {
  list-style: none;
  margin: -4px 0 2px;
  padding: 0;
  display: grid;
  gap: 4px;
  font-size: 0.78rem;
  line-height: 1.3;
}

.jp-password-hints li,
.um-password-hints li {
  color: rgba(180, 35, 24, 0.92);
}

.jp-password-hints li::before,
.um-password-hints li::before {
  content: "x ";
  font-weight: 700;
}

.jp-password-hints li.is-valid,
.um-password-hints li.is-valid {
  color: rgba(31, 139, 76, 0.98);
}

.jp-password-hints li.is-valid::before,
.um-password-hints li.is-valid::before {
  content: "✓ ";
}

/* User Management polish: keep controls visually level and tidy */
.um-enterprise .um-field input,
.um-enterprise .um-field select,
.um-enterprise .um-btn,
.um-enterprise .um-btn--sm {
  min-height: 38px;
  height: 38px;
  box-sizing: border-box;
}

.um-enterprise .um-password-hints {
  margin: 6px 0 0;
  gap: 3px;
  font-size: 0.76rem;
}

.um-enterprise .um-password-hints li {
  line-height: 1.2;
}

.um-enterprise .um-password-hints.is-hidden {
  display: none;
}

.um-enterprise .um-password-hints-row {
  margin-top: -2px;
  min-height: 0;
}

.um-enterprise .um-password-hints-row .um-password-hints {
  margin-top: 0;
}

.um-password-popover-wrap {
  position: relative;
  width: 100%;
  min-height: 0;
}

.um-password-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 6;
  width: 260px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(121, 167, 255, 0.35);
  background: rgba(8, 24, 56, 0.96);
  box-shadow: 0 8px 24px rgba(2, 8, 23, 0.35);
}

.um-enterprise .um-form--add-user input[name="password"]:hover,
.um-enterprise .um-form--add-user input[name="password"]:focus {
  border-color: rgba(121, 167, 255, 0.65);
  box-shadow: 0 0 0 3px rgba(47, 101, 217, 0.2);
}

.um-enterprise .um-form--add-user .um-form-grid,
.um-enterprise .um-form--reset-password .um-form-grid {
  align-items: start;
}

.um-enterprise .um-form--reset-password .um-field--actions.um-field--full {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

@media (max-width: 900px) {
  .um-enterprise .um-form--add-user .um-form-grid,
  .um-enterprise .um-form--reset-password .um-form-grid {
    grid-template-columns: 1fr;
  }
}

.jp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 16px;
  border: none;
  border-radius: var(--jp-radius-sm);
  font-size: 1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  background: var(--jp-blue);
  color: #fff;
  transition: background 0.15s ease;
}

.jp-btn:hover {
  background: var(--jp-blue-hover);
}

.jp-login-footer {
  margin-top: 18px;
  font-size: 0.75rem;
  color: var(--jp-text-muted);
}

.jp-error {
  color: #b00020;
  margin-bottom: 14px;
  font-size: 0.875rem;
  text-align: center;
}

/* ----- App shell (dashboard, admin) ----- */

.jp-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--jp-navy-800) 0%, #0a1628 100%);
  position: relative;
  overflow: hidden;
}

.jp-app:not(.jp-app--documents)::before,
.jp-app:not(.jp-app--documents)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.jp-app:not(.jp-app--documents)::before {
  background:
    radial-gradient(900px 420px at 15% 10%, rgba(47, 101, 217, 0.25) 0%, rgba(47, 101, 217, 0) 55%),
    radial-gradient(650px 380px at 85% 25%, rgba(139, 92, 246, 0.18) 0%, rgba(139, 92, 246, 0) 60%);
}

.jp-app:not(.jp-app--documents)::after {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0) 35%),
    radial-gradient(600px 260px at 70% 95%, rgba(8, 145, 178, 0.16) 0%, rgba(8, 145, 178, 0) 60%);
  opacity: 0.75;
}

.jp-header,
.jp-main {
  position: relative;
  z-index: 1;
}

/* Documents (and similar): dark top bar, light content area */
.jp-app.jp-app--documents {
  background: #f3f6fb;
}

.jp-app.jp-app--documents > .page {
  flex: 1;
  width: 100%;
}

.jp-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 16px 24px;
  background: var(--jp-navy-900);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
}

.jp-header-brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jp-header-title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: #fff;
}

.jp-header-sub {
  margin: 0;
  font-size: 0.8125rem;
  color: rgba(214, 226, 255, 0.85);
}

.jp-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.jp-user-pill {
  font-size: 0.8125rem;
  color: rgba(214, 226, 255, 0.95);
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.jp-user-pill strong {
  font-weight: 600;
  color: #fff;
}

.jp-link-quiet {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: var(--jp-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.jp-link-quiet:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.jp-link-quiet.jp-header-logout-link,
.jp-link-quiet.jp-header-logout-link:visited {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

.jp-link-quiet.jp-header-logout-link:hover,
.jp-link-quiet.jp-header-logout-link:active,
.jp-link-quiet.jp-header-logout-link:focus-visible {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

/* Touch devices can keep a sticky :hover; pin it to normal state there. */
@media (hover: none), (pointer: coarse) {
  .jp-link-quiet.jp-header-logout-link:hover {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.92) !important;
  }
}

/* Portal header (shared) */
.jp-header--portal {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 12px 20px; /* smaller than default header */
}

.jp-header-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: start;
  width: 100%;
  position: relative;
  isolation: isolate;
}

.jp-header-left,
.jp-header-right {
  min-width: 0;
}

.jp-header-center {
  display: grid;
  justify-items: center;
  gap: 4px; /* bring logo closer to nav */
  min-width: 0; /* allow grid shrink without horizontal page overflow */
  position: relative;
  z-index: 1;
}

.jp-header-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px; /* keep wide target, reduce height */
  border-radius: 18px;
  border: 1px solid transparent; /* keep layout stable */
  background: transparent;
  box-shadow: none;
  text-decoration: none;
}

.jp-header-logo:hover {
  background: transparent;
  border-color: transparent;
}

.jp-header-logo img {
  display: block;
  height: 48px;
  width: auto;
}

.jp-header-logo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(47, 101, 217, 0.28);
}

.jp-header-nav {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.jp-header-nav a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-weight: 750;
  font-size: 0.84rem;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
}

.jp-header-nav a:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
  color: #fff;
}

.jp-header-nav a.active {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.20);
  color: #fff;
}

/* Pin auth actions to top-right corner */
.jp-header-right {
  justify-self: end;
  align-self: start;
  position: relative;
  z-index: 3;
}

.jp-header-right .jp-header-actions {
  justify-content: flex-end;
}

.jp-main {
  flex: 1;
  padding: var(--jp-page-pad);
  max-width: min(var(--jp-page-max), 100%);
  width: 100%;
  margin: 0 auto;
  min-width: 0; /* flex child: prevents wide content from forcing page overflow */
}

.jp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.jp-grid.jp-grid--dash {
  max-width: 980px;
}

.jp-tile {
  --jp-tile-accent: var(--jp-blue);
  --jp-tile-accent-soft: rgba(47, 101, 217, 0.12);
  --jp-tile-accent-border: rgba(47, 101, 217, 0.25);

  background: rgba(255, 255, 255, 0.96);
  border-radius: 12px;
  padding: 16px 16px;
  box-shadow: 0 10px 26px rgba(5, 13, 28, 0.10);
  border: 1px solid rgba(15, 23, 42, 0.08);
  text-align: left;
  font-weight: 650;
  font-size: 1rem;
  color: var(--jp-text);
  min-height: 86px;
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.jp-tile::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--jp-tile-accent), rgba(255, 255, 255, 0));
  opacity: 0.18;
  pointer-events: none;
}

.jp-tile::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -45px;
  width: 130px;
  height: 130px;
  background: radial-gradient(
    circle at 30% 30%,
    var(--jp-tile-accent-soft),
    rgba(255, 255, 255, 0) 60%
  );
  opacity: 0.9;
  pointer-events: none;
}

.jp-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(5, 13, 28, 0.14);
}

.jp-tile--link {
  cursor: pointer;
}

.jp-tile:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(47, 101, 217, 0.28), 0 10px 35px rgba(5, 13, 28, 0.18);
}

.jp-tile--static {
  color: var(--jp-text-muted);
  cursor: default;
  opacity: 0.96;
}

.jp-tile--static::after {
  opacity: 0.55;
}

.jp-tile--static:hover {
  transform: none;
  box-shadow: var(--jp-shadow);
}

.jp-tile a {
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
}

.jp-tile-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: var(--jp-tile-accent-soft);
  box-shadow: inset 0 0 0 1px var(--jp-tile-accent-border);
  color: var(--jp-tile-accent);
  flex-shrink: 0;
  position: relative;
}

.jp-tile-icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.jp-tile-label {
  display: block;
  line-height: 1.2;
  letter-spacing: -0.01em;
  font-size: 1.02rem;
}

.jp-tile-meta {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.jp-tile-desc {
  display: block;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.62);
  font-size: 0.86rem;
  line-height: 1.25;
}

/* Pills (used in trackers) */
.jp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 750;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: capitalize;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.85);
  color: rgba(15, 23, 42, 0.78);
  white-space: nowrap;
}

.jp-pill--lead {
  background: rgba(47, 101, 217, 0.10);
  border-color: rgba(47, 101, 217, 0.24);
  color: rgba(47, 101, 217, 0.95);
}

.jp-pill--quoted {
  background: rgba(8, 145, 178, 0.10);
  border-color: rgba(8, 145, 178, 0.22);
  color: rgba(8, 145, 178, 0.95);
}

.jp-pill--won {
  background: rgba(31, 139, 76, 0.12);
  border-color: rgba(31, 139, 76, 0.26);
  color: rgba(31, 139, 76, 0.95);
}

.jp-pill--lost {
  background: rgba(180, 35, 24, 0.10);
  border-color: rgba(180, 35, 24, 0.22);
  color: rgba(180, 35, 24, 0.92);
}

.jp-pill--on_hold {
  background: rgba(217, 119, 6, 0.12);
  border-color: rgba(217, 119, 6, 0.22);
  color: rgba(217, 119, 6, 0.95);
}

/* Tabs (sales tracker) */
.jp-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.jp-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-weight: 750;
  font-size: 0.875rem;
}

.jp-tab:hover {
  background: rgba(255, 255, 255, 0.10);
}

.jp-tab.active {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}

/* Inline-edit cells (sales tracker) */
td.jp-cell {
  cursor: text;
}

td.jp-cell:hover {
  background: rgba(47, 101, 217, 0.05);
}

td.jp-cell--saving {
  opacity: 0.65;
}

td.jp-cell--saved {
  background: rgba(31, 139, 76, 0.10) !important;
}

td.jp-cell--error {
  background: rgba(180, 35, 24, 0.10) !important;
}

/* Dashboard tiles (color tokens per tile) */
.jp-tile--surveys {
  --jp-tile-accent: #2f65d9;
  --jp-tile-accent-soft: rgba(47, 101, 217, 0.14);
  --jp-tile-accent-border: rgba(47, 101, 217, 0.32);
}

.jp-tile--job-dashboard {
  --jp-tile-accent: #0891b2;
  --jp-tile-accent-soft: rgba(8, 145, 178, 0.14);
  --jp-tile-accent-border: rgba(8, 145, 178, 0.30);
}

.jp-tile--documents {
  --jp-tile-accent: #2f65d9;
  --jp-tile-accent-soft: rgba(47, 101, 217, 0.14);
  --jp-tile-accent-border: rgba(47, 101, 217, 0.32);
}

.jp-tile--staff {
  --jp-tile-accent: #1f8b4c;
  --jp-tile-accent-soft: rgba(31, 139, 76, 0.14);
  --jp-tile-accent-border: rgba(31, 139, 76, 0.32);
}

.jp-tile--admin {
  --jp-tile-accent: #d97706;
  --jp-tile-accent-soft: rgba(217, 119, 6, 0.16);
  --jp-tile-accent-border: rgba(217, 119, 6, 0.34);
}

.jp-tile--reports {
  --jp-tile-accent: #8b5cf6;
  --jp-tile-accent-soft: rgba(139, 92, 246, 0.14);
  --jp-tile-accent-border: rgba(139, 92, 246, 0.30);
}

/* Dashboard intro */
.jp-dash-intro {
  margin-bottom: 18px;
}

.jp-dash-h1 {
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  letter-spacing: -0.02em;
  font-weight: 700;
}

.jp-dash-lead {
  margin: 6px 0 0;
  color: rgba(214, 226, 255, 0.86);
  max-width: 60ch;
  font-size: 0.95rem;
}

/* ----- New Dashboard (body redesign only) ----- */
.dash-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 18px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 55px rgba(5, 13, 28, 0.22);
  min-width: 0;
  max-width: 100%;
}

/* Dashboard: full-width announcement rail at top of frost hero card */
.dash-hero--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}

.dash-hero-announcement-rail {
  width: 100%;
  min-width: 0;
}

/*
 * Dashboard: .dash-hero-row wraps title + mini profile. It must always be a full-width flex
 * container (not only when announcements stack). Without this, Signed in / Role fall below links.
 */
.dash-hero > .dash-hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
}
.dash-hero:not(.dash-hero--stacked) > .dash-hero-row {
  flex-wrap: nowrap;
}
@media (max-width: 560px) {
  html:not(.jp-force-desktop-viewport) .dash-hero:not(.dash-hero--stacked) > .dash-hero-row {
    flex-wrap: wrap;
  }
}

.dash-hero--stacked .dash-hero-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  min-width: 0;
}

.dash-h1 {
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(1.45rem, 2.2vw, 2.0rem);
  letter-spacing: -0.03em;
  font-weight: 900;
}

.dash-lead {
  margin: 6px 0 0;
  color: rgba(214, 226, 255, 0.86);
  max-width: 70ch;
}

.dash-hero-left {
  flex: 1 1 260px;
  min-width: 0;
}

.dash-hero-right {
  flex: 0 1 auto;
  min-width: 0;
}

.dash-quick {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.dash-quick-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-weight: 750;
  font-size: 0.88rem;
}

.dash-quick-link:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.22);
  color: #fff;
}

/* Dashboard announcements marquee — light Jay surface on frost hero (contrast; no actions here). */
.dash-announcements-stack {
  margin-top: 0;
  max-width: 100%;
}

.dashboard-announcements-empty {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--jp-radius-md);
  border: 1px dashed var(--jp-border);
  background: var(--jp-surface-subtle);
  color: var(--jp-text-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.dashboard-announcement-marquee-shell {
  width: 100%;
  overflow: hidden;
  border-radius: var(--jp-radius-md);
  border: 1px solid var(--jp-border);
  border-left: 3px solid var(--jp-blue);
  background: linear-gradient(180deg, var(--jp-surface) 0%, var(--jp-blue-soft) 100%);
  color: var(--jp-text-muted);
  box-shadow: 0 1px 8px rgba(5, 13, 28, 0.08);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.dashboard-announcement-marquee-outer {
  overflow: hidden;
  width: 100%;
  padding-right: 0;
  box-sizing: border-box;
}

.dashboard-announcement-marquee-track {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
  align-items: center;
  animation: dashboardAnnouncementMarqueeScroll 55s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.dashboard-announcement-marquee-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  flex-shrink: 0;
  padding: 10px 14px 10px 12px;
}

.dashboard-announcement-marquee-item {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.dashboard-announcement-marquee-copy {
  display: block;
  white-space: nowrap;
  line-height: 1.45;
  color: var(--jp-text-muted);
}

.dashboard-announcement-marquee-copy strong {
  font-weight: 800;
  color: var(--jp-navy-800);
  overflow: visible;
  text-overflow: clip;
}


@keyframes dashboardAnnouncementMarqueeScroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-announcement-marquee-track {
    animation: none;
    transform: none;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    row-gap: 10px;
  }

  .dashboard-announcement-marquee-track > .dashboard-announcement-marquee-group[aria-hidden="true"] {
    display: none;
  }

  .dashboard-announcement-marquee-group {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    flex-shrink: 1;
    gap: 10px;
  }

  .dashboard-announcement-marquee-item {
    width: 100%;
    max-width: 100%;
  }

  .dashboard-announcement-marquee-copy {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .dashboard-announcement-marquee-shell,
  .dashboard-announcement-marquee-outer {
    overflow-x: hidden;
    overflow-y: visible;
  }
}

@media (max-width: 768px) {
  .dashboard-announcement-marquee-shell {
    font-size: 11px;
  }

  .dashboard-announcement-marquee-track {
    animation-duration: 40s;
  }

  .dashboard-announcement-marquee-group {
    gap: clamp(18px, 3vw, 40px);
    padding: 9px 0 8px;
  }
}

.dash-hero-right {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.dash-mini {
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  min-width: 150px;
}

.dash-mini-k {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(214, 226, 255, 0.78);
  font-weight: 900;
}

.dash-mini-v {
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.96);
  font-weight: 850;
}

.dash-layout {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1.5fr 0.9fr;
  gap: 14px;
  align-items: start;
}

@media (max-width: 980px) {
  html:not(.jp-force-desktop-viewport) .dash-layout {
    grid-template-columns: 1fr;
  }
}

.dash-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
}

@media (max-width: 720px) {
  html:not(.jp-force-desktop-viewport) .dash-cards {
    grid-template-columns: 1fr;
  }
}

.dash-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 18px 55px rgba(5, 13, 28, 0.12);
  text-decoration: none;
  color: rgba(15, 23, 42, 0.92);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dash-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 65px rgba(5, 13, 28, 0.16);
}

.dash-card--disabled {
  opacity: 0.78;
  cursor: default;
}

.dash-card--disabled:hover {
  transform: none;
  box-shadow: 0 18px 55px rgba(5, 13, 28, 0.12);
}

.dash-card-ic {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: rgba(47, 101, 217, 0.95);
  background: rgba(47, 101, 217, 0.10);
  border: 1px solid rgba(47, 101, 217, 0.18);
  flex-shrink: 0;
}

.dash-card-ic svg {
  width: 22px;
  height: 22px;
}

/* Per-card icon wells — distinct hues (stroke uses currentColor on SVGs). */
.dash-card.dash-card--icon-job .dash-card-ic {
  color: rgba(37, 99, 235, 0.95);
  background: rgba(37, 99, 235, 0.12);
  border-color: rgba(37, 99, 235, 0.24);
}

.dash-card.dash-card--icon-documents .dash-card-ic {
  color: rgba(180, 83, 9, 0.96);
  background: rgba(245, 158, 11, 0.16);
  border-color: rgba(180, 83, 9, 0.28);
}

.dash-card.dash-card--icon-staff .dash-card-ic {
  color: rgba(124, 58, 237, 0.95);
  background: rgba(124, 58, 237, 0.12);
  border-color: rgba(124, 58, 237, 0.24);
}

.dash-card.dash-card--icon-messages .dash-card-ic {
  color: rgba(190, 24, 93, 0.95);
  background: rgba(244, 63, 94, 0.12);
  border-color: rgba(190, 24, 93, 0.22);
}

.dash-card.dash-card--icon-tools .dash-card-ic {
  color: rgba(13, 148, 136, 0.96);
  background: rgba(45, 212, 191, 0.14);
  border-color: rgba(13, 148, 136, 0.26);
}

.dash-card.dash-card--icon-admin .dash-card-ic {
  color: rgba(71, 85, 105, 0.96);
  background: rgba(100, 116, 139, 0.14);
  border-color: rgba(71, 85, 105, 0.28);
}

.dash-card-main {
  flex: 1;
  min-width: 0;
}

.dash-card-title {
  font-weight: 900;
  letter-spacing: -0.02em;
}

.dash-card-sub {
  margin-top: 4px;
  color: rgba(15, 23, 42, 0.62);
  font-weight: 650;
  font-size: 0.9rem;
}

.dash-card-arrow {
  font-weight: 900;
  color: rgba(15, 23, 42, 0.55);
  flex-shrink: 0;
}

.dash-side-card {
  padding: 16px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 55px rgba(5, 13, 28, 0.22);
  color: rgba(255, 255, 255, 0.94);
}

.dash-side-title {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(214, 226, 255, 0.78);
  font-weight: 900;
  margin-bottom: 10px;
}

.dash-side-list {
  margin: 0;
  padding-left: 18px;
  color: rgba(214, 226, 255, 0.86);
}

.dash-side-list li {
  margin: 8px 0;
}

/* ----- Staff ----- */
.jp-staff-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

@media (max-width: 640px) {
  html:not(.jp-force-desktop-viewport) .jp-staff-actions {
    width: 100%;
  }

  html:not(.jp-force-desktop-viewport) .jp-staff-actions .jp-btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

.jp-staff-title {
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  letter-spacing: -0.02em;
  font-weight: 750;
}

.jp-staff-sub {
  margin: 6px 0 0;
  color: rgba(214, 226, 255, 0.86);
  max-width: 68ch;
}

.jp-staff-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.jp-staff-links a {
  color: rgba(214, 226, 255, 0.92);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
}

.jp-staff-links a:hover {
  text-decoration: underline;
}

.jp-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: var(--jp-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
  font-weight: 650;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.jp-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}

.jp-staff-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.jp-staff-role-group {
  margin: 18px 0 20px;
}

.jp-staff-role-heading {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.94);
  font-size: 1.02rem;
  font-weight: 730;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.jp-emp-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 14px;
  border-radius: var(--jp-radius-md);
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 35px rgba(5, 13, 28, 0.22);
  text-decoration: none;
  color: #fff;
  transition: transform 0.15s ease, background 0.15s ease;
}

.jp-emp-card:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.14);
}

.jp-emp-photo {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
}

.jp-emp-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jp-emp-initial {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.95);
}

.jp-emp-initial--lg {
  font-size: 2rem;
}

.jp-emp-meta {
  min-width: 0;
}

.jp-emp-name {
  font-weight: 750;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jp-emp-dept {
  margin-top: 2px;
  font-size: 0.875rem;
  color: rgba(214, 226, 255, 0.84);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jp-emp-chevron {
  margin-left: auto;
  opacity: 0.7;
  font-weight: 800;
}

.jp-staff-empty {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--jp-radius-lg);
  padding: 22px 20px;
  color: rgba(255, 255, 255, 0.92);
}

.jp-staff-empty-title {
  font-weight: 750;
}

.jp-staff-empty-sub {
  margin-top: 6px;
  color: rgba(214, 226, 255, 0.86);
}

.jp-staff-breadcrumbs {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.jp-staff-breadcrumbs a {
  color: rgba(214, 226, 255, 0.92);
  text-decoration: none;
  font-weight: 600;
}

.jp-staff-breadcrumbs a:hover {
  text-decoration: underline;
}

.jp-staff-breadcrumb-actions {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* ----- Staff Leave (redesign) ----- */
.jp-leave-shell {
  display: grid;
  gap: 14px;
}

.jp-leave-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 14px 12px;
  border-radius: 14px;
  border: 1px solid rgba(126, 154, 230, 0.2);
  background: rgba(8, 19, 44, 0.92);
  box-shadow: 0 14px 30px rgba(2, 8, 23, 0.34);
}

.jp-leave-title {
  margin: 0;
  color: rgba(242, 247, 255, 0.98);
  letter-spacing: -0.02em;
}

.jp-leave-sub {
  margin: 6px 0 0;
  color: rgba(194, 211, 247, 0.86);
}

.jp-leave-month-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.jp-leave-head-add {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(126, 154, 230, 0.2);
}

.jp-leave-month-nav input[type="month"],
.jp-leave-month-nav select {
  min-height: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid rgba(138, 168, 255, 0.34);
  background: rgba(10, 24, 56, 0.72);
  color: #f4f8ff;
  font-family: inherit;
}

.jp-leave-card {
  border-radius: 14px;
  border: 1px solid rgba(126, 154, 230, 0.2);
  background: rgba(8, 19, 44, 0.92);
  box-shadow: 0 14px 30px rgba(2, 8, 23, 0.34);
  padding: 14px;
}

.jp-leave-card-title {
  margin: 0 0 10px;
  color: rgba(242, 247, 255, 0.98);
  letter-spacing: -0.01em;
}

.jp-leave-form-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.jp-leave-form-grid label {
  display: block;
  margin-bottom: 6px;
}

.jp-leave-form-grid input,
.jp-leave-form-grid select {
  width: 100%;
  min-height: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(138, 168, 255, 0.34);
  background: rgba(10, 24, 56, 0.72);
  color: #f4f8ff;
  padding: 0 10px;
  box-sizing: border-box;
}

.jp-leave-form-grid input::placeholder {
  color: rgba(182, 203, 245, 0.72);
}

.jp-leave-form-grid input:focus,
.jp-leave-form-grid select:focus {
  outline: none;
  border-color: rgba(155, 187, 255, 0.72);
  box-shadow: 0 0 0 4px rgba(81, 130, 255, 0.22);
}

.jp-leave-form-action {
  display: flex;
  align-items: flex-end;
}

.jp-leave-calendar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.jp-leave-legend {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  color: rgba(194, 211, 247, 0.9);
  font-size: 0.84rem;
}

.jp-leave-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

.jp-leave-dot--free {
  background: #1f2f52;
  border: 1px solid rgba(148, 163, 184, 0.65);
}

.jp-leave-dot--busy {
  background: #2f65d9;
  border: 1px solid rgba(147, 197, 253, 0.75);
}

.jp-leave-calendar-grid {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.jp-leave-weekday {
  text-align: center;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(194, 211, 247, 0.9);
}

.jp-leave-day {
  height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 800;
}

.jp-leave-day--empty {
  background: rgba(255, 255, 255, 0.04);
  border-style: dashed;
}

.jp-leave-day--free {
  background: rgba(31, 47, 82, 0.92);
  color: rgba(231, 240, 255, 0.98);
}

.jp-leave-day--busy {
  background: linear-gradient(180deg, #2d63d8, #244fb2);
  border-color: rgba(147, 197, 253, 0.65);
  color: #f8fbff;
}

.jp-leave-day-count {
  font-size: 0.7rem;
  font-weight: 700;
  opacity: 0.95;
}

.jp-leave-table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

.jp-leave-table thead th,
.jp-leave-table td {
  padding: 12px 10px;
  text-align: left;
  box-sizing: border-box;
}

.jp-leave-table thead th {
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(194, 211, 247, 0.92);
  border-bottom: 1px solid rgba(126, 154, 230, 0.3);
  vertical-align: bottom;
}

.jp-leave-table td {
  color: rgba(231, 240, 255, 0.96);
  border-bottom: 1px solid rgba(126, 154, 230, 0.18);
  vertical-align: top;
  word-wrap: break-word;
}

/* Recent entries: column widths — keeps thead and tbody aligned (esp. with Actions + details) */
.jp-leave-table:not(.jp-leave-table--manage) thead th:nth-child(1),
.jp-leave-table:not(.jp-leave-table--manage) tbody td:nth-child(1) {
  width: 30%;
}
.jp-leave-table:not(.jp-leave-table--manage) thead th:nth-child(2),
.jp-leave-table:not(.jp-leave-table--manage) tbody td:nth-child(2) {
  width: 18%;
}
.jp-leave-table:not(.jp-leave-table--manage) thead th:nth-child(3),
.jp-leave-table:not(.jp-leave-table--manage) tbody td:nth-child(3) {
  width: 18%;
}
.jp-leave-table:not(.jp-leave-table--manage) thead th:nth-child(4),
.jp-leave-table:not(.jp-leave-table--manage) tbody td:nth-child(4) {
  width: 14%;
}
.jp-leave-table:not(.jp-leave-table--manage) thead th:nth-child(5),
.jp-leave-table:not(.jp-leave-table--manage) tbody td:nth-child(5) {
  width: 20%;
}

.jp-leave-table.jp-leave-table--manage thead th:nth-child(1),
.jp-leave-table.jp-leave-table--manage tbody td:nth-child(1) {
  width: 22%;
}
.jp-leave-table.jp-leave-table--manage thead th:nth-child(2),
.jp-leave-table.jp-leave-table--manage tbody td:nth-child(2) {
  width: 13%;
}
.jp-leave-table.jp-leave-table--manage thead th:nth-child(3),
.jp-leave-table.jp-leave-table--manage tbody td:nth-child(3) {
  width: 13%;
}
.jp-leave-table.jp-leave-table--manage thead th:nth-child(4),
.jp-leave-table.jp-leave-table--manage tbody td:nth-child(4) {
  width: 11%;
}
.jp-leave-table.jp-leave-table--manage thead th:nth-child(5),
.jp-leave-table.jp-leave-table--manage tbody td:nth-child(5) {
  width: 13%;
}
.jp-leave-table.jp-leave-table--manage thead th:nth-child(6),
.jp-leave-table.jp-leave-table--manage tbody td:nth-child(6) {
  width: 28%;
}

.jp-leave-row-link {
  color: rgba(191, 219, 254, 0.98);
  font-weight: 700;
  text-decoration: none;
}

.jp-leave-row-link:hover {
  color: #dbeafe;
  text-decoration: underline;
}

.jp-leave-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(30, 41, 59, 0.78);
  color: #e2e8f0;
}

.jp-leave-status--approved {
  border-color: rgba(59, 130, 246, 0.48);
  background: rgba(37, 99, 235, 0.3);
  color: #dbeafe;
}

.jp-leave-status--pending {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(180, 83, 9, 0.28);
  color: #fde68a;
}

.jp-leave-status--rejected {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.33);
  color: #fecaca;
}

.jp-leave-summary {
  cursor: pointer;
  color: rgba(191, 219, 254, 0.96);
  font-weight: 700;
}

.jp-leave-edit-wrap {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.jp-leave-edit-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.jp-leave-edit-grid input,
.jp-leave-edit-grid select {
  width: 100%;
  min-height: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid rgba(138, 168, 255, 0.34);
  background: rgba(10, 24, 56, 0.72);
  color: #f4f8ff;
  padding: 0 9px;
}

.jp-leave-inline-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
}

.jp-leave-delete-inline {
  margin: 0;
}

@media (max-width: 980px) {
  html:not(.jp-force-desktop-viewport) .jp-leave-form-grid {
    grid-template-columns: 1fr 1fr;
  }

  html:not(.jp-force-desktop-viewport) .jp-leave-edit-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  html:not(.jp-force-desktop-viewport) .jp-leave-form-grid {
    grid-template-columns: 1fr;
  }
}

.jp-inline-form-btn {
  margin: 0;
  display: inline-flex;
}

.jp-link-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1;
}

.jp-link-chip:hover {
  background: rgba(255, 255, 255, 0.10);
}

.jp-link-chip--current {
  border-color: rgba(147, 197, 253, 0.5);
  background: rgba(47, 101, 217, 0.32);
}

.jp-link-chip--danger {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(248, 113, 113, 0.35);
  color: rgba(254, 226, 226, 0.98);
  cursor: pointer;
  font: inherit;
}

.jp-link-chip--danger:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(248, 113, 113, 0.5);
}

.jp-profile-hero {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px 18px;
  border-radius: var(--jp-radius-lg);
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 45px rgba(5, 13, 28, 0.22);
}

.jp-profile-photo {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.jp-profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jp-profile-name {
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  letter-spacing: -0.02em;
  font-weight: 800;
}

.jp-profile-sub {
  margin-top: 4px;
  color: rgba(214, 226, 255, 0.86);
  font-weight: 650;
}

.jp-profile-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.jp-info-card {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  padding: 14px 14px 13px;
  color: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 30px rgba(5, 13, 28, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}

.jp-info-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(47, 101, 217, 0.9), rgba(47, 101, 217, 0.0));
  opacity: 0.75;
}

.jp-info-card::after {
  content: "";
  position: absolute;
  inset: -40px -40px auto auto;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.0) 60%);
  transform: rotate(8deg);
  pointer-events: none;
}

.jp-info-card-title {
  font-size: 0.70rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(214, 226, 255, 0.72);
  margin-bottom: 8px;
  padding-left: 8px;
}

.jp-info-card-value {
  font-weight: 700;
  padding-left: 8px;
  line-height: 1.35;
}

.jp-info-card.jp-info-card--locked {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.04));
  border-color: rgba(255, 255, 255, 0.10);
}

.jp-info-card.jp-info-card--locked::before {
  background: linear-gradient(180deg, rgba(214, 226, 255, 0.55), rgba(214, 226, 255, 0.0));
  opacity: 0.55;
}

.jp-info-card--wide {
  grid-column: 1 / -1;
}

@media (min-width: 560px) {
  .jp-info-card--span-2 {
    grid-column: span 2;
  }
}

.jp-profile-section-heading {
  margin: 22px 0 0;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(214, 226, 255, 0.78);
}

.jp-profile-hero + .jp-profile-section-heading {
  margin-top: 18px;
}

.jp-staff-summary-lead {
  margin: 12px 0 0;
  font-size: 0.92rem;
  color: rgba(214, 226, 255, 0.82);
  line-height: 1.45;
  max-width: 36rem;
}

.jp-profile-grid--compact {
  margin-top: 12px;
}

.jp-staff-summary-cta {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.jp-staff-summary-cta-main {
  padding: 12px 20px;
  font-weight: 800;
}

.jp-muted {
  color: rgba(214, 226, 255, 0.78);
}

.jp-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.jp-panel--wide {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}

.jp-panel--xl {
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
}

/* Summary strip (sales tracker) */
.jp-summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.00));
}

@media (max-width: 980px) {
  html:not(.jp-force-desktop-viewport) .jp-summary-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  html:not(.jp-force-desktop-viewport) .jp-summary-strip {
    grid-template-columns: 1fr;
  }
}

.jp-metric {
  padding: 10px 10px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.80);
  border: 1px solid rgba(15, 23, 42, 0.06);
}

.jp-metric-label {
  font-size: 0.72rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 850;
  color: rgba(15, 23, 42, 0.55);
}

.jp-metric-value {
  margin-top: 6px;
  font-size: 1.15rem;
  font-weight: 900;
  color: rgba(15, 23, 42, 0.92);
}

.jp-metric--accent {
  background: rgba(47, 101, 217, 0.06);
  border-color: rgba(47, 101, 217, 0.14);
}

.jp-summary-target {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.65);
}

.jp-summary-target-field {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.jp-summary-target-field label,
.jp-summary-target-field input {
  max-width: 100%;
}

@media (min-width: 480px) {
  .jp-summary-target-field {
    flex: 0 1 280px;
  }
}

/* Stage banner (sales tracker) */
.jp-stage-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.01));
}

.jp-stage-kicker {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
  font-weight: 800;
}

.jp-stage-title {
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: rgba(15, 23, 42, 0.92);
  margin-top: 2px;
}

.jp-pill--sales_leads { background: rgba(47, 101, 217, 0.10); border-color: rgba(47, 101, 217, 0.22); color: rgba(47, 101, 217, 0.95); }
.jp-pill--enquiries { background: rgba(8, 145, 178, 0.10); border-color: rgba(8, 145, 178, 0.22); color: rgba(8, 145, 178, 0.95); }
.jp-pill--submitted_quotations { background: rgba(99, 102, 241, 0.10); border-color: rgba(99, 102, 241, 0.22); color: rgba(99, 102, 241, 0.95); }
.jp-pill--shortlisted { background: rgba(217, 119, 6, 0.12); border-color: rgba(217, 119, 6, 0.22); color: rgba(217, 119, 6, 0.95); }
.jp-pill--order_book { background: rgba(31, 139, 76, 0.12); border-color: rgba(31, 139, 76, 0.26); color: rgba(31, 139, 76, 0.95); }
.jp-pill--all { background: rgba(15, 23, 42, 0.06); border-color: rgba(15, 23, 42, 0.14); color: rgba(15, 23, 42, 0.78); }
.jp-staff-form {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.jp-form-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jp-form-row label {
  font-weight: 700;
  font-size: 0.8125rem;
  color: var(--jp-text-muted);
}

.jp-form-row input[type="file"] {
  padding: 10px 12px;
  border: 1px solid #cfd6e0;
  border-radius: var(--jp-radius-sm);
  background: var(--jp-surface-subtle);
}

.jp-form-row--full {
  grid-column: 1 / -1;
}

.jp-form-actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 6px;
}

@media (max-width: 720px) {
  html:not(.jp-force-desktop-viewport) .jp-staff-form {
    grid-template-columns: 1fr;
  }
}

.jp-staff-form--nested {
  margin-top: 0;
  gap: 12px;
}

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

.jp-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 40px);
}

.jp-panel {
  background: var(--jp-surface);
  border-radius: var(--jp-radius-lg);
  padding: clamp(24px, 3vw, 32px);
  box-shadow: var(--jp-shadow-lg);
  border: 1px solid rgba(15, 23, 42, 0.06);
  margin-bottom: 24px;
  max-width: 100%;
  box-sizing: border-box;
}

.jp-panel h1 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--jp-text);
}

.jp-panel h2 {
  margin: 0 0 12px;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--jp-text);
}

.jp-panel > p:first-of-type {
  margin-top: 0;
}

.jp-panel p,
.jp-panel .jp-back-link {
  color: var(--jp-text-muted);
  font-size: 0.9375rem;
}

.jp-panel a {
  color: var(--jp-blue);
}

.jp-panel a:hover {
  color: var(--jp-blue-hover);
}

.jp-panel .jp-muted {
  color: var(--jp-text-muted);
}

.jp-panel label {
  color: var(--jp-text-muted);
  font-weight: 650;
  font-size: 0.875rem;
}

/* Tabs inside light panels (override dark-theme chips) */
.jp-panel .jp-tab {
  border-color: rgba(15, 23, 42, 0.12);
  background: rgba(15, 23, 42, 0.04);
  color: rgba(15, 23, 42, 0.80);
}

.jp-panel .jp-tab:hover {
  background: rgba(15, 23, 42, 0.06);
  border-color: rgba(15, 23, 42, 0.16);
}

.jp-panel .jp-tab.active {
  background: rgba(47, 101, 217, 0.10);
  border-color: rgba(47, 101, 217, 0.22);
  color: rgba(47, 101, 217, 0.95);
}

.jp-back-link {
  display: inline-block;
  margin-bottom: 16px;
  font-weight: 500;
}

.jp-admin-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 24px;
}

.jp-admin-card {
  background: var(--jp-surface-subtle);
  padding: 18px 16px;
  border-radius: var(--jp-radius-md);
  border: 1px solid var(--jp-border);
  font-weight: 600;
  font-size: 0.9375rem;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.jp-admin-card:hover {
  background: #eef2f9;
  border-color: #c5d3e8;
}

.jp-admin-card a {
  text-decoration: none;
  color: var(--jp-text);
  display: block;
}

/* ----- Company tools landing (page-scoped) ----- */
.company-tools-page {
  background: #f8fafc;
  max-width: none;
  width: 100%;
  margin: 0;
  padding-left: clamp(18px, 3vw, 32px);
  padding-right: clamp(18px, 3vw, 32px);
}

.company-tools-page .company-tools-content {
  max-width: 980px;
  margin: 0 auto;
  padding: 8px 12px 30px;
}

.company-tools-page .jp-tools-title {
  margin: 0;
  color: #1f2937;
  letter-spacing: -0.02em;
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  font-weight: 760;
}

.company-tools-page .jp-tools-sub {
  margin: 8px 0 0;
  color: #6b7280;
  max-width: 70ch;
}

.company-tools-page .jp-tools-group {
  margin-top: 24px;
}

.company-tools-page .jp-tools-group-title {
  margin: 0 0 12px;
  color: #861f54;
  font-size: 0.86rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.company-tools-page .jp-tools-finance-heading {
  margin: 20px 0 12px;
}

.company-tools-page .jp-tools-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.company-tools-page .jp-tools-card {
  display: block;
  text-decoration: none;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #1f2937;
  padding: 16px 18px;
  position: relative;
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.06);
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}

.company-tools-page .jp-tools-card:hover {
  transform: translateY(-1px);
  border-color: #861f54;
  box-shadow: 0 12px 24px rgba(17, 24, 39, 0.1);
}

.company-tools-page .jp-tools-card-icon {
  font-size: 1.1rem;
  margin-bottom: 10px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #f7eef3;
  color: #861f54;
}

.company-tools-page .jp-tools-card.jp-tools-card--icon-ssd-tesco .jp-tools-card-icon {
  background: rgba(37, 99, 235, 0.12);
  color: rgba(30, 64, 175, 0.95);
}

.company-tools-page .jp-tools-card.jp-tools-card--icon-ssd-asda .jp-tools-card-icon {
  background: rgba(22, 163, 74, 0.14);
  color: rgba(21, 128, 61, 0.96);
}

.company-tools-page .jp-tools-card.jp-tools-card--icon-ssd-sainsburys .jp-tools-card-icon {
  background: rgba(234, 88, 12, 0.14);
  color: rgba(194, 65, 12, 0.96);
}

.company-tools-page .jp-tools-card.jp-tools-card--icon-works-schedule .jp-tools-card-icon {
  background: rgba(79, 70, 229, 0.12);
  color: rgba(67, 56, 202, 0.95);
}

.company-tools-page .jp-tools-card.jp-tools-card--icon-work-diary .jp-tools-card-icon {
  background: rgba(245, 158, 11, 0.16);
  color: rgba(146, 64, 14, 0.96);
}

.company-tools-page .jp-tools-card.jp-tools-card--icon-rams .jp-tools-card-icon {
  background: rgba(124, 58, 237, 0.12);
  color: rgba(109, 40, 217, 0.95);
}

.company-tools-page .jp-tools-card.jp-tools-card--icon-invoices .jp-tools-card-icon {
  background: rgba(13, 148, 136, 0.14);
  color: rgba(15, 118, 110, 0.96);
}

.company-tools-page .jp-tools-card.jp-tools-card--icon-ceiling-tracker .jp-tools-card-icon {
  background: rgba(14, 165, 233, 0.14);
  color: rgba(3, 105, 161, 0.96);
}

.company-tools-page .jp-tools-card.jp-tools-card--icon-sales-tracker .jp-tools-card-icon {
  background: rgba(244, 63, 94, 0.12);
  color: rgba(190, 18, 60, 0.95);
}

.company-tools-page .jp-tools-card.jp-tools-card--icon-site-marker .jp-tools-card-icon {
  background: rgba(217, 119, 6, 0.14);
  color: rgba(180, 83, 9, 0.96);
}

.company-tools-page .jp-tools-card.jp-tools-card--icon-cctv-quic .jp-tools-card-icon {
  background: rgba(71, 85, 105, 0.14);
  color: rgba(51, 65, 85, 0.96);
}

.company-tools-page .jp-tools-card.jp-tools-card--icon-reports-tesco .jp-tools-card-icon {
  background: rgba(59, 130, 246, 0.12);
  color: rgba(29, 78, 216, 0.95);
}

.company-tools-page .jp-tools-card.jp-tools-card--icon-reports-asda .jp-tools-card-icon {
  background: rgba(34, 197, 94, 0.14);
  color: rgba(22, 101, 52, 0.96);
}

.company-tools-page .jp-tools-card.jp-tools-card--icon-reports-sainsburys .jp-tools-card-icon {
  background: rgba(251, 146, 60, 0.16);
  color: rgba(194, 65, 12, 0.96);
}

.company-tools-page .jp-tools-card.jp-tools-card--icon-route-planner .jp-tools-card-icon {
  background: rgba(99, 102, 241, 0.12);
  color: rgba(67, 56, 202, 0.95);
}

.company-tools-page .jp-tools-card.jp-tools-card--icon-download-app .jp-tools-card-icon {
  background: rgba(168, 85, 247, 0.12);
  color: rgba(126, 34, 206, 0.95);
}

.company-tools-page .jp-tools-card.jp-tools-card--icon-file-splitter .jp-tools-card-icon {
  background: rgba(100, 116, 139, 0.14);
  color: rgba(71, 85, 105, 0.96);
}

.company-tools-page .jp-tools-card-title {
  font-weight: 760;
  margin-bottom: 5px;
  color: #1f2937;
  padding-right: 24px;
}

.company-tools-page .jp-tools-card-sub {
  color: #6b7280;
  font-size: 0.9rem;
  line-height: 1.5;
  padding-right: 24px;
}

.company-tools-page .jp-tools-card-meta {
  display: block;
  margin-top: 4px;
  color: #6b7280;
  font-weight: 650;
}

/* Tools hub cards: primary click opens Tesco; dropdown + Open for other retailers */
.company-tools-page .jp-tools-card.jp-tools-card--hub {
  cursor: default;
}

.company-tools-page .jp-tools-card.jp-tools-card--hub:hover {
  transform: none;
  border-color: #e5e7eb;
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.06);
}

.company-tools-page .jp-tools-card.jp-tools-card--hub::after {
  content: none;
}

.company-tools-page .jp-tools-card-hub-primary,
.company-tools-page .jp-tools-card-hub-primary:visited {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  outline: none;
  border-radius: 10px;
  margin: -4px -6px 0;
  padding: 4px 28px 2px 6px;
}

.company-tools-page .jp-tools-card-hub-primary:focus-visible {
  outline: 2px solid rgba(134, 31, 84, 0.45);
  outline-offset: 2px;
}

.company-tools-page .jp-tools-card.jp-tools-card--hub:has(.jp-tools-card-hub-primary:hover) {
  border-color: #861f54;
  box-shadow: 0 12px 24px rgba(17, 24, 39, 0.1);
}

.company-tools-page .jp-tools-card-hub-primary .jp-tools-card-title,
.company-tools-page .jp-tools-card-hub-primary .jp-tools-card-sub {
  padding-right: 0;
}

.company-tools-page .jp-tools-card-hub-primary::after {
  content: "›";
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(134, 31, 84, 0.62);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.company-tools-page .jp-tools-card.jp-tools-card--icon-ssd-hub .jp-tools-card-icon,
.company-tools-page .jp-tools-card.jp-tools-card--icon-reports-hub .jp-tools-card-icon {
  background: #f7eef3;
  color: #861f54;
}

.company-tools-page .jp-tools-card-hub-actions {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e8eaed;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.company-tools-page .jp-tools-card-hub-row-label {
  width: 100%;
  flex: 1 0 100%;
  font-size: 0.78rem;
  font-weight: 650;
  color: #6b7280;
  margin: 0;
}

.company-tools-page .jp-tools-card-hub-select {
  min-width: 200px;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #1f2937;
  font-size: 0.9rem;
}

.company-tools-page .jp-tools-card-hub-btn {
  flex: 0 0 auto;
}

.company-tools-page .jp-tools-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.company-tools-page .jp-tools-footer {
  margin-top: 24px;
}

.company-tools-page .jp-tools-footer a {
  color: #861f54;
  font-weight: 700;
}

.company-tools-page .jp-tools-card::after {
  content: "›";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(134, 31, 84, 0.62);
  font-size: 1.3rem;
  font-weight: 700;
}

.jp-admin-shell {
  border-radius: 16px;
}

.jp-admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}

.jp-admin-title {
  margin: 0;
  letter-spacing: -0.02em;
}

.jp-admin-sub {
  margin: 6px 0 0;
}

.jp-admin-alert {
  margin-top: 12px;
}

.jp-admin-summary-strip {
  margin-top: 14px;
}


/* Admin Settings Overview — composer + announcements inbox */
.jp-admin-announcements-manage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 14px;
  align-items: start;
}
@media (max-width: 900px) {
  html:not(.jp-force-desktop-viewport) .jp-admin-announcements-manage {
    grid-template-columns: 1fr;
  }
}
.jp-admin-announcements-inbox-panel {
  display: flex;
  flex-direction: column;
  max-height: min(70vh, 640px);
}
.jp-admin-announcements-inbox-scroll {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.jp-admin-settings-grid {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.jp-admin-col-6 { grid-column: span 6; }
.jp-admin-col-12 { grid-column: span 12; }

.jp-admin-section-title {
  margin: 0 0 10px;
}

.jp-admin-subsection-title {
  margin: 12px 0 8px;
}

.jp-admin-actions-wrap {
  gap: 10px;
  flex-wrap: wrap;
}

.jp-admin-tool-card-half { grid-column: span 6; }
.jp-admin-tool-card-full { grid-column: span 12; }

.jp-admin-top-gap {
  margin: 10px 0 0;
}

.jp-admin-table-full {
  width: 100%;
}

.jp-admin-text-right {
  text-align: right;
}

.jp-admin-scrollbox {
  overflow: auto;
  border: 1px solid var(--jp-border);
  border-radius: 10px;
}

.jp-admin-scrollbox-lg { max-height: 220px; }
.jp-admin-scrollbox-sm { max-height: 160px; }

.jp-admin-api-form {
  align-items: flex-end;
}

.jp-admin-api-label-wrap {
  min-width: 220px;
}

.jp-admin-api-label {
  display: block;
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 6px;
}

.jp-admin-input-full {
  width: 100%;
}

.jp-admin-log-label {
  font-weight: 700;
  font-size: 12px;
}

.jp-admin-inline-form {
  display: inline;
}

.jp-admin-log-pre {
  margin: 10px 0 0;
  background: #0b1220;
  color: #e5e7eb;
  padding: 12px;
  border-radius: 12px;
  overflow: auto;
  max-height: 360px;
  white-space: pre-wrap;
}

.jp-admin-filter-form {
  margin-top: 12px;
}

.jp-admin-filter-actions {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.jp-admin-table-wrap {
  margin-top: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Admin Settings — area picker + accordions (.jp-admin-settings-root) */
.jp-admin-area-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  margin-top: 14px;
}
.jp-admin-area-toolbar-label {
  font-weight: 700;
  font-size: 12px;
  color: rgba(194, 211, 247, 0.92);
}
.jp-admin-area-select {
  max-width: min(100%, 420px);
}
.jp-admin-settings-root--js .jp-admin-settings-area {
  display: none;
}
.jp-admin-settings-root--js .jp-admin-settings-area.jp-admin-settings-area--active {
  display: block;
}
.jp-admin-settings-root .jp-admin-settings-area {
  margin-top: 14px;
}
.jp-admin-acc {
  margin-bottom: 12px;
}
.jp-admin-acc:last-child {
  margin-bottom: 0;
}
.jp-admin-acc-summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  margin: 0;
  font-weight: 700;
  color: rgba(242, 247, 255, 0.98);
}
.jp-admin-acc-summary::-webkit-details-marker {
  display: none;
}
.jp-admin-acc-summary::before {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-right: 10px;
  border-right: 2px solid rgba(155, 187, 255, 0.75);
  border-bottom: 2px solid rgba(155, 187, 255, 0.75);
  transform: rotate(-45deg);
  vertical-align: 0.15em;
  transition: transform 0.15s ease;
}
.jp-admin-acc[open] > .jp-admin-acc-summary::before {
  transform: rotate(45deg);
}
.jp-admin-acc-body {
  padding: 0 14px 14px;
  border-top: 1px solid rgba(126, 154, 230, 0.18);
}
.jp-admin-log-toolbar {
  align-items: flex-end;
}
.jp-admin-inline-toolbar-form {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

/* --- Dark sleek Admin theme (scoped) --- */
.jp-admin-theme .jp-panel,
.jp-admin-theme .um-card,
.jp-admin-theme .um-users-head {
  background: rgba(8, 19, 44, 0.92);
  border: 1px solid rgba(126, 154, 230, 0.2);
  box-shadow: 0 14px 30px rgba(2, 8, 23, 0.34);
}

.jp-admin-theme .jp-admin-title,
.jp-admin-theme .um-h1,
.jp-admin-theme .um-card-title,
.jp-admin-theme .jp-admin-section-title,
.jp-admin-theme .um-users-head .um-h2 {
  color: rgba(242, 247, 255, 0.98);
}

.jp-admin-theme .jp-muted,
.jp-admin-theme .jp-admin-sub,
.jp-admin-theme .um-sub,
.jp-admin-theme .um-card-help,
.jp-admin-theme .um-rbac-hint,
.jp-admin-theme .um-users-head .um-sub2 {
  color: rgba(194, 211, 247, 0.86);
}

.jp-admin-theme .jp-panel input,
.jp-admin-theme .jp-panel select,
.jp-admin-theme .um-link-form .um-field select,
.jp-admin-theme .um-field input,
.jp-admin-theme .um-field select {
  background: rgba(10, 24, 56, 0.72);
  border-color: rgba(138, 168, 255, 0.34);
  color: #f4f8ff;
}

.jp-admin-theme .jp-panel input::placeholder,
.jp-admin-theme .um-field input::placeholder {
  color: rgba(182, 203, 245, 0.72);
}

.jp-admin-theme .jp-panel input:focus,
.jp-admin-theme .jp-panel select:focus,
.jp-admin-theme .um-field input:focus,
.jp-admin-theme .um-field select:focus {
  border-color: rgba(155, 187, 255, 0.72);
  box-shadow: 0 0 0 4px rgba(81, 130, 255, 0.26);
}

.jp-admin-theme .jp-admin-card,
.jp-admin-theme .um-user-row,
.jp-admin-theme .um-rbac-panel,
.jp-admin-theme .um-link-form {
  background: rgba(11, 28, 62, 0.82);
  border-color: rgba(124, 153, 227, 0.24);
  color: rgba(236, 243, 255, 0.95);
}

.jp-admin-theme .jp-admin-card a,
.jp-admin-theme .um-user-strong,
.jp-admin-theme .um-chip,
.jp-admin-theme .um-chip--addon,
.jp-admin-theme .um-chip--primary,
.jp-admin-theme .um-roles-label,
.jp-admin-theme .um-chip-label {
  color: rgba(236, 243, 255, 0.95);
}

.jp-admin-theme .um-user-id {
  color: rgba(178, 198, 241, 0.8);
}

.jp-admin-theme .um-check {
  background: rgba(12, 28, 63, 0.72);
  border-color: rgba(133, 164, 255, 0.24);
  color: rgba(235, 243, 255, 0.95);
}

.jp-admin-theme .um-radio-tile {
  background: rgba(12, 29, 66, 0.66);
  border-color: rgba(133, 164, 255, 0.25);
  color: rgba(236, 243, 255, 0.95);
}

.jp-admin-theme .um-radio-tile:has(input:checked),
.jp-admin-theme .um-check:has(input:checked) {
  border-color: rgba(138, 190, 255, 0.75);
  box-shadow: 0 0 0 1px rgba(138, 190, 255, 0.32);
}

.jp-admin-theme .um-btn--quiet,
.jp-admin-theme .um-btn--surface {
  background: rgba(17, 36, 77, 0.7);
  border-color: rgba(133, 164, 255, 0.24);
  color: rgba(237, 244, 255, 0.95);
  box-shadow: 0 2px 10px rgba(2, 8, 23, 0.24);
}

.jp-admin-theme .um-btn--quiet:hover,
.jp-admin-theme .um-btn--surface:hover {
  background: rgba(27, 49, 96, 0.72);
  border-color: rgba(156, 187, 255, 0.46);
}

.jp-admin-theme .um-btn--surface.um-btn--primary {
  background: linear-gradient(180deg, #2d63d8, #244fb2);
  border-color: rgba(96, 144, 255, 0.64);
  color: #ffffff;
}

.jp-admin-theme .um-btn--surface.um-btn--reset-email {
  background: linear-gradient(180deg, #0f766e, #0b5f58);
  border-color: rgba(110, 231, 213, 0.46);
  color: #ecfeff;
  min-width: 108px;
  padding-left: 8px;
  padding-right: 8px;
  flex: 0 0 auto;
}

.jp-admin-theme .um-btn--surface.um-btn--reset-email:hover {
  background: linear-gradient(180deg, #0d877d, #0a6962);
  border-color: rgba(153, 246, 228, 0.62);
}

.jp-admin-theme .um-btn--surface.um-btn--danger {
  background: linear-gradient(180deg, #be352d, #9a2720);
  border-color: rgba(244, 140, 140, 0.42);
  color: #ffffff;
}

.jp-admin-theme .um-btn--surface.um-btn--danger-outline {
  background: rgba(146, 34, 34, 0.2);
  border-color: rgba(245, 145, 145, 0.42);
  color: #ffd9d9;
}

.jp-admin-theme .jp-table thead th,
.jp-admin-theme .jp-table td,
.jp-admin-theme .jp-table th {
  color: rgba(229, 239, 255, 0.95);
  border-bottom-color: rgba(126, 156, 236, 0.2);
}

.jp-admin-theme .jp-table thead th {
  background: rgba(19, 41, 82, 0.84);
}

.jp-admin-theme .jp-admin-log-pre {
  background: rgba(4, 12, 30, 0.9);
  border: 1px solid rgba(129, 160, 255, 0.24);
}

/* Improve text contrast for dark admin pages */
.jp-admin-theme,
.jp-admin-theme .jp-panel,
.jp-admin-theme .jp-panel p,
.jp-admin-theme .jp-panel li,
.jp-admin-theme .jp-panel td,
.jp-admin-theme .jp-panel th,
.jp-admin-theme .jp-panel code,
.jp-admin-theme .jp-panel label,
.jp-admin-theme .jp-form-grid label,
.jp-admin-theme .jp-admin-log-label,
.jp-admin-theme .um-field label,
.jp-admin-theme .um-field-label {
  color: rgba(231, 240, 255, 0.96);
}

.jp-admin-theme .jp-panel code {
  background: rgba(16, 35, 76, 0.72);
  border: 1px solid rgba(128, 158, 233, 0.3);
}

.jp-admin-theme .jp-link-quiet,
.jp-admin-theme a:not(.jp-btn):not(.um-btn) {
  color: rgba(170, 205, 255, 0.98);
}

.jp-admin-theme .jp-link-quiet:hover,
.jp-admin-theme a:not(.jp-btn):not(.um-btn):hover {
  color: rgba(204, 226, 255, 1);
}

/* Replace metallic buttons with flatter premium controls in admin */
.jp-admin-theme .jp-btn {
  background: rgba(16, 35, 76, 0.82);
  border: 1px solid rgba(130, 162, 238, 0.36);
  color: rgba(236, 244, 255, 0.98);
  box-shadow: 0 4px 14px rgba(2, 8, 23, 0.22);
}

.jp-admin-theme .jp-btn:hover {
  background: rgba(22, 44, 90, 0.9);
  border-color: rgba(156, 189, 255, 0.5);
}

.jp-admin-theme .jp-btn--primary {
  background: #2b61d6;
  border-color: #5f93ff;
  color: #ffffff;
}

.jp-admin-theme .jp-btn--primary:hover {
  background: #2f68e5;
  border-color: #80acff;
}

.jp-admin-theme .jp-btn--danger-ghost {
  background: rgba(158, 45, 45, 0.2);
  border-color: rgba(247, 145, 145, 0.45);
  color: #ffd7d7;
  box-shadow: none;
}

.jp-admin-theme .jp-btn--danger-ghost:hover {
  background: rgba(176, 55, 55, 0.3);
}

.jp-admin-theme .jp-panel .status-badge,
.jp-admin-theme .jp-panel .status-active,
.jp-admin-theme .jp-panel .status-disabled {
  color: rgba(231, 240, 255, 0.96);
}

.jp-admin-theme .um-user-row {
  grid-template-columns: minmax(360px, 0.9fr) minmax(470px, 1.1fr);
  gap: 16px;
  padding: 16px;
  border-radius: 14px;
  background: #0d234f;
  border: 1px solid rgba(120, 150, 226, 0.26);
  overflow: hidden;
}

/* Subtle role hierarchy accents (dark-theme compatible) */
.jp-admin-theme .um-user-row--superadmin {
  border-color: rgba(244, 114, 182, 0.34);
  box-shadow: inset 3px 0 0 rgba(244, 114, 182, 0.45);
}

.jp-admin-theme .um-user-row--admin {
  border-color: rgba(168, 85, 247, 0.34);
  box-shadow: inset 3px 0 0 rgba(168, 85, 247, 0.42);
}

.jp-admin-theme .um-user-row--director {
  border-color: rgba(96, 165, 250, 0.34);
  box-shadow: inset 3px 0 0 rgba(96, 165, 250, 0.42);
}

.jp-admin-theme .um-user-row--manager {
  border-color: rgba(56, 189, 248, 0.34);
  box-shadow: inset 3px 0 0 rgba(56, 189, 248, 0.42);
}

.jp-admin-theme .um-user-row--staff {
  border-color: rgba(74, 222, 128, 0.34);
  box-shadow: inset 3px 0 0 rgba(74, 222, 128, 0.38);
}

.jp-admin-theme .um-user-meta,
.jp-admin-theme .um-user-manage {
  background: #102956;
  border: 1px solid rgba(130, 160, 232, 0.24);
  border-radius: 12px;
  padding: 14px;
}

.jp-admin-theme .um-user-manage {
  gap: 10px;
}

.jp-admin-theme .um-rbac-panel {
  border-radius: 12px;
  padding: 12px;
  background: #123063;
  border-color: rgba(130, 160, 232, 0.24);
}

.jp-admin-theme .um-link-form {
  margin-top: 10px;
  background: #123063;
  border-color: rgba(130, 160, 232, 0.24);
}

.jp-admin-theme .um-base-radios {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.jp-admin-theme .um-check-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.jp-admin-theme .jp-footer-actions {
  border-top-color: rgba(126, 154, 230, 0.2);
}

.jp-admin-theme .jp-footer-actions .jp-link-quiet {
  color: rgba(199, 216, 249, 0.96);
  text-decoration: none;
  border-bottom: 1px solid rgba(199, 216, 249, 0.4);
}

/* Final professional density pass (User Management) */
.jp-admin-theme .um-shell {
  max-width: 1280px;
}

.jp-admin-theme .um-top {
  margin-bottom: 10px;
}

.jp-admin-theme .um-grid {
  gap: 10px;
}

.jp-admin-theme .um-card {
  padding: 14px;
  border-radius: 14px;
}

.jp-admin-theme .um-users-head {
  padding: 12px 14px;
  margin-bottom: 8px;
}

.jp-admin-theme .um-users-list {
  gap: 10px;
}

.jp-admin-theme .um-user-row {
  grid-template-columns: minmax(340px, 0.92fr) minmax(460px, 1.08fr);
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
}

.jp-admin-theme .um-user-meta,
.jp-admin-theme .um-user-manage {
  padding: 12px;
  border-radius: 10px;
}

.jp-admin-theme .um-user-name {
  gap: 8px;
}

.jp-admin-theme .um-user-roles {
  margin-top: 8px;
  gap: 6px;
}

.jp-admin-theme .um-link-form {
  margin-top: 8px;
  padding: 10px;
  border-radius: 10px;
}

.jp-admin-theme .um-link-grid {
  gap: 8px;
}

.jp-admin-theme .um-rbac-form {
  gap: 10px;
}

.jp-admin-theme .um-rbac-panel {
  padding: 10px;
  border-radius: 10px;
}

.jp-admin-theme .um-rbac-hint {
  margin: 0 0 8px;
}

.jp-admin-theme .um-base-radios {
  gap: 8px;
}

.jp-admin-theme .um-radio-tile,
.jp-admin-theme .um-check {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.86rem;
}

.jp-admin-theme .um-check-grid {
  gap: 7px;
}

.jp-admin-theme .um-btn--sm {
  min-width: 96px;
  padding: 8px 12px;
}

.jp-admin-theme .um-user-toolbar {
  gap: 8px 10px;
  padding-top: 10px;
  margin-top: 0;
}

.jp-admin-theme .um-toolbar-danger {
  gap: 6px;
}

/* User Management: strict enterprise mode */
.um-enterprise .um-shell {
  max-width: 1520px;
}

.um-enterprise .um-layout {
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.um-enterprise .um-users-head,
.um-enterprise .um-card {
  border-radius: 10px;
}

.um-enterprise .um-card {
  padding: 10px;
}

.um-enterprise .um-user-row {
  border-radius: 10px;
  padding: 8px;
  gap: 8px;
  grid-template-columns: minmax(300px, 0.92fr) minmax(360px, 1.08fr);
}

.um-enterprise .um-grid {
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 0;
}

.um-enterprise .um-users {
  margin-top: 0;
}

.um-enterprise .um-user-meta,
.um-enterprise .um-user-manage {
  border-radius: 8px;
  padding: 8px;
  background: #102956;
  border: 1px solid rgba(130, 160, 232, 0.24);
}

.um-enterprise .um-user-top {
  gap: 6px;
  align-items: center;
}

.um-enterprise .um-user-strong {
  font-size: 1rem;
}

.um-enterprise .um-user-id {
  font-size: 0.8rem;
}

.um-enterprise .um-user-roles {
  margin-top: 6px;
  gap: 4px;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

.um-enterprise .um-chip {
  padding: 3px 7px;
  font-size: 0.72rem;
  white-space: nowrap;
}

.um-enterprise .um-link-form {
  margin-top: 5px;
  padding: 6px;
  border-radius: 8px;
}

.um-enterprise .um-link-grid {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px;
}

.um-enterprise .um-rbac-form {
  gap: 6px;
}

.um-enterprise .um-rbac-panel {
  padding: 7px;
  border-radius: 8px;
}

.um-enterprise .um-rbac-hint {
  margin-bottom: 5px;
  font-size: 0.74rem;
}

.um-enterprise .um-base-radios,
.um-enterprise .um-check-grid {
  gap: 5px;
}

.um-enterprise .um-base-radios {
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
}

.um-enterprise .um-check-grid {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.um-enterprise .um-radio-tile,
.um-enterprise .um-check {
  min-height: 32px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.78rem;
}

.um-enterprise .um-btn--sm {
  min-width: 80px;
  padding: 6px 9px;
  border-radius: 9px;
}

.um-enterprise .um-user-top .um-btn--quiet.um-btn--sm {
  min-width: 74px;
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.8rem;
}

.um-enterprise .um-user-top .um-status {
  height: 32px;
  min-height: 32px;
  padding: 0 10px;
  font-size: 0.78rem;
}

.um-enterprise .um-user-toolbar {
  border-top-color: rgba(128, 156, 229, 0.14);
  padding-top: 6px;
  gap: 4px 5px;
  flex-wrap: nowrap;
  overflow-x: visible;
}

.um-enterprise .um-toolbar-danger {
  flex-wrap: nowrap;
  margin-left: auto;
}

.um-enterprise .um-toolbar-danger .um-btn {
  width: 124px;
  min-width: 124px;
  justify-content: center;
}

.um-enterprise .um-user-toolbar .um-btn {
  min-width: 0;
  white-space: nowrap;
  font-size: 0.76rem;
  padding: 5px 8px;
  border-radius: 8px;
}

@media (max-width: 1280px) {
  .um-enterprise .um-user-row {
    grid-template-columns: 1fr;
  }
}

/* Unified controls: same level/size across User Management */
.um-enterprise .um-form-grid {
  gap: 8px;
  align-items: end;
}

.um-enterprise .um-field {
  display: flex;
  flex-direction: column;
}

.um-enterprise .um-field label,
.um-enterprise .um-field-label {
  margin-bottom: 6px;
  min-height: 1.1rem;
}

.um-enterprise .um-field input,
.um-enterprise .um-field select,
.um-enterprise .um-link-form .um-field select {
  min-height: 36px;
  height: 36px;
  padding: 6px 10px;
  border-radius: 8px;
  line-height: 1.2;
  box-sizing: border-box;
}

.um-enterprise .um-field--actions {
  justify-content: flex-end;
}

.um-enterprise .um-btn,
.um-enterprise .um-btn--sm {
  min-height: 36px;
  height: 36px;
  padding: 6px 12px;
  border-radius: 8px;
  line-height: 1;
}

.um-enterprise .um-user-toolbar .um-btn,
.um-enterprise .um-toolbar-danger .um-btn {
  min-width: 86px;
}

.um-enterprise .um-base-radios .um-radio-tile,
.um-enterprise .um-check-grid .um-check {
  min-height: 34px;
  height: 34px;
  padding: 6px 8px;
  border-radius: 8px;
  align-items: center;
}

.um-enterprise .um-toolbar-divider {
  height: 20px;
}

@media (max-width: 1080px) {
  .um-enterprise .um-layout {
    grid-template-columns: 1fr;
  }
}

/* Settings: remove light grey blocks in dark admin theme */
.jp-admin-theme .jp-metric,
.jp-admin-theme .jp-metric--accent {
  background: rgba(11, 28, 62, 0.86);
  border: 1px solid rgba(126, 154, 230, 0.24);
  box-shadow: 0 8px 20px rgba(2, 8, 23, 0.28);
}

.jp-admin-theme .jp-metric-label {
  color: rgba(195, 213, 247, 0.92);
}

.jp-admin-theme .jp-metric-value {
  color: rgba(238, 245, 255, 0.98);
}

.jp-admin-theme .jp-tool-card {
  background: rgba(11, 28, 62, 0.86);
  border-color: rgba(126, 154, 230, 0.24);
  box-shadow: 0 8px 20px rgba(2, 8, 23, 0.28);
}

.jp-admin-theme .jp-tool-title {
  color: rgba(238, 245, 255, 0.98);
}

.jp-admin-theme .jp-tool-sub {
  color: rgba(195, 213, 247, 0.86);
}

/* Final contrast fixes for dark User Management */
.jp-admin-theme .um-user-row .um-btn--quiet,
.jp-admin-theme .um-enterprise .um-user-row .um-btn--quiet {
  color: rgba(236, 244, 255, 0.98);
  background: rgba(24, 46, 92, 0.7);
  border-color: rgba(133, 164, 255, 0.34);
}

.jp-admin-theme .um-user-row .um-btn--quiet:hover,
.jp-admin-theme .um-enterprise .um-user-row .um-btn--quiet:hover {
  color: #ffffff;
  background: rgba(31, 58, 112, 0.78);
  border-color: rgba(156, 187, 255, 0.52);
}

.jp-admin-theme .um-link-form .um-field label,
.jp-admin-theme .um-enterprise .um-link-form .um-field label,
.jp-admin-theme .um-chip-label,
.jp-admin-theme .um-rbac-panel .um-roles-label {
  color: rgba(214, 228, 255, 0.96);
}

.jp-admin-theme .um-link-form .um-field select,
.jp-admin-theme .um-enterprise .um-link-form .um-field select {
  color: #f3f8ff;
  background: rgba(11, 27, 62, 0.9);
  border-color: rgba(140, 173, 255, 0.4);
}

.jp-admin-theme .um-chip,
.jp-admin-theme .um-chip--addon,
.jp-admin-theme .um-chip--primary {
  border-color: rgba(142, 174, 255, 0.36);
  background: rgba(23, 47, 96, 0.58);
  color: rgba(235, 244, 255, 0.98);
}

.jp-admin-theme .um-status--active {
  color: #bbf7d0;
  border-color: rgba(74, 222, 128, 0.4);
  background: rgba(21, 128, 61, 0.25);
}

.jp-admin-theme .um-status--disabled {
  color: #fecaca;
  border-color: rgba(248, 113, 113, 0.42);
  background: rgba(153, 27, 27, 0.24);
}

/* User Management: unified control system (equal, clean, aligned) */
.um-enterprise .um-field,
.um-enterprise .um-field--actions,
.um-enterprise .um-link-actions {
  min-width: 0;
}

.um-enterprise .um-field label,
.um-enterprise .um-field-label {
  margin: 0 0 6px;
  min-height: 18px;
  display: inline-flex;
  align-items: center;
  line-height: 1.1;
}

.um-enterprise .um-field input,
.um-enterprise .um-field select,
.um-enterprise .um-link-form .um-field select,
.um-enterprise .um-btn,
.um-enterprise .um-btn--sm,
.um-enterprise .um-radio-tile,
.um-enterprise .um-check {
  height: 38px;
  min-height: 38px;
  box-sizing: border-box;
  border-radius: 9px;
}

.um-enterprise .um-field input,
.um-enterprise .um-field select,
.um-enterprise .um-link-form .um-field select {
  width: 100%;
  padding: 0 11px;
  line-height: 38px;
}

.um-enterprise .um-btn,
.um-enterprise .um-btn--sm {
  padding: 0 14px;
  line-height: 38px;
  min-width: 92px;
}

.um-enterprise .um-link-actions .um-btn {
  width: 92px;
  justify-content: center;
}

.um-enterprise .um-base-radios {
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.um-enterprise .um-check-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.um-enterprise .um-radio-tile,
.um-enterprise .um-check {
  padding: 0 10px;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  font-size: 0.8rem;
}

.um-enterprise .um-radio-tile input,
.um-enterprise .um-check input {
  margin: 0;
  transform: translateY(0);
}

.um-enterprise .um-form-grid,
.um-enterprise .um-link-grid {
  align-items: end;
}

.um-enterprise .um-user-toolbar {
  align-items: center;
}

/* Role/access tiles: full-button click behavior (hide native circles/boxes) */
.um-enterprise .um-radio-tile,
.um-enterprise .um-check {
  position: relative;
  cursor: pointer;
}

.um-enterprise .um-radio-tile input[type="radio"],
.um-enterprise .um-check input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.um-enterprise .um-radio-tile span,
.um-enterprise .um-check span {
  display: inline-block;
  width: 100%;
  pointer-events: none;
}

/* Prevent generic panel input styles from distorting radios/checkboxes */
.um-enterprise input[type="radio"],
.um-enterprise input[type="checkbox"] {
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  line-height: normal !important;
}

/* Current users row alignment cleanup */
.um-enterprise .um-user-row {
  align-items: stretch;
}

.um-enterprise .um-user-meta,
.um-enterprise .um-user-manage {
  height: 100%;
}

.um-enterprise .um-link-grid {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
}

.um-enterprise .um-link-actions .um-btn {
  width: 100px;
  min-width: 100px;
  white-space: nowrap;
}

.jp-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.jp-form-grid > * {
  min-width: 0;
}

@media (min-width: 768px) {
  .jp-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.jp-panel input,
.jp-panel select {
  width: 100%;
  padding: 11px 12px;
  margin-top: 8px;
  margin-bottom: 10px;
  border: 1px solid #b9c5d6;
  border-radius: var(--jp-radius-sm);
  background: #f8fafc;
  color: var(--jp-text);
  font-family: inherit;
  font-size: 0.9375rem;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.jp-panel input:focus,
.jp-panel select:focus {
  outline: none;
  border-color: var(--jp-blue);
  box-shadow: 0 0 0 4px rgba(47, 101, 217, 0.16);
}

.jp-panel button[type="submit"]:not(.btn-danger):not(.btn-success) {
  padding: 11px 18px;
  background: var(--jp-blue);
  color: #fff;
  border: none;
  border-radius: var(--jp-radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
  font-size: 0.9375rem;
}

.jp-panel button[type="submit"]:not(.btn-danger):not(.btn-success):hover {
  background: var(--jp-blue-hover);
}

.jp-panel .btn-danger {
  padding: 11px 18px;
  background: #c73737;
  color: #fff;
  border: none;
  border-radius: var(--jp-radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
}

.jp-panel .btn-danger:hover {
  background: #a92d2d;
}

.jp-panel .btn-danger.btn-danger--ghost {
  background: rgba(199, 55, 55, 0.10);
  color: #991b1b;
  border: 1px solid rgba(199, 55, 55, 0.22);
}

.jp-panel .btn-danger.btn-danger--ghost:hover {
  background: rgba(199, 55, 55, 0.14);
}

.jp-panel .btn-success {
  padding: 11px 18px;
  background: #1f8b4c;
  color: #fff;
  border: none;
  border-radius: var(--jp-radius-sm);
  cursor: pointer;
  font-weight: 600;
  font-family: inherit;
}

.jp-panel .btn-success:hover {
  background: #18703d;
}

/* User management layout */
.jp-panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.jp-panel-head h1 {
  letter-spacing: -0.03em;
}

.jp-panel-head .jp-muted {
  color: rgba(15, 23, 42, 0.62);
}

.jp-panel-head .jp-back-link {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(15, 23, 42, 0.02));
  text-decoration: none;
  color: rgba(15, 23, 42, 0.78);
  box-shadow: 0 8px 18px rgba(5, 13, 28, 0.06);
}

.jp-panel-head .jp-back-link:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(47, 101, 217, 0.04));
  border-color: rgba(47, 101, 217, 0.20);
  color: rgba(15, 23, 42, 0.92);
}

.jp-admin-tools {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 16px;
}

@media (min-width: 980px) {
  .jp-admin-tools {
    grid-template-columns: 1.2fr 1fr 0.9fr;
    align-items: start;
  }
}

.jp-tool-card {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(15, 23, 42, 0.02));
  padding: 16px;
  box-shadow: 0 18px 45px rgba(5, 13, 28, 0.08);
  overflow: hidden;
}

.jp-tool-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(47, 101, 217, 0.95), rgba(47, 101, 217, 0.0));
  opacity: 0.55;
}

.jp-tool-card::after {
  content: "";
  position: absolute;
  inset: -60px -60px auto auto;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(47, 101, 217, 0.16), rgba(255, 255, 255, 0.0) 60%);
  transform: rotate(6deg);
  pointer-events: none;
}

.jp-tool-card--danger {
  border-color: rgba(199, 55, 55, 0.22);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(199, 55, 55, 0.04));
}

.jp-tool-card--danger::before {
  background: linear-gradient(180deg, rgba(199, 55, 55, 0.95), rgba(199, 55, 55, 0.0));
  opacity: 0.55;
}

.jp-tool-card--danger::after {
  background: radial-gradient(circle at 30% 30%, rgba(199, 55, 55, 0.12), rgba(255, 255, 255, 0.0) 60%);
}

.jp-tool-title {
  font-weight: 800;
  letter-spacing: -0.01em;
  color: rgba(15, 23, 42, 0.92);
}

.jp-tool-sub {
  margin-top: 4px;
  color: rgba(15, 23, 42, 0.60);
  font-size: 0.92rem;
}

.jp-tool-card--danger .jp-tool-sub {
  color: rgba(153, 27, 27, 0.70);
}

.jp-tool-form {
  margin-top: 12px;
}

.jp-tool-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 640px) {
  .jp-tool-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.jp-tool-actions {
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
}

.jp-tool-actions button {
  width: 100%;
}

.jp-tool-grid > div {
  min-width: 0;
}

.jp-user-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

/* ----- Admin Users (complete redesign) ----- */
.um-shell {
  max-width: 1200px;
  margin: 0 auto;
}

.um-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.um-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.um-h1 {
  margin: 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(1.35rem, 2vw, 1.9rem);
  letter-spacing: -0.02em;
  font-weight: 850;
}

.um-sub {
  margin: 6px 0 0;
  color: rgba(214, 226, 255, 0.86);
  max-width: 70ch;
}

.um-sub2 {
  margin: 6px 0 0;
  color: rgba(15, 23, 42, 0.62);
}

.um-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.um-links a {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-weight: 650;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.um-links a:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.32);
}

.um-actions .um-action-link {
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  font-weight: 650;
  font-size: inherit;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.um-actions .um-action-link:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.32);
}

.um-modal[hidden] {
  display: none;
}

.um-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 18px;
}

.um-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 8, 23, 0.7);
  backdrop-filter: blur(2px);
}

.um-modal__dialog {
  position: relative;
  width: min(760px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  border-radius: 14px;
  padding: 14px;
  border: 1px solid rgba(126, 154, 230, 0.3);
  background: rgba(8, 22, 50, 0.98);
  box-shadow: 0 24px 70px rgba(2, 8, 23, 0.5);
}

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

.um-modal__header h2 {
  margin: 0;
  font-size: 1.05rem;
  color: rgba(236, 244, 255, 0.98);
}

.um-modal__close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 28px;
  min-height: 28px;
  height: auto;
  padding: 2px 4px;
  margin: -2px -6px 0 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: rgba(236, 244, 255, 0.88);
  font-size: 1.35rem;
  line-height: 1;
  font-weight: 300;
  cursor: pointer;
}

.um-modal__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.um-modal__close:focus-visible {
  outline: 2px solid rgba(126, 154, 230, 0.55);
  outline-offset: 2px;
}

.um-modal-open {
  overflow: hidden;
}

.um-modal .is-hidden {
  display: none !important;
}

.um-reset-choice-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.um-alert {
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.94);
  margin: 12px 0;
}

.um-alert--success {
  border-color: rgba(31, 139, 76, 0.28);
  background: rgba(31, 139, 76, 0.10);
}

.um-alert--error {
  border-color: rgba(180, 35, 24, 0.28);
  background: rgba(180, 35, 24, 0.10);
}

.um-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 10px;
}

@media (min-width: 980px) {
  .um-grid {
    grid-template-columns: 1.2fr 1fr 0.9fr;
    align-items: start;
  }
}

.um-card {
  position: relative;
  border-radius: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 18px 55px rgba(5, 13, 28, 0.22);
  overflow: hidden;
}

.um-card-head {
  cursor: pointer;
  list-style: none;
}

.um-card-head::-webkit-details-marker {
  display: none;
}

.um-card::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -70px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.00) 60%);
  opacity: 0.9;
  pointer-events: none;
}

.um-card--danger {
  border-color: rgba(255, 255, 255, 0.14);
}

.um-card-kicker {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(214, 226, 255, 0.78);
  font-weight: 850;
}

.um-card-title {
  margin-top: 4px;
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.96);
}

.um-card-help {
  margin-top: 6px;
  color: rgba(214, 226, 255, 0.78);
  font-size: 0.92rem;
}

.um-muted-note {
  margin-top: 6px;
  color: rgba(214, 226, 255, 0.78);
  font-size: 0.78rem;
}

.um-form {
  margin-top: 12px;
}

.um-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

@media (min-width: 680px) {
  .um-form-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.um-field label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(214, 226, 255, 0.78);
  font-weight: 850;
  margin-bottom: 8px;
}

.um-field input,
.um-field select {
  width: 100%;
  padding: 11px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.94);
  font-family: inherit;
  font-size: 0.95rem;
}

/* Native <option> lists use the OS / browser surface; light text becomes invisible on white. */
.um-field select option {
  background: #0f172a;
  color: #f8fafc;
}

.um-field input::placeholder {
  color: rgba(214, 226, 255, 0.65);
}

.um-field input:focus,
.um-field select:focus {
  outline: none;
  border-color: rgba(47, 101, 217, 0.55);
  box-shadow: 0 0 0 4px rgba(47, 101, 217, 0.22);
}

.um-field--full {
  grid-column: 1 / -1;
}

.um-field-label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(214, 226, 255, 0.78);
  font-weight: 850;
  margin-bottom: 8px;
}

.um-field--actions.um-field--full {
  justify-content: flex-end;
}

.um-base-radios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  align-items: stretch;
}

.um-radio-tile {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 14px;
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #ffffff;
  color: rgba(15, 23, 42, 0.9);
  font-weight: 750;
  font-size: 0.92rem;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}

.um-radio-tile input {
  width: auto;
  margin: 0;
  accent-color: #2f65d9;
}

.um-radio-tile:has(input:checked) {
  border-color: rgba(47, 101, 217, 0.55);
  background: rgba(47, 101, 217, 0.08);
  box-shadow: 0 0 0 1px rgba(47, 101, 217, 0.18);
}

.um-radio-tile--dark {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.94);
}

.um-radio-tile--dark:has(input:checked) {
  border-color: rgba(147, 197, 253, 0.65);
  background: rgba(47, 101, 217, 0.38);
  box-shadow: 0 0 0 1px rgba(147, 197, 253, 0.25);
}

/* Role colour coding — baseline account type tiles only */
.um-base-radios .um-radio-tile.um-role-superadmin {
  border-color: rgba(220, 38, 38, 0.35);
  background: rgba(220, 38, 38, 0.08);
}
.um-base-radios .um-radio-tile.um-role-superadmin:has(input:checked) {
  border-color: rgba(220, 38, 38, 0.75);
  background: rgba(220, 38, 38, 0.18);
  box-shadow: 0 0 0 1px rgba(220, 38, 38, 0.35);
}

.um-base-radios .um-radio-tile.um-role-admin {
  border-color: rgba(124, 58, 237, 0.35);
  background: rgba(124, 58, 237, 0.08);
}
.um-base-radios .um-radio-tile.um-role-admin:has(input:checked) {
  border-color: rgba(124, 58, 237, 0.72);
  background: rgba(124, 58, 237, 0.18);
  box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.32);
}

.um-base-radios .um-radio-tile.um-role-director {
  border-color: rgba(37, 99, 235, 0.35);
  background: rgba(37, 99, 235, 0.08);
}
.um-base-radios .um-radio-tile.um-role-director:has(input:checked) {
  border-color: rgba(37, 99, 235, 0.72);
  background: rgba(37, 99, 235, 0.18);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.32);
}

.um-base-radios .um-radio-tile.um-role-manager {
  border-color: rgba(14, 116, 144, 0.35);
  background: rgba(14, 116, 144, 0.08);
}
.um-base-radios .um-radio-tile.um-role-manager:has(input:checked) {
  border-color: rgba(14, 116, 144, 0.72);
  background: rgba(14, 116, 144, 0.18);
  box-shadow: 0 0 0 1px rgba(14, 116, 144, 0.32);
}

.um-base-radios .um-radio-tile.um-role-staff {
  border-color: rgba(22, 163, 74, 0.35);
  background: rgba(22, 163, 74, 0.08);
}
.um-base-radios .um-radio-tile.um-role-staff:has(input:checked) {
  border-color: rgba(22, 163, 74, 0.72);
  background: rgba(22, 163, 74, 0.18);
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.32);
}

.um-rbac-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.um-rbac {
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.um-rbac-hint {
  margin: 0 0 10px;
  font-size: 0.82rem;
  color: rgba(15, 23, 42, 0.5);
  line-height: 1.45;
}

.um-rbac-panel {
  padding: 14px 14px 12px;
  background: rgba(248, 250, 252, 0.92);
  border: 1px solid rgba(15, 23, 42, 0.07);
  border-radius: 14px;
}

.um-rbac-panel .um-roles-label {
  padding: 0;
  margin-bottom: 2px;
}

.um-user-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding-top: 14px;
  margin-top: 2px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.um-toolbar-divider {
  width: 1px;
  height: 26px;
  background: rgba(15, 23, 42, 0.1);
  flex-shrink: 0;
}

.um-toolbar-danger {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.um-inline-form {
  display: inline-block;
  margin: 0;
  vertical-align: middle;
}

.um-check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 8px;
}

.um-check {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 12px;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  background: rgba(248, 250, 252, 0.95);
  color: rgba(15, 23, 42, 0.88);
  font-size: 0.88rem;
  font-weight: 650;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.um-check input {
  width: auto;
  margin: 0;
  flex-shrink: 0;
  accent-color: #2f65d9;
}

.um-check:has(input:checked) {
  border-color: rgba(47, 101, 217, 0.45);
  background: rgba(47, 101, 217, 0.07);
}

.um-field--actions {
  display: flex;
  align-items: flex-end;
}

.um-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.10);
  color: rgba(255, 255, 255, 0.94);
  cursor: pointer;
  font-weight: 850;
  letter-spacing: -0.01em;
  text-decoration: none;
  box-shadow: 0 16px 40px rgba(5, 13, 28, 0.22);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}

.um-btn:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.26);
}

.um-btn:active {
  transform: translateY(0px);
  box-shadow: 0 12px 28px rgba(5, 13, 28, 0.20);
}

.um-btn--sm {
  padding: 10px 14px;
  min-width: 110px;
}

.um-btn--quiet {
  box-shadow: none;
}

.um-btn--primary {
  border-color: rgba(47, 101, 217, 0.40);
  background: linear-gradient(180deg, rgba(47, 101, 217, 0.96), rgba(37, 85, 188, 0.96));
}

.um-btn--success {
  border-color: rgba(31, 139, 76, 0.38);
  background: linear-gradient(180deg, rgba(31, 139, 76, 0.92), rgba(24, 112, 61, 0.92));
}

.um-btn--danger {
  border-color: rgba(180, 35, 24, 0.42);
  background: linear-gradient(180deg, rgba(180, 35, 24, 0.92), rgba(153, 27, 27, 0.92));
}

.um-btn--danger-ghost {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(180, 35, 24, 0.12);
}

/* Buttons on white user cards: readable text (default .um-btn assumes dark page). */
.um-btn--surface {
  border-color: rgba(15, 23, 42, 0.12);
  background: #ffffff;
  color: rgba(15, 23, 42, 0.9);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
}

.um-btn--surface:hover {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.18);
}

.um-btn--surface.um-btn--primary {
  border-color: rgba(47, 101, 217, 0.42);
  background: linear-gradient(180deg, rgba(47, 101, 217, 0.98), rgba(37, 85, 188, 0.98));
  color: #ffffff;
}

.um-btn--surface.um-btn--primary:hover {
  background: linear-gradient(180deg, rgba(55, 110, 230, 1), rgba(37, 85, 188, 1));
  border-color: rgba(47, 101, 217, 0.55);
}

.um-btn--surface.um-btn--success {
  border-color: rgba(31, 139, 76, 0.38);
  background: linear-gradient(180deg, rgba(31, 139, 76, 0.94), rgba(24, 112, 61, 0.94));
  color: #ffffff;
}

.um-btn--surface.um-btn--danger {
  border-color: rgba(180, 35, 24, 0.42);
  background: linear-gradient(180deg, rgba(180, 35, 24, 0.94), rgba(153, 27, 27, 0.94));
  color: #ffffff;
}

.um-btn--surface.um-btn--danger-outline {
  color: rgba(127, 29, 29, 0.95);
  background: rgba(254, 242, 242, 0.98);
  border-color: rgba(185, 28, 28, 0.35);
  box-shadow: none;
}

.um-btn--surface.um-btn--danger-outline:hover {
  background: rgba(254, 226, 226, 0.99);
  border-color: rgba(185, 28, 28, 0.5);
  color: rgba(91, 15, 15, 1);
}

.um-btn--surface.um-btn--disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}

.um-table-card {
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 16px;
  box-shadow: 0 18px 55px rgba(5, 13, 28, 0.14);
  overflow: hidden;
}

.um-users {
  margin-top: 14px;
}

.um-enterprise .um-users {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.um-users-head {
  margin-bottom: 10px;
  padding: 16px 16px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  box-shadow: 0 18px 55px rgba(5, 13, 28, 0.22);
}

.um-users-head .um-h2 {
  color: rgba(255, 255, 255, 0.96);
}

.um-users-head .um-sub2 {
  margin: 6px 0 0;
  max-width: 40rem;
  color: rgba(235, 242, 255, 0.95);
  line-height: 1.5;
}

.um-users-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.um-user-row {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(420px, 1.05fr);
  gap: 14px;
  padding: 18px 18px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(15, 23, 42, 0.07);
  box-shadow: 0 10px 36px rgba(5, 13, 28, 0.1);
}

.um-user-row .um-btn--quiet {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.12);
  color: rgba(15, 23, 42, 0.9);
}

.um-user-row .um-btn--quiet:hover {
  background: rgba(15, 23, 42, 0.08);
  border-color: rgba(15, 23, 42, 0.2);
}

.um-user-row .um-sub2,
.um-user-row .um-card-help {
  color: rgba(15, 23, 42, 0.66);
}

.um-link-form {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid rgba(15, 23, 42, 0.09);
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.9);
}

.um-link-grid {
  grid-template-columns: minmax(260px, 1fr) auto;
  align-items: end;
  gap: 10px;
}

.um-link-field,
.um-link-actions {
  margin: 0;
}

.um-link-form .um-field label {
  color: rgba(15, 23, 42, 0.72);
}

.um-link-form .um-field select {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.14);
  color: rgba(15, 23, 42, 0.92);
}

.um-link-form .um-field select:focus {
  border-color: rgba(47, 101, 217, 0.55);
  box-shadow: 0 0 0 4px rgba(47, 101, 217, 0.14);
}

.um-user-meta {
  display: grid;
  gap: 10px;
  align-content: start;
}

@media (max-width: 780px) {
  .um-link-grid {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

/* Whole user-card tint by baseline role */
.um-user-row--superadmin {
  border-color: rgba(220, 38, 38, 0.36);
  background:
    linear-gradient(135deg, rgba(220, 38, 38, 0.12), rgba(220, 38, 38, 0.02) 55%),
    rgba(255, 255, 255, 0.98);
}

.um-user-row--admin {
  border-color: rgba(124, 58, 237, 0.34);
  background:
    linear-gradient(135deg, rgba(124, 58, 237, 0.11), rgba(124, 58, 237, 0.02) 55%),
    rgba(255, 255, 255, 0.98);
}

.um-user-row--director {
  border-color: rgba(37, 99, 235, 0.34);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0.02) 55%),
    rgba(255, 255, 255, 0.98);
}

.um-user-row--manager {
  border-color: rgba(14, 116, 144, 0.34);
  background:
    linear-gradient(135deg, rgba(14, 116, 144, 0.11), rgba(14, 116, 144, 0.02) 55%),
    rgba(255, 255, 255, 0.98);
}

.um-user-row--staff {
  border-color: rgba(22, 163, 74, 0.34);
  background:
    linear-gradient(135deg, rgba(22, 163, 74, 0.11), rgba(22, 163, 74, 0.02) 55%),
    rgba(255, 255, 255, 0.98);
}

@media (max-width: 980px) {
  html:not(.jp-force-desktop-viewport) .um-user-row {
    grid-template-columns: 1fr;
  }
}

.um-user-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.um-user-name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}

.um-user-top-right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  flex-shrink: 1;
  min-width: 0;
  max-width: 100%;
  justify-content: flex-end;
  margin-top: 1px;
}

.um-user-strong {
  font-weight: 900;
  letter-spacing: -0.01em;
  color: rgba(15, 23, 42, 0.92);
}

.um-user-id {
  color: rgba(15, 23, 42, 0.55);
  font-size: 0.85rem;
}

.um-user-roles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.um-account-panel {
  margin-top: 10px;
  border: 1px solid rgba(130, 160, 232, 0.24);
  border-radius: 10px;
  padding: 8px;
  background: rgba(13, 35, 76, 0.72);
  display: grid;
  gap: 7px;
}

.um-account-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}

.um-account-label {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 800;
  color: rgba(214, 226, 255, 0.78);
}

.um-account-value {
  min-width: 0;
  color: rgba(237, 244, 255, 0.95);
}

.um-account-value.um-mono {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.um-account-panel .um-user-roles {
  margin-top: 0;
}

.um-account-panel .um-user-roles .um-chip {
  min-height: 24px;
  height: 24px;
  padding: 0 8px;
  font-size: 0.72rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  box-sizing: border-box;
}

.um-account-panel .um-account-row .um-btn.um-btn--quiet.um-btn--sm,
.um-account-panel .um-account-row .um-chip.um-chip--addon {
  min-height: 24px;
  height: 24px;
  padding: 0 8px;
  font-size: 0.72rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}

.um-chip-label {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 850;
  color: rgba(15, 23, 42, 0.42);
  margin-right: 2px;
}

.um-user-manage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.um-roles-stack {
  display: grid;
  gap: 8px;
}

.um-roles-label {
  font-size: 0.72rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 900;
  color: rgba(15, 23, 42, 0.56);
}

.um-btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.um-table-head {
  padding: 18px 18px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.um-h2 {
  margin: 0;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  color: rgba(15, 23, 42, 0.92);
}

.um-table-wrap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

.um-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.um-table thead th {
  position: sticky;
  top: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.03), rgba(15, 23, 42, 0.015));
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 0.72rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.56);
  text-align: left;
  padding: 12px 12px;
}

.um-table td {
  padding: 14px 12px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  vertical-align: middle;
}

.um-table tbody tr:hover td {
  background: rgba(47, 101, 217, 0.03);
}

.um-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.um-user {
  font-weight: 850;
  color: rgba(15, 23, 42, 0.92);
}

.um-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.um-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(47, 101, 217, 0.07);
  color: rgba(15, 23, 42, 0.82);
  font-weight: 750;
  font-size: 0.84rem;
}

.um-chip--primary {
  background: rgba(47, 101, 217, 0.14);
  border-color: rgba(47, 101, 217, 0.28);
  font-weight: 800;
}

.um-chip--addon {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.1);
  color: rgba(15, 23, 42, 0.78);
}

.um-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 850;
  font-size: 0.82rem;
  border: 1px solid rgba(15, 23, 42, 0.08);
  white-space: nowrap;
  align-self: flex-start;
}

.um-status--active {
  background: rgba(31, 139, 76, 0.10);
  border-color: rgba(31, 139, 76, 0.20);
  color: rgba(24, 112, 61, 0.95);
}

.um-status--disabled {
  background: rgba(180, 35, 24, 0.08);
  border-color: rgba(180, 35, 24, 0.18);
  color: rgba(153, 27, 27, 0.92);
}

.um-row-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

@media (max-width: 520px) {
  html:not(.jp-force-desktop-viewport) .um-user-toolbar .um-toolbar-divider {
    display: none;
  }

  html:not(.jp-force-desktop-viewport) .um-user-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  html:not(.jp-force-desktop-viewport) .um-user-toolbar > .um-btn.um-btn--primary {
    width: 100%;
    justify-content: center;
  }

  html:not(.jp-force-desktop-viewport) .um-toolbar-danger {
    justify-content: flex-start;
  }
}

/* Premium button system (User Management + panels) */
.jp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(15, 23, 42, 0.02));
  color: rgba(15, 23, 42, 0.92);
  cursor: pointer;
  font-weight: 750;
  font-family: inherit;
  font-size: 0.9375rem;
  box-shadow: 0 14px 30px rgba(5, 13, 28, 0.10);
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.jp-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 36px rgba(5, 13, 28, 0.12);
  border-color: rgba(47, 101, 217, 0.18);
}

.jp-btn:active {
  transform: translateY(0px);
  box-shadow: 0 12px 22px rgba(5, 13, 28, 0.10);
}

.jp-btn--sm {
  padding: 10px 14px;
  border-radius: 11px;
  min-width: 110px;
}

.jp-btn--primary {
  border-color: rgba(47, 101, 217, 0.22);
  background: linear-gradient(180deg, rgba(47, 101, 217, 0.96), rgba(37, 85, 188, 0.96));
  color: #fff;
}

.jp-btn--primary:hover {
  border-color: rgba(47, 101, 217, 0.30);
}

.jp-btn--success {
  border-color: rgba(31, 139, 76, 0.26);
  background: linear-gradient(180deg, rgba(31, 139, 76, 0.92), rgba(24, 112, 61, 0.92));
  color: #fff;
}

.jp-btn--danger {
  border-color: rgba(180, 35, 24, 0.26);
  background: linear-gradient(180deg, rgba(180, 35, 24, 0.92), rgba(153, 27, 27, 0.92));
  color: #fff;
}

.jp-btn--danger-ghost {
  background: rgba(180, 35, 24, 0.08);
  border-color: rgba(180, 35, 24, 0.20);
  color: rgba(153, 27, 27, 0.92);
  box-shadow: none;
}

.jp-btn--danger-ghost:hover {
  background: rgba(180, 35, 24, 0.12);
  box-shadow: 0 14px 30px rgba(5, 13, 28, 0.10);
}

/* Roles editor (compact + aligned) */
.jp-roles-editor {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
}

.jp-role-select {
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #f8fafc;
  color: rgba(15, 23, 42, 0.92);
  font-family: inherit;
  font-size: 0.9375rem;
}

.jp-user-actions .action-form {
  margin: 0;
}


/* Make the current users table feel less "cheap" */
.jp-panel table thead th {
  position: sticky;
  top: 0;
}

.jp-panel th {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.035), rgba(15, 23, 42, 0.02));
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
}

.jp-panel tbody tr:hover td {
  background: rgba(15, 23, 42, 0.02);
}

.jp-panel .role-badge {
  border-radius: 999px;
  padding: 6px 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: rgba(47, 101, 217, 0.08);
  border: 1px solid rgba(47, 101, 217, 0.18);
  color: rgba(15, 23, 42, 0.82);
}

.jp-panel .role-checks label {
  border-radius: 10px;
}

.jp-panel .action-form button {
  padding: 10px 14px;
}

.jp-panel .btn-success,
.jp-panel .btn-danger,
.jp-panel button[type="submit"]:not(.btn-danger):not(.btn-success) {
  box-shadow: 0 10px 22px rgba(5, 13, 28, 0.10);
}

.jp-panel button[type="submit"]:not(.btn-danger):not(.btn-success):active,
.jp-panel .btn-success:active,
.jp-panel .btn-danger:active {
  transform: translateY(1px);
  box-shadow: 0 7px 16px rgba(5, 13, 28, 0.10);
}

.jp-message {
  background: #e8f7e8;
  color: #166534;
  padding: 12px 14px;
  border-radius: var(--jp-radius-sm);
  margin-bottom: 16px;
  border: 1px solid #cce9cc;
  font-size: 0.9375rem;
}

.jp-error-banner {
  background: #fdeaea;
  color: #991b1b;
  padding: 12px 14px;
  border-radius: var(--jp-radius-sm);
  margin-bottom: 16px;
  border: 1px solid #f5caca;
  font-size: 0.9375rem;
}

.jp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin-top: 8px;
}

.jp-panel table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.jp-panel th,
.jp-panel td {
  text-align: left;
  padding: 12px 10px;
  border-bottom: 1px solid #e5e7eb;
  vertical-align: middle;
}

.jp-panel th {
  background: var(--jp-surface-subtle);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--jp-text-muted);
}

.jp-panel .inline-form {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-direction: column;
}

.jp-panel .inline-form select {
  margin: 0;
  min-width: 140px;
}

.jp-panel .inline-form button {
  margin: 0;
  white-space: nowrap;
}

.jp-panel .role-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jp-panel .role-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jp-panel .role-checks label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--jp-surface-subtle);
  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-sm);
  padding: 8px 10px;
  font-size: 0.8125rem;
  font-weight: normal;
}

.jp-panel .role-checks input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.jp-panel .role-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eef3ff;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--jp-text);
}

.jp-panel .status-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.jp-panel .status-active {
  background: #e8f7e8;
  color: #166534;
}

.jp-panel .status-disabled {
  background: #fdeaea;
  color: #991b1b;
}

.jp-panel .action-form {
  margin: 0;
}

.jp-footer-actions {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--jp-border);
}

.jp-footer-actions a {
  font-weight: 500;
}

/* ── Work Diary ────────────────────────────────────────── */

.wd-shell {
  max-width: 1400px;
  margin: 0 auto;
  color-scheme: dark;
}

.wd-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.wd-top-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.wd-h1 {
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  letter-spacing: -0.02em;
  font-weight: 750;
}

.wd-h2 {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.1rem;
  font-weight: 700;
}

.wd-sub {
  margin: 6px 0 0;
  color: rgba(214, 226, 255, 0.86);
  max-width: 68ch;
}

.wd-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.wd-links a {
  color: rgba(214, 226, 255, 0.92);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
}

.wd-links a:hover {
  text-decoration: underline;
}

.wd-top-actions a {
  color: rgba(214, 226, 255, 0.92);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
}

.wd-top-actions a:hover {
  text-decoration: underline;
}

.wd-muted {
  color: rgba(214, 226, 255, 0.6);
  font-size: 0.875rem;
}

.wd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

/* Hub: cards keep natural height (no stretching to match tall neighbour). */
.wd-grid--hub {
  align-items: start;
  gap: 20px;
  margin-bottom: 28px;
}

.wd-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--jp-radius-md);
  padding: 18px 16px;
}

.wd-card--compact {
  padding: 14px 16px 16px;
}

.wd-card--employees {
  padding-bottom: 16px;
}

.wd-card-head {
  margin-bottom: 10px;
}

.wd-card-head--tight {
  margin-bottom: 8px;
}

.wd-kicker-ic {
  margin-right: 6px;
  opacity: 0.92;
}

.wd-form--inline-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.wd-form--inline-actions .wd-open-week-btn {
  align-self: flex-start;
  margin-top: 0;
}

.wd-emp-add-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.15);
}

.wd-emp-add-bar .wd-field {
  flex: 1 1 160px;
  min-width: 140px;
  margin: 0;
}

.wd-emp-add-btn {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 16px;
  font-weight: 700;
  font-size: 0.875rem;
  white-space: nowrap;
}

.wd-emp-summary {
  margin: 16px 0 10px;
  font-size: 0.875rem;
  color: rgba(214, 226, 255, 0.75);
}

.wd-emp-summary strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 750;
}

.wd-emp-empty-hint {
  margin: 14px 0 0;
}

.wd-emp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  margin-top: 10px;
}

.wd-emp-chip {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  max-width: 100%;
  min-height: 34px;
  padding: 4px 6px 4px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  font-size: 0.84rem;
  font-weight: 650;
  color: #fff;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.wd-emp-chip:hover {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
}

.wd-emp-chip-name {
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 130px;
}

.wd-emp-chip-pc {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(214, 226, 255, 0.65);
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
}

.wd-emp-chip-remove-form {
  display: inline-flex;
  margin: 0;
  padding: 0;
}

.wd-emp-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 220, 230, 0.95);
  font-size: 0.92rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.wd-emp-chip-remove:hover {
  border-color: rgba(255, 180, 200, 0.9);
  background: rgba(134, 31, 84, 0.18);
  color: #fff;
}

.wd-section--recent {
  margin-top: 8px;
  width: 100%;
}

.wd-recent-card {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  padding: 16px 16px 8px;
  box-shadow: 0 8px 24px rgba(2, 8, 23, 0.2);
}

.wd-h2--section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 1.05rem;
}

.wd-h2-ic {
  font-size: 1.1em;
  line-height: 1;
  opacity: 0.9;
}

.wd-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 0 -4px;
  padding: 0 4px 8px;
}

.wd-table-diary-actions {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.wd-week-delete-form {
  margin: 0;
  display: inline;
}

.wd-table-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  padding: 3px 7px;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: 6px;
  border: 1px solid #c53d3d;
  background: #fff;
  color: #9b1c1c;
  cursor: pointer;
  box-sizing: border-box;
}

.wd-table-delete-btn:hover {
  background: #fff5f5;
  border-color: #a52727;
  color: #7f1010;
}

.wd-table-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
}

.wd-table-dash {
  font-size: 0.85rem;
}

.wd-card-kicker {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: rgba(214, 226, 255, 0.6);
}

.wd-card-title {
  font-size: 1.05rem;
  font-weight: 720;
  color: rgba(255, 255, 255, 0.95);
}

.wd-card-help {
  font-size: 0.82rem;
  color: rgba(214, 226, 255, 0.6);
  margin-top: 2px;
}

.wd-form {
  color: #fff;
}

.wd-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wd-field label {
  font-size: 0.8rem;
  font-weight: 650;
  color: rgba(214, 226, 255, 0.86);
}

.wd-field input,
.wd-field select {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--jp-radius-sm);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: inherit;
  font-size: 0.875rem;
}

.wd-field input:focus,
.wd-field select:focus {
  outline: none;
  border-color: var(--jp-blue);
  box-shadow: 0 0 0 2px rgba(47, 101, 217, 0.3);
}

/* Date input: replace default blue calendar glyph (Chromium/WebKit) with theme-aware icon */
.wd-field input[type="date"] {
  color-scheme: dark;
}

.wd-field input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-left: 4px;
  opacity: 1;
  background: center / 18px 18px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='rgba%28214%2C226%2C255%2C0.9%29' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

/* Native <select> in dark diary UIs: keep selected text and options readable (not same as background). */
.wd-shell select {
  color: #f0f4ff;
  background-color: rgba(12, 24, 52, 0.98);
}

.wd-shell select option {
  background-color: #0f1c3a;
  color: #f0f4ff;
}

.wd-emp-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.wd-emp-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: var(--jp-radius-sm);
}

.wd-emp-name {
  font-weight: 650;
  color: #fff;
}

.wd-emp-pc {
  font-size: 0.8rem;
  color: rgba(214, 226, 255, 0.6);
}

.wd-emp-remove {
  margin-left: auto;
  background: none;
  border: none;
  color: rgba(255, 100, 100, 0.8);
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}

.wd-emp-remove:hover {
  color: #ff4444;
}

.wd-section {
  margin-top: 24px;
}

.wd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.wd-table th {
  text-align: left;
  padding: 8px 10px;
  color: rgba(214, 226, 255, 0.7);
  font-weight: 650;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.wd-table td {
  padding: 10px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.wd-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

.wd-empty {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--jp-radius-md);
  padding: 20px;
  color: rgba(214, 226, 255, 0.8);
}

.wd-empty a {
  color: var(--jp-blue);
}

/* ── Works Schedule hub (own layout tokens; not Work Diary wd-*) ── */
.ws-hub-shell {
  max-width: 1400px;
  margin: 0 auto;
  color-scheme: dark;
}

.ws-hub-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.ws-hub-h1 {
  margin: 0;
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  letter-spacing: -0.02em;
  font-weight: 750;
}

.ws-hub-h2 {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.1rem;
  font-weight: 700;
}

.ws-hub-sub {
  margin: 6px 0 0;
  color: rgba(214, 226, 255, 0.86);
  max-width: 68ch;
}

.ws-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.ws-hub-grid--hub {
  align-items: start;
  gap: 20px;
  margin-bottom: 28px;
}

.ws-hub-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--jp-radius-md);
  padding: 18px 16px;
}

.ws-hub-card--compact {
  padding: 14px 16px 16px;
}

.ws-hub-card-head {
  margin-bottom: 10px;
}

.ws-hub-card-head--tight {
  margin-bottom: 8px;
}

.ws-hub-kicker-ic {
  margin-right: 6px;
  opacity: 0.92;
}

.ws-hub-form--inline-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.ws-hub-form--inline-actions .ws-hub-open-week-btn {
  align-self: flex-start;
  margin-top: 0;
}

.ws-hub-section--recent {
  margin-top: 8px;
  width: 100%;
}

.ws-hub-recent-card {
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  padding: 16px 16px 8px;
  box-shadow: 0 8px 24px rgba(2, 8, 23, 0.2);
}

.ws-hub-h2--section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 1.05rem;
}

.ws-hub-h2-ic {
  font-size: 1.1em;
  line-height: 1;
  opacity: 0.9;
}

.ws-hub-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: 0 -4px;
  padding: 0 4px 8px;
}

.ws-hub-table-open-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
}

.ws-hub-card-kicker {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: rgba(214, 226, 255, 0.6);
}

.ws-hub-card-title {
  font-size: 1.05rem;
  font-weight: 720;
  color: rgba(255, 255, 255, 0.95);
}

.ws-hub-form {
  color: #fff;
}

.ws-hub-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ws-hub-field label {
  font-size: 0.8rem;
  font-weight: 650;
  color: rgba(214, 226, 255, 0.86);
}

.ws-hub-field input,
.ws-hub-field select {
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--jp-radius-sm);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: inherit;
  font-size: 0.875rem;
}

.ws-hub-field input:focus,
.ws-hub-field select:focus {
  outline: none;
  border-color: var(--jp-blue);
  box-shadow: 0 0 0 2px rgba(47, 101, 217, 0.3);
}

.ws-hub-field input[type="date"] {
  color-scheme: dark;
}

.ws-hub-field input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  width: 20px;
  height: 20px;
  padding: 2px;
  margin-left: 4px;
  opacity: 1;
  background: center / 18px 18px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='rgba%28214%2C226%2C255%2C0.9%29' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.ws-hub-shell select {
  color: #f0f4ff;
  background-color: rgba(12, 24, 52, 0.98);
}

.ws-hub-shell select option {
  background-color: #0f1c3a;
  color: #f0f4ff;
}

.ws-hub-section {
  margin-top: 24px;
}

.ws-hub-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.ws-hub-table th {
  text-align: left;
  padding: 8px 10px;
  color: rgba(214, 226, 255, 0.7);
  font-weight: 650;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ws-hub-table td {
  padding: 10px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ws-hub-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* Schedule grid */
.wd-day-section {
  margin-bottom: 14px;
}

.wd-day-bar {
  background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 14px;
  border-radius: var(--jp-radius-sm) var(--jp-radius-sm) 0 0;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.wd-day-bar--entry {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  text-align: left;
}

.wd-day-bar-title {
  font-weight: 750;
  letter-spacing: -0.01em;
}

.wd-day-bar-tools {
  display: flex;
  align-items: center;
  gap: 8px 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1 1 280px;
}

.wd-day-start-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: inherit;
  margin: 0;
}

.wd-day-start-lbl {
  white-space: nowrap;
  opacity: 0.92;
}

.wd-day-start-input {
  min-width: 130px;
  width: 150px;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(15, 23, 42, 0.45);
  color: #fff;
}

.wd-day-start-input::placeholder {
  color: rgba(248, 250, 252, 0.45);
}

.wd-day-start-input:focus {
  outline: none;
  border-color: rgba(248, 250, 252, 0.55);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

.wd-day-stat {
  font-size: 0.82rem;
  opacity: 0.94;
  white-space: nowrap;
}

.wd-day-stat strong {
  font-weight: 750;
}

.wd-day-jobs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Remove job: sits in last row beside Travel (£), aligned to input baseline */
.wd-job-row-actions {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin: 0;
  padding: 0;
}

.wd-diary-footer {
  margin-top: 20px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.wd-diary-footer-export {
  opacity: 0.92;
}

.wd-autosave-status {
  font-size: 0.85rem;
  color: rgba(214, 226, 255, 0.75);
}

.wd-modal-addstop-row {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.wd-modal-btn-sm {
  padding: 6px 10px;
  font-size: 0.8rem;
}

.wd-mileage-results {
  margin-top: 14px;
}

.wd-mileage-resolved {
  margin-bottom: 8px;
  font-size: 0.85rem;
  color: rgba(214, 226, 255, 0.78);
}

.wd-mileage-error {
  margin-top: 10px;
  font-size: 0.875rem;
  color: #f87171;
}

.wd-day-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.wd-sched-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-top: none;
}

.wd-sched-table th {
  padding: 6px 4px;
  color: rgba(214, 226, 255, 0.7);
  font-weight: 650;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  white-space: nowrap;
}

.wd-sched-table td {
  padding: 3px 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.wd-emp-cell {
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  padding-left: 8px !important;
  min-width: 90px;
}

.wd-cell-input {
  width: 100%;
  padding: 5px 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-family: inherit;
  font-size: 0.78rem;
}

.wd-cell-input:focus {
  outline: none;
  border-color: var(--jp-blue);
}

.wd-cell-sm {
  max-width: 90px;
}

.wd-col-narrow {
  width: 32px;
  text-align: center !important;
}

.wd-col-narrow input[type="checkbox"] {
  width: 16px;
  height: 16px;
}

/* Bulk assign */
.wd-bulk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
}


/* Tesco Store Database: catalogue buttons stay on one row (grid cell was too narrow). */
.wd-bulk-grid .it-catalogue-field {
  grid-column: span 2;
  min-width: 0;
}
.wd-bulk-grid .it-catalogue-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: stretch;
}
.wd-bulk-grid .it-catalogue-actions .jp-btn-secondary {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  justify-content: center;
}

/* Reset in filter grid: half the column width, compact padding */
.wd-bulk-grid .it-reports-filter-reset-field {
  align-items: flex-start;
  justify-self: start;
  width: 50%;
  min-width: 0;
  max-width: 100%;
}

.wd-bulk-grid .it-reports-filter-reset-field .jp-btn-secondary {
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  padding: 8px 10px;
  justify-content: center;
}

.wd-bulk-checks {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  grid-column: 1 / -1;
  padding-top: 4px;
}

.wd-bulk-checks label {
  font-size: 0.82rem;
  color: rgba(214, 226, 255, 0.86);
  display: flex;
  align-items: center;
  gap: 4px;
}

.wd-check-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.wd-check-row label {
  font-size: 0.85rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 4px;
}

.wd-check-all {
  font-weight: 700 !important;
}

/* Preview table */
.wd-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin-top: 8px;
}

.wd-preview-table th {
  text-align: left;
  padding: 6px 8px;
  color: rgba(214, 226, 255, 0.7);
  font-weight: 650;
  font-size: 0.72rem;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.wd-preview-table td {
  padding: 6px 8px;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.wd-link-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.wd-diary-links {
  margin-top: 16px;
}

/* Diary entry page */
.wd-diary-row {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  padding: 8px 12px 6px;
  border-radius: var(--jp-radius-sm);
}

.wd-diary-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wd-diary-fields-bulk {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}

.wd-diary-job-last-row {
  display: grid;
  grid-template-columns: minmax(140px, 2fr) minmax(88px, 1fr) minmax(88px, 1fr) minmax(88px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

@media (max-width: 720px) {
  html:not(.jp-force-desktop-viewport) .wd-diary-job-last-row {
    grid-template-columns: 1fr;
  }

  html:not(.jp-force-desktop-viewport) .wd-diary-job-last-row .wd-job-row-actions {
    justify-content: flex-start;
  }
}

.wd-mileage-total {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  padding: 8px 14px;
  border-radius: var(--jp-radius-sm);
}

.wd-mileage-label {
  font-weight: 650;
  font-size: 0.9rem;
  color: rgba(214, 226, 255, 0.86);
}

.wd-mileage-value {
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
}

.wd-emp-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.wd-emp-tab {
  padding: 6px 12px;
  border-radius: var(--jp-radius-sm);
  font-size: 0.82rem;
  font-weight: 650;
  text-decoration: none;
  color: rgba(214, 226, 255, 0.86);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: background 0.15s;
}

.wd-emp-tab:hover {
  background: rgba(255, 255, 255, 0.12);
}

.wd-emp-tab--active {
  background: linear-gradient(180deg, #9c2f66, #861f54);
  color: #fff;
  border-color: rgba(134, 31, 84, 0.55);
}

.wd-calc-btn {
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 650;
  white-space: nowrap;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.wd-calc-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}

.wd-calc-btn--primary {
  background: linear-gradient(180deg, #9c2f66, #861f54);
  border-color: rgba(134, 31, 84, 0.55);
  color: #fff;
}

.wd-calc-btn--primary:hover {
  filter: brightness(1.05);
  background: linear-gradient(180deg, #9c2f66, #861f54);
}

.wd-calc-btn--danger {
  background: rgba(127, 29, 29, 0.35);
  border-color: rgba(248, 113, 113, 0.45);
  color: #fecaca;
}

.wd-calc-btn--danger:hover {
  background: rgba(153, 27, 27, 0.5);
  color: #fff;
}

/* Mileage modal */
.wd-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wd-modal-content {
  background: var(--jp-navy-900);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--jp-radius-lg);
  width: 90%;
  max-width: 500px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--jp-shadow-lg);
}

.wd-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.wd-modal-header h3 {
  margin: 0;
  color: #fff;
  font-size: 1.05rem;
}

.wd-modal-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 2px 6px;
}

.wd-modal-body {
  padding: 14px 18px;
}

.wd-modal-footer {
  padding: 12px 18px 16px;
  display: flex;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.wd-stop-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.wd-stop-row label {
  font-size: 0.82rem;
  font-weight: 650;
  color: rgba(214, 226, 255, 0.86);
  min-width: 50px;
}

.wd-stop-row input {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--jp-radius-sm);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: inherit;
  font-size: 0.875rem;
}

.wd-stop-row input:focus {
  outline: none;
  border-color: var(--jp-blue);
}

.wd-stop-remove {
  background: none;
  border: none;
  color: rgba(255, 100, 100, 0.8);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 2px 6px;
}

.wd-mileage-leg {
  padding: 4px 0;
  font-size: 0.85rem;
  color: rgba(214, 226, 255, 0.86);
}

.wd-mileage-result-total {
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--jp-radius-sm);
  font-size: 0.95rem;
  color: #fff;
}

/* ── Cross-device responsiveness hardening ─────────────────── */
/* Header + nav: only adjust on genuinely narrow desktop/laptop windows,
   NOT on forced-desktop-viewport non-PC devices where we want the full
   PC header layout preserved (Documents-page style). */
@media (max-width: 900px) {
  /* Desktop/narrow-window templates only: mobile variant (body.jp-portal-mobile) uses
     jp-header--mobile-shell + portal-mobile.css; without this guard, html never gets
     jp-force-desktop-viewport on phones, so these rules incorrectly target the mobile shell. */
  html:not(.jp-force-desktop-viewport) body:not(.jp-portal-mobile) .jp-header {
    padding: 10px 12px;
  }

  html:not(.jp-force-desktop-viewport) body:not(.jp-portal-mobile) .jp-header-inner {
    grid-template-columns: 1fr auto 1fr;
    gap: 10px;
  }

  html:not(.jp-force-desktop-viewport) body:not(.jp-portal-mobile) .jp-header-center {
    justify-items: center;
    width: auto;
  }

  html:not(.jp-force-desktop-viewport) body:not(.jp-portal-mobile) .jp-header-right {
    justify-self: end;
  }

  html:not(.jp-force-desktop-viewport) body:not(.jp-portal-mobile) .jp-header-actions {
    justify-content: flex-end;
  }

  html:not(.jp-force-desktop-viewport) body:not(.jp-portal-mobile) .jp-header-logo {
    padding: 4px 10px;
  }

  html:not(.jp-force-desktop-viewport) body:not(.jp-portal-mobile) .jp-header-logo img {
    height: 40px;
  }

  html:not(.jp-force-desktop-viewport) body:not(.jp-portal-mobile) .jp-header-nav {
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: center;
    padding-bottom: 2px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }

  html:not(.jp-force-desktop-viewport) body:not(.jp-portal-mobile) .jp-header-nav a {
    white-space: nowrap;
    flex: 0 0 auto;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }

  html:not(.jp-force-desktop-viewport) .jp-main {
    padding: var(--jp-page-pad);
  }

  html:not(.jp-force-desktop-viewport) .jp-btn-secondary {
    min-height: 42px;
    padding: 12px 16px;
  }

  .dash-hero,
  .wd-card,
  .ws-hub-card,
  .um-card {
    border-radius: 12px;
  }
}

@media (max-width: 640px) {
  /* Only hide user pill and resize elements on genuinely narrow screens,
     not on forced-desktop-viewport devices. */
  html:not(.jp-force-desktop-viewport) body:not(.jp-portal-mobile) .jp-user-pill {
    display: none;
  }

  html:not(.jp-force-desktop-viewport) .wd-emp-add-btn {
    width: 100%;
    justify-content: center;
  }

  html:not(.jp-force-desktop-viewport) .wd-top,
  html:not(.jp-force-desktop-viewport) .ws-hub-top,
  html:not(.jp-force-desktop-viewport) .um-top {
    gap: 10px;
  }

  html:not(.jp-force-desktop-viewport) .wd-h1,
  html:not(.jp-force-desktop-viewport) .ws-hub-h1,
  html:not(.jp-force-desktop-viewport) .um-h1,
  html:not(.jp-force-desktop-viewport) .dash-h1 {
    font-size: 1.35rem;
  }

  html:not(.jp-force-desktop-viewport) .dash-card {
    padding: 12px;
    gap: 10px;
  }

  html:not(.jp-force-desktop-viewport) .dash-card-title {
    font-size: 0.98rem;
  }

  html:not(.jp-force-desktop-viewport) .dash-card-sub {
    font-size: 0.84rem;
  }

  html:not(.jp-force-desktop-viewport) .wd-table th,
  html:not(.jp-force-desktop-viewport) .wd-table td,
  html:not(.jp-force-desktop-viewport) .ws-hub-table th,
  html:not(.jp-force-desktop-viewport) .ws-hub-table td,
  html:not(.jp-force-desktop-viewport) .um-table thead th,
  html:not(.jp-force-desktop-viewport) .um-table td {
    padding: 8px 6px;
  }
}

/* Global responsive + touch safety (shared across all portal pages) */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.jp-app,
.jp-main {
  max-width: 100%;
}

.jp-main img,
.jp-main svg,
.jp-main video,
.jp-main canvas {
  max-width: 100%;
  height: auto;
}

.jp-table-wrap,
.wd-table-wrap,
.wd-day-table-wrap,
.ws-hub-table-wrap,
.jp-admin-table-wrap,
.um-table-wrap,
.jp-role-matrix-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.jp-table-wrap table,
.wd-table,
.ws-hub-table,
.um-table,
.jp-table {
  min-width: 640px;
}

@media (max-width: 720px) {
  .jp-table-wrap table,
  .wd-table,
  .ws-hub-table,
  .um-table,
  .jp-table {
    min-width: 560px;
  }
}

@media (hover: none), (pointer: coarse) {
  .jp-btn,
  .jp-btn-secondary,
  button,
  input[type="button"],
  input[type="submit"],
  a.jp-btn,
  a.jp-btn-secondary {
    min-height: 44px;
  }

  .jp-header-nav a,
  .jp-link-chip,
  .dash-quick-link,
  .wd-links a,
  .wd-top-actions a,
  .ws-hub-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    min-height: 44px;
  }

  input[type="checkbox"],
  input[type="radio"] {
    inline-size: 1.1rem;
    block-size: 1.1rem;
  }
}

@media (max-width: 640px) {
  html:not(.jp-force-desktop-viewport) #jp-collab-widget {
    right: 8px !important;
    left: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: none !important;
    width: auto !important;
  }

  html:not(.jp-force-desktop-viewport) .um-modal__dialog,
  html:not(.jp-force-desktop-viewport) .wd-modal-content {
    width: min(96vw, 720px) !important;
    max-height: calc(100vh - 24px) !important;
  }

  html:not(.jp-force-desktop-viewport) .it-filter-actions .jp-btn-secondary,
  html:not(.jp-force-desktop-viewport) .it-pagination .jp-btn-secondary,
  html:not(.jp-force-desktop-viewport) .it-open-btn,
  html:not(.jp-force-desktop-viewport) .it-sort-menu-btn {
    min-height: 44px;
    font-size: 0.9rem !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Global light portal theme (except Documents page)                          */
/* -------------------------------------------------------------------------- */
.jp-app:not(.jp-app--documents) {
  background: #f8fafc;
}

.jp-app:not(.jp-app--documents)::before,
.jp-app:not(.jp-app--documents)::after {
  opacity: 0;
}

.jp-app:not(.jp-app--documents) .jp-main {
  color: #1f2937;
}

.jp-app:not(.jp-app--documents) .jp-panel,
.jp-app:not(.jp-app--documents) .dash-hero,
.jp-app:not(.jp-app--documents) .dash-side,
.jp-app:not(.jp-app--documents) .dash-card,
.jp-app:not(.jp-app--documents) .jp-info-card,
.jp-app:not(.jp-app--documents) .jp-admin-card,
.jp-app:not(.jp-app--documents) .wd-card,
.jp-app:not(.jp-app--documents) .wd-shell,
.jp-app:not(.jp-app--documents) .ws-hub-card,
.jp-app:not(.jp-app--documents) .ws-hub-shell,
.jp-app:not(.jp-app--documents) .um-card,
.jp-app:not(.jp-app--documents) .um-user-row,
.jp-app:not(.jp-app--documents) .um-users-head,
.jp-app:not(.jp-app--documents) .um-rbac-panel,
.jp-app:not(.jp-app--documents) .um-link-form,
.jp-app:not(.jp-app--documents) .jp-leave-card,
.jp-app:not(.jp-app--documents) .jp-profile-hero {
  background: #ffffff;
  border-color: #e5e7eb;
  color: #1f2937;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06);
}

.jp-app:not(.jp-app--documents) .jp-muted,
.jp-app:not(.jp-app--documents) .dash-lead,
.jp-app:not(.jp-app--documents) .dash-sub,
.jp-app:not(.jp-app--documents) .um-sub,
.jp-app:not(.jp-app--documents) .um-sub2,
.jp-app:not(.jp-app--documents) .wd-sub,
.jp-app:not(.jp-app--documents) .ws-hub-sub,
.jp-app:not(.jp-app--documents) .jp-profile-sub {
  color: #6b7280;
}

.jp-app:not(.jp-app--documents) .jp-panel input,
.jp-app:not(.jp-app--documents) .jp-panel select,
.jp-app:not(.jp-app--documents) .jp-panel textarea,
.jp-app:not(.jp-app--documents) .wd-field input,
.jp-app:not(.jp-app--documents) .wd-field select,
.jp-app:not(.jp-app--documents) .ws-hub-field input,
.jp-app:not(.jp-app--documents) .ws-hub-field select,
.jp-app:not(.jp-app--documents) .wd-cell-input,
.jp-app:not(.jp-app--documents) .um-field input,
.jp-app:not(.jp-app--documents) .um-field select,
.jp-app:not(.jp-app--documents) .jp-leave-form-grid input,
.jp-app:not(.jp-app--documents) .jp-leave-form-grid select {
  background: #ffffff;
  border-color: #dbe1ea;
  color: #1f2937;
}

.jp-app:not(.jp-app--documents) .jp-panel input:focus,
.jp-app:not(.jp-app--documents) .jp-panel select:focus,
.jp-app:not(.jp-app--documents) .jp-panel textarea:focus,
.jp-app:not(.jp-app--documents) .wd-field input:focus,
.jp-app:not(.jp-app--documents) .wd-field select:focus,
.jp-app:not(.jp-app--documents) .ws-hub-field input:focus,
.jp-app:not(.jp-app--documents) .ws-hub-field select:focus,
.jp-app:not(.jp-app--documents) .wd-cell-input:focus,
.jp-app:not(.jp-app--documents) .um-field input:focus,
.jp-app:not(.jp-app--documents) .um-field select:focus,
.jp-app:not(.jp-app--documents) .jp-leave-form-grid input:focus,
.jp-app:not(.jp-app--documents) .jp-leave-form-grid select:focus {
  border-color: rgba(134, 31, 84, 0.45);
  box-shadow: 0 0 0 4px rgba(134, 31, 84, 0.12);
}

/* Light Work Diary: burgundy calendar icon + light native picker where supported */
.jp-app:not(.jp-app--documents) .jp-main .wd-field input[type="date"] {
  color-scheme: light;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-field input[type="date"]::-webkit-calendar-picker-indicator {
  background: center / 18px 18px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23861f54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.jp-app:not(.jp-app--documents) .jp-main .ws-hub-field input[type="date"] {
  color-scheme: light;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-hub-field input[type="date"]::-webkit-calendar-picker-indicator {
  background: center / 18px 18px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23861f54' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

.jp-app:not(.jp-app--documents) .jp-btn-secondary,
.jp-app:not(.jp-app--documents) .jp-panel button[type="submit"]:not(.btn-danger):not(.btn-success),
.jp-app:not(.jp-app--documents) .um-btn--surface.um-btn--primary,
.jp-app:not(.jp-app--documents) .wd-btn,
.jp-app:not(.jp-app--documents) .wd-export-btn {
  background: linear-gradient(180deg, #9c2f66, #861f54);
  border-color: rgba(134, 31, 84, 0.55);
  color: #ffffff;
}

.jp-app:not(.jp-app--documents) .jp-btn-secondary:hover,
.jp-app:not(.jp-app--documents) .jp-panel button[type="submit"]:not(.btn-danger):not(.btn-success):hover,
.jp-app:not(.jp-app--documents) .um-btn--surface.um-btn--primary:hover,
.jp-app:not(.jp-app--documents) .wd-btn:hover,
.jp-app:not(.jp-app--documents) .wd-export-btn:hover {
  filter: brightness(1.03);
}

.jp-app:not(.jp-app--documents) .jp-panel a,
.jp-app:not(.jp-app--documents) .dash-quick-link,
.jp-app:not(.jp-app--documents) .jp-link-chip,
.jp-app:not(.jp-app--documents) .wd-links a,
.jp-app:not(.jp-app--documents) .wd-top-actions a,
.jp-app:not(.jp-app--documents) .um-links a,
.jp-app:not(.jp-app--documents) .jp-tools-footer a {
  color: #861f54;
}

.jp-app:not(.jp-app--documents) .jp-tools-group-title,
.jp-app:not(.jp-app--documents) .jp-leave-weekday,
.jp-app:not(.jp-app--documents) .dash-card-kicker,
.jp-app:not(.jp-app--documents) .um-card-kicker {
  color: #861f54;
}

.jp-app:not(.jp-app--documents) .jp-table thead th,
.jp-app:not(.jp-app--documents) .um-table thead th,
.jp-app:not(.jp-app--documents) .wd-table th,
.jp-app:not(.jp-app--documents) .ws-hub-table th {
  color: #6b7280;
  border-bottom-color: #e5e7eb;
}

.jp-app:not(.jp-app--documents) .jp-table td,
.jp-app:not(.jp-app--documents) .um-table td,
.jp-app:not(.jp-app--documents) .wd-table td,
.jp-app:not(.jp-app--documents) .ws-hub-table td {
  color: #1f2937;
  border-bottom-color: #eef1f5;
}

/* Final text-contrast hardening for all non-Documents pages */
.jp-app:not(.jp-app--documents) .jp-main,
.jp-app:not(.jp-app--documents) .jp-main h1,
.jp-app:not(.jp-app--documents) .jp-main h2,
.jp-app:not(.jp-app--documents) .jp-main h3,
.jp-app:not(.jp-app--documents) .jp-main h4,
.jp-app:not(.jp-app--documents) .jp-main h5,
.jp-app:not(.jp-app--documents) .jp-main .dash-h1,
.jp-app:not(.jp-app--documents) .jp-main .jp-dash-h1,
.jp-app:not(.jp-app--documents) .jp-main .wd-h1,
.jp-app:not(.jp-app--documents) .jp-main .ws-hub-h1,
.jp-app:not(.jp-app--documents) .jp-main .um-h1,
.jp-app:not(.jp-app--documents) .jp-main .jp-profile-name,
.jp-app:not(.jp-app--documents) .jp-main .jp-staff-title,
.jp-app:not(.jp-app--documents) .jp-main .jp-card-title,
.jp-app:not(.jp-app--documents) .jp-main .dash-card-title,
.jp-app:not(.jp-app--documents) .jp-main .jp-info-card-value,
.jp-app:not(.jp-app--documents) .jp-main .um-card-title,
.jp-app:not(.jp-app--documents) .jp-main .um-user-strong {
  color: #1f2937 !important;
}

.jp-app:not(.jp-app--documents) .jp-main p,
.jp-app:not(.jp-app--documents) .jp-main li,
.jp-app:not(.jp-app--documents) .jp-main label,
.jp-app:not(.jp-app--documents) .jp-main .jp-muted,
.jp-app:not(.jp-app--documents) .jp-main .dash-lead,
.jp-app:not(.jp-app--documents) .jp-main .jp-dash-lead,
.jp-app:not(.jp-app--documents) .jp-main .dash-mini-k,
.jp-app:not(.jp-app--documents) .jp-main .dash-mini-v,
.jp-app:not(.jp-app--documents) .jp-main .dash-card-sub,
.jp-app:not(.jp-app--documents) .jp-main .dash-side-title,
.jp-app:not(.jp-app--documents) .jp-main .dash-side-list,
.jp-app:not(.jp-app--documents) .jp-main .jp-staff-sub,
.jp-app:not(.jp-app--documents) .jp-main .jp-staff-links a,
.jp-app:not(.jp-app--documents) .jp-main .jp-profile-sub,
.jp-app:not(.jp-app--documents) .jp-main .jp-profile-section-heading,
.jp-app:not(.jp-app--documents) .jp-main .jp-info-card-title,
.jp-app:not(.jp-app--documents) .jp-main .um-sub,
.jp-app:not(.jp-app--documents) .jp-main .um-sub2,
.jp-app:not(.jp-app--documents) .jp-main .um-card-help,
.jp-app:not(.jp-app--documents) .jp-main .um-rbac-hint,
.jp-app:not(.jp-app--documents) .jp-main .um-user-id {
  color: #6b7280 !important;
}

.jp-app:not(.jp-app--documents) .jp-main a:not(.jp-btn):not(.jp-btn-secondary):not(.jp-link-chip):not(.um-btn):not(.wd-btn):not(.wd-emp-tab):not(.jp-tab) {
  color: #861f54 !important;
}

/* Absolute readability fallback for all non-Documents content */
.jp-app:not(.jp-app--documents) .jp-main :where(
  h1, h2, h3, h4, h5, h6,
  p, li, label, legend, td, th,
  div, span, strong, small
) {
  color: #1f2937 !important;
}

.jp-app:not(.jp-app--documents) .jp-main :where(
  .jp-muted, .dash-lead, .jp-dash-lead, .dash-card-sub, .dash-side-title, .dash-side-list,
  .jp-staff-sub, .jp-profile-sub, .jp-profile-section-heading, .um-sub, .um-sub2,
  .um-card-help, .um-rbac-hint, .um-muted-note, .wd-sub, .ws-hub-sub
) {
  color: #6b7280 !important;
}

.jp-app:not(.jp-app--documents) .jp-main :where(
  .jp-btn, .jp-btn-secondary, .wd-btn, .wd-export-btn,
  .um-btn--primary, .um-btn--danger, .um-btn--success,
  .um-status, .jp-pill, .um-chip--primary, .jp-leave-status,
  .jp-link-chip--danger
) {
  color: #ffffff !important;
}

.jp-app:not(.jp-app--documents) .jp-main :where(
  .um-chip--addon, .um-btn--quiet, .um-btn--surface, .jp-link-chip
) {
  color: #1f2937 !important;
}

/* Button contrast safety layer (non-Documents) */
.jp-app:not(.jp-app--documents) .jp-main button,
.jp-app:not(.jp-app--documents) .jp-main input[type="submit"],
.jp-app:not(.jp-app--documents) .jp-main input[type="button"],
.jp-app:not(.jp-app--documents) .jp-main .jp-btn,
.jp-app:not(.jp-app--documents) .jp-main .jp-btn-secondary,
.jp-app:not(.jp-app--documents) .jp-main .um-btn,
.jp-app:not(.jp-app--documents) .jp-main .wd-btn,
.jp-app:not(.jp-app--documents) .jp-main .wd-export-btn {
  color: #1f2937;
  border-color: #d1d5db;
}

/* Site Marker visual hub CTA: not a .jp-btn — keep maroon fill + white label */
.jp-app:not(.jp-app--documents) .jp-sm-page .jp-main button.jp-sm-hub-cta,
.jp-app:not(.jp-app--documents) .jp-sm-page .jp-main button.jp-sm-hub-cta * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
}

.jp-app:not(.jp-app--documents) .jp-sm-page .jp-main button.jp-sm-hub-cta {
  border-left: none !important;
  border-right: none !important;
  border-top: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jp-btn-secondary,
.jp-app:not(.jp-app--documents) .jp-main .jp-btn,
.jp-app:not(.jp-app--documents) .jp-main .wd-btn,
.jp-app:not(.jp-app--documents) .jp-main .wd-export-btn,
.jp-app:not(.jp-app--documents) .jp-main .wd-calc-btn,
.jp-app:not(.jp-app--documents) .jp-main .jp-btn--primary,
.jp-app:not(.jp-app--documents) .jp-main .um-btn--primary {
  color: #ffffff !important;
  border-color: rgba(134, 31, 84, 0.55) !important;
  background: linear-gradient(180deg, #9c2f66, #861f54) !important;
}

.jp-app:not(.jp-app--documents) .jp-main .um-btn--danger,
.jp-app:not(.jp-app--documents) .jp-main .btn-danger {
  color: #ffffff !important;
  border-color: rgba(153, 27, 27, 0.5) !important;
  background: linear-gradient(180deg, #dc2626, #b91c1c) !important;
}

.jp-app:not(.jp-app--documents) .jp-main .um-btn--success,
.jp-app:not(.jp-app--documents) .jp-main .btn-success {
  color: #ffffff !important;
  border-color: rgba(21, 128, 61, 0.5) !important;
  background: linear-gradient(180deg, #16a34a, #15803d) !important;
}

.jp-app:not(.jp-app--documents) .jp-main .um-btn--quiet,
.jp-app:not(.jp-app--documents) .jp-main .um-btn--surface,
.jp-app:not(.jp-app--documents) .jp-main .jp-link-chip,
.jp-app:not(.jp-app--documents) .jp-main .jp-btn--danger-ghost {
  color: #1f2937 !important;
  background: #ffffff !important;
  border-color: #d1d5db !important;
}

/* Ensure any nested labels/spans inside controls use the same computed text color */
.jp-app:not(.jp-app--documents) .jp-main :is(
  button,
  input[type="submit"],
  input[type="button"],
  .jp-btn,
  .jp-btn-secondary,
  .wd-btn,
  .wd-export-btn,
  .wd-calc-btn,
  .um-btn,
  .jp-link-chip,
  .wd-emp-tab
) * {
  color: inherit !important;
}

.jp-app:not(.jp-app--documents) .jp-main button:hover,
.jp-app:not(.jp-app--documents) .jp-main input[type="submit"]:hover,
.jp-app:not(.jp-app--documents) .jp-main input[type="button"]:hover,
.jp-app:not(.jp-app--documents) .jp-main .jp-btn:hover,
.jp-app:not(.jp-app--documents) .jp-main .jp-btn-secondary:hover,
.jp-app:not(.jp-app--documents) .jp-main .um-btn:hover,
.jp-app:not(.jp-app--documents) .jp-main .wd-btn:hover,
.jp-app:not(.jp-app--documents) .jp-main .wd-export-btn:hover {
  filter: brightness(1.03);
}

/* Work Diary hub — Recent weeks: paired primary + destructive actions */
.jp-app:not(.jp-app--documents) .jp-main .wd-table-diary-actions {
  gap: 8px;
}

.jp-app:not(.jp-app--documents) .jp-main a.wd-table-open-btn.jp-btn-secondary {
  min-height: 36px;
  padding: 0 18px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  border-radius: 8px !important;
  line-height: 1.2;
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 1px 2px rgba(17, 24, 39, 0.06),
    0 2px 10px rgba(134, 31, 84, 0.14) !important;
  transition: box-shadow 0.15s ease, filter 0.15s ease, transform 0.1s ease;
}

.jp-app:not(.jp-app--documents) .jp-main a.wd-table-open-btn.jp-btn-secondary:hover {
  filter: brightness(1.06);
  box-shadow:
    0 2px 4px rgba(17, 24, 39, 0.08),
    0 4px 14px rgba(134, 31, 84, 0.2) !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-table-delete-btn {
  min-height: 36px;
  min-width: 3.5rem;
  padding: 0 14px !important;
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  line-height: 1.2;
  letter-spacing: 0.02em;
  border-radius: 8px !important;
  box-sizing: border-box;
  color: #b91c1c !important;
  background: #ffffff !important;
  border: 1px solid #fca5a5 !important;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-table-delete-btn:hover {
  background: #fef2f2 !important;
  border-color: #ef4444 !important;
  color: #991b1b !important;
  box-shadow: 0 2px 6px rgba(185, 28, 28, 0.12);
  filter: none;
}

.jp-app:not(.jp-app--documents) .jp-main button:disabled,
.jp-app:not(.jp-app--documents) .jp-main input[type="submit"]:disabled,
.jp-app:not(.jp-app--documents) .jp-main input[type="button"]:disabled,
.jp-app:not(.jp-app--documents) .jp-main .jp-btn:disabled,
.jp-app:not(.jp-app--documents) .jp-main .um-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Emergency readability unification: force dark-theme components light */
.jp-app:not(.jp-app--documents) .jp-main .dash-hero,
.jp-app:not(.jp-app--documents) .jp-main .dash-side-card,
.jp-app:not(.jp-app--documents) .jp-main .jp-info-card,
.jp-app:not(.jp-app--documents) .jp-main .jp-profile-hero,
.jp-app:not(.jp-app--documents) .jp-main .jp-profile-grid > .jp-info-card,
.jp-app:not(.jp-app--documents) .jp-main .jp-admin-theme .jp-panel,
.jp-app:not(.jp-app--documents) .jp-main .jp-admin-shell,
.jp-app:not(.jp-app--documents) .jp-main .jp-metric,
.jp-app:not(.jp-app--documents) .jp-main .jp-tool-card,
.jp-app:not(.jp-app--documents) .jp-main .um-card,
.jp-app:not(.jp-app--documents) .jp-main .um-users-head,
.jp-app:not(.jp-app--documents) .jp-main .um-user-row,
.jp-app:not(.jp-app--documents) .jp-main .um-user-meta,
.jp-app:not(.jp-app--documents) .jp-main .um-user-manage,
.jp-app:not(.jp-app--documents) .jp-main .um-link-form,
.jp-app:not(.jp-app--documents) .jp-main .um-rbac-panel,
.jp-app:not(.jp-app--documents) .jp-main .um-account-panel,
.jp-app:not(.jp-app--documents) .jp-main .wd-shell,
.jp-app:not(.jp-app--documents) .jp-main .wd-card,
.jp-app:not(.jp-app--documents) .jp-main .ws-hub-shell,
.jp-app:not(.jp-app--documents) .jp-main .ws-hub-card,
.jp-app:not(.jp-app--documents) .jp-main .wd-modal-content,
.jp-app:not(.jp-app--documents) .jp-main .um-modal__dialog,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  color: #1f2937 !important;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06) !important;
}

/* Work diary hub — chips, add bar, recent-weeks panel (light portal) */
.jp-app:not(.jp-app--documents) .jp-main .wd-recent-card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.07) !important;
  color: #1f2937 !important;
}

/* Works Schedule hub — recent weeks panel (separate from Work Diary wd-*) */
.jp-app:not(.jp-app--documents) .jp-main .ws-hub-recent-card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 10px 28px rgba(17, 24, 39, 0.07) !important;
  color: #1f2937 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-h2--section {
  color: #111827 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-hub-h2--section {
  color: #111827 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-emp-add-bar {
  background: #f8fafc !important;
  border-color: #e5e7eb !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-emp-summary {
  color: #6b7280 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-emp-summary strong {
  color: #111827 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-emp-chip {
  background: #f9fafb !important;
  border-color: #d6dde6 !important;
  color: #1f2937 !important;
  box-shadow: 0 1px 1px rgba(15, 23, 42, 0.06) !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-emp-chip:hover {
  border-color: #bcc8d8 !important;
  background: #f3f4f6 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-emp-chip-pc {
  background: #e5e7eb !important;
  color: #4b5563 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-emp-chip-remove {
  background: #f1f5f9 !important;
  border-color: #d8dee8 !important;
  color: #7a2f63 !important;
  font-size: 0.9rem;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-emp-chip-remove:hover {
  background: #ede4f2 !important;
  border-color: #cdb7da !important;
  color: #5d1b49 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jp-info-card::before,
.jp-app:not(.jp-app--documents) .jp-main .jp-info-card::after,
.jp-app:not(.jp-app--documents) .jp-main .dash-side-card::before,
.jp-app:not(.jp-app--documents) .jp-main .dash-side-card::after {
  display: none !important;
}

.jp-app:not(.jp-app--documents) .jp-main .um-card-kicker,
.jp-app:not(.jp-app--documents) .jp-main .um-field label,
.jp-app:not(.jp-app--documents) .jp-main .um-field-label,
.jp-app:not(.jp-app--documents) .jp-main .um-roles-label,
.jp-app:not(.jp-app--documents) .jp-main .dash-mini-k,
.jp-app:not(.jp-app--documents) .jp-main .jp-info-card-title,
.jp-app:not(.jp-app--documents) .jp-main .jp-profile-section-heading,
.jp-app:not(.jp-app--documents) .jp-main .jp-staff-role-heading,
.jp-app:not(.jp-app--documents) .jp-main .ws-hub-card-kicker {
  color: #6b7280 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-hub-card-title {
  color: #111827 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-hub-field label {
  color: #4b5563 !important;
}

/* Radio/check tiles: exclude from flat chip styling — selection uses :has() rules below */
.jp-app:not(.jp-app--documents) .jp-main .um-chip,
.jp-app:not(.jp-app--documents) .jp-main .um-chip--addon,
.jp-app:not(.jp-app--documents) .jp-main .um-chip--primary,
.jp-app:not(.jp-app--documents) .jp-main .jp-pill,
.jp-app:not(.jp-app--documents) .jp-main .jp-tab {
  background: #f8fafc !important;
  border-color: #d1d5db !important;
  color: #1f2937 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .um-status--active {
  background: rgba(21, 128, 61, 0.1) !important;
  color: #166534 !important;
  border-color: rgba(21, 128, 61, 0.25) !important;
}

.jp-app:not(.jp-app--documents) .jp-main .um-status--disabled {
  background: rgba(185, 28, 28, 0.1) !important;
  color: #991b1b !important;
  border-color: rgba(185, 28, 28, 0.25) !important;
}

/* Bring back role tints on account-type tiles in User Management */
.jp-app:not(.jp-app--documents) .jp-main .um-base-radios .um-radio-tile.um-role-superadmin {
  background: rgba(220, 38, 38, 0.1) !important;
  border-color: rgba(220, 38, 38, 0.4) !important;
  color: #7f1d1d !important;
}
.jp-app:not(.jp-app--documents) .jp-main .um-base-radios .um-radio-tile.um-role-superadmin:has(input:checked) {
  background: rgba(220, 38, 38, 0.38) !important;
  border-color: rgba(185, 28, 28, 0.95) !important;
  color: #450a0a !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  font-weight: 800 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .um-base-radios .um-radio-tile.um-role-admin {
  background: rgba(124, 58, 237, 0.1) !important;
  border-color: rgba(124, 58, 237, 0.4) !important;
  color: #4c1d95 !important;
}
.jp-app:not(.jp-app--documents) .jp-main .um-base-radios .um-radio-tile.um-role-admin:has(input:checked) {
  background: rgba(124, 58, 237, 0.36) !important;
  border-color: rgba(91, 33, 182, 0.95) !important;
  color: #3b0764 !important;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  font-weight: 800 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .um-base-radios .um-radio-tile.um-role-director {
  background: rgba(37, 99, 235, 0.1) !important;
  border-color: rgba(37, 99, 235, 0.4) !important;
  color: #1e3a8a !important;
}
.jp-app:not(.jp-app--documents) .jp-main .um-base-radios .um-radio-tile.um-role-director:has(input:checked) {
  background: rgba(37, 99, 235, 0.34) !important;
  border-color: rgba(29, 78, 216, 0.95) !important;
  color: #172554 !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  font-weight: 800 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .um-base-radios .um-radio-tile.um-role-manager {
  background: rgba(14, 116, 144, 0.1) !important;
  border-color: rgba(14, 116, 144, 0.4) !important;
  color: #134e4a !important;
}
.jp-app:not(.jp-app--documents) .jp-main .um-base-radios .um-radio-tile.um-role-manager:has(input:checked) {
  background: rgba(14, 116, 144, 0.34) !important;
  border-color: rgba(13, 116, 104, 0.95) !important;
  color: #042f2e !important;
  box-shadow: 0 0 0 2px rgba(14, 116, 144, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  font-weight: 800 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .um-base-radios .um-radio-tile.um-role-staff {
  background: rgba(22, 163, 74, 0.1) !important;
  border-color: rgba(22, 163, 74, 0.4) !important;
  color: #14532d !important;
}
.jp-app:not(.jp-app--documents) .jp-main .um-base-radios .um-radio-tile.um-role-staff:has(input:checked) {
  background: rgba(22, 163, 74, 0.36) !important;
  border-color: rgba(21, 128, 61, 0.95) !important;
  color: #14532d !important;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
  font-weight: 800 !important;
}

/* Additional-access checkboxes: explicit off/on so :checked is never flattened by chip rules */
.jp-app:not(.jp-app--documents) .jp-main .um-check-grid .um-check {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1f2937 !important;
  font-weight: 650 !important;
  box-shadow: none !important;
}

.jp-app:not(.jp-app--documents) .jp-main .um-check-grid .um-check:has(input:checked) {
  background: linear-gradient(165deg, rgba(134, 31, 84, 0.16), rgba(134, 31, 84, 0.3)) !important;
  border-color: #861f54 !important;
  color: #3a0a24 !important;
  font-weight: 800 !important;
  box-shadow: 0 0 0 2px rgba(134, 31, 84, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.jp-app:not(.jp-app--documents) .jp-main .um-check-grid .um-check:has(input:checked) input {
  accent-color: #861f54 !important;
}

/* Match outer user card border to account type tint */
.jp-app:not(.jp-app--documents) .jp-main .um-user-row--superadmin {
  border-color: rgba(220, 38, 38, 0.42) !important;
  background: linear-gradient(0deg, rgba(220, 38, 38, 0.04), rgba(220, 38, 38, 0.04)), #ffffff !important;
}
.jp-app:not(.jp-app--documents) .jp-main .um-user-row--admin {
  border-color: rgba(124, 58, 237, 0.42) !important;
  background: linear-gradient(0deg, rgba(124, 58, 237, 0.04), rgba(124, 58, 237, 0.04)), #ffffff !important;
}
.jp-app:not(.jp-app--documents) .jp-main .um-user-row--director {
  border-color: rgba(37, 99, 235, 0.42) !important;
  background: linear-gradient(0deg, rgba(37, 99, 235, 0.04), rgba(37, 99, 235, 0.04)), #ffffff !important;
}
.jp-app:not(.jp-app--documents) .jp-main .um-user-row--manager {
  border-color: rgba(14, 116, 144, 0.42) !important;
  background: linear-gradient(0deg, rgba(14, 116, 144, 0.04), rgba(14, 116, 144, 0.04)), #ffffff !important;
}
.jp-app:not(.jp-app--documents) .jp-main .um-user-row--staff {
  border-color: rgba(22, 163, 74, 0.42) !important;
  background: linear-gradient(0deg, rgba(22, 163, 74, 0.04), rgba(22, 163, 74, 0.04)), #ffffff !important;
}

/* Match role chips to Account type role tint colours */
.jp-app:not(.jp-app--documents) .jp-main .um-user-roles .um-chip.um-role-superadmin {
  background: rgba(220, 38, 38, 0.12) !important;
  border-color: rgba(220, 38, 38, 0.42) !important;
  color: #7f1d1d !important;
}
.jp-app:not(.jp-app--documents) .jp-main .um-user-roles .um-chip.um-role-admin {
  background: rgba(124, 58, 237, 0.12) !important;
  border-color: rgba(124, 58, 237, 0.42) !important;
  color: #4c1d95 !important;
}
.jp-app:not(.jp-app--documents) .jp-main .um-user-roles .um-chip.um-role-director {
  background: rgba(37, 99, 235, 0.12) !important;
  border-color: rgba(37, 99, 235, 0.42) !important;
  color: #1e3a8a !important;
}
.jp-app:not(.jp-app--documents) .jp-main .um-user-roles .um-chip.um-role-manager {
  background: rgba(14, 116, 144, 0.12) !important;
  border-color: rgba(14, 116, 144, 0.42) !important;
  color: #134e4a !important;
}
.jp-app:not(.jp-app--documents) .jp-main .um-user-roles .um-chip.um-role-staff {
  background: rgba(22, 163, 74, 0.12) !important;
  border-color: rgba(22, 163, 74, 0.42) !important;
  color: #14532d !important;
}

.jp-app:not(.jp-app--documents) .jp-main .um-btn--quiet,
.jp-app:not(.jp-app--documents) .jp-main .um-btn--surface,
.jp-app:not(.jp-app--documents) .jp-main .jp-link-chip,
.jp-app:not(.jp-app--documents) .jp-main .wd-emp-tab {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #1f2937 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-emp-tab.wd-emp-tab--has-entry:not(.wd-emp-tab--active) {
  background: #dcfce7 !important;
  border-color: #34d399 !important;
  color: #065f46 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .um-btn--reset-email,
.jp-app:not(.jp-app--documents) .jp-main .um-btn--primary,
.jp-app:not(.jp-app--documents) .jp-main .wd-emp-tab--active,
.jp-app:not(.jp-app--documents) .jp-main .jp-tab.active {
  background: linear-gradient(180deg, #9c2f66, #861f54) !important;
  border-color: rgba(134, 31, 84, 0.55) !important;
  color: #ffffff !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-table th,
.jp-app:not(.jp-app--documents) .jp-main .ws-hub-table th,
.jp-app:not(.jp-app--documents) .jp-main .um-table thead th,
.jp-app:not(.jp-app--documents) .jp-main .jp-table thead th {
  background: #f8fafc !important;
  color: #6b7280 !important;
}

/* Admin settings: role matrix readability */
.jp-app:not(.jp-app--documents) .jp-main .jp-role-matrix-wrap {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: auto;
  background: #ffffff;
}

.jp-app:not(.jp-app--documents) .jp-main .jp-role-matrix-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 980px;
}

.jp-app:not(.jp-app--documents) .jp-main .jp-role-matrix-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f3f4f6 !important;
  color: #4b5563 !important;
  letter-spacing: 0.03em;
  font-size: 0.76rem;
  text-transform: uppercase;
  border-bottom: 1px solid #e5e7eb !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jp-role-matrix-table tbody tr:nth-child(odd) td {
  background: #fcfdff;
}

.jp-app:not(.jp-app--documents) .jp-main .jp-role-matrix-table tbody tr:hover td {
  background: #f9fafb !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jp-role-matrix-cap {
  font-weight: 700;
  color: #1f2937 !important;
  min-width: 220px;
}

.jp-app:not(.jp-app--documents) .jp-main .jp-role-matrix-cell {
  white-space: nowrap;
}

.jp-app:not(.jp-app--documents) .jp-main .jp-role-matrix-allow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #374151 !important;
  font-weight: 600;
}

.jp-app:not(.jp-app--documents) .jp-main .jp-role-matrix-allow input[type="checkbox"] {
  inline-size: 16px;
  block-size: 16px;
  accent-color: #0ea5b7;
  cursor: pointer;
}

.jp-app:not(.jp-app--documents) .jp-main .jp-role-matrix .jp-muted {
  color: #6b7280 !important;
}

/* Light modals: close is a small ×; avoid generic jp-main button chrome on it */
.jp-app:not(.jp-app--documents) .jp-main .um-modal__close {
  color: #64748b !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.jp-app:not(.jp-app--documents) .jp-main .um-modal__close:hover {
  color: #111827 !important;
  background: rgba(15, 23, 42, 0.06) !important;
}

.jp-app:not(.jp-app--documents) .jp-main .um-modal__close:focus-visible {
  outline: 2px solid rgba(134, 31, 84, 0.4) !important;
  outline-offset: 2px !important;
}

/* Stronger secondary/muted copy sitewide on light portal (not Documents) */
.jp-app:not(.jp-app--documents) .jp-main .jp-muted,
.jp-app:not(.jp-app--documents) .jp-main .dash-lead,
.jp-app:not(.jp-app--documents) .jp-main .dash-sub,
.jp-app:not(.jp-app--documents) .jp-main .um-sub,
.jp-app:not(.jp-app--documents) .jp-main .um-sub2,
.jp-app:not(.jp-app--documents) .jp-main .wd-sub,
.jp-app:not(.jp-app--documents) .jp-main .ws-hub-sub,
.jp-app:not(.jp-app--documents) .jp-main .jp-profile-sub,
.jp-app:not(.jp-app--documents) .jp-main .um-muted-note,
.jp-app:not(.jp-app--documents) .jp-main .um-card-help,
.jp-app:not(.jp-app--documents) .jp-main .um-rbac-hint,
.jp-app:not(.jp-app--documents) .jp-main .jp-table thead th,
.jp-app:not(.jp-app--documents) .jp-main .um-table thead th,
.jp-app:not(.jp-app--documents) .jp-main .wd-table th,
.jp-app:not(.jp-app--documents) .jp-main .ws-hub-table th {
  color: #4b5563 !important;
}

/* ── Work Diary entry (employee diary) — light portal, matches hub styling ── */
.jp-app:not(.jp-app--documents) .jp-main .wd-day-section {
  margin-bottom: 22px;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-day-bar--entry {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%) !important;
  color: #0f172a !important;
  border: 1px solid #e2e8f0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  border-radius: 12px 12px 0 0 !important;
  box-shadow: none !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-day-start-lbl {
  color: #64748b !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-day-start-input {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #1f2937 !important;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.jp-app:not(.jp-app--documents) .jp-main .wd-day-start-input::placeholder {
  color: #9ca3af !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-day-start-input:focus {
  border-color: rgba(134, 31, 84, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(134, 31, 84, 0.12) !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-day-stat {
  color: #64748b !important;
  opacity: 1 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-day-stat strong {
  color: #111827 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-day-jobs {
  padding-top: 12px;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-calc-btn:not(.wd-calc-btn--primary):not(.wd-calc-btn--danger) {
  background: #ffffff !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-calc-btn:not(.wd-calc-btn--primary):not(.wd-calc-btn--danger):hover {
  background: #f9fafb !important;
  border-color: #cbd5e1 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-calc-btn--primary {
  background: linear-gradient(180deg, #9c2f66, #861f54) !important;
  border-color: rgba(134, 31, 84, 0.55) !important;
  color: #ffffff !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-calc-btn--primary:hover {
  filter: brightness(1.03);
}

.jp-app:not(.jp-app--documents) .jp-main .wd-calc-btn--danger {
  background: #ffffff !important;
  border-color: #fecaca !important;
  color: #b91c1c !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-calc-btn--danger:hover {
  background: #fef2f2 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-diary-row {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06) !important;
  color: #1f2937 !important;
  padding: 8px 12px 6px !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-mileage-total {
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-mileage-label {
  color: #6b7280 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-mileage-value {
  color: #861f54 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-autosave-status {
  color: #6b7280 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-emp-nav {
  gap: 8px !important;
  margin-bottom: 18px !important;
}

.jp-app:not(.jp-app--documents) .jp-main .wd-emp-tab:hover {
  background: #f1f5f9 !important;
  border-color: #cbd5e1 !important;
}

.jp-app:not(.jp-app--documents) .wd-modal .wd-modal-content {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  color: #1f2937 !important;
  box-shadow: 0 24px 56px rgba(15, 23, 42, 0.18) !important;
}

.jp-app:not(.jp-app--documents) .wd-modal .wd-modal-header {
  border-bottom-color: #e5e7eb !important;
}

.jp-app:not(.jp-app--documents) .wd-modal .wd-modal-header h3 {
  color: #111827 !important;
}

.jp-app:not(.jp-app--documents) .wd-modal .wd-modal-close {
  color: #6b7280 !important;
}

.jp-app:not(.jp-app--documents) .wd-modal .wd-modal-close:hover {
  color: #111827 !important;
}

.jp-app:not(.jp-app--documents) .wd-modal .wd-modal-footer {
  border-top-color: #e5e7eb !important;
}

.jp-app:not(.jp-app--documents) .wd-modal .wd-stop-row label {
  color: #4b5563 !important;
}

.jp-app:not(.jp-app--documents) .wd-modal .mileage-stop,
.jp-app:not(.jp-app--documents) .wd-modal .wd-stop-row input {
  background: #ffffff !important;
  border-color: #dbe1ea !important;
  color: #1f2937 !important;
}

.jp-app:not(.jp-app--documents) .wd-modal .mileage-stop:focus,
.jp-app:not(.jp-app--documents) .wd-modal .wd-stop-row input:focus {
  border-color: rgba(134, 31, 84, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(134, 31, 84, 0.1) !important;
}

.jp-app:not(.jp-app--documents) .wd-modal .wd-mileage-resolved {
  color: #6b7280 !important;
}

.jp-app:not(.jp-app--documents) .wd-modal .wd-mileage-leg {
  color: #4b5563 !important;
}

.jp-app:not(.jp-app--documents) .wd-modal .wd-mileage-result-total {
  background: #f8fafc !important;
  color: #111827 !important;
  border: 1px solid #e5e7eb !important;
}

.jp-app:not(.jp-app--documents) .wd-modal .wd-mileage-error {
  color: #b91c1c !important;
}

/* ----- Works Schedule — site grid week view (spreadsheet-style) ----- */
.jp-app:not(.jp-app--documents) .jp-main .ws-shell {
  max-width: 100%;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-title {
  margin: 0;
  color: #0f172a;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-subtitle {
  margin: 6px 0 0;
  color: #475569;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-inline-form {
  margin: 0;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-saved-banner {
  margin-bottom: 12px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-schedule-msg {
  margin-bottom: 12px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-top--schedule {
  margin-bottom: 4px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-week-selector-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-week-selector-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-week-selector-field label {
  font-size: 0.78rem;
  font-weight: 650;
  color: #475569;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-week-selector-field input[type="date"] {
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.875rem;
  color: #0f172a;
  background: #ffffff;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-th--day-excel {
  min-width: 88px;
  max-width: 120px;
  background: linear-gradient(180deg, #e8f4fc 0%, #deecf9 100%);
  color: #004578;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-th--day-excel .ws-day-name {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  color: #005a9e;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-th--day-excel .ws-day-date {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #323130;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-td--daycell {
  min-width: 88px;
  max-width: 120px;
  text-align: center;
  vertical-align: middle;
  background: #fafafa;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-daycell-inner {
  min-height: 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 4px 2px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-daycell-bar {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  background: linear-gradient(180deg, #e3f2fd 0%, #bbdefb 100%);
  border: 1px solid #90caf9;
  font-size: 0.75rem;
  font-weight: 700;
  color: #0d47a1;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-segments-row .ws-td--segments {
  background: #f8fafc;
  border-top: 1px dashed #cbd5e1;
  padding: 10px 12px;
  vertical-align: top;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  border: 1px solid #c8c6c4;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
  font-family: ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  color: #323130;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-th {
  background: linear-gradient(180deg, #faf9f8 0%, #f3f2f1 100%);
  border: 1px solid #c8c6c4;
  padding: 8px 6px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-th--site {
  text-align: left;
  min-width: 160px;
  position: sticky;
  left: 0;
  z-index: 3;
  box-shadow: 2px 0 0 #c8c6c4;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-th--postcode {
  min-width: 72px;
  position: sticky;
  left: 160px;
  z-index: 3;
  box-shadow: 2px 0 0 #c8c6c4;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-th--week-banner {
  background: linear-gradient(180deg, #e8f4fc 0%, #deecf9 100%);
  color: #004578;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-th--day {
  min-width: 76px;
  background: #f3f2f1;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-name {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  color: #605e5c;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-date {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #323130;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-th--status {
  min-width: 76px;
  background: #fff4e5;
  border-color: #e0c4a8;
  color: #5c3d1e;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-th--client {
  min-width: 100px;
  background: #fff4e5;
  border-color: #e0c4a8;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-th--comments {
  min-width: 140px;
  background: #fff4e5;
  border-color: #e0c4a8;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-th--actions {
  min-width: 120px;
  background: #faf9f8;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-td {
  border: 1px solid #d2d0ce;
  padding: 6px;
  vertical-align: top;
  background: #ffffff;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-td--site {
  position: sticky;
  left: 0;
  z-index: 2;
  box-shadow: 2px 0 0 #d2d0ce;
  background: #ffffff;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-td--postcode {
  position: sticky;
  left: 160px;
  z-index: 2;
  box-shadow: 2px 0 0 #d2d0ce;
  background: #ffffff;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-td--week {
  background: #edebe9;
  min-width: 532px;
  padding: 8px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-td--status {
  background: #fff8f0;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-td--client {
  background: #fff8f0;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-td--comments {
  background: #fff8f0;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-week-strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(68px, 1fr));
  gap: 2px;
  min-height: 36px;
  align-items: stretch;
  background: #d2d0ce;
  border: 1px solid #c8c6c4;
  border-radius: 4px;
  padding: 2px;
  margin-bottom: 8px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-bar {
  background: linear-gradient(180deg, #2b7cd3 0%, #1a6cbd 100%);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 6px 4px;
  border-radius: 3px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.jp-app:not(.jp-app--documents) .jp-main .ws-segment-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-seg-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 6px;
  background: #faf9f8;
  border: 1px solid #e1dfdd;
  border-radius: 6px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-seg-form--delete {
  padding: 4px 6px;
  background: transparent;
  border: none;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-seg-form-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #605e5c;
  margin-right: 4px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-seg-to {
  color: #605e5c;
  font-weight: 600;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-input,
.jp-app:not(.jp-app--documents) .jp-main .ws-select {
  font: inherit;
  font-size: 0.8125rem;
  padding: 6px 8px;
  border: 1px solid #c8c6c4;
  border-radius: 4px;
  background: #ffffff;
  color: #323130;
  max-width: 100%;
  box-sizing: border-box;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-input--site {
  width: 100%;
  min-width: 120px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-input--status {
  width: 100%;
  min-width: 64px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-input--comments {
  width: 100%;
  min-width: 120px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-input--bar-label {
  min-width: 80px;
  flex: 1 1 100px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-select--day {
  min-width: 4.5rem;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-btn-tiny {
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid #c8c6c4;
  background: #ffffff;
  cursor: pointer;
  color: #323130;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-btn-tiny--accent {
  background: #0078d4;
  border-color: #0078d4;
  color: #ffffff;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-btn-tiny--danger {
  border-color: #c50f1f;
  color: #a4262c;
  background: #fff5f5;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-order-form {
  margin: 0;
  display: inline;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-line-update-form {
  display: contents;
  margin: 0;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-save-row-form {
  margin: 0;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-save-row-btn {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-row-actions--schedule {
  margin-bottom: 0;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-row-actions__lead,
.jp-app:not(.jp-app--documents) .jp-main .ws-row-actions__tail {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-row-actions--schedule .ws-save-row-btn {
  width: auto;
  margin-top: 0;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-empty {
  text-align: center;
  padding: 28px 16px;
  color: #605e5c;
  background: #faf9f8;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-hub-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

@media (max-width: 900px) {
  .jp-app:not(.jp-app--documents) .jp-main .ws-th--postcode,
  .jp-app:not(.jp-app--documents) .jp-main .ws-td--postcode {
    position: static;
    box-shadow: none;
  }

  .jp-app:not(.jp-app--documents) .jp-main .ws-th--site,
  .jp-app:not(.jp-app--documents) .jp-main .ws-td--site {
    position: static;
    box-shadow: none;
  }
}

/* Works Schedule — standalone tool (minimal chrome) */
.jp-app:not(.jp-app--documents) .jp-main .ws-standalone-shell {
  max-width: 1200px;
}

/* Works Schedule — full-width grid (no horizontal page scroll) */
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  padding-top: 12px;
  padding-bottom: 16px;
  padding-left: clamp(8px, 2vw, 20px);
  padding-right: clamp(8px, 2vw, 20px);
  overflow-x: hidden;
  min-width: 0;
}

/* Soft navigation (fetch + DOM swap): same idea as work diary entry — slight opacity while loading */
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-shell {
  transition: opacity 160ms ease;
}

body.jp-softnav-loading .jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-shell {
  opacity: 0.88;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-standalone-shell.ws-shell--fluid {
  max-width: none;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-scroll-wrap.ws-scroll-wrap--fluid {
  overflow-x: hidden;
  overflow-y: visible;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-scroll-wrap.ws-scroll-wrap--fluid {
  overflow-x: visible;
  width: 100%;
  max-width: 100%;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-scroll-wrap.ws-scroll-wrap--fluid:focus-within {
  outline: none;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table.ws-table--excel {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table.ws-table--excel {
  min-width: 0;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-th,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-td {
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  box-sizing: border-box;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-th--site,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-td--site {
  position: static;
  left: auto;
  box-shadow: none;
  min-width: 0;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-th--postcode,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-td--postcode {
  position: static;
  left: auto;
  box-shadow: none;
  min-width: 0;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-th--day-excel,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-td--daycell {
  min-width: 0;
  max-width: none;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-th--orange,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-th--rams,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-th--pow,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-th--scheme,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-th--client,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-th--ordernr,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-th--comments,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-th--actions {
  min-width: 0;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-td--orange,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-td--rams,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-td--pow,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-td--scheme,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-td--client,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-td--ordernr,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-td--comments {
  min-width: 0;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-th {
  white-space: normal;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-th--orange {
  background: linear-gradient(180deg, #ffd8a8 0%, #ffc878 100%) !important;
  border-color: #e0a050 !important;
  color: #3d2914 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-td--orange {
  background: #fff2de !important;
  border-color: #e8c9a0 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-th--rams {
  background: linear-gradient(180deg, #e4e4e4 0%, #d4d4d4 100%) !important;
  border-color: #b8b8b8 !important;
  color: #1f2937 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-td--rams {
  background: #ececec !important;
  border-color: #c4c4c4 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-th--pow,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-th--scheme,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-th--ordernr,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-th--comments {
  background: linear-gradient(180deg, #fafafa 0%, #f0f0f0 100%) !important;
  border-color: #d2d0ce !important;
  color: #323130 !important;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-th--client {
  background: linear-gradient(180deg, #fff4e5 0%, #ffe8c8 100%) !important;
  border-color: #e0c4a8 !important;
  color: #323130 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-td--pow,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-td--scheme,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-td--ordernr,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-td--comments {
  background: #ffffff !important;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-td--client {
  background: #fff9f0 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-input--client {
  font-weight: 650;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-select--line-client {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  font-size: 0.68rem;
  padding: 2px 4px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel.ws-table--compact .ws-input--comments-line {
  font-size: 0.68rem;
  padding: 2px 4px;
  min-width: 0;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel.ws-table--compact {
  font-size: 0.72rem;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel.ws-table--compact .ws-th,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel.ws-table--compact .ws-td {
  padding: 3px 4px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel.ws-table--compact .ws-daycell-inner {
  min-height: 26px;
  padding: 3px 2px;
  gap: 3px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel.ws-table--compact .ws-daycell-bar {
  font-size: 0.65rem;
  padding: 2px 4px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel.ws-table--compact .ws-input--cell {
  padding: 2px 4px;
  font-size: 0.72rem;
  min-height: 22px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel.ws-table--compact .ws-input--center {
  text-align: center;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-th--comments,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-th--scheme,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-th--client,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-th--ordernr {
  min-width: 0;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel.ws-table--compact .ws-day-name {
  font-size: 0.65rem;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel.ws-table--compact .ws-day-date {
  font-size: 0.6rem;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel.ws-table--compact .ws-input,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel.ws-table--compact .ws-input--site,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel.ws-table--compact .ws-input--cell,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel.ws-table--compact .ws-select {
  min-height: 26px;
  padding: 4px 6px;
  font-size: 0.72rem;
  line-height: 1.25;
  vertical-align: middle;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel.ws-table--compact .ws-select--line-client {
  font-size: 0.68rem;
  padding: 2px 4px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-line-row .ws-td:not(.ws-daycell--pickable) {
  vertical-align: middle;
}

/* Widen Sun–Sat columns when any row has a segment or staff (compact grid otherwise shrinks empty days). */
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-th--day-excel.ws-daycol--has-data,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-td--daycell.ws-daycol--has-data {
  min-width: 88px;
  max-width: 130px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel.ws-table--compact .ws-row-actions--schedule .ws-save-row-btn {
  padding: 2px 7px;
  font-size: 0.65rem;
  min-height: 0;
  line-height: 1.25;
  font-weight: 600;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel.ws-table--compact .ws-seg-form {
  padding: 4px 6px;
  gap: 4px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel.ws-table--compact .ws-btn-tiny {
  padding: 2px 5px;
  font-size: 0.65rem;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-title {
  font-size: 1.35rem;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-subtitle {
  margin-top: 4px;
  font-size: 0.875rem;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-toolbar-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 8px 10px;
  margin-bottom: 8px;
  gap: 0;
  min-width: 0;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-toolbar-stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-calendar-section {
  width: 100%;
  min-width: 0;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-week-go-form {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-schedule-controls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-schedule-controls-left {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  flex: 0 1 auto;
  min-width: 0;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-schedule-controls-right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-schedule-controls-end {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
  min-width: 0;
  flex: 0 1 auto;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-schedule-controls-end .ws-calendar-collapse-btn {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 1.75rem;
  padding: 4px 6px;
  font-size: 0.65rem;
  line-height: 1;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-export-diary-link {
  margin-left: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-autosave-status {
  display: block;
  margin: -2px 2px 8px 2px;
  font-size: 0.8rem;
  min-height: 1.2em;
  white-space: nowrap;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-autosave-status--error {
  color: #a4262c;
  font-weight: 650;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-toolbar-row .ws-inline-form {
  min-width: 0;
  flex: 0 1 auto;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-week-inline-label {
  margin: 0;
  white-space: nowrap;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-schedule-controls-left input[type="date"] {
  flex: 0 0 auto;
  width: auto;
  min-width: 10.5rem;
  max-width: 100%;
  padding: 8px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.875rem;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-week-commencing-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-week-commencing-card-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-week-commencing-card-head .ws-week-inline-label {
  flex: 1 1 auto;
  min-width: 0;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-week-commencing-card-head .ws-calendar-collapse-btn {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: 1.75rem;
  padding: 4px 6px;
  font-size: 0.65rem;
  line-height: 1;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-week-commencing-card:not(.is-collapsed) .ws-schedule-controls-end .ws-calendar-collapse-btn {
  display: none;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-week-commencing-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  min-width: 0;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-week-commencing-card.is-collapsed .ws-week-commencing-card-body .ws-calendar-section {
  display: none;
}

/* Works schedule — week card collapsed: hide title row; collapse control lives in toolbar */
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-week-commencing-card.is-collapsed {
  gap: 8px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-week-commencing-card.is-collapsed .ws-week-commencing-card-head {
  display: none;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-week-commencing-card.is-collapsed .ws-week-commencing-card-body {
  gap: 8px;
}

@media (min-width: 901px) {
  .jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-week-commencing-card.is-collapsed .ws-schedule-controls-row {
    flex-wrap: nowrap;
    align-items: center;
  }

  .jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-week-commencing-card.is-collapsed .ws-schedule-controls-left {
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
  }

  .jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-week-commencing-card.is-collapsed .ws-schedule-controls-end {
    flex-wrap: nowrap;
  }
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-calendar-card {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  padding: 7px 10px 8px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06);
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-calendar-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 7px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-calendar-header .jp-btn-secondary {
  flex: 0 0 auto;
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-calendar-month-title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 650;
  line-height: 1.2;
  color: #0f172a;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(90px, 1fr));
  gap: 6px;
  margin-bottom: 4px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-calendar-weekday {
  font-size: 0.68rem;
  font-weight: 650;
  line-height: 1.15;
  color: #64748b;
  text-align: center;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-calendar-grid.ws-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(90px, 1fr));
  gap: 6px;
  width: 100%;
  box-sizing: border-box;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-calendar-day {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  height: auto;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-calendar-day.is-muted {
  color: #94a3b8;
  background: #f1f5f9;
  border-color: rgba(148, 163, 184, 0.35);
  font-weight: 450;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-calendar-day.has-schedule {
  background: #fff3cd;
  border: 1px solid #f0ad4e;
  color: #5c4100;
  font-weight: 650;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-calendar-day.is-selected-week {
  background: #e8f4ff;
  border: 1px solid #861f54;
  box-shadow: inset 0 0 0 2px #861f54;
  color: #0f172a;
  font-weight: 700;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-calendar-day.has-schedule.is-selected-week {
  background: #e0edff;
  border: 1px solid #861f54;
  box-shadow: inset 0 0 0 3px #861f54;
  color: #0f172a;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-calendar-day:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-calendar-legend {
  margin: 5px 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-cal-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: -0.15em;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-cal-legend-swatch--has {
  background: #fff3cd;
  border: 1px solid #f0ad4e;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-cal-legend-swatch--selected {
  background: #e8f4ff;
  border: 2px solid #861f54;
  box-sizing: border-box;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-week-fallback-label {
  font-size: 0.8125rem;
  white-space: nowrap;
  margin: 0;
  flex-shrink: 0;
  align-self: center;
}

/* Previous Schedules: inverted secondary (light surface, dark label) so it reads as the primary control in the week row */
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-schedule-controls-left .ws-prev-schedules-btn.jp-btn-secondary {
  flex-shrink: 0;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-prev-schedules-btn.jp-btn-secondary {
  background: #f1f5f9;
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.22);
  font-weight: 650;
  font-size: 0.9375rem;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-prev-schedules-btn.jp-btn-secondary:hover {
  background: #fff;
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.32);
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-prev-schedules-empty {
  margin: 0 0 4px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-table-wrap {
  overflow-x: auto;
  max-width: 100%;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-table {
  table-layout: fixed;
  width: 100%;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-table th,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-table td {
  vertical-align: middle;
  overflow-wrap: anywhere;
  word-wrap: break-word;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-table th:nth-child(1),
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-table td:nth-child(1) {
  width: 30%;
  min-width: 0;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-table th:nth-child(2),
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-table td:nth-child(2) {
  width: 11%;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-table th:nth-child(3),
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-table td:nth-child(3) {
  width: 27%;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-table th:nth-child(4),
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-table td:nth-child(4) {
  width: 32%;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-table th:nth-child(1),
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-table td:nth-child(1) {
  text-align: left;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-table th:nth-child(2),
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-table td:nth-child(2) {
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-table th:nth-child(3),
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-table td:nth-child(3) {
  text-align: left;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-table th:nth-child(4),
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-table td:nth-child(4) {
  text-align: right;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-prev-schedules-current td {
  background: rgba(126, 154, 230, 0.12);
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-prev-modal-section-title {
  font-size: 0.95rem;
  margin: 0 0 8px;
  color: rgba(236, 244, 255, 0.95);
  font-weight: 650;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-prev-modal-section-title--spaced {
  margin-top: 18px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-prev-schedules-actions-col {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

/* Previous Schedules modal: one flex row so Current / Open / Del share the same vertical axis */
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-left: auto;
  min-height: 36px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-actions__open,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-actions__del {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  line-height: 0;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-actions__open {
  min-width: 5.75rem;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-actions__del {
  min-width: 3.25rem;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-actions .wd-week-delete-form {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  line-height: 0;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-pill {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 36px;
  height: 36px;
  margin: 0;
  padding: 0 10px;
  border-radius: var(--jp-radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1.2;
  color: rgba(214, 226, 255, 0.9);
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-actions .wd-table-open-btn {
  width: 100%;
  min-height: 36px;
  height: 36px;
  box-sizing: border-box;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding-left: 10px !important;
  padding-right: 10px !important;
  line-height: 1.2 !important;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-prev-schedules-modal .ws-prev-schedules-actions .wd-table-delete-btn {
  min-height: 36px !important;
  height: 36px;
  box-sizing: border-box;
  margin: 0;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-schedule-msg,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-saved-banner {
  max-width: 100%;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-th--comments,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-td--comments {
  min-width: 12.5rem;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-th--actions,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-td--actions {
  width: 1%;
  max-width: 7.45rem;
  padding-left: 2px;
  padding-right: 2px;
  white-space: nowrap;
  box-sizing: border-box;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-td--actions {
  min-width: 0;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-row-actions--schedule {
  max-width: 100%;
  gap: 7px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-row-actions--schedule .ws-row-actions__lead,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-row-actions--schedule .ws-row-actions__tail {
  gap: 2px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel.ws-table--compact .ws-row-actions--schedule .ws-btn-tiny {
  padding: 2px 5px;
  font-size: 0.6rem;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-select--rams-issued {
  background: #ffefbf !important;
  border-color: #d4a02e !important;
  color: #3d2914 !important;
}

/* Works schedule: row reorder (Sortable — same affordance as Documents) */
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .jp-drag-handle.ws-schedule-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  min-width: 14px;
  padding: 0 1px;
  color: #605e5c;
  opacity: 0.8;
  cursor: grab;
  font-weight: 700;
  font-size: 0.65rem;
  line-height: 1;
  flex-shrink: 0;
  user-select: none;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .jp-drag-handle.ws-schedule-drag-handle:hover {
  opacity: 1;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .jp-drag-handle.ws-schedule-drag-handle:active {
  cursor: grabbing;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule tr.ws-line-row.jp-sortable-ghost {
  opacity: 0.45;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule tr.ws-line-row.jp-sortable-chosen {
  background: #eef6ff !important;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule tr.ws-line-row.jp-sortable-drag {
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.18);
}

body.jp-drag-in-progress,
body.jp-drag-in-progress * {
  user-select: none !important;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-top--schedule {
  margin-bottom: 4px;
  min-width: 0;
  max-width: 100%;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-saved-banner,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-schedule-msg {
  margin-bottom: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-input,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-input--site,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-input--cell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-daycell-bar {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-segment-editor {
  flex-wrap: wrap;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-daycell--pickable {
  cursor: pointer;
  vertical-align: top;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-daycell--pickable:hover {
  background: #f3f9ff !important;
  outline: 1px solid #8ab4e8;
  outline-offset: -1px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-daycell--pickable:focus-visible {
  outline: 2px solid #1a6cbd;
  outline-offset: -2px;
}

/* Works schedule: day cell hover uses inset ring only so employee fill colours stay visible */
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell--pickable:hover {
  background: transparent !important;
  outline: none;
  box-shadow: inset 0 0 0 2px #8ab4e8;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell--pickable:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px #1a6cbd;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell--pickable.ws-daycell--batch-selected {
  outline: none;
  box-shadow: inset 0 0 0 2px #1a6cbd;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell--pickable.ws-daycell--has-info .ws-daycell-inner {
  box-shadow: inset 0 0 0 1px #7fa7d3;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell--pickable.ws-daycell--batch-selected .ws-daycell-inner {
  box-shadow: inset 0 0 0 2px #1a6cbd;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell--pickable.ws-daycell--batch-selected .ws-daycell-emp {
  box-shadow: inset 0 0 0 2px #1a6cbd;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell--pickable.ws-daycell--batch-selected .ws-daycell-emp__text,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell--pickable.ws-daycell--batch-selected .ws-daycell-emp__diary-link {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell--pickable,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell--pickable * {
  -webkit-user-select: none;
  user-select: none;
}

/* Works schedule day cells: employee / client-colour full-cell fill (edge-to-edge bands) */
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel.ws-table--compact .ws-td--daycell.ws-daycell--pickable {
  padding: 0;
  vertical-align: stretch;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell-inner {
  width: 100%;
  min-height: 40px;
  padding: 0;
  gap: 0;
  align-items: stretch;
  justify-content: stretch;
  box-sizing: border-box;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel.ws-table--compact .ws-daycell-inner {
  min-height: 40px;
  padding: 0;
  gap: 0;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell-bar {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  box-sizing: border-box;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-daycell-emp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  font-weight: 650;
  line-height: 1.25;
  max-width: 100%;
  box-sizing: border-box;
  padding: 4px 10px;
  margin: 2px 0;
  border-radius: 999px;
  background: #ffe8d6;
  border: 1px solid #d9782e;
  color: #5b1740;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell-emp {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  min-height: 28px;
  margin: 0;
  padding: 6px 4px;
  border-radius: 0;
  border: none;
  box-shadow: inset 0 0 0 1px rgba(217, 120, 46, 0.28);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: normal;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-daycell-emp--asda,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-daycell-emp--sainsburys,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-daycell-emp--tesco,
.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-daycell-emp--unassigned {
  padding: 4px 10px;
  border-radius: 999px;
  max-width: 100%;
  box-sizing: border-box;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell-emp--asda,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell-emp--sainsburys,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell-emp--tesco,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell-emp--unassigned {
  padding: 6px 4px;
  border-radius: 0;
  border: none;
  max-width: none;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-daycell-emp--asda {
  background: #c8e6c9;
  color: #1b5e20;
  border: 1px solid #81c784;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell-emp--asda {
  border: none;
  box-shadow: inset 0 0 0 1px rgba(27, 94, 32, 0.22);
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-daycell-emp--sainsburys {
  background: #ffe0b2;
  color: #b71c1c;
  border: 1px solid #e65100;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell-emp--sainsburys {
  border: none;
  box-shadow: inset 0 0 0 1px rgba(183, 28, 28, 0.2);
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-daycell-emp--tesco {
  background: #bbdefb;
  color: #0d47a1;
  border: 1px solid #64b5f6;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell-emp--tesco {
  border: none;
  box-shadow: inset 0 0 0 1px rgba(13, 71, 161, 0.2);
}

.jp-app:not(.jp-app--documents) .jp-main .ws-table--excel .ws-daycell-emp--unassigned {
  background: #f2f4f5;
  color: #455a64;
  border: 1px solid #90a4ae;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell-emp--unassigned {
  border: none;
  box-shadow: inset 0 0 0 1px rgba(69, 90, 100, 0.18);
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell-emp__text,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell-emp__diary-link {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  text-align: center;
  word-break: break-word;
  vertical-align: baseline;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell-emp__diary-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel .ws-daycell-emp__diary-link:hover {
  filter: brightness(0.96);
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__chip-link {
  text-decoration: underline;
  text-underline-offset: 2px;
  color: inherit;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__chip-link:hover {
  filter: brightness(0.96);
}

body.ws-day-modal-open {
  overflow: hidden;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal[hidden] {
  display: none;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, calc(100vw - 32px));
  max-width: 420px;
  max-height: min(90vh, 560px);
  overflow: auto;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  padding: 18px 20px 16px;
  border: 1px solid #d2d0ce;
  box-sizing: border-box;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 8px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__header .ws-day-modal__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.1rem;
  color: #0f172a;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__header .um-modal__close {
  margin: -4px -8px 0 0;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__hint {
  margin: 0 0 12px;
  font-size: 0.8rem;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__hint--tight {
  margin: 0 0 8px;
  font-size: 0.75rem;
  line-height: 1.35;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__current {
  margin-bottom: 14px;
  padding: 10px;
  background: #faf9f8;
  border: 1px solid #e1dfdd;
  border-radius: 6px;
  min-height: 2.5rem;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__chip-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid #edebe9;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__chip-row:last-child {
  border-bottom: none;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__chip-name {
  font-size: 0.875rem;
  font-weight: 600;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__chip--asda,
.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__chip--sainsburys,
.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__chip--tesco,
.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__chip--unassigned {
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__chip--asda {
  background: #c8e6c9;
  color: #1b5e20;
  border-color: #81c784;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__chip--sainsburys {
  background: #ffe0b2;
  color: #b71c1c;
  border-color: #e65100;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__chip--tesco {
  background: #bbdefb;
  color: #0d47a1;
  border-color: #64b5f6;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__chip--unassigned {
  background: #f2f4f5;
  color: #455a64;
  border-color: #90a4ae;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__client-color {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed #e1dfdd;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__remove-form {
  margin: 0;
  flex-shrink: 0;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #323130;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__add-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__add-row select {
  flex: 1 1 160px;
  min-width: 0;
  font: inherit;
  font-size: 0.875rem;
  padding: 6px 8px;
  border: 1px solid #c8c6c4;
  border-radius: 4px;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__apply {
  margin-top: 14px;
  width: 100%;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__none {
  margin: 0;
  font-size: 0.85rem;
}

.jp-app:not(.jp-app--documents) .jp-main .ws-day-modal__empty {
  margin: 0 0 12px;
  font-size: 0.85rem;
}

/* Works Schedule — narrow / small viewports */
@media (max-width: 1200px) {
  .jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table.ws-table--excel.ws-table--compact {
    font-size: 0.68rem;
  }

  .jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel.ws-table--compact .ws-th,
  .jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-table--excel.ws-table--compact .ws-td {
    padding: 2px 3px;
  }
}

@media (max-width: 900px) {
  .jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-schedule-controls-row {
    flex-direction: column;
    align-items: stretch;
  }

  .jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-schedule-controls-end {
    margin-left: 0;
    justify-content: flex-end;
    align-self: flex-end;
    flex-wrap: wrap;
  }

  .jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-schedule-controls-right {
    margin-left: 0;
    justify-content: flex-end;
  }

  .jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-calendar-weekdays,
  .jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule #ws-calendar-grid.ws-calendar-grid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 6px;
  }

  .jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-autosave-status {
    margin: 0 2px 8px 2px;
    white-space: normal;
    text-align: left;
  }

  .jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-export-diary-link {
    margin-left: 0;
    display: inline;
  }
}

@media (max-width: 640px) {
  html:not(.jp-force-desktop-viewport) .jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule {
    padding-left: 8px;
    padding-right: 8px;
  }

  html:not(.jp-force-desktop-viewport) .jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-title {
    font-size: 1.15rem;
    line-height: 1.25;
  }

  html:not(.jp-force-desktop-viewport) .jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-subtitle {
    font-size: 0.8rem;
  }

  html:not(.jp-force-desktop-viewport) .jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-row-actions--schedule {
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 6px;
  }

  html:not(.jp-force-desktop-viewport) .jp-app:not(.jp-app--documents) .jp-main.jp-main--works-schedule .ws-row-actions__tail {
    margin-left: 0;
    flex-basis: 100%;
    justify-content: flex-start;
  }
}

.jp-app:not(.jp-app--documents) .jp-main .ws-standalone-back {
  margin: 8px 0 0;
  font-size: 0.875rem;
}

/* Work Diary matrix (wds-*) — unused after team planner removal; kept for safe rollback */
.jp-app:not(.jp-app--documents) .jp-main .wds-shell .wds-form {
  margin-top: 8px;
}

.jp-app:not(.jp-app--documents) .jp-main .wds-emp-block {
  margin-bottom: 28px;
}

.jp-app:not(.jp-app--documents) .jp-main .wds-emp-title {
  font-size: 1.125rem;
  margin: 0 0 10px;
  color: #0f172a;
}

.jp-app:not(.jp-app--documents) .jp-main .wds-table-scroll {
  overflow-x: auto;
  border: 1px solid #c8c6c4;
  border-radius: 8px;
  background: #ffffff;
}

.jp-app:not(.jp-app--documents) .jp-main .wds-matrix {
  border-collapse: collapse;
  font-size: 0.75rem;
  min-width: 100%;
}

.jp-app:not(.jp-app--documents) .jp-main .wds-matrix th,
.jp-app:not(.jp-app--documents) .jp-main .wds-matrix td {
  border: 1px solid #e5e7eb;
  padding: 4px 6px;
  vertical-align: middle;
}

.jp-app:not(.jp-app--documents) .jp-main .wds-matrix-corner {
  background: #f8fafc;
  min-width: 120px;
}

.jp-app:not(.jp-app--documents) .jp-main .wds-matrix-day {
  background: linear-gradient(180deg, #e8f4fc 0%, #deecf9 100%);
  color: #004578;
  text-align: center;
  min-width: 88px;
}

.jp-app:not(.jp-app--documents) .jp-main .wds-matrix-day-name {
  display: block;
  font-weight: 700;
}

.jp-app:not(.jp-app--documents) .jp-main .wds-matrix-day-date {
  display: block;
  font-size: 0.6875rem;
  opacity: 0.85;
}

.jp-app:not(.jp-app--documents) .jp-main .wds-matrix-label {
  background: #f8fafc;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  color: #334155;
}

.jp-app:not(.jp-app--documents) .jp-main .wds-cell-input {
  width: 100%;
  min-width: 72px;
  box-sizing: border-box;
  font-size: 0.75rem;
  padding: 4px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
}

.jp-app:not(.jp-app--documents) .jp-main .wds-cell-textarea {
  width: 100%;
  min-width: 72px;
  min-height: 44px;
  box-sizing: border-box;
  font-size: 0.75rem;
  padding: 4px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  resize: vertical;
}

.jp-app:not(.jp-app--documents) .jp-main .wds-matrix-cb {
  text-align: center;
  background: #fff7ed;
}

.jp-app:not(.jp-app--documents) .jp-main .wds-actions {
  margin-top: 16px;
}

/* ── Site Marker (Company Tools) ─────────────────────────────── */
.jp-sm-page .jp-sm-section {
  margin-bottom: 28px;
}

.jp-sm-form {
  max-width: 520px;
}

/* Site Marker visual hub — page shell (sleeper, compact controls) */
.jp-sm-hub-main {
  background: #f1f5f9;
  padding-top: 10px;
  padding-bottom: 40px;
}

.jp-sm-hub-container {
  max-width: 640px;
  margin: 0 auto;
  padding-left: clamp(12px, 3vw, 20px);
  padding-right: clamp(12px, 3vw, 20px);
}

.jp-sm-hub-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 20px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e2e8f0;
}

.jp-sm-hub-header__text {
  flex: 1;
  min-width: 0;
}

.jp-sm-hub-title {
  margin: 0 0 4px;
  font-size: 1.28rem;
  font-weight: 720;
  letter-spacing: -0.03em;
  color: #0f172a;
}

.jp-sm-hub-lede {
  margin: 0;
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
  line-height: 1.4;
}

.jp-sm-hub-topnav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.jp-sm-hub-topnav__link {
  font-size: 0.78rem;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.jp-sm-hub-topnav__link:hover {
  color: #861f54;
  border-bottom-color: rgba(134, 31, 84, 0.35);
}

.jp-sm-hub-topnav__sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #cbd5e1;
  flex-shrink: 0;
}

.jp-sm-hub-panel {
  background: #fff;
  border-left: none;
  border-right: none;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px 20px 18px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.jp-sm-hub-cta-block {
  margin-bottom: 4px;
}

.jp-sm-hub-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 0;
  padding: 7px 13px;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  line-height: 1.35;
  color: #ffffff;
  background: #6b1d40;
  border-left: none;
  border-right: none;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.jp-sm-hub-cta__dim {
  font-weight: 500;
  opacity: 0.9;
}

.jp-sm-hub-cta:hover:not(:disabled) {
  background: #7a2249;
  box-shadow: 0 2px 5px rgba(107, 29, 64, 0.15);
}

.jp-sm-hub-cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.jp-sm-hub-cta-hint {
  margin: 8px 0 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: #64748b;
  max-width: 36rem;
}

.jp-sm-hub-section-title {
  margin: 20px 0 10px;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
}

.jp-sm-hub-empty {
  margin: 0;
  font-size: 0.875rem;
  color: #94a3b8;
}

.jp-sm-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jp-sm-list--drafts {
  gap: 12px;
}

/* Site Marker — resume draft cards (uniform grid, fixed min height) */
.jp-sm-draft-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "link del"
    "sub del"
    "meta del";
  column-gap: 16px;
  row-gap: 6px;
  align-items: center;
  min-height: 96px;
  padding: 12px 14px;
  background: #fafbfc;
  /* Match hub panel / header rule grey — avoid heavy default button greys */
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  list-style: none;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.jp-sm-page .jp-sm-hub-panel .jp-sm-draft-card {
  border-left: none;
  border-right: none;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.jp-sm-draft-card:hover {
  background: #fff;
  border-color: #d8e0ea;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.jp-sm-draft-card__link {
  grid-area: link;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 10px;
  text-decoration: none;
  color: #0f172a;
  min-width: 0;
}

.jp-sm-draft-card__link:hover {
  color: #861f54;
}

.jp-sm-draft-card__title {
  font-weight: 700;
  font-size: 0.94rem;
  letter-spacing: -0.015em;
  line-height: 1.3;
  min-width: 0;
  word-break: break-word;
}

.jp-sm-draft-card__pill {
  flex-shrink: 0;
}

.jp-sm-draft-card__sub {
  grid-area: sub;
  margin: 0;
  font-size: 0.72rem;
  font-weight: 500;
  color: #64748b;
  line-height: 1.25;
  min-height: 1.2em;
}

.jp-sm-draft-card__sub--spacer {
  visibility: hidden;
  pointer-events: none;
}

.jp-sm-draft-card__meta {
  grid-area: meta;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  min-height: 30px;
}

.jp-sm-draft-card__actions {
  grid-area: del;
  align-self: center;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.jp-sm-draft-card__action {
  margin: 0;
  padding: 5px 10px;
  font-size: 0.7rem;
  font-weight: 650;
  font-family: inherit;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  cursor: pointer;
  line-height: 1.2;
  white-space: nowrap;
  box-sizing: border-box;
  box-shadow: none;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
  text-decoration: none;
}

.jp-sm-draft-card__action--intrusive {
  border-color: #cbd5e1;
  background: #f8fafc;
  color: #1d4ed8;
}

.jp-sm-draft-card__action--intrusive:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.jp-sm-draft-card__delete {
  border-color: #e2e8f0;
  background: #fff;
  color: #64748b;
}

.jp-sm-draft-card__delete:hover:not(:disabled) {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.jp-sm-draft-card__delete:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.jp-sm-pill--draft-empty {
  background: #f8fafc;
  color: #94a3b8;
  border-color: #e2e8f0;
  font-weight: 500;
}

.jp-sm-list-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 14px;
  background: var(--jp-surface);
  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-md);
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.jp-sm-list-link {
  font-weight: 600;
  color: var(--jp-text);
  text-decoration: none;
}

.jp-sm-list-link:hover {
  color: var(--jp-blue);
}

.jp-sm-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.jp-sm-draft-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  margin: 4px 0 0;
}

.jp-sm-draft-meta-primary {
  font-weight: 700;
  color: #0f172a;
  max-width: 100%;
}

.jp-sm-draft-meta-sep {
  color: #94a3b8;
  padding: 0 2px;
}

.jp-sm-draft-meta-id {
  color: #64748b;
  font-weight: 600;
  font-size: 0.9em;
}

.jp-sm-pill {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--jp-surface-subtle);
  color: var(--jp-text-muted);
  border: 1px solid var(--jp-border);
}

.jp-sm-pill--ok {
  background: #ecfdf3;
  color: #166534;
  border-color: #bbf7d0;
}

.jp-sm-pill--muted {
  opacity: 0.9;
}

.jp-sm-flash {
  padding: 10px 14px;
  border-radius: var(--jp-radius-sm);
  margin: 0 0 16px;
  font-size: 0.9375rem;
}

.jp-sm-flash--ok {
  background: #ecfdf3;
  color: #166534;
  border: 1px solid #bbf7d0;
}

.jp-sm-flash--err {
  background: #fef2f2;
  color: #b91c1c;
  border: 1px solid #fecaca;
}

.jp-sm-flash--info {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}

/* Site Marker — export / complete survey modal (visual + intrusive) */
.jp-sm-export-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(15, 23, 42, 0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  box-sizing: border-box;
}

.jp-sm-export-modal {
  width: 100%;
  max-width: 480px;
  max-height: min(90vh, 620px);
  overflow-y: auto;
  background: var(--jp-surface);
  border-radius: var(--jp-radius-lg);
  border: 1px solid var(--jp-border);
  box-shadow: var(--jp-shadow);
  padding: 22px 24px;
  box-sizing: border-box;
}

.jp-sm-export-modal__title {
  margin: 0 0 6px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--jp-text);
}

.jp-sm-export-modal__sub {
  margin: 0 0 18px;
  font-size: 0.875rem;
  color: var(--jp-text-muted);
  line-height: 1.45;
}

.jp-sm-export-modal__status {
  margin: 0 0 14px;
}

.jp-sm-export-modal__status.jp-sm-flash {
  margin-bottom: 14px;
}

.jp-sm-export-modal__section {
  display: none;
  margin-bottom: 16px;
  padding-top: 4px;
  border-top: 1px solid var(--jp-border);
}

.jp-sm-export-modal__section.is-open {
  display: block;
}

.jp-sm-export-modal__actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.jp-sm-export-modal__actions-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 520px) {
  .jp-sm-export-modal__actions-row {
    grid-template-columns: 1fr;
  }
}

.jp-sm-export-modal__actions-row .jp-btn,
.jp-sm-export-modal__actions-row .jp-btn-secondary {
  justify-content: center;
  text-align: center;
}

.jp-sm-export-modal .jp-sm-report-onboarding-label {
  margin-bottom: 6px;
  margin-top: 4px;
}

.jp-sm-export-modal__footer {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--jp-border);
}

/*
 * Export modal is mounted in #sm-modal-root (outside .jp-main), so it does not inherit
 * the non-Documents purple primary styling. Match tools brand strictly (#861f54 / #9c2f66).
 */
#sm-modal-root .jp-sm-export-modal .jp-btn--primary {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff;
  border-color: rgba(134, 31, 84, 0.55) !important;
  background: linear-gradient(180deg, #9c2f66, #861f54) !important;
}

#sm-modal-root .jp-sm-export-modal .jp-btn--primary:hover:not(:disabled) {
  filter: brightness(1.03);
}

#sm-modal-root .jp-sm-export-modal .jp-btn--primary:disabled {
  opacity: 0.72;
  filter: none;
  cursor: not-allowed;
}

.jp-sm-view-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.jp-sm-view-title {
  margin-bottom: 4px;
}

.jp-sm-view-sub {
  margin: 0;
}

.jp-sm-view-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.jp-sm-viewer-shell {
  background: var(--jp-surface);
  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-lg);
  overflow: hidden;
  box-shadow: var(--jp-shadow);
}

.jp-sm-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid var(--jp-border);
}

.jp-sm-toolbar-upload {
  flex: 0 0 auto;
}

.jp-sm-toolbar-actions--after-upload {
  flex: 0 0 auto;
}

.jp-sm-toolbar-tail {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 10px;
  min-width: 0;
}

.jp-sm-toolbar-label {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--jp-text);
}

.jp-sm-toolbar-hint {
  font-size: 0.8125rem;
  color: var(--jp-text-muted);
}

.jp-sm-viewer-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 0;
  min-height: 360px;
}

@media (max-width: 900px) {
  .jp-sm-viewer-body {
    grid-template-columns: 1fr;
  }
}

.jp-sm-canvas-wrap {
  background: #0f172a;
  padding: 16px;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.jp-sm-report-onboarding {
  display: none;
  width: 100%;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  padding: 8px;
  box-sizing: border-box;
}

.jp-sm-report-onboarding.jp-sm-report-onboarding--visible {
  display: flex;
}

.jp-sm-report-onboarding-card {
  width: 100%;
  max-width: 520px;
  background: var(--jp-surface);
  border-radius: var(--jp-radius-lg);
  border: 1px solid var(--jp-border);
  padding: 22px 24px;
  box-shadow: var(--jp-shadow);
}

.jp-sm-report-onboarding-title {
  margin: 0 0 16px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--jp-text);
}

.jp-sm-report-onboarding-label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 12px;
  color: var(--jp-text);
}

.jp-sm-report-onboarding-input {
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--jp-border);
  border-radius: 8px;
  font-size: 0.875rem;
  box-sizing: border-box;
}

.jp-sm-report-onboarding-done {
  width: 100%;
  margin-top: 18px;
  padding: 10px 16px;
}

.jp-sm-viewer-shell--report-onboarding .jp-sm-canvas-wrap {
  background: #e2e8f0;
}

.jp-sm-viewer-shell--report-onboarding .jp-sm-canvas {
  display: none !important;
}

.jp-sm-viewer-shell--report-onboarding .jp-sm-toolbar {
  pointer-events: none;
  opacity: 0.52;
}

.jp-sm-side.jp-sm-side--onboarding-muted {
  pointer-events: none;
  opacity: 0.52;
}

.jp-sm-canvas {
  position: relative;
  width: 100%;
  max-height: min(72vh, 900px);
  overflow: auto;
  border-radius: var(--jp-radius-sm);
  background: #1e293b;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.jp-sm-bg-img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.jp-sm-canvas--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  color: #94a3b8;
  font-size: 0.9375rem;
  text-align: center;
  padding: 24px;
}

.jp-sm-side {
  padding: 18px 16px;
  border-left: 1px solid var(--jp-border);
  background: var(--jp-surface-subtle);
}

@media (max-width: 900px) {
  .jp-sm-side {
    border-left: none;
    border-top: 1px solid var(--jp-border);
  }
}

.jp-sm-side-title {
  margin: 0 0 8px;
  font-size: 1rem;
}

.jp-sm-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.jp-sm-side-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.jp-sm-side-text {
  margin: 0 0 14px;
  font-size: 0.875rem;
  color: var(--jp-text-muted);
}

.jp-sm-side-meta {
  margin: 12px 0 0;
  font-size: 0.8125rem;
  color: var(--jp-text-muted);
}

.jp-sm-upload-form .jp-sm-file-label {
  display: block;
  cursor: pointer;
  margin-bottom: 12px;
}

.jp-sm-upload-form input[type="file"] {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

.jp-sm-file-btn {
  display: inline-block;
  padding: 8px 12px;
  border-radius: var(--jp-radius-sm);
  border: 1px solid var(--jp-border);
  background: var(--jp-surface);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Same visual as Upload Drawing label control; used for “Proceed to intrusive survey”. */
a.jp-sm-file-btn.jp-sm-toolbar-intrusive {
  text-decoration: none;
  color: var(--jp-text);
  cursor: pointer;
  box-sizing: border-box;
  line-height: normal;
}

a.jp-sm-file-btn.jp-sm-toolbar-intrusive:hover {
  border-color: var(--jp-blue);
  color: var(--jp-blue);
}

.jp-sm-toolbar-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* Site Marker floor toolbar: all purple primary controls MUST share this compact size (Report…Export). */
.jp-sm-toolbar-actions .jp-btn,
.jp-sm-toolbar-tail .jp-btn {
  width: auto !important;
  flex: 0 0 auto;
  padding: 4px 8px;
  min-height: 28px;
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
  text-decoration: none !important;
}

.jp-sm-toolbar-actions .jp-btn--primary,
.jp-sm-toolbar-tail .jp-btn--primary {
  background: linear-gradient(180deg, #9f2b68 0%, #861f54 100%);
  border-color: #861f54;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset;
}

@media (max-width: 960px) {
  .jp-sm-toolbar-actions {
    display: inline-flex;
  }
}

.jp-sm-file-label:hover .jp-sm-file-btn {
  border-color: var(--jp-blue);
  color: var(--jp-blue);
}

.jp-sm-toolbar-modes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.jp-sm-mode-btn {
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--jp-radius-sm);
  border: 1px solid var(--jp-border);
  background: var(--jp-surface);
  color: var(--jp-text);
  cursor: pointer;
}

.jp-sm-mode-btn:hover:not(:disabled) {
  border-color: var(--jp-blue);
  color: var(--jp-blue);
}

.jp-sm-mode-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.jp-sm-mode-btn--active {
  background: var(--jp-blue);
  border-color: var(--jp-blue);
  color: #fff;
}

.jp-sm-mode-btn--active:hover:not(:disabled) {
  color: #fff;
  border-color: var(--jp-blue-hover);
  background: var(--jp-blue-hover);
}

.jp-sm-media-stack {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: top;
}

.jp-sm-media-inner {
  display: block;
  line-height: 0;
}

.jp-sm-media-stack--add {
  cursor: crosshair;
}

.jp-sm-media-stack--move {
  cursor: default;
}

.jp-sm-media-stack--move .jp-sm-pin.jp-sm-pin--selected {
  cursor: move;
}

.jp-sm-markers-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.jp-sm-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  min-width: 1.5rem;
  height: 1.5rem;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--jp-sm-pin-color, #e11d48);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 1.25rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  pointer-events: auto;
}

.jp-sm-pin:focus {
  outline: 2px solid var(--jp-blue);
  outline-offset: 2px;
}

.jp-sm-pin--selected {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--jp-blue),
    0 2px 8px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

.jp-sm-bg-canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

.jp-sm-pdf-fail {
  margin: 0;
  padding: 20px;
  color: #fecaca;
  font-size: 0.9375rem;
  text-align: center;
  max-width: 360px;
}

.jp-sm-side-section {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--jp-border);
}

.jp-sm-side-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.jp-sm-marker-heading {
  margin: 0 0 12px;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--jp-text);
}

.jp-sm-marker-path {
  margin: -4px 0 10px;
  padding: 8px 10px;
  border-radius: var(--jp-radius-sm);
  background: var(--jp-surface);
  border: 1px solid var(--jp-border);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--jp-text);
  line-height: 1.35;
}

.jp-sm-field-nest {
  margin: 0 0 12px;
  padding: 10px 0 2px 14px;
  border-left: 3px solid var(--jp-blue-soft);
}

.jp-sm-field-sublabel {
  font-weight: 500;
  color: var(--jp-text-muted);
  font-size: 0.75rem;
}

.jp-sm-marker-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.jp-sm-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.875rem;
}

.jp-sm-field-label {
  font-weight: 600;
  color: var(--jp-text-muted);
  font-size: 0.8125rem;
}

.jp-sm-field input[type="text"],
.jp-sm-field textarea,
.jp-sm-field select {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-sm);
  background: var(--jp-surface);
  color: var(--jp-text);
  width: 100%;
  box-sizing: border-box;
}

.jp-sm-field--inline {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.jp-sm-field--inline .jp-sm-field-label {
  min-width: 5rem;
}

.jp-sm-field input[type="color"] {
  width: 3rem;
  height: 2rem;
  padding: 2px;
  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-sm);
  background: var(--jp-surface);
  cursor: pointer;
}

.jp-sm-marker-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-top: 14px;
}

.jp-sm-save-status {
  font-size: 0.8125rem;
  color: var(--jp-text-muted);
}

.jp-sm-save-status--head {
  align-self: center;
  text-align: right;
  flex: 0 1 auto;
  max-width: min(100%, 280px);
}

.jp-sm-marker-form-wrap[hidden] {
  display: none !important;
}

.jp-sm-field-hint {
  font-size: 0.8125rem;
  color: var(--jp-text-muted);
  margin: 0 0 12px;
}

.jp-sm-quick-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.jp-sm-quick-note {
  font: inherit;
  font-size: 0.75rem;
  padding: 5px 9px;
  border-radius: var(--jp-radius-sm);
  border: 1px solid var(--jp-border);
  background: var(--jp-surface);
  color: var(--jp-text);
  cursor: pointer;
}

.jp-sm-quick-note:hover {
  border-color: var(--jp-blue);
  color: var(--jp-blue);
}

/* ——— Site Marker intrusive ——— */
.jp-sm-intrusive-body {
  display: grid;
  grid-template-columns: 1fr min(420px, 100%);
  gap: 20px;
  align-items: start;
}

@media (max-width: 960px) {
  .jp-sm-intrusive-body {
    grid-template-columns: 1fr;
  }
}

.jp-sm-intrusive-viewer {
  position: relative;
}

.jp-sm-intrusive-lock {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  text-align: center;
  padding: 16px;
  border-radius: var(--jp-radius-sm);
  font-weight: 600;
}

.jp-sm-intrusive-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.jp-sm-intrusive-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.jp-sm-intrusive-head-btn {
  margin: 0;
  padding: 5px 10px;
  font-size: 0.7rem;
  font-weight: 650;
  font-family: inherit;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #64748b;
  line-height: 1.2;
  white-space: nowrap;
  box-sizing: border-box;
  box-shadow: none;
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
  text-decoration: none;
}

.jp-sm-intrusive-head-btn--back:hover {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #475569;
}

.jp-sm-intrusive-head-btn--draft {
  background: #f8fafc;
  border-color: #cbd5e1;
  color: #1d4ed8;
}

.jp-sm-intrusive-head-btn--draft:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1e40af;
}

.jp-sm-intrusive-back {
  align-self: flex-start;
}

.jp-sm-intrusive-strip-title {
  font-weight: 700;
  font-size: 0.875rem;
  margin-bottom: 8px;
}

.jp-sm-intrusive-strip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Intrusive flow actions only (exclude top-right draft controls) */
.jp-app:not(.jp-app--documents) .jp-main .jp-sm-intrusive-body .jp-btn {
  min-height: 30px;
  padding: 4px 10px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  letter-spacing: 0.01em;
  box-shadow: none !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jp-sm-intrusive-body .jp-btn--primary {
  border-color: #b7c6dd !important;
  background: linear-gradient(180deg, #6f89b8, #5f789f) !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jp-sm-intrusive-body .jp-btn--primary:hover {
  border-color: #9fb4d4 !important;
  background: linear-gradient(180deg, #7b94c2, #6884ad) !important;
  filter: none !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jp-sm-intrusive-body .jp-btn--ghost {
  border-color: #d6dee9 !important;
  background: #ffffff !important;
  color: #475569 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jp-sm-intrusive-body .jp-btn--ghost:hover {
  background: #f8fafc !important;
  border-color: #c8d4e3 !important;
  color: #334155 !important;
  filter: none !important;
}

.jp-sm-intrusive-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--jp-border);
  background: var(--jp-surface);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}

.jp-sm-intrusive-chip--sel {
  border-width: 2px;
  border-color: var(--jp-blue);
}

.jp-sm-intrusive-chip--done {
  border-color: #16a34a;
}

.jp-sm-intrusive-chip-ic {
  font-size: 0.75rem;
  opacity: 0.85;
}

.jp-sm-intrusive-visual-card {
  padding: 14px;
  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-sm);
  background: var(--jp-surface);
  font-size: 0.875rem;
}

.jp-sm-intrusive-vhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.jp-sm-intrusive-muted {
  font-size: 0.8125rem;
  color: var(--jp-text-muted);
  margin: 0;
}

.jp-sm-intrusive-step-title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--jp-text-muted);
}

.jp-sm-intrusive-qcard {
  padding: 16px;
  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-sm);
  background: var(--jp-surface);
}

.jp-sm-intrusive-qcard p {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
}

.jp-sm-intrusive-helper {
  margin: 10px 0 0 !important;
  font-size: 0.8125rem !important;
  font-weight: 500 !important;
  color: var(--jp-text-muted) !important;
}

.jp-sm-intrusive-input .jp-sm-full {
  width: 100%;
  margin-top: 10px;
}

.jp-sm-intrusive-yesno {
  display: flex;
  gap: 10px;
}

.jp-sm-intrusive-yesno .jp-btn {
  flex: 1;
}

.jp-sm-intrusive-textrow {
  display: flex;
  gap: 10px;
  align-items: center;
}

.jp-sm-intrusive-textrow .jp-sm-text {
  flex: 1;
}

.jp-sm-ipaf-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.jp-sm-ipaf-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.875rem;
  cursor: pointer;
}

.jp-sm-intrusive-pick {
  margin: 0;
  color: var(--jp-text-muted);
  font-size: 0.9375rem;
}

.jp-sm-marker-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.jp-sm-marker-photo-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: var(--jp-radius-sm);
  overflow: hidden;
  border: 1px solid var(--jp-border);
}

.jp-sm-marker-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jp-sm-marker-photo-del {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.jp-sm-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 8px;
}

.jp-sm-chip-row--stack {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
}

.jp-sm-chip-row .jp-sm-choice {
  font: inherit;
  font-size: 0.72rem;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid #d8dce3;
  background: #ffffff;
  color: #334155;
  cursor: pointer;
  line-height: 1.1;
  white-space: nowrap;
}

.jp-sm-chip-row--stack .jp-sm-choice {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}

.jp-sm-chip-row .jp-sm-choice--on {
  border-color: #861f54;
  background: #f6eaf1;
  color: #5d163c;
  box-shadow: 0 0 0 1px rgba(134, 31, 84, 0.22);
  font-weight: 700;
}

.jp-sm-chip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.jp-sm-chip-card {
  background: #ffffff;
  border: 1px solid var(--jp-border);
  border-radius: 10px;
  padding: 8px;
}

.jp-sm-chip-card--full {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  html:not(.jp-force-desktop-viewport) .jp-sm-chip-grid {
    grid-template-columns: 1fr;
  }
}

.jp-sm-select {
  width: 100%;
  border: 1px solid var(--jp-border);
  border-radius: 8px;
  background: #fff;
  color: #334155;
  padding: 7px 9px;
  font-size: 0.84rem;
}

.jp-sm-size-row {
  --jp-sm-size-fill: #f44336;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  touch-action: manipulation;
}

.jp-sm-size-pick {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  margin: 0;
  padding: 5px 3px 4px;
  border-radius: 6px;
  border: 1px solid #d8dce3;
  background: #ffffff;
  cursor: pointer;
  font: inherit;
  color: #334155;
  -webkit-tap-highlight-color: transparent;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}

/* One visual “selected” state: jp-sm-size-pick--on. Avoid focus ring on touch
   (looks like a second highlight next to the real selection). */
.jp-sm-size-pick:focus {
  outline: none;
}

.jp-sm-size-pick:focus-visible {
  outline: 2px solid var(--jp-blue, #2563eb);
  outline-offset: 2px;
}

.jp-sm-size-pick__track {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 22px;
  border-radius: 4px;
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
  border: 1px solid #e2e8f0;
  box-sizing: border-box;
}

.jp-sm-size-pick__dot {
  display: block;
  border-radius: 999px;
  background: var(--jp-sm-size-fill, #f44336);
  border: 2px solid #ffffff;
  box-sizing: border-box;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.18);
  flex-shrink: 0;
}

.jp-sm-size-pick__dot--sm {
  width: 8px;
  height: 8px;
}

.jp-sm-size-pick__dot--md {
  width: 11px;
  height: 11px;
}

.jp-sm-size-pick__dot--lg {
  width: 16px;
  height: 16px;
}

.jp-sm-size-pick__label {
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.15;
  color: #475569;
}

@media (hover: hover) and (pointer: fine) {
  .jp-sm-size-pick:hover {
    border-color: #94a3b8;
    background: #fafafa;
  }
}

.jp-sm-size-pick--on {
  border-color: #861f54;
  background: linear-gradient(180deg, #faf0f6 0%, #f3e5ee 100%);
  box-shadow: 0 0 0 1px rgba(134, 31, 84, 0.28);
}

.jp-sm-size-pick--on .jp-sm-size-pick__label {
  color: #5d163c;
  font-weight: 700;
}

/* Marker size toggles: global .jp-main button / * color rules use !important and were hiding the selected state on mobile. */
.jp-app:not(.jp-app--documents) .jp-sm-page .jp-main button.jp-sm-size-pick {
  color: #334155;
  background: #ffffff;
  border-color: #d8dce3;
  filter: none;
}

@media (hover: hover) and (pointer: fine) {
  .jp-app:not(.jp-app--documents) .jp-sm-page .jp-main button.jp-sm-size-pick:hover {
    filter: none;
    border-color: #94a3b8;
    background: #fafafa;
  }
}

/* Touch / stylus-first: browsers often keep :hover on the last control (e.g. the
   old “medium” pick). That looks like two selections next to jp-sm-size-pick--on. */
@media (pointer: coarse) {
  .jp-sm-size-pick:hover:not(.jp-sm-size-pick--on) {
    border-color: #d8dce3;
    background: #ffffff;
  }

  .jp-app:not(.jp-app--documents) .jp-sm-page .jp-main button.jp-sm-size-pick:hover:not(.jp-sm-size-pick--on) {
    filter: none;
    border-color: #d8dce3 !important;
    background: #ffffff !important;
  }
}

.jp-app:not(.jp-app--documents) .jp-sm-page .jp-main button.jp-sm-size-pick.jp-sm-size-pick--on {
  border-color: #861f54 !important;
  background: linear-gradient(180deg, #faf0f6 0%, #f3e5ee 100%) !important;
  box-shadow: 0 0 0 1px rgba(134, 31, 84, 0.28);
  color: #5d163c !important;
}

.jp-app:not(.jp-app--documents) .jp-sm-page .jp-main button.jp-sm-size-pick.jp-sm-size-pick--on .jp-sm-size-pick__label {
  color: #5d163c !important;
  font-weight: 700;
}

.jp-app:not(.jp-app--documents) .jp-sm-page .jp-main button.jp-sm-size-pick.jp-sm-size-pick--on .jp-sm-size-pick__track {
  border-color: rgba(134, 31, 84, 0.42) !important;
  background: linear-gradient(180deg, #fdf2f8 0%, #f3e5ee 100%) !important;
}

/* Mobile: corner control to expand floor plan to full viewport (fixed overlay). */
.jp-sm-fs-toggle {
  display: none;
}

.jp-portal-mobile .jp-sm-fs-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 25;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background: rgba(15, 23, 42, 0.82);
  color: #e2e8f0;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  -webkit-tap-highlight-color: transparent;
}

.jp-portal-mobile .jp-sm-fs-toggle::before {
  content: "⛶";
  font-size: 1.05rem;
  line-height: 1;
}

.jp-portal-mobile .jp-sm-fs-toggle.jp-sm-fs-toggle--active::before {
  content: "⛶";
}

body.jp-sm-drawing-fs-lock {
  overflow: hidden;
  overscroll-behavior: none;
}

/* Expanded drawing: hide portal chrome so the floor plan can use the viewport */
body.jp-sm-drawing-fs-lock.jp-portal-mobile .jp-header--mobile-shell {
  display: none !important;
}

body.jp-sm-drawing-fs-lock .jp-sm-view-head {
  display: none !important;
}

/* Mobile “full screen” drawing: whole viewer shell (toolbar + canvas + side panel).
   Side panel stays visible so issue/size/mode can be changed while placing markers. */
.jp-sm-viewer-shell.jp-sm-shell-drawing-fs {
  position: fixed;
  z-index: 900;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  height: 100dvh;
  max-height: 100dvh;
  box-sizing: border-box;
  padding:
    max(8px, env(safe-area-inset-top, 0px))
    max(8px, env(safe-area-inset-right, 0px))
    max(8px, env(safe-area-inset-bottom, 0px))
    max(8px, env(safe-area-inset-left, 0px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: 0;
  margin: 0;
  background: var(--jp-surface, #f8fafc);
  overflow: hidden;
}

.jp-sm-viewer-shell.jp-sm-shell-drawing-fs .jp-sm-toolbar {
  display: none !important;
}

.jp-sm-viewer-shell.jp-sm-shell-drawing-fs .jp-sm-viewer-body {
  flex: 1 1 auto;
  min-height: 0;
  display: block;
  align-items: stretch;
  overflow: hidden;
}

.jp-sm-viewer-shell.jp-sm-shell-drawing-fs .jp-sm-canvas-wrap {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
}

.jp-sm-fs-controls {
  position: absolute;
  left: max(8px, env(safe-area-inset-left, 0px));
  right: max(8px, env(safe-area-inset-right, 0px));
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  z-index: 35;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  pointer-events: auto;
}

.jp-sm-fs-controls[hidden] {
  display: none !important;
}

.jp-sm-fs-btn {
  min-height: 34px !important;
  padding: 0 10px !important;
  border-radius: 8px !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  white-space: nowrap;
}

.jp-sm-fs-btn.jp-sm-fs-btn--on {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.28) !important;
}

.jp-sm-viewer-shell.jp-sm-shell-drawing-fs .jp-sm-canvas {
  display: flex;
  flex-direction: column;
  max-height: none !important;
  height: 100%;
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.jp-sm-viewer-shell.jp-sm-shell-drawing-fs #sm-viewport {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  height: 100%;
}

.jp-sm-viewer-shell.jp-sm-shell-drawing-fs .jp-sm-side {
  display: none !important;
}

.jp-sm-viewer-shell.jp-sm-shell-drawing-fs.jp-sm-shell-drawing-fs-fields .jp-sm-side {
  display: block !important;
  position: absolute;
  top: max(8px, env(safe-area-inset-top, 0px));
  right: max(8px, env(safe-area-inset-right, 0px));
  bottom: calc(max(8px, env(safe-area-inset-bottom, 0px)) + 86px);
  width: min(320px, 68vw);
  min-width: 220px;
  padding: 12px 10px;
  border: 1px solid var(--jp-border);
  border-radius: 10px;
  background: rgba(248, 250, 252, 0.96);
  backdrop-filter: blur(4px);
  overflow-y: auto;
  z-index: 34;
}

.jp-sm-viewer-shell.jp-sm-shell-drawing-fs.jp-sm-shell-drawing-fs-fields .jp-sm-side .jp-sm-side-head-actions {
  display: none;
}

.jp-sm-viewer-shell.jp-sm-shell-drawing-fs.jp-sm-shell-drawing-fs-fields .jp-sm-side .jp-sm-chip-card:nth-child(2),
.jp-sm-viewer-shell.jp-sm-shell-drawing-fs.jp-sm-shell-drawing-fs-fields .jp-sm-side .jp-sm-area-inline {
  display: none;
}

@media (max-width: 520px) {
  .jp-sm-viewer-shell.jp-sm-shell-drawing-fs .jp-sm-viewer-body {
    display: block;
  }

  .jp-sm-viewer-shell.jp-sm-shell-drawing-fs .jp-sm-side {
    display: none !important;
  }
}

.jp-sm-place-ghost {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 999px;
  box-sizing: border-box;
  border: 3px solid #ffffff;
  pointer-events: none;
  z-index: 1;
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.28);
  opacity: 0.92;
}

.jp-sm-mode-toggle {
  width: auto !important;
  flex: 0 0 auto;
  padding: 4px 8px;
  min-height: 28px;
  border-radius: 7px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  box-shadow: none;
}

.jp-app:not(.jp-app--documents) .jp-main .jp-btn--primary.jp-sm-mode-toggle--pan {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%) !important;
  border-color: #b91c1c !important;
  color: #fff !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jp-btn--primary.jp-sm-mode-toggle--add {
  background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important;
  border-color: #15803d !important;
  color: #fff !important;
}

.jp-sm-welcome-wrap {
  max-width: 880px;
  margin: 24px auto 0;
  padding: 18px;
  border: 1px solid var(--jp-border);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 16px;
}

.jp-sm-welcome-kicker {
  display: inline-block;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: #861f54;
  margin-bottom: 8px;
}

.jp-sm-welcome-hero .jp-tools-title {
  margin: 0 0 6px;
}

.jp-sm-welcome-hero .jp-tools-sub {
  margin: 0 0 12px;
}

.jp-sm-welcome-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.jp-sm-welcome-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border: 1px solid #dbe2ea;
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font-size: 0.73rem;
  font-weight: 600;
}

.jp-sm-welcome-actions {
  display: grid;
  gap: 10px;
  align-content: start;
}

.jp-sm-welcome-btn {
  width: 100%;
  justify-content: space-between;
  text-align: left;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 700;
}

.jp-sm-welcome-btn__text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.jp-sm-welcome-btn__arrow {
  font-size: 1rem;
  opacity: 0.92;
}

.jp-sm-welcome-back {
  width: 100% !important;
  padding: 7px 12px;
  min-height: 30px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
}

@media (max-width: 860px) {
  .jp-sm-welcome-wrap {
    grid-template-columns: 1fr;
  }
}

/* Employee diary page — align to Works Schedule week view styling */
.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  padding-top: 12px;
  padding-bottom: 16px;
  padding-left: clamp(8px, 2vw, 20px);
  padding-right: clamp(8px, 2vw, 20px);
  --wd-entry-panel-bg: #f3f2f1;
  --wd-entry-panel-border: #d2d0ce;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-shell--entry {
  max-width: none;
  width: 100%;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-entry-top {
  margin-bottom: 4px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-entry-title {
  margin: 0;
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 750;
  letter-spacing: -0.02em;
  color: #0f172a;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-entry-subtitle {
  margin: 6px 0 0;
  color: #475569;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-entry-toolbar {
  margin-bottom: 14px;
  align-items: center;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-entry-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Match Work Diary / Export Diary link buttons: native <button> UA styles differ from <a>. */
.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-entry-toolbar-group > .jp-btn-secondary {
  box-sizing: border-box;
  min-height: 42px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-entry-toolbar-group > button.jp-btn-secondary {
  font-family: inherit;
  line-height: 1.25;
  margin: 0;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-mileage-toolbar-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-mileage-total--toolbar {
  margin-left: 0;
  min-height: 36px;
  border-radius: 6px;
  border: 1px solid var(--wd-entry-panel-border) !important;
  background: var(--wd-entry-panel-bg) !important;
  box-shadow: none !important;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-mileage-unit {
  font-size: 0.85rem;
  font-weight: 650;
  color: #6b7280 !important;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-emp-nav--entry {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border: 1px solid var(--wd-entry-panel-border);
  border-radius: 8px;
  background: var(--wd-entry-panel-bg);
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-shell--entry {
  transition: opacity 160ms ease;
}

body.jp-softnav-loading .jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-shell--entry {
  opacity: 0.72;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-emp-tab--active {
  background: rgba(156, 47, 102, 0.22) !important;
  border-color: rgba(156, 47, 102, 0.50) !important;
  color: #6d1b46 !important;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-section--entry {
  margin-bottom: 18px;
  border: 1px solid var(--wd-entry-panel-border);
  border-radius: 8px;
  background: var(--wd-entry-panel-bg);
  overflow: hidden;
  --wd-day-header-bg: #eef2f7;
  --wd-day-header-fg: #0f172a;
  --wd-day-accent: #64748b;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-section--entry.wd-day-section--d0 {
  --wd-day-header-bg: linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 55%, #f8fafc 100%);
  --wd-day-header-fg: #1e293b;
  --wd-day-accent: #475569;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-section--entry.wd-day-section--d1 {
  --wd-day-header-bg: linear-gradient(135deg, #ccfbf1 0%, #ecfdf5 50%, #f0fdfa 100%);
  --wd-day-header-fg: #134e4a;
  --wd-day-accent: #0f766e;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-section--entry.wd-day-section--d2 {
  --wd-day-header-bg: linear-gradient(135deg, #fef3c7 0%, #fffbeb 55%, #fffaf0 100%);
  --wd-day-header-fg: #78350f;
  --wd-day-accent: #b45309;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-section--entry.wd-day-section--d3 {
  --wd-day-header-bg: linear-gradient(135deg, #ede9fe 0%, #f5f3ff 55%, #faf5ff 100%);
  --wd-day-header-fg: #4c1d95;
  --wd-day-accent: #6d28d9;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-section--entry.wd-day-section--d4 {
  --wd-day-header-bg: linear-gradient(135deg, #fce7f3 0%, #fdf2f8 55%, #fff1f2 100%);
  --wd-day-header-fg: #831843;
  --wd-day-accent: #be185d;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-section--entry.wd-day-section--d5 {
  --wd-day-header-bg: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 55%, #ecfccb 100%);
  --wd-day-header-fg: #14532d;
  --wd-day-accent: #15803d;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-section--entry.wd-day-section--d6 {
  --wd-day-header-bg: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 55%, #eff6ff 100%);
  --wd-day-header-fg: #0c4a6e;
  --wd-day-accent: #0369a1;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-bar--entry {
  background: var(--wd-day-header-bg) !important;
  color: #0f172a !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.1) !important;
  border-radius: 0 !important;
  padding: 10px 12px !important;
  gap: 10px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-bar-title {
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--wd-day-header-fg);
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-bar-tools {
  gap: 6px 8px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-toggle-btn {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-toggle-btn:hover {
  background: #f8fafc !important;
  border-color: #94a3b8 !important;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-start-label {
  gap: 5px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-start-lbl {
  font-size: 0.76rem;
  font-weight: 650;
  color: #475569 !important;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-start-input {
  min-width: 130px;
  width: 142px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid #c8c6c4 !important;
  background: #fff !important;
  color: #323130 !important;
  font-size: 0.75rem;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-stat {
  font-size: 0.75rem;
  color: #475569 !important;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-stat strong {
  color: #111827 !important;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-jobs--entry {
  border: 0;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.55);
  padding: 12px 10px 14px;
  gap: 12px;
  display: flex;
  flex-direction: column;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-jobs--entry.is-collapsed {
  display: none;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-jobs--entry .wd-diary-row {
  border: 1px solid var(--wd-entry-panel-border) !important;
  border-left: 4px solid var(--wd-day-accent) !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07) !important;
  padding: 10px 12px !important;
  background: #ffffff !important;
  margin: 0 !important;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-day-jobs--entry .wd-diary-row + .wd-diary-row {
  margin-top: 2px !important;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-diary-fields-bulk {
  grid-template-columns: repeat(6, minmax(116px, 1fr));
  gap: 6px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-diary-fields-bulk--primary {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-job-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-job-title-text {
  font-size: 0.8rem;
  font-weight: 800;
  color: #334155;
  letter-spacing: 0.02em;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-job-more {
  margin-top: 8px;
  border: 1px solid var(--wd-entry-panel-border);
  border-radius: 6px;
  background: var(--wd-entry-panel-bg);
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-job-more__title {
  padding: 7px 9px;
  font-size: 0.74rem;
  font-weight: 700;
  color: #475569;
  border-bottom: 1px solid var(--wd-entry-panel-border);
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-diary-job-last-row {
  grid-template-columns: minmax(220px, 2.2fr) repeat(3, minmax(98px, 1fr)) auto;
  gap: 6px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-diary-job-last-row--stacked {
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 8px;
  padding: 8px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-field {
  gap: 3px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-field label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #64748b !important;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-field input,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-field select {
  border: 1px solid #c8c6c4 !important;
  border-radius: 4px;
  background: #ffffff !important;
  color: #323130 !important;
  font-size: 0.74rem;
  line-height: 1.25;
  padding: 4px 6px;
  min-height: 26px;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-field input:focus,
.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-field select:focus {
  border-color: #861f54 !important;
  box-shadow: 0 0 0 2px rgba(134, 31, 84, 0.16) !important;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-cell-sm {
  max-width: none;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-calc-btn {
  min-height: 26px;
  padding: 4px 9px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.2;
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-diary-footer {
  margin-top: 16px;
  padding: 10px 12px;
  border: 1px solid var(--wd-entry-panel-border);
  border-radius: 8px;
  background: var(--wd-entry-panel-bg);
}

.jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-autosave-status {
  color: #475569 !important;
}

@media (max-width: 1180px) {
  .jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-diary-fields-bulk,
  .jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-diary-fields-bulk--primary {
    grid-template-columns: repeat(3, minmax(140px, 1fr));
  }

  .jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-diary-job-last-row,
  .jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-diary-job-last-row--stacked {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }
}

@media (max-width: 760px) {
  .jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-entry-toolbar {
    gap: 10px;
  }

  .jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-mileage-toolbar-group {
    margin-left: 0;
  }

  .jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-diary-fields-bulk,
  .jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-diary-fields-bulk--primary,
  .jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-diary-job-last-row,
  .jp-app:not(.jp-app--documents) .jp-main.jp-main--work-diary-entry .wd-diary-job-last-row--stacked {
    grid-template-columns: 1fr;
  }
}

/* ----- CCTV QUIC form (was inline in cctv_quic_report_form templates; desktop + mobile) ----- */
.cctv-shell {
  max-width: 1200px;
  margin: 0 auto;
}
.cctv-header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 14px;
}
.cctv-header-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 6px;
}
.cctv-header-title-row h1 {
  margin: 0;
  flex: 1 1 220px;
  min-width: 0;
}
/* QUIC 2.1 card header + grid identification guide modal */
.cctv-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 12px;
  margin-bottom: 10px;
}
.cctv-card-head h2 {
  margin: 0;
  flex: 1 1 220px;
  min-width: 0;
}
button.cctv-grid-guide-btn.jp-btn-secondary {
  flex-shrink: 0;
  font-size: 0.8125rem;
  padding: 8px 14px;
  border-radius: 999px;
  line-height: 1.25;
}
.cctv-grid-guide-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1002;
  background: rgba(15, 23, 42, 0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  box-sizing: border-box;
}
.cctv-grid-guide-modal {
  width: 100%;
  max-width: 760px;
  max-height: min(90vh, 900px);
  background: var(--jp-surface);
  border-radius: var(--jp-radius-lg);
  border: 1px solid var(--jp-border);
  box-shadow: var(--jp-shadow-lg);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.cctv-grid-guide-modal__chrome {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
  padding: 18px 20px 16px;
}
.cctv-grid-guide-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.cctv-grid-guide-modal__header-text {
  flex: 1;
  min-width: 0;
}
.cctv-grid-guide-modal__title {
  margin: 0 0 6px;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--jp-text);
  line-height: 1.25;
}
.cctv-grid-guide-modal__sub {
  margin: 0;
  font-size: 0.875rem;
  color: var(--jp-text-muted);
  line-height: 1.45;
}
/* Outside .jp-main — align with .cctv-photo-view__close (light modal chrome) */
.cctv-grid-guide-modal__close {
  position: relative;
  flex-shrink: 0;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  padding: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: #c73737;
  color: #fff;
  font-size: 1.15rem;
  line-height: 1;
  font-weight: 700;
  font-family: inherit;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  touch-action: manipulation;
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}
.cctv-grid-guide-modal__close:hover {
  background: #a92d2d;
}
.cctv-grid-guide-modal__close:focus-visible {
  background: #a92d2d;
  outline: 2px solid var(--jp-blue, #2f65d9);
  outline-offset: 2px;
}
.cctv-grid-guide-intro {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  color: var(--jp-text-muted);
  line-height: 1.4;
}
.cctv-grid-guide-search {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.cctv-grid-guide-search__label {
  font-weight: 700;
  font-size: 0.75rem;
  color: var(--jp-text-muted);
}
.cctv-grid-guide-search__input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border-radius: var(--jp-radius-sm);
  border: 1px solid var(--jp-border);
  font-size: 0.9375rem;
}
.cctv-grid-guide-modal__scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
}

.cctv-grid-guide-source-note {
  margin: 10px 0 0;
  flex-shrink: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--jp-text-muted);
}
.cctv-grid-guide-source-note a {
  color: var(--jp-blue, #2f65d9);
  text-decoration: underline;
}
.cctv-grid-guide-source-note code {
  font-size: 0.7rem;
  word-break: break-all;
}
.cctv-grid-guide-card {
  border: 1px solid var(--jp-border);
  border-radius: var(--jp-radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--jp-surface-subtle);
}
.cctv-grid-guide-card:last-child {
  margin-bottom: 0;
}
.cctv-grid-guide-card__title {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--jp-text);
}
.cctv-grid-guide-card__meta {
  margin: 0 0 10px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  font-size: 0.8125rem;
}
.cctv-grid-guide-card__meta dt {
  margin: 0;
  font-weight: 700;
  color: var(--jp-text-muted);
}
.cctv-grid-guide-card__meta dd {
  margin: 0;
  color: var(--jp-text);
}
.cctv-grid-guide-card__block {
  margin-bottom: 10px;
}
.cctv-grid-guide-card__block strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8125rem;
  color: var(--jp-text);
}
.cctv-grid-guide-card__list {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--jp-text);
}
.cctv-grid-guide-card__para {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--jp-text);
}
.cctv-grid-guide-photo-slot {
  margin-top: 10px;
  min-height: 120px;
  border: 2px dashed var(--jp-border);
  border-radius: var(--jp-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12px;
  font-size: 0.8125rem;
  color: var(--jp-text-muted);
  background: var(--jp-surface);
}

.cctv-grid-guide-photo-slot--has-file {
  border-style: solid;
  border-width: 1px;
  padding: 8px;
  min-height: 0;
}
.cctv-grid-guide-photo-img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: calc(var(--jp-radius-sm) - 2px);
  background: var(--jp-surface);
}
.cctv-grid-guide-photo-fallback {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--jp-text-muted);
}
.cctv-grid-guide-empty {
  margin: 0;
  padding: 16px;
  text-align: center;
  font-size: 0.875rem;
  color: var(--jp-text-muted);
}
.cctv-photos-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 6px;
}
.cctv-photos-card-head h2 {
  margin: 0;
  font-size: 1.02rem;
  flex: 1 1 auto;
  min-width: 0;
}
/* Product camera icon: static/cctv_report_add_photos_icon.png — keep aspect ratio; generous tap target */
.cctv-photos-add-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 6px;
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 10px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.cctv-photos-add-btn:focus-visible {
  outline: 2px solid var(--jp-blue, #2f65d9);
  outline-offset: 2px;
}
.cctv-photos-add-btn__img {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  vertical-align: top;
  pointer-events: none;
}
.cctv-photos-hint {
  color: var(--jp-text-muted);
  font-size: 0.85rem;
  margin: 0 0 8px 0;
  line-height: 1.35;
}
.cctv-photos-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
.cctv-photos-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 16px 18px;
  max-width: 100%;
  min-height: 0;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.cctv-photo-thumb {
  position: relative;
  flex: 0 0 auto;
  width: 90px;
  height: 90px;
  border: 1px solid var(--jp-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--jp-bg);
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  container-type: size;
  container-name: cctv-ph;
  outline: none;
}
.cctv-photo-thumb:focus-visible {
  outline: 2px solid var(--jp-border, #a0a0a0);
  outline-offset: 2px;
}
.cctv-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}
.cctv-photo-stamp {
  position: absolute;
  left: 4px;
  right: auto;
  bottom: 4px;
  z-index: 1;
  margin: 0;
  padding: 0;
  max-width: calc(100% - 8px);
  box-sizing: border-box;
  font-size: 8px;
  line-height: 1.2;
  font-weight: 600;
  font-family: var(--jp-font-sans, inherit);
  color: #fff;
  text-align: left;
  letter-spacing: 0.01em;
  background: none;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.95), 0 1px 3px rgba(0, 0, 0, 0.85);
  white-space: normal;
  word-break: break-word;
  pointer-events: none;
}
.cctv-photo-remove {
  position: absolute;
  top: 2px;
  right: 2px;
  left: auto;
  bottom: auto;
  width: 16%;
  height: 16%;
  min-width: 12px;
  min-height: 12px;
  max-width: 24px;
  max-height: 24px;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: #c73737;
  color: #fff;
  font-size: clamp(8px, 0.55rem, 12px);
  font-size: clamp(8px, 10cqi, 12px);
  line-height: 1;
  font-weight: 700;
  font-family: inherit;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease, background 0.12s ease;
  opacity: 0;
  visibility: hidden;
  transform: scale(0.92);
  pointer-events: none;
}
.cctv-photo-thumb:hover .cctv-photo-remove,
.cctv-photo-thumb:focus-within .cctv-photo-remove {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
}
@media (hover: none) {
  .cctv-photo-thumb .cctv-photo-remove {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    pointer-events: auto;
  }
}
.cctv-photo-remove:hover,
.cctv-photo-remove:focus-visible {
  background: #a92d2d;
}
.cctv-photo-remove:focus-visible {
  outline: 1px solid #fff;
  outline-offset: 0;
}
@media (prefers-reduced-motion: reduce) {
  .cctv-photo-remove {
    transition: none;
  }
}
/* CCTV QUIC — full-screen report photo viewer (centred, light panel; controls styled here — not .jp-main .jp-btn-secondary). */
.cctv-photo-view[hidden] {
  display: none !important;
  pointer-events: none;
}
.cctv-photo-view {
  position: fixed;
  inset: 0;
  z-index: 10080;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  pointer-events: auto;
  font-family: var(--jp-font-sans, inherit);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.cctv-photo-view__backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(15, 23, 42, 0.55);
  cursor: default;
  pointer-events: auto;
}
.cctv-photo-view__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(96vw, 880px);
  max-height: min(92vh, 960px);
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Match desktop “Report photos” card: clean white, clearly rounded. */
  background: #fff;
  color: var(--jp-text);
  border: 1px solid var(--jp-border);
  border-radius: 16px;
  box-shadow: var(--jp-shadow-lg, var(--jp-shadow, 0 8px 24px rgba(0, 0, 0, 0.12)));
  padding: 16px 18px 18px;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  pointer-events: auto;
  outline: none;
  flex-shrink: 0;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.cctv-photo-view__chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-bottom: 12px;
  flex: 0 0 auto;
}
.cctv-photo-view__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--jp-text);
  flex: 1 1 auto;
  min-width: 0;
}
/* Light modal controls (viewer is outside .jp-main — self-contained, no burgundy gradient) */
.cctv-photo-view .jp-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 10px 16px;
  border-radius: var(--jp-radius-sm, 8px);
  font-weight: 600;
  font-size: 0.875rem;
  font-family: inherit;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  flex: 0 0 auto;
  border: 1px solid var(--jp-border);
  background: #fff;
  color: var(--jp-text);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.cctv-photo-view .jp-btn-secondary:hover:not(:disabled) {
  background: var(--jp-surface-subtle, #f1f5f9);
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
}
.cctv-photo-view .jp-btn-secondary:focus-visible {
  outline: 2px solid var(--jp-blue, #2f65d9);
  outline-offset: 2px;
}
/* Close: same treatment as .cctv-photo-remove on report thumbnails (red square, light rim, ×) */
.cctv-photo-view__close {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  box-sizing: border-box;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: #c73737;
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  font-weight: 700;
  font-family: inherit;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  touch-action: manipulation;
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.08s ease;
  -webkit-tap-highlight-color: transparent;
}
.cctv-photo-view__close:hover {
  background: #a92d2d;
}
.cctv-photo-view__close:focus-visible {
  background: #a92d2d;
  outline: 1px solid #fff;
  outline-offset: 0;
}
.cctv-photo-view__nav {
  flex: 0 0 auto;
  align-self: center;
  min-width: 48px;
  min-height: 48px;
  width: 48px;
  height: 48px;
  padding: 0;
  font-size: 1.45rem;
  line-height: 1;
  font-weight: 600;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--jp-border);
  background: #fff;
  color: var(--jp-text);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}
.cctv-photo-view__nav:hover:not(:disabled) {
  background: var(--jp-surface-subtle, #f1f5f9);
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
}
.cctv-photo-view__nav:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: #f8fafc;
  color: var(--jp-text-muted);
  box-shadow: none;
}
.cctv-photo-view__nav:focus-visible {
  outline: 2px solid var(--jp-blue, #2f65d9);
  outline-offset: 2px;
}
.cctv-photo-view__main {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px 10px;
  flex: 0 1 auto;
  min-height: min(50vh, 320px);
  width: 100%;
}
.cctv-photo-view__stage {
  flex: 1 1 auto;
  min-width: 0;
  min-height: min(40vh, 360px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  align-self: stretch;
}
.cctv-photo-view__figure {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  vertical-align: top;
}
.cctv-photo-view__figure .cctv-photo-view__img {
  display: block;
}
.cctv-photo-view__img {
  max-width: 100%;
  max-height: min(55vh, 520px);
  min-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--jp-radius-sm, 8px);
  border: 1px solid var(--jp-border);
  background: var(--jp-surface-subtle, #f8fafc);
}
.cctv-photo-view__stamp {
  position: absolute;
  left: 8px;
  bottom: 8px;
  right: auto;
  margin: 0;
  width: auto;
  max-width: min(100%, calc(100% - 16px));
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
  text-align: left;
  box-sizing: border-box;
  background: none;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.95), 0 1px 4px rgba(0, 0, 0, 0.9);
  white-space: normal;
  word-break: break-word;
  pointer-events: none;
}
.cctv-photo-view__counter {
  margin: 0;
  font-size: 0.9rem;
  color: var(--jp-text-muted);
  user-select: none;
}
.cctv-photo-view__strip-wrap {
  flex: 0 0 auto;
  flex-shrink: 0;
  width: 100%;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--jp-border);
  min-height: 0;
}
.cctv-photo-view__strip-label {
  margin: 0 0 8px 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--jp-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
}
.cctv-photo-view__strip-scroll {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  text-align: center;
  box-sizing: border-box;
  touch-action: pan-x manipulation;
  padding: 0;
}
.cctv-photo-view__strip {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 2px 8px;
  vertical-align: top;
  box-sizing: border-box;
}
.cctv-photo-view__strip-item {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: var(--jp-radius-sm, 8px);
  overflow: hidden;
  background: var(--jp-bg);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  transition: border-color 0.12s ease, box-shadow 0.12s ease, filter 0.08s ease, transform 0.08s ease;
}
.cctv-photo-view__strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  user-select: none;
}
.cctv-photo-view__strip-item.is-current {
  border-color: var(--jp-blue, #2f65d9);
  box-shadow: 0 0 0 1px var(--jp-blue, #2f65d9);
}
.cctv-photo-view__strip-item:focus-visible {
  outline: 2px solid var(--jp-blue, #2f65d9);
  outline-offset: 2px;
}
/* Narrow viewports / phones: same viewer as desktop (base rules above). Only adjust shell
   padding to match desktop 16px when safe-area is 0, and to respect notches when non-zero. */
@media (max-width: 600px) {
  .cctv-photo-view {
    padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  }
}
/* Phone / touch: give pressed feedback; neutralise fake :hover on first tap. */
@media (hover: none) and (pointer: coarse) {
  .cctv-photo-view__nav:hover:not(:disabled) {
    background: #fff;
    border-color: var(--jp-border);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.07);
  }
  .cctv-photo-view__nav:active:not(:disabled) {
    background: var(--jp-surface-subtle, #f1f5f9);
    border-color: #cbd5e1;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.1);
    transform: scale(0.98);
  }
  .cctv-photo-view__close:active {
    background: #a92d2d;
    transform: scale(0.98);
  }
  .cctv-photo-view__strip-item:active {
    filter: brightness(0.96);
    transform: scale(0.98);
  }
}
/* CCTV QUIC — full-screen mobile camera (above report; photo viewer z-index 10080). */
html.jp-cctv-mcam-open,
html.jp-cctv-mcam-open body {
  height: 100%;
  max-height: 100%;
  overflow: hidden !important;
  touch-action: none;
  -webkit-text-size-adjust: 100%;
}
.cctv-mobile-cam {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  z-index: 10060;
  background: #0a0e1a;
  font-family: var(--jp-font-sans, inherit);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  overflow: hidden;
  contain: strict;
  display: flex;
  flex-direction: column;
}
.cctv-mobile-cam__fill {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #0f172a;
  contain: strict;
}
.cctv-mobile-cam__video {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background: #0f172a;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.cctv-mobile-cam__ui {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  min-height: 0;
}
.cctv-mobile-cam__chrome-spacer {
  flex: 1 1 0;
  min-height: 0;
  min-width: 0;
  pointer-events: none;
}
.cctv-mobile-cam__flash {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: #fff;
  opacity: 0;
  transform: translateZ(0);
  transition: opacity 0.08s ease-in;
}
.cctv-mobile-cam__flash--on {
  animation: cctvMcamShutterFlash 0.2s ease-out forwards;
}
@keyframes cctvMcamShutterFlash {
  0% {
    opacity: 0;
  }
  35% {
    opacity: 0.92;
  }
  100% {
    opacity: 0;
  }
}
.cctv-mobile-cam__top {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 12px;
  padding: max(8px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 12px
    max(12px, env(safe-area-inset-left, 0px));
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.72) 0%, rgba(2, 6, 23, 0.35) 60%, rgba(2, 6, 23, 0) 100%);
  pointer-events: none;
}
.cctv-mobile-cam__top > * {
  pointer-events: auto;
  flex-shrink: 0;
  touch-action: manipulation;
}
.cctv-mobile-cam__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.55);
  color: #e2e8f0;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.cctv-mobile-cam__icon {
  position: relative;
  top: -1px;
  font-weight: 400;
  opacity: 0.95;
}
.cctv-mobile-cam__torch {
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(226, 232, 240, 0.42);
}
.cctv-mobile-cam__torch-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  color: #e2e8f0;
  opacity: 0.95;
}
.cctv-mobile-cam__torch-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.cctv-mobile-cam__torch.is-on {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.34), 0 0 16px rgba(255, 255, 255, 0.46);
}
.cctv-mobile-cam__torch.is-on .cctv-mobile-cam__torch-icon {
  color: #ffffff;
  opacity: 1;
}
.cctv-mobile-cam__torch:disabled,
.cctv-mobile-cam__torch[aria-disabled="true"] {
  opacity: 0.5;
  filter: grayscale(0.3);
}
.cctv-mobile-cam__count {
  margin: 0;
  min-width: 4.2rem;
  text-align: right;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #f1f5f9;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cctv-mobile-cam__count-label {
  font-weight: 500;
  font-size: 0.82rem;
  color: #cbd5e1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  margin-left: 1px;
}
.cctv-mobile-cam__zoom {
  margin: 2px max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  font-size: 0.72rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: rgba(241, 245, 249, 0.96);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  text-align: center;
  pointer-events: none;
}
.cctv-mobile-cam__torch-status {
  margin: 2px max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  font-size: 0.68rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: rgba(241, 245, 249, 0.88);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
  text-align: center;
  pointer-events: none;
}
.cctv-mobile-cam__err {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  max-width: min(92%, 28rem);
  margin: 0;
  padding: 12px 16px;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: center;
  color: #fecdd3;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(248, 113, 113, 0.35);
  border-radius: 10px;
}
.cctv-mobile-cam__bottom {
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  /* Fixed three columns so the shutter stays visually centered before/after the first thumbnail appears */
  grid-template-columns: 56px 1fr 56px;
  align-items: end;
  padding: 16px max(16px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-right, 0px));
  background: linear-gradient(0deg, rgba(2, 6, 23, 0.85) 0%, rgba(2, 6, 23, 0.45) 55%, rgba(2, 6, 23, 0) 100%);
  pointer-events: none;
  gap: 0 8px;
}
.cctv-mobile-cam__bottom > * {
  pointer-events: auto;
  touch-action: manipulation;
}
.cctv-mobile-cam__thumb {
  grid-column: 1;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  padding: 0;
  border: 2px solid rgba(226, 232, 240, 0.45);
  border-radius: 8px;
  overflow: hidden;
  background: rgba(15, 23, 42, 0.75);
  cursor: pointer;
  justify-self: start;
  align-self: end;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
/* [hidden] must keep a box or the grid collapses to 2 cells and the shutter jumps sideways */
.cctv-mobile-cam__thumb[hidden] {
  display: flex;
  visibility: hidden;
  pointer-events: none;
}
.cctv-mobile-cam__thumb-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: top;
}
.cctv-mobile-cam__shutter-wrap {
  grid-column: 2;
  justify-self: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px 0 2px 0;
}
.cctv-mobile-cam__shutter {
  width: 100px;
  height: 100px;
  min-width: 100px;
  min-height: 100px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  background: #ffffff;
  cursor: pointer;
  box-shadow:
    0 0 0 3px rgba(2, 6, 23, 0.65),
    0 0 0 8px rgba(255, 255, 255, 0.2),
    0 6px 28px rgba(0, 0, 0, 0.5);
  position: relative;
  flex-shrink: 0;
  transition: transform 0.1s ease, box-shadow 0.15s ease, opacity 0.15s ease, filter 0.1s ease;
  font: inherit;
}
.cctv-mobile-cam__shutter::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  border: 2px solid rgba(15, 23, 42, 0.18);
  background: #f1f5f9;
  pointer-events: none;
}
.cctv-mobile-cam__shutter:disabled,
.cctv-mobile-cam__shutter[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  filter: grayscale(0.5);
}
.cctv-mobile-cam__shutter--press {
  animation: cctvMcamShutterBounce 0.2s ease-out;
}
@keyframes cctvMcamShutterBounce {
  0% {
    transform: scale(1);
  }
  45% {
    transform: scale(0.88);
  }
  100% {
    transform: scale(1);
  }
}
.cctv-mobile-cam__spacer {
  grid-column: 3;
  min-width: 56px;
  min-height: 1px;
  justify-self: end;
}
.cctv-mobile-cam--error {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px))
    max(20px, env(safe-area-inset-left, 0px));
  z-index: 10060;
  background: #0a0e1a;
}
.cctv-mobile-cam__top--error {
  position: static;
  background: transparent;
  padding: 0 0 8px 0;
  margin: 0;
  flex: 0 0 auto;
  justify-content: flex-start;
  pointer-events: auto;
}
.cctv-mobile-cam__error-body {
  flex: 0 0 auto;
  text-align: center;
  max-width: 24rem;
  margin: 0 auto;
  width: 100%;
}
.cctv-mobile-cam--error .cctv-mobile-cam__err-msg {
  margin: 0 0 20px 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #94a3b8;
  text-align: center;
}
.cctv-mobile-cam__err-actions {
  margin: 0;
  text-align: center;
  flex: 0 0 auto;
}
.cctv-mobile-cam__pill {
  display: inline-block;
  padding: 10px 28px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #f8fafc;
  background: rgba(59, 130, 246, 0.25);
  border: 1px solid rgba(96, 165, 250, 0.45);
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}
.cctv-sub {
  margin: 0;
  color: var(--jp-text-muted);
}
.cctv-form {
  display: grid;
  gap: 16px;
}
.cctv-card {
  border: 1px solid var(--jp-border);
  border-radius: 12px;
  padding: 16px;
  background: color-mix(in srgb, var(--jp-panel-bg, #fff) 95%, #fff 5%);
}
.cctv-card h2 {
  margin: 0 0 12px 0;
  font-size: 1.02rem;
}
.cctv-card-head h2 {
  margin-bottom: 0;
}
.cctv-grid-2,
.cctv-grid-3,
.cctv-grid-4 {
  display: grid;
  gap: 10px;
}
.cctv-grid-2 {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}
.cctv-grid-3 {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}
.cctv-grid-4 {
  grid-template-columns: repeat(4, minmax(160px, 1fr));
}
.cctv-full {
  grid-column: 1 / -1;
}
.cctv-card label {
  display: block;
  font-weight: 700;
  font-size: 10pt;
}
.cctv-grid-2 > label,
.cctv-grid-3 > label,
.cctv-grid-4 > label {
  display: grid;
  grid-template-rows: minmax(2.8em, auto) auto;
  align-content: start;
}
.cctv-card input,
.cctv-card select,
.cctv-card textarea {
  width: 100%;
  box-sizing: border-box;
  margin-top: 6px;
}
.cctv-card textarea {
  height: 92px;
  resize: none;
}
.cctv-actions {
  position: sticky;
  bottom: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px;
  border: 1px solid var(--jp-border);
  border-radius: 12px;
  background: var(--jp-bg);
}
.cctv-meta {
  color: var(--jp-text-muted);
  font-size: 0.9rem;
  margin-left: auto;
}
.um-alert--success,
.um-alert--error {
  color: #111 !important;
  font-weight: 700;
}
@media (max-width: 1000px) {
  .cctv-grid-4 {
    grid-template-columns: repeat(2, minmax(170px, 1fr));
  }
}
@media (max-width: 760px) {
  .cctv-grid-2,
  .cctv-grid-3,
  .cctv-grid-4 {
    grid-template-columns: 1fr;
  }
  .cctv-header {
    flex-direction: column;
  }
  .cctv-meta {
    margin-left: 0;
    width: 100%;
  }
}

/* ----- Document viewer (was inline; html/body.jp-document-viewer set on document_viewer templates only) ----- */
html.jp-document-viewer,
body.jp-document-viewer,
body.jp-document-viewer .jp-app {
  height: 100%;
}
body.jp-document-viewer {
  margin: 0;
  overflow: auto;
}
/* ONLYOFFICE: fill the viewport so toolbars + sheet tabs / status bar stay visible (no clipped 68vh frame). */
html.jp-document-viewer.jp-document-viewer--onlyoffice,
body.jp-document-viewer.jp-document-viewer--onlyoffice {
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
}
body.jp-document-viewer.jp-document-viewer--onlyoffice .jp-app {
  min-height: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
body.jp-document-viewer .dv-wrap {
  width: 100%;
  margin: 0;
  padding: clamp(8px, 0.8cm, 24px);
  box-sizing: border-box;
  min-height: 100vh;
}
body.jp-document-viewer.jp-document-viewer--onlyoffice .dv-wrap.dv-wrap--editor {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
body.jp-document-viewer.jp-document-viewer--onlyoffice .dv-head {
  flex-shrink: 0;
}
body.jp-document-viewer .dv-head {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 8px 10px;
  border: 1px solid #27365b;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(17, 27, 51, 0.95), rgba(14, 22, 42, 0.95));
}
body.jp-document-viewer .dv-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #e5edff;
  margin: 0;
  word-break: break-word;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 70%;
}
body.jp-document-viewer .dv-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
body.jp-document-viewer .dv-btn {
  border: 1px solid #334a77;
  border-radius: 7px;
  background: #1b2a48;
  color: #eaf1ff;
  text-decoration: none;
  padding: 6px 10px;
  font-size: 0.76rem;
  font-weight: 600;
}
body.jp-document-viewer .dv-btn:hover {
  background: #23365d;
}
body.jp-document-viewer .dv-frame {
  width: 100%;
  height: 72vh;
  min-height: 420px;
  border: 1px solid #2b3f67;
  border-radius: 10px;
  background: #fff;
}
body.jp-document-viewer .dv-editor {
  width: 100%;
  height: 85vh;
  min-height: 420px;
  border: 1px solid #2b3f67;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
/* ONLYOFFICE: consume remaining column height; JS also sets explicit px height for iframe reflow. */
body.jp-document-viewer.jp-document-viewer--onlyoffice .dv-editor {
  flex: 1 1 auto;
  min-height: 0;
  height: auto;
  max-height: none;
}
body.jp-document-viewer .dv-unavailable {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  padding: 18px;
  color: #374151;
}

/* ----- Site Marker visual hub only (class jp-sm-visual-hub on hub root; not other jp-sm-page routes) ----- */
.jp-app.jp-sm-visual-hub {
  background: #f1f5f9 !important;
}
.jp-app.jp-sm-visual-hub .jp-main.jp-sm-hub-main {
  background: #f1f5f9 !important;
}
#sm-new-draft,
#sm-new-draft * {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
#sm-new-draft {
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
#sm-new-draft:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ==========================================================================
   Mobile portal shell — ONLY markup from templates/mobile/_portal_header.html
   uses .jp-header--mobile-shell. Desktop header never has this class.

   These rules live in portal.css (not only portal-mobile.css) so they always
   ship with the same stylesheet as .jp-header; avoids “no change” when the
   browser or proxy caches an old portal-mobile.css import chain.

   If you still see the desktop header, the server chose variant=desktop (e.g.
   desktop browser). Add ?layout=mobile to the URL to force the mobile template.
   ========================================================================== */

.jp-header.jp-header--portal.jp-header--mobile-shell {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
  justify-content: flex-start;
  width: 100%;
  box-sizing: border-box;
  padding-top: max(8px, env(safe-area-inset-top, 0px));
  padding-right: max(12px, env(safe-area-inset-right, 0px));
  padding-bottom: 8px;
  padding-left: max(12px, env(safe-area-inset-left, 0px));
}

.jp-header--mobile-shell .jp-header-logo {
  padding: 4px 10px;
}

.jp-header--mobile-shell .jp-header-logo img {
  height: 40px;
  width: auto;
}

.jp-header--mobile-shell .jp-header-left,
.jp-header--mobile-shell .jp-header-brand {
  display: none !important;
}

.jp-header--mobile-shell .jp-user-pill {
  display: none !important;
}

.jp-header--mobile-shell .jp-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0;
}

.jp-header--mobile-shell .jp-header-actions .jp-link-quiet[href="/logout"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 650;
  color: #e8eefc;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--jp-radius-sm);
  background: rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.jp-header--mobile-shell .jp-header-actions .jp-link-quiet[href="/logout"]:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.jp-header--mobile-shell .jp-header-inner.jp-mobile-header-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  width: 100%;
  min-width: 0;
  grid-template-columns: none;
}

.jp-header--mobile-shell .jp-mobile-menu-btn {
  flex: 0 0 auto;
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #e8eefc;
  border-radius: var(--jp-radius-sm);
  padding: 10px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.jp-header--mobile-shell .jp-mobile-menu-btn:focus-visible {
  outline: 2px solid var(--jp-blue);
  outline-offset: 2px;
}

.jp-header--mobile-shell .jp-header-center.jp-mobile-logo-wrap {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.jp-header--mobile-shell .jp-header-right.jp-mobile-header-actions {
  flex: 0 0 auto;
  min-width: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: auto;
  align-self: center;
}

.jp-header--mobile-shell .jp-header-logout-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  font-size: 0.8rem;
  font-weight: 650;
  color: #e8eefc;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: var(--jp-radius-sm);
  background: rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}

.jp-header--mobile-shell .jp-header-logout-btn:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.jp-header--mobile-shell .jp-header-logout-btn:focus-visible {
  outline: 2px solid var(--jp-blue);
  outline-offset: 2px;
}

.jp-header--mobile-shell .jp-mobile-nav-panel {
  display: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(5, 13, 28, 0.96);
  padding: 12px var(--jp-page-pad) 16px;
}

.jp-header--mobile-shell .jp-mobile-nav-panel.is-open {
  display: block;
}

.jp-header--mobile-shell .jp-mobile-nav-panel .jp-header-nav {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
  max-width: none;
  overflow-x: visible;
  overflow-y: visible;
  padding-bottom: 0;
  scrollbar-width: auto;
}

.jp-header--mobile-shell .jp-mobile-nav-panel .jp-header-nav a {
  padding: 12px 10px;
  border-radius: var(--jp-radius-sm);
}

/* Mobile template dashboard: same HTML as desktop, but must stack on narrow phones
   and when ?layout=mobile is used on a wide PC (viewport may stay > 980px). */
body.jp-portal-mobile .jp-app .dash-layout {
  grid-template-columns: 1fr;
}

body.jp-portal-mobile .jp-app .dash-cards {
  grid-template-columns: 1fr;
}

body.jp-portal-mobile .jp-app .dash-hero {
  flex-direction: column;
  align-items: stretch;
}

body.jp-portal-mobile .jp-app .dash-hero-left {
  flex: 1 1 auto;
}

body.jp-portal-mobile .jp-app .dash-hero-right {
  flex: none;
  width: 100%;
  justify-content: flex-start;
}

body.jp-portal-mobile .jp-app .dash-mini {
  min-width: 0;
  flex: 1 1 140px;
}

body.jp-portal-mobile .jp-app .dash-quick {
  flex-direction: column;
  align-items: stretch;
}

body.jp-portal-mobile .jp-app .dash-quick-link {
  justify-content: center;
}

/* Keep “Menu” compact — avoid flex row making the control look like a full-width bar. */
.jp-header--mobile-shell button.jp-mobile-menu-btn {
  flex: 0 0 auto;
  width: auto;
  max-width: max(5.5rem, fit-content);
}

/*
 * Site Marker export sheet — purple primary CTAs.
 * These buttons use .jp-btn--primary but live outside .jp-main, so they otherwise keep the
 * default blue gradient. Target explicit action classes so this always wins in the cascade.
 */
button.jp-btn.jp-btn--primary.sm-exp-do-save,
button.jp-btn.jp-btn--primary.sm-exp-do-send {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border-color: rgba(134, 31, 84, 0.55) !important;
  background: linear-gradient(180deg, #9c2f66, #861f54) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12) inset !important;
}

button.jp-btn.jp-btn--primary.sm-exp-do-save:hover:not(:disabled),
button.jp-btn.jp-btn--primary.sm-exp-do-send:hover:not(:disabled) {
  filter: brightness(1.03);
  border-color: rgba(134, 31, 84, 0.7) !important;
}

button.jp-btn.jp-btn--primary.sm-exp-do-save:disabled,
button.jp-btn.jp-btn--primary.sm-exp-do-send:disabled {
  opacity: 0.72;
  filter: none !important;
  cursor: not-allowed;
}

.jp-docs-folder-picker .sidebar-body {
  max-height: min(42vh, 320px);
}

.jp-sm-export-modal .jp-docs-folder-picker .sidebar-body {
  max-height: min(38vh, 280px);
}

@media (max-width: 540px) {
  .jp-sm-export-modal .jp-docs-folder-picker .sidebar-body {
    max-height: min(52vh, 380px);
  }
}

.jp-sm-folder-picker-mount {
  min-height: 120px;
}

.jp-sm-folder-picker__hint {
  font-size: 0.8125rem;
  color: var(--jp-text-muted);
  margin: 8px 0 0;
  line-height: 1.4;
}

.jp-cctv-folder-picker .jp-docs-folder-picker,
.jp-zip-extract-folder-picker .jp-docs-folder-picker {
  margin-top: 8px;
}

/* ----- Maintenance banner (portal_settings + seamless dual-group marquee) ----- */
.jp-maintenance-banner {
  width: 100%;
  overflow: hidden;
  background: linear-gradient(90deg, #7f0000, #b00020, #7f0000);
  color: #ffffff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 2px 12px rgba(176, 0, 32, 0.35);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  white-space: normal;
  z-index: 9999;
  position: relative;
}

.jp-maintenance-marquee {
  overflow: hidden;
  width: 100%;
}

.jp-maintenance-track {
  display: flex;
  width: max-content;
  flex-wrap: nowrap;
  align-items: center;
  animation: jpMaintenanceScroll 45s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.jp-maintenance-group {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  flex-shrink: 0;
  padding: 8px 0;
}

.jp-maintenance-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
}

.jp-maintenance-copy {
  display: block;
  white-space: nowrap;
  line-height: 1.35;
}

@keyframes jpMaintenanceScroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .jp-maintenance-track {
    animation: none;
    transform: none;
  }
}

@media (max-width: 768px) {
  .jp-maintenance-banner {
    font-size: 12px;
  }

  .jp-maintenance-track {
    animation-duration: 32s;
  }

  .jp-maintenance-group {
    gap: clamp(18px, 3vw, 44px);
    padding: 7px 0;
  }
}

.jp-admin-theme .jp-maintenance-toggle-form {
  margin: 0;
}
.jp-admin-theme .jp-metric-value--inline .jp-btn {
  margin-top: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Leave Planner v2 — desktop redesign (.jpl2-*)
   Mobile continues to use the existing .jp-leave-* rules above.
   ───────────────────────────────────────────────────────────────────────────── */

.jpl2-shell {
  display: grid;
  gap: 16px;
}

/* Page header */
.jpl2-page-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 20px 16px;
  border-radius: var(--jp-radius-lg);
  border: 1px solid rgba(126, 154, 230, 0.2);
  background: rgba(8, 19, 44, 0.94);
  box-shadow: 0 14px 30px rgba(2, 8, 23, 0.34);
}

.jpl2-title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: rgba(242, 247, 255, 0.98);
}

.jpl2-sub {
  margin: 5px 0 0;
  font-size: 0.875rem;
  color: rgba(194, 211, 247, 0.8);
}

/* Stats strip */
.jpl2-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.jpl2-stat {
  padding: 16px 18px;
  border-radius: var(--jp-radius-md);
  border: 1px solid rgba(126, 154, 230, 0.18);
  background: rgba(10, 20, 46, 0.88);
  box-shadow: 0 4px 16px rgba(2, 8, 23, 0.22);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.jpl2-stat--blue {
  border-color: rgba(47, 101, 217, 0.5);
  background: rgba(20, 45, 110, 0.72);
}

.jpl2-stat--amber {
  border-color: rgba(245, 158, 11, 0.45);
  background: rgba(120, 53, 5, 0.4);
}

.jpl2-stat--red {
  border-color: rgba(239, 68, 68, 0.45);
  background: rgba(127, 20, 20, 0.4);
}

.jpl2-stat-val {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: rgba(242, 247, 255, 0.98);
  line-height: 1;
}

.jpl2-stat--amber .jpl2-stat-val { color: #fde68a; }
.jpl2-stat--red   .jpl2-stat-val { color: #fca5a5; }
.jpl2-stat--blue  .jpl2-stat-val { color: #bfdbfe; }

.jpl2-stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(148, 178, 235, 0.85);
}

.jpl2-stat-names {
  margin-top: 4px;
  font-size: 0.78rem;
  color: rgba(191, 219, 254, 0.82);
  line-height: 1.4;
  word-break: break-word;
}

/* Two-column body */
.jpl2-body {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  align-items: start;
}

.jpl2-body--full {
  grid-template-columns: 1fr;
}

.jpl2-main-col,
.jpl2-side-col {
  display: grid;
  gap: 16px;
}

/* Cards */
.jpl2-card {
  padding: 18px 20px;
  border-radius: var(--jp-radius-md);
  border: 1px solid rgba(126, 154, 230, 0.2);
  background: rgba(8, 19, 44, 0.92);
  box-shadow: 0 8px 24px rgba(2, 8, 23, 0.28);
}

.jpl2-card--amber {
  border-color: rgba(245, 158, 11, 0.38);
  background: rgba(12, 22, 52, 0.92);
}

.jpl2-card-title {
  margin: 0 0 14px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: rgba(242, 247, 255, 0.96);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Badge */
.jpl2-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
  height: 20px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  background: rgba(148, 163, 184, 0.25);
  color: rgba(226, 232, 240, 0.9);
}

.jpl2-badge--amber {
  background: rgba(245, 158, 11, 0.32);
  color: #fde68a;
}

/* Pending queue */
.jpl2-pending-list {
  display: grid;
  gap: 10px;
}

.jpl2-pending-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.jpl2-pending-name {
  font-size: 0.875rem;
  font-weight: 700;
  color: rgba(226, 232, 240, 0.96);
}

.jpl2-pending-meta {
  font-size: 0.78rem;
  color: rgba(148, 178, 235, 0.78);
  margin-top: 2px;
}

.jpl2-pending-form {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  margin: 0;
}

/* Add-leave form */
.jpl2-add-form {
  display: grid;
  gap: 10px;
  margin: 0;
}

.jpl2-add-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.jpl2-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(148, 178, 235, 0.85);
}

.jpl2-input {
  width: 100%;
  min-height: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 9px;
  border: 1px solid rgba(138, 168, 255, 0.34);
  background: rgba(10, 24, 56, 0.72);
  color: #f4f8ff;
  font-family: inherit;
  font-size: 0.875rem;
  box-sizing: border-box;
}

.jpl2-input:focus {
  outline: none;
  border-color: rgba(155, 187, 255, 0.72);
  box-shadow: 0 0 0 3px rgba(81, 130, 255, 0.2);
}

.jpl2-input::placeholder {
  color: rgba(182, 203, 245, 0.55);
}

/* Buttons */
.jpl2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(30, 41, 59, 0.85);
  color: rgba(226, 232, 240, 0.9);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}

.jpl2-btn--primary {
  background: var(--jp-blue, #2f65d9);
  border-color: rgba(47, 101, 217, 0.6);
  color: #fff;
  width: 100%;
  height: 38px;
  font-size: 0.875rem;
  margin-top: 2px;
}

.jpl2-btn--primary:hover {
  background: var(--jp-blue-hover, #2555bc);
}

.jpl2-btn--approve {
  background: rgba(22, 101, 52, 0.55);
  border-color: rgba(34, 197, 94, 0.4);
  color: #bbf7d0;
}

.jpl2-btn--approve:hover {
  background: rgba(22, 101, 52, 0.8);
}

.jpl2-btn--reject {
  background: rgba(127, 29, 29, 0.55);
  border-color: rgba(239, 68, 68, 0.4);
  color: #fecaca;
}

.jpl2-btn--reject:hover {
  background: rgba(127, 29, 29, 0.8);
}

/* ─── end jpl2 ─────────────────────────────────────────────────────────────── */

/* Leave planner — light portal (match dashboard / staff: white surfaces, burgundy accents) */
.jp-app:not(.jp-app--documents) .jp-main .jpl2-page-hdr,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-head {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06) !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-title,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-title {
  color: #1f2937 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-sub,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-sub {
  color: #6b7280 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-stat {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06) !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-stat--blue {
  background: #eff6ff !important;
  border-color: #bfdbfe !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-stat--amber {
  background: #fffbeb !important;
  border-color: #fde68a !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-stat--red {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-stat-val {
  color: #1f2937 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-stat--blue .jpl2-stat-val {
  color: #1d4ed8 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-stat--amber .jpl2-stat-val {
  color: #b45309 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-stat--red .jpl2-stat-val {
  color: #b91c1c !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-stat-label {
  color: #6b7280 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-stat-names {
  color: #4b5563 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-card {
  background: #ffffff !important;
  border-color: #e5e7eb !important;
  box-shadow: 0 10px 24px rgba(17, 24, 39, 0.06) !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-card--amber {
  background: #fffbeb !important;
  border-color: #fde68a !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-card-title,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-card-title {
  color: #1f2937 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-badge {
  background: #e5e7eb !important;
  color: #374151 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-badge--amber {
  background: #fef3c7 !important;
  color: #b45309 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-pending-row {
  background: #fffbeb !important;
  border-color: #fde68a !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-pending-name {
  color: #111827 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-pending-meta {
  color: #6b7280 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-label {
  color: #4b5563 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-input {
  background: #ffffff !important;
  border-color: #dbe1ea !important;
  color: #1f2937 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-input:focus {
  border-color: rgba(134, 31, 84, 0.45) !important;
  box-shadow: 0 0 0 4px rgba(134, 31, 84, 0.12) !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-input::placeholder {
  color: #9ca3af !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-btn {
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-btn--primary {
  background: linear-gradient(180deg, #9c2f66, #861f54) !important;
  border-color: rgba(134, 31, 84, 0.55) !important;
  color: #ffffff !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-btn--primary:hover {
  filter: brightness(1.03);
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-btn--approve {
  background: #ecfdf5 !important;
  border-color: #6ee7b7 !important;
  color: #047857 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-btn--approve:hover {
  background: #d1fae5 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-btn--reject {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #b91c1c !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-btn--reject:hover {
  background: #fee2e2 !important;
}

/* Month nav selects — same as other light forms */
.jp-app:not(.jp-app--documents) .jp-main .jpl2-shell .jp-leave-month-nav select,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-shell .jp-leave-month-nav select {
  background: #ffffff !important;
  border-color: #dbe1ea !important;
  color: #1f2937 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-shell .jp-leave-month-nav select:focus,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-shell .jp-leave-month-nav select:focus {
  outline: none;
  border-color: rgba(134, 31, 84, 0.45) !important;
  box-shadow: 0 0 0 4px rgba(134, 31, 84, 0.12) !important;
}

/* Calendar + legend inside leave planner */
.jp-app:not(.jp-app--documents) .jp-main .jpl2-shell .jp-leave-legend,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-shell .jp-leave-legend {
  color: #6b7280 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-shell .jp-leave-dot--free,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-shell .jp-leave-dot--free {
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-shell .jp-leave-dot--busy,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-shell .jp-leave-dot--busy {
  background: linear-gradient(180deg, #9c2f66, #861f54) !important;
  border-color: rgba(134, 31, 84, 0.45) !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-shell .jp-leave-day--empty,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-shell .jp-leave-day--empty {
  background: #f9fafb !important;
  border-color: #e5e7eb !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-shell .jp-leave-day--free,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-shell .jp-leave-day--free {
  background: #ffffff !important;
  color: #1f2937 !important;
  border-color: #e5e7eb !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-shell .jp-leave-day--busy,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-shell .jp-leave-day--busy {
  background: linear-gradient(
    180deg,
    rgba(134, 31, 84, 0.12),
    rgba(134, 31, 84, 0.22)
  ) !important;
  border-color: rgba(134, 31, 84, 0.35) !important;
  color: #5d1b49 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-shell .jp-leave-table thead th,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-shell .jp-leave-table thead th {
  background: #f8fafc !important;
  color: #6b7280 !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-shell .jp-leave-table td,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-shell .jp-leave-table td {
  color: #1f2937 !important;
  border-bottom-color: #eef1f5 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-shell .jp-leave-row-link,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-shell .jp-leave-row-link {
  color: #861f54 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-shell .jp-leave-row-link:hover,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-shell .jp-leave-row-link:hover {
  color: #5d1b49 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-shell .jp-leave-summary,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-shell .jp-leave-summary {
  color: #861f54 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-shell .jp-leave-edit-grid input,
.jp-app:not(.jp-app--documents) .jp-main .jpl2-shell .jp-leave-edit-grid select,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-shell .jp-leave-edit-grid input,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-shell .jp-leave-edit-grid select {
  background: #ffffff !important;
  border-color: #dbe1ea !important;
  color: #1f2937 !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jp-leave-head-add {
  border-top-color: #e5e7eb !important;
}

/* Status chips — light surfaces (global rule forces .jp-leave-status to white text) */
.jp-app:not(.jp-app--documents) .jp-main .jpl2-shell .jp-leave-status,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-shell .jp-leave-status {
  color: #374151 !important;
  background: #f3f4f6 !important;
  border-color: #d1d5db !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-shell .jp-leave-status--approved,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-shell .jp-leave-status--approved {
  color: #14532d !important;
  background: #dcfce7 !important;
  border-color: #86efac !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-shell .jp-leave-status--pending,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-shell .jp-leave-status--pending {
  color: #92400e !important;
  background: #fef3c7 !important;
  border-color: #fcd34d !important;
}

.jp-app:not(.jp-app--documents) .jp-main .jpl2-shell .jp-leave-status--rejected,
.jp-app:not(.jp-app--documents) .jp-main .jp-leave-shell .jp-leave-status--rejected {
  color: #991b1b !important;
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
}