/* CSP workspace refinements: desktop navigation, team controls, and password setup. */

html[data-layout="desktop"] .helper-shell,
html[data-layout="desktop"] .issuer-shell {
  width: 100%;
  max-width: none;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  grid-template-rows: 72px minmax(calc(100dvh - 72px), auto);
  border: 0;
  background: #fff;
}

html[data-layout="desktop"] .helper-app-header,
html[data-layout="desktop"] .issuer-app-header {
  position: sticky;
  top: 0;
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  min-height: 72px;
  padding: 12px 14px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #f7faf8;
}

html[data-layout="desktop"] .helper-profile-shortcut > span:first-child,
html[data-layout="desktop"] .issuer-profile-shortcut > span:first-child { display: none; }

html[data-layout="desktop"] .helper-avatar,
html[data-layout="desktop"] .issuer-avatar {
  width: 34px;
  height: 34px;
  background: #fff;
  border-color: #c7d8cc;
}

html[data-layout="desktop"] .helper-main,
html[data-layout="desktop"] .issuer-main {
  grid-column: 2;
  grid-row: 1 / 3;
  width: 100%;
  max-width: none;
  min-width: 0;
  padding: 38px clamp(28px, 4vw, 64px) 80px;
  background: #fff;
}

html[data-layout="desktop"] .helper-bottom-nav,
html[data-layout="desktop"] .issuer-bottom-nav {
  position: sticky;
  top: 72px;
  left: auto;
  bottom: auto;
  transform: none;
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  width: 244px;
  height: calc(100dvh - 72px);
  min-height: 0;
  padding: 18px 12px;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 44px;
  align-content: start;
  gap: 3px;
  border: 0;
  border-right: 1px solid var(--line);
  background: #f7faf8;
  box-shadow: none;
}

html[data-layout="desktop"] .helper-bottom-nav::before,
html[data-layout="desktop"] .issuer-bottom-nav::before {
  content: "ワークスペース";
  height: 24px;
  padding: 0 9px;
  color: #6f8176;
  font-size: .67rem;
  font-weight: 750;
}

html[data-layout="desktop"] .helper-nav-item,
html[data-layout="desktop"] .issuer-nav-item {
  min-height: 42px;
  padding: 7px 10px;
  grid-template-columns: 22px minmax(0, 1fr);
  justify-items: start;
  place-items: center start;
  align-content: center;
  border-radius: 6px;
  gap: 9px;
}

html[data-layout="desktop"] .helper-nav-item:hover,
html[data-layout="desktop"] .issuer-nav-item:hover { background: #eaf2ec; }

html[data-layout="desktop"] .helper-nav-item.active,
html[data-layout="desktop"] .issuer-nav-item.active {
  background: #dfeee3;
  color: var(--brand-deep);
  box-shadow: inset 3px 0 0 var(--accent);
}

html[data-layout="desktop"] .helper-nav-item svg,
html[data-layout="desktop"] .issuer-nav-item svg {
  width: 19px;
  height: 19px;
}

html[data-layout="desktop"] .helper-nav-item span,
html[data-layout="desktop"] .issuer-nav-item span {
  overflow: visible;
  text-align: left;
  font-size: .82rem;
  font-weight: 650;
}

html[data-layout="desktop"] .helper-view,
html[data-layout="desktop"] .issuer-view {
  width: 100%;
  max-width: 1180px;
}

html[data-layout="desktop"] .helper-view-heading,
html[data-layout="desktop"] .issuer-view-heading {
  min-height: 70px;
  margin: 0 0 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

html[data-layout="desktop"] .helper-view-heading h1,
html[data-layout="desktop"] .issuer-view-heading h1 { font-size: 1.65rem; }

html[data-layout="desktop"] .helper-section,
html[data-layout="desktop"] .issuer-section {
  padding-block: 22px 28px;
  border-bottom-color: var(--line);
}

html[data-layout="desktop"] .helper-profile-section,
html[data-layout="desktop"] .issuer-profile-section { max-width: 980px; }

.helper-team-add-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.helper-team-add-button[hidden] { display: none; }
.helper-team-add-button svg { width: 17px; height: 17px; }
.helper-team-row-actions .btn.small { min-height: 34px; padding-inline: 10px; }
.helper-dialog-note { margin: 0; color: var(--text-muted); font-size: .83rem; line-height: 1.7; }

.helper-apply-message input {
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  color: var(--text);
  background: #fff;
  font: inherit;
  font-weight: 400;
}

.helper-team-member-dialog {
  width: min(540px, calc(100vw - 28px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.helper-team-invite-actions { justify-content: flex-start; }

.helper-team-member-modes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f4f7f5;
}

.helper-team-member-modes button {
  min-width: 0;
  min-height: 38px;
  padding: 7px 10px;
  border: 0;
  border-radius: 5px;
  color: var(--text-muted);
  background: transparent;
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

.helper-team-member-modes button.active {
  color: var(--brand-deep);
  background: #fff;
  box-shadow: 0 1px 3px rgba(17, 64, 38, .12);
}

.helper-team-member-panel {
  display: grid;
  gap: 15px;
  padding-top: 16px;
}

.helper-team-member-panel[hidden] { display: none; }

.helper-team-proxy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.helper-team-proxy-grid .helper-apply-message { min-width: 0; }

.helper-team-proxy-grid input[readonly] {
  color: var(--brand-deep);
  background: #f3f8f4;
  font-weight: 700;
}

.helper-team-engagement {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 0;
  padding: 0;
  border: 0;
}

.helper-team-engagement legend {
  width: 100%;
  margin-bottom: 2px;
  color: var(--text-muted);
  font-size: .76rem;
  font-weight: 700;
}

.helper-team-engagement label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}

.helper-team-engagement input { accent-color: var(--accent); }

.helper-password-dialog {
  width: min(500px, calc(100vw - 28px));
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.helper-password-dialog form {
  display: grid;
  gap: 14px;
}

.helper-password-note {
  margin: -2px 0 0;
  color: var(--text-muted);
  font-size: .76rem;
  line-height: 1.65;
}

.helper-expired-label {
  background: #e4e8e5;
  color: #5f6b64;
  font-weight: 800;
}

.helper-job-card.is-expired {
  border-color: #d8dfda;
  background: #f8faf8;
  box-shadow: none;
}

.helper-job-card .helper-expired-apply.btn:disabled {
  border-color: #b9c1bc;
  background: #b9c1bc;
  color: #fff;
  opacity: 1;
  cursor: not-allowed;
  box-shadow: none;
}

.helper-date-availability .expired,
.helper-date-option.expired small {
  color: #69736d;
  font-weight: 800;
}

.helper-forced-password-dialog::backdrop { background: rgba(15, 29, 21, .72); }

.btn.danger {
  border-color: #b42318;
  background: #b42318;
  color: #fff;
}

.password-setup-card { padding: 18px; }

.field.password-field-row {
  display: grid;
  grid-template-columns: 154px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.field.password-field-row label {
  width: 154px;
  min-width: 0;
  margin: 0;
  white-space: nowrap;
}

.field.password-field-row input { min-width: 0; }

.password-requirement {
  margin: 8px 2px 2px;
  color: var(--text-muted);
  font-size: .78rem;
  line-height: 1.6;
}

.issuer-worker-performance {
  margin-top: 14px;
  padding-block: 12px;
  border-block: 1px solid var(--line);
}

.issuer-worker-performance header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.issuer-worker-performance header strong {
  color: var(--brand-deep);
  font-size: .78rem;
}

.issuer-worker-performance header span {
  color: var(--text-muted);
  font-size: .7rem;
  font-weight: 700;
}

.issuer-worker-performance dl {
  margin: 10px 0 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid #e2ece5;
}

.issuer-worker-performance dl > div {
  min-width: 0;
  padding: 8px 8px 2px 0;
}

.issuer-worker-performance dt {
  color: var(--text-muted);
  font-size: .62rem;
  overflow-wrap: anywhere;
}

.issuer-worker-performance dd {
  margin: 1px 0 0;
  color: var(--text);
  font-size: .78rem;
  font-weight: 800;
}

@media (max-width: 700px) {
  html[data-layout="desktop"] .helper-shell,
  html[data-layout="desktop"] .issuer-shell { grid-template-columns: 180px minmax(0, 1fr); }

  html[data-layout="desktop"] .helper-bottom-nav,
  html[data-layout="desktop"] .issuer-bottom-nav {
    width: 180px;
    padding-inline: 7px;
  }
}

@media (max-width: 520px) {
  .helper-team-member-modes,
  .helper-team-proxy-grid { grid-template-columns: 1fr; }

  .field.password-field-row {
    grid-template-columns: 1fr;
    gap: 0;
    padding-block: 10px 5px;
  }

  .field.password-field-row label {
    width: auto;
    white-space: normal;
  }

  .issuer-worker-performance dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Simplified workflow, notification center, and editable profiles */
.compact-flow-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compact-flow-strip span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.helper-job-reward small,
.helper-progress-card-head > strong small,
.issuer-job-card-head > strong small,
.issuer-detail-summary strong small {
  margin-left: 5px;
  color: var(--text-muted);
  font-size: .65rem;
  font-weight: 700;
}

.csp-notification-center {
  position: relative;
  margin-left: auto;
}

.csp-notification-trigger {
  position: relative;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

.csp-notification-trigger svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.csp-notification-count {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border: 2px solid var(--surface);
  border-radius: 999px;
  background: #c53a35;
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
}

.helper-nav-item,
.issuer-nav-item {
  position: relative;
}

.csp-nav-notification {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 9px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  border: 2px solid #f7faf8;
  border-radius: 999px;
  background: #d83a36;
  color: #fff;
  font-size: .59rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0;
  box-sizing: border-box;
}

.csp-nav-notification[hidden] { display: none; }

html[data-layout="mobile"] .csp-nav-notification {
  top: 3px;
  right: auto;
  left: calc(50% + 8px);
  transform: none;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  border-color: #fff;
  font-size: .56rem;
}

.csp-notification-panel {
  position: fixed;
  z-index: 150;
  top: 68px;
  right: 18px;
  width: min(390px, calc(100vw - 24px));
  max-height: min(560px, calc(100vh - 90px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 18px 50px rgba(18, 55, 32, .16);
}

.csp-notification-panel > header {
  min-height: 52px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.csp-notification-read-all {
  border: 0;
  background: transparent;
  color: var(--primary);
  font-size: .75rem;
  font-weight: 800;
  cursor: pointer;
}

.csp-notification-list {
  max-height: calc(min(560px, calc(100vh - 90px)) - 52px);
  overflow-y: auto;
}

.csp-notification-item {
  width: 100%;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr);
  gap: 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.csp-notification-item.unread {
  background: #f1f8f3;
}

.csp-notification-dot {
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: transparent;
}

.csp-notification-item.unread .csp-notification-dot {
  background: var(--primary);
}

.csp-notification-item > span:last-child {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.csp-notification-item strong {
  font-size: .84rem;
}

.csp-notification-item small {
  color: var(--text-muted);
  font-size: .75rem;
  line-height: 1.55;
}

.csp-notification-item time {
  color: var(--text-muted);
  font-size: .66rem;
}

.csp-notification-empty {
  margin: 0;
  padding: 30px 18px;
  color: var(--text-muted);
  text-align: center;
  font-size: .8rem;
}

.profile-edit-dialog {
  width: min(720px, calc(100vw - 24px));
}

.profile-edit-panel {
  width: min(720px, calc(100vw - 24px));
}

.profile-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.profile-edit-wide {
  grid-column: 1 / -1;
}

.profile-edit-grid textarea {
  min-height: 92px;
  resize: vertical;
}

.profile-invoice-field {
  margin: 0;
  padding: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  border: 1px solid var(--line);
}

.profile-invoice-field legend {
  padding: 0 5px;
  color: var(--text-muted);
  font-size: .75rem;
  font-weight: 800;
}

.profile-invoice-field label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .82rem;
  font-weight: 700;
}

.profile-account-email {
  margin: 12px 0 0;
  color: var(--text-muted);
  font-size: .74rem;
}

.issuer-worker-performance footer {
  margin-top: 10px;
  padding-top: 9px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  border-top: 1px solid #e2ece5;
  color: var(--text-muted);
  font-size: .7rem;
}

.issuer-worker-performance footer strong {
  color: var(--text);
}

.issuer-applicant-heading-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.issuer-applicant-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.issuer-applicant-identity {
  width: max-content;
  max-width: 100%;
  display: grid;
  gap: 4px;
}

.issuer-applicant-identity h4 {
  max-width: 100%;
}

.issuer-performance-toggle {
  min-height: 27px;
  padding: 2px 0;
  display: inline-flex;
  align-items: center;
  justify-self: end;
  gap: 3px;
  border: 0;
  color: var(--brand-deep);
  background: transparent;
  font: inherit;
  font-size: .68rem;
  font-weight: 800;
  cursor: pointer;
}

.issuer-performance-toggle:hover,
.issuer-performance-toggle:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.issuer-performance-toggle svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transition: transform .2s ease;
}

.issuer-performance-toggle[aria-expanded="true"] svg {
  transform: rotate(90deg);
}

.issuer-applicant-performance-panel[hidden] {
  display: none;
}

/* Issuer assigned-worker productivity spotlight */
.issuer-productivity-spotlight {
  position: relative;
  margin: 16px -14px 14px;
  padding: 18px;
  overflow: hidden;
  background: #073d25;
  border-block: 1px solid #1b7245;
  color: #f5fff8;
}

.issuer-productivity-spotlight::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  background-image: linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 28px 28px;
}

.issuer-productivity-spotlight > * { position: relative; z-index: 1; }

.issuer-productivity-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.2);
  color: #bde8cb;
  font-size: .66rem;
  font-weight: 800;
}

.issuer-productivity-kicker { display: inline-flex; align-items: center; gap: 7px; color: #b8ff7a; }
.issuer-productivity-kicker svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

.issuer-productivity-main {
  display: grid;
  grid-template-columns: minmax(180px, .8fr) minmax(300px, 1.2fr);
  align-items: stretch;
  gap: 22px;
  padding: 18px 0;
}

.issuer-productivity-score { display: grid; align-content: center; }
.issuer-productivity-score > span { color: #d8f5e2; font-size: .72rem; font-weight: 800; }
.issuer-productivity-score > strong { margin-top: 2px; color: #fff; font-size: 3.5rem; line-height: 1; letter-spacing: 0; }
.issuer-productivity-score > strong small { margin-left: 6px; color: #b8ff7a; font-size: .9rem; }
.issuer-productivity-score > em { margin-top: 8px; color: #ffd84d; font-size: .61rem; font-style: normal; font-weight: 900; }

.issuer-productivity-totals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  border-block: 1px solid rgba(255,255,255,.18);
}

.issuer-productivity-totals > div { min-width: 0; padding: 15px 12px; border-left: 1px solid rgba(255,255,255,.18); }
.issuer-productivity-totals > div:first-child { border-left: 0; }
.issuer-productivity-totals dt { color: #bde8cb; font-size: .64rem; font-weight: 700; }
.issuer-productivity-totals dd { margin: 7px 0 0; color: #fff; font-size: 1.6rem; font-weight: 900; overflow-wrap: anywhere; }
.issuer-productivity-totals dd small { margin-left: 3px; color: #b8ff7a; font-size: .68rem; }
.issuer-productivity-totals dd.textual { font-size: .88rem; line-height: 1.45; }

.issuer-productivity-location {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-block: 1px solid rgba(184,255,122,.35);
}

.issuer-productivity-location-icon { display: grid; place-items: center; width: 42px; height: 42px; color: #073d25; background: #b8ff7a; border-radius: 50%; }
.issuer-productivity-location-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.issuer-productivity-location > span:last-child { display: grid; min-width: 0; }
.issuer-productivity-location small { color: #ffd84d; font-size: .59rem; font-weight: 900; }
.issuer-productivity-location strong { margin-top: 3px; color: #fff; font-size: 1rem; overflow-wrap: anywhere; }
.issuer-productivity-location em { margin-top: 2px; color: #bde8cb; font-size: .66rem; font-style: normal; overflow-wrap: anywhere; }

.issuer-productivity-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-top: 16px; }
.issuer-productivity-metric { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 8px; min-width: 0; }
.issuer-productivity-metric > span { color: #d8f5e2; font-size: .62rem; overflow-wrap: anywhere; }
.issuer-productivity-metric > strong { color: #fff; font-size: .73rem; }
.issuer-productivity-metric > i { grid-column: 1 / -1; display: block; height: 4px; overflow: hidden; background: rgba(255,255,255,.15); }
.issuer-productivity-metric > i > b { display: block; height: 100%; background: #b8ff7a; transform-origin: left; animation: issuer-productivity-rise .7s ease-out both; }

.issuer-productivity-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 14px; margin-top: 17px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); color: #d8f5e2; font-size: .64rem; }
.issuer-productivity-footer > span { color: #ffd84d; font-weight: 900; }
.issuer-productivity-footer > strong { color: #fff; }
.issuer-productivity-footer > small { flex: 1 1 100%; color: #9bc8aa; font-size: .57rem; }

@keyframes issuer-productivity-rise {
  from { transform: scaleX(0); opacity: .3; }
  to { transform: scaleX(1); opacity: 1; }
}

@media (max-width: 720px) {
  .issuer-productivity-main { grid-template-columns: 1fr; gap: 14px; }
  .issuer-productivity-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .issuer-productivity-spotlight { padding: 15px 14px; }
  .issuer-productivity-header { align-items: flex-start; flex-direction: column; gap: 5px; }
  .issuer-productivity-score > strong { font-size: 2.8rem; }
  .issuer-productivity-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .issuer-productivity-totals > div:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.18); border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .issuer-productivity-metric > i > b { animation: none; }
}

@media (max-width: 560px) {
  .csp-notification-panel {
    top: 60px;
    right: 12px;
  }

  .profile-edit-grid {
    grid-template-columns: 1fr;
  }

  .profile-edit-wide {
    grid-column: auto;
  }
}