:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #667085;
  --line: #dde3ec;
  --panel: #ffffff;
  --page: #f3f5f9;
  --navy: #29265f;
  --navy-dark: #1f1b4d;
  --gold: #f5a623;
  --gold-soft: #fff3d8;
  --teal: #0f766e;
  --teal-dark: #115e59;
  --amber: #b45309;
  --red: #b42318;
  --green: #15803d;
  --blue: #2563eb;
  --violet: #6d28d9;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background:
    linear-gradient(180deg, rgba(245, 166, 35, 0.08), transparent 280px),
    var(--page);
  color: var(--ink);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
}

.authView {
  align-items: center;
  display: flex;
  min-height: 100vh;
  justify-content: center;
  padding: 24px;
}

.authBox {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  max-width: 460px;
  padding: 24px;
  width: 100%;
}

.authForm {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

button,
input,
select,
textarea {
  font: inherit;
}

.topbar {
  align-items: center;
  background: var(--navy);
  border-bottom: 4px solid var(--gold);
  color: #ffffff;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 18px clamp(18px, 4vw, 48px);
  position: relative;
  overflow: hidden;
}

.topbar::before {
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 64px);
  content: "";
  inset: 0;
  opacity: 0.5;
  position: absolute;
}

.topbar > * {
  position: relative;
}

.brandLockup {
  align-items: center;
  display: flex;
  gap: 18px;
  min-width: 280px;
}

.brandLockup img {
  height: 58px;
  object-fit: contain;
  width: 180px;
}

.brandLogoNoTagline {
  align-items: center;
  display: flex;
  gap: 12px;
}

.brandMarkBubble {
  align-items: center;
  background: #ffffff;
  border-radius: 999px;
  display: inline-flex;
  height: 52px;
  justify-content: center;
  width: 52px;
}

.brandLogoNoTagline .brandMarkImage {
  height: 40px;
  object-fit: contain;
  width: 40px;
}

.brandWord {
  color: #ffffff;
  font-size: 30px;
  letter-spacing: 8px;
  line-height: 1;
}

.topbar h1,
.topbar .hint {
  color: #ffffff;
}

.topActions {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.topActions label {
  min-width: 210px;
}

.currentUserBox {
  display: grid;
  gap: 4px;
  min-width: 170px;
}

.currentUserBox span {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
}

.currentUserBox strong {
  color: #ffffff;
}

.eyebrow {
  color: var(--gold);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 4px;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.1;
  margin-bottom: 6px;
}

h2 {
  font-size: 20px;
  margin-bottom: 0;
}

h3 {
  font-size: 15px;
  margin-bottom: 0;
}

.layout {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: 240px minmax(0, 1fr);
  padding: 24px clamp(18px, 4vw, 48px) 42px;
}

.stageNav {
  display: grid;
  gap: 10px;
  grid-column: 1;
  position: sticky;
  top: 18px;
}

.stageTab {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(23, 32, 51, 0.06);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 5px;
  min-height: 96px;
  padding: 15px;
  position: relative;
  text-align: left;
}

.stageTab strong {
  color: var(--navy);
  font-size: 18px;
}

.stageTab span {
  color: var(--muted);
  font-size: 13px;
}

.stageTab small {
  align-items: center;
  background: #f3f1fb;
  border-radius: 999px;
  color: var(--navy);
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  height: 28px;
  justify-content: center;
  min-width: 28px;
  padding: 0 9px;
  position: absolute;
  right: 12px;
  top: 12px;
}

.stageTab.active {
  border-color: var(--gold);
  box-shadow: 0 16px 34px rgba(41, 38, 95, 0.13);
}

.stageTab.active::before {
  background: var(--gold);
  border-radius: 8px 0 0 8px;
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: 5px;
}

.dashboard,
.workarea,
.projectsPanel,
.opsGrid,
.calendarStage,
.crewStage,
.portalStage,
.contractorPortalStage,
.documentsStage,
.thermalStage,
.customersStage,
.suppliersStage,
.toolsStage,
.rentalsStage,
.fleetStage,
.teamStage,
.archiveStage {
  grid-column: 2;
}

.stageHidden {
  display: none !important;
}

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

.dashboard article,
.listPanel,
.editorPanel,
.toolPanel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(23, 32, 51, 0.07);
}

.dashboard article {
  border-top: 4px solid var(--gold);
  min-height: 92px;
  padding: 16px;
}

.dashboard span:not(.badge),
.hint,
.quoteMeta,
label {
  color: var(--muted);
}

.dashboard strong {
  color: var(--navy);
  display: block;
  font-size: 26px;
  margin-top: 12px;
}

.controlDashboard {
  display: grid;
  gap: 16px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.85fr);
}

.dashboardHero,
.dashboardKpis,
.dashboardPanel {
  grid-column: 1 / -1;
}

.dashboardHero {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(23, 32, 51, 0.07);
  padding: 18px;
}

.dashboardHero h2 {
  color: var(--navy);
  font-size: 24px;
  margin-bottom: 6px;
}

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

.dashboardPanel {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(23, 32, 51, 0.07);
  min-width: 0;
}

.dashboardUrgent {
  grid-column: span 2;
}

.dashboardTasks,
.dashboardRows {
  display: grid;
  gap: 10px;
  padding: 14px 16px 16px;
}

.dashboardTask,
.dashboardProjectRow,
.dashboardToolRow {
  background: #fbfcff;
  border: 1px solid var(--line);
  border-left: 5px solid var(--blue);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 4px;
  padding: 12px;
  text-align: left;
}

.dashboardTask.high {
  border-left-color: var(--red);
}

.dashboardTask.medium {
  border-left-color: var(--amber);
}

.dashboardTask.low {
  border-left-color: var(--blue);
}

.dashboardTask span:not(.badge) {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.dashboardTask strong,
.dashboardProjectRow strong,
.dashboardToolRow strong {
  color: var(--navy);
  font-size: 15px;
}

.dashboardTask small,
.dashboardProjectRow small,
.dashboardToolRow small,
.dashboardTask em,
.dashboardProjectRow em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
}

.dashboardIssueTask {
  align-items: stretch;
}

.issueTaskCount {
  color: var(--navy);
  font-size: 13px;
  font-weight: 700;
  margin: 0;
}

.issueTaskList {
  display: grid;
  gap: 8px;
}

.issueTaskRow {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  background: #ffffff;
}

.issueTaskRow.done {
  background: #f2fbf8;
  border-color: #bde7da;
}

.issueTaskRow label {
  align-items: flex-start;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  gap: 8px;
  font-weight: 600;
  margin: 0;
}

.issueTaskRow label input {
  margin-top: 3px;
}

.issueTaskMeta {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}

.issueTaskMeta select {
  max-width: 320px;
}

.issueTaskInputs {
  display: grid;
  gap: 6px;
}

.issueTaskInputs label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 700;
  gap: 4px;
}

.issueTaskInputs input {
  font-size: 13px;
  width: 100%;
}

.issueTaskMeta small {
  color: var(--muted);
}

.issueTaskActions {
  justify-content: flex-start;
  padding-top: 2px;
}

.dashboardProjectRow,
.dashboardToolRow {
  border-left-color: var(--teal);
}

.workarea {
  align-items: start;
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(300px, 420px) minmax(0, 1fr);
}

.listPanel,
.editorPanel,
.toolPanel {
  min-width: 0;
}

.panelHead {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 16px;
}

.panelHead h2 {
  color: var(--navy);
}

.stackHead {
  align-items: stretch;
  flex-direction: column;
}

.listTitleRow {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.listTitleRow h2 {
  margin: 0;
}

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

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

.lookupField {
  align-items: end;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr auto;
}

.subcontractorLookupField { grid-template-columns: minmax(0, 1fr) auto; min-width: 0; }
.subcontractorLookupField label { min-width: 0; }
.subcontractorLookupStatus { margin: 0; color: #176657; font-size: 13px; overflow-wrap: anywhere; }
.subcontractorLookupStatus.isError { color: #a12a22; }

.quoteList {
  display: grid;
  gap: 8px;
  max-height: 76vh;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 12px;
}

.quoteCard {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  padding: 12px;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.quoteCard:hover,
.quoteCard.active {
  border-color: var(--gold);
  box-shadow: 0 10px 22px rgba(41, 38, 95, 0.12);
}

.quoteCard:hover {
  transform: translateY(-1px);
}

.quoteTop {
  align-items: start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.quoteNumber {
  color: var(--navy);
  font-weight: 700;
}

.quoteClient {
  margin: 6px 0 2px;
}

.quoteSummary {
  color: var(--text);
  font-size: 13px;
  margin: 0 0 6px;
  opacity: 0.88;
}

.quoteClient,
.quoteSummary,
.quoteMeta {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}

.quoteMeta {
  font-size: 13px;
}

.badge {
  border-radius: 999px;
  color: #ffffff;
  display: inline-block;
  font-size: 12px;
  padding: 4px 8px;
  white-space: nowrap;
}

.draft {
  background: var(--muted);
}

.needs_approval {
  background: var(--violet);
}

.approved_internal {
  background: var(--teal);
}

.sent {
  background: var(--blue);
}

.negotiation {
  background: var(--amber);
}

.accepted {
  background: var(--green);
}

.rejected,
.archived {
  background: var(--red);
}

form {
  display: grid;
  gap: 16px;
}

.editorPanel form > :not(.panelHead) {
  margin-left: 16px;
  margin-right: 16px;
}

.editorPanel form > :last-child {
  margin-bottom: 18px;
}

.grid {
  display: grid;
  gap: 14px;
}

.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.five {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.offerTermsCard {
  background: #fbfcff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 14px;
}

.offerTermsCard h3 {
  color: var(--navy);
  margin: 0;
}

label {
  display: grid;
  font-size: 13px;
  gap: 7px;
}

input,
select,
textarea {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  color: var(--ink);
  min-height: 40px;
  padding: 9px 10px;
  width: 100%;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.18);
  outline: 0;
}

textarea {
  line-height: 1.5;
  resize: vertical;
}

textarea.richTextArea {
  font-family: inherit;
  min-height: 160px;
}

#description {
  min-height: 430px;
}

#heroScope,
#offerTitle {
  min-height: 170px;
}

#realizationConditions,
#offerExclusions,
#additionalNotes,
#projectScope,
#subcontractorScope,
#projectNotes,
#crewReport,
#projectDocumentationNotes,
#portalNote {
  min-height: 180px;
}

.richTextToolbar {
  align-items: center;
  background: #fbfcff;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
  padding: 6px;
}

.richTextToolbar button {
  align-items: center;
  background: #f3f1fb;
  border: 1px solid transparent;
  border-radius: 5px;
  color: var(--navy);
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  justify-content: center;
  min-height: 32px;
  min-width: 34px;
  padding: 5px 9px;
}

.richTextToolbar button:hover {
  background: var(--gold-soft);
  border-color: rgba(245, 166, 35, 0.35);
}

.richTextToolbar .toolbarHint {
  color: var(--muted);
  font-size: 12px;
  margin-left: auto;
}

.primary,
.secondary,
.removeItem,
.linkButton,
.linkLike {
  align-items: center;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: 40px;
  padding: 9px 14px;
  text-decoration: none;
}

.primary {
  background: var(--gold);
  color: var(--navy);
}

.primary:hover {
  background: #ffb936;
  color: var(--navy);
}

.secondary {
  background: #f3f1fb;
  color: var(--navy);
}

.secondary:hover {
  background: var(--gold-soft);
}

.dangerSoft {
  background: #fee2e2;
  color: var(--red);
}

.secondary:disabled,
.primary:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.itemsHead,
.totals {
  align-items: center;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.catalogTotalHint {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-align: right;
}

.catalogTotalHint.mismatch {
  color: var(--red);
}

.items {
  display: grid;
  gap: 10px;
}

.itemRow {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(180px, 1fr) 80px 84px 120px 80px 44px;
}

.catalogDetailRow {
  grid-template-columns: 150px minmax(180px, 1fr) 80px 84px 120px 80px 44px;
}

.removeItem {
  background: #fee2e2;
  color: var(--red);
  min-width: 44px;
  padding: 0;
}

.totals {
  background: linear-gradient(90deg, var(--gold-soft), #ffffff);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  padding: 14px;
}

.totals span {
  color: var(--muted);
  display: block;
  font-size: 13px;
  margin-bottom: 6px;
}

.totals strong {
  color: var(--navy);
  font-size: 24px;
}

.errors,
.notice {
  border-radius: 8px;
  padding: 12px;
}

.errors {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: var(--red);
}

.notice {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}

.pdfNotice {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pdfNotice a {
  color: var(--navy);
  font-weight: 700;
}

.attachmentsPanel,
.commentsPanel,
.historyPanel {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.fileButton {
  margin: 0;
  width: auto;
}

.fileButton input {
  height: 1px;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.attachmentList,
.historyList,
.compactList,
.auditList {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.attachmentItem,
.compactItem,
.auditItem,
.historyItem {
  background: #fafbfe;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.attachmentItem {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr auto auto;
}

.attachmentName,
.compactItem button {
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  word-break: break-word;
}

.attachmentName:hover {
  color: var(--teal);
  text-decoration: underline;
}

.attachmentItem span,
.compactItem span,
.auditItem span,
.historyItem span {
  color: var(--muted);
  font-size: 13px;
}

.attachmentActions {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.compactAttachmentButton {
  min-height: 34px;
  padding: 6px 12px;
}

.linkButton {
  background: #fee2e2;
  color: var(--red);
  min-height: 34px;
  padding: 6px 10px;
}

.historyItem {
  border-left: 3px solid var(--gold);
}

.historyItem strong {
  color: var(--ink);
}

.opsGrid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 18px;
}

.opsGrid .toolPanel.wide {
  grid-column: 1 / -1;
}

.projectsPanel.toolPanel.wide,
.largeProjectsStage.toolPanel.wide,
.calendarStage.toolPanel.wide,
.crewStage.toolPanel.wide,
.portalStage.toolPanel.wide,
.contractorPortalStage.toolPanel.wide,
.documentsStage.toolPanel.wide,
.thermalStage.toolPanel.wide,
.customersStage.toolPanel.wide,
.suppliersStage.toolPanel.wide,
.toolsStage.toolPanel.wide,
.rentalsStage.toolPanel.wide,
.fleetStage.toolPanel.wide,
.teamStage.toolPanel.wide,
.archiveStage.toolPanel.wide {
  grid-column: 2;
}

.projectsPanel,
.largeProjectsStage,
.calendarStage,
.crewStage,
.portalStage,
.contractorPortalStage,
.documentsStage,
.thermalStage,
.customersStage,
.suppliersStage,
.toolsStage,
.rentalsStage,
.fleetStage,
.teamStage {
  margin-top: 18px;
}

.projectWorkspace {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(430px, 540px) minmax(0, 1fr);
  padding: 16px;
}

.projectListHead {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.projectListPanel h3 {
  color: var(--navy);
  margin-bottom: 12px;
}

.projectList {
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 245px);
  min-height: 820px;
  overflow: auto;
  padding-right: 8px;
}

.largeProjectWorkspace {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  padding: 16px;
}

.largeProjectListPanel h3 {
  color: var(--navy);
  margin-bottom: 12px;
}

.rentalWorkspace {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  padding: 16px;
}

.rentalListPanel h3 {
  color: var(--navy);
  margin-bottom: 12px;
}

.rentalForm {
  display: grid;
  gap: 16px;
}

.fleetWorkspace {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  padding: 16px;
}

.fleetListPanel h3 {
  color: var(--navy);
  margin-bottom: 12px;
}

.fleetForm {
  display: grid;
  gap: 16px;
}

.fleetSubpanel {
  background: #fbfcff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 12px;
}

.fleetRow {
  align-items: start;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px;
}

.fleetRowMeta {
  color: var(--muted);
  font-size: 13px;
}

.fleetTag {
  background: #eef2ff;
  border-radius: 999px;
  color: var(--navy);
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
}

.thermalWorkspace {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  padding: 16px;
}

.thermalListPanel h3 {
  color: var(--navy);
  margin-bottom: 12px;
}

.thermalReportForm {
  display: grid;
  gap: 16px;
}

.thermalUploadBar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.thermalAiBox {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.thermalImageList,
.thermalFindingList {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow: auto;
}

.thermalImageCard,
.thermalFindingCard {
  background: #fafbfe;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 10px;
}

.thermalImageCard a {
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
}

.thermalImageCard a:hover {
  text-decoration: underline;
}

.thermalFindingHead {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.thermalStatus,
.thermalSeverity {
  font-size: 11px;
  font-weight: 800;
}

.thermalStatus.draft {
  background: #eef2ff;
  color: #3730a3;
}

.thermalStatus.analyzed {
  background: #e0f2fe;
  color: #0c4a6e;
}

.thermalStatus.review {
  background: #fff7ed;
  color: #9a3412;
}

.thermalStatus.approved {
  background: #dcfce7;
  color: #166534;
}

.thermalStatus.archived {
  background: #f1f5f9;
  color: #334155;
}

.thermalSeverity.ok {
  background: #ecfdf5;
  color: #047857;
}

.thermalSeverity.low {
  background: #eff6ff;
  color: #1d4ed8;
}

.thermalSeverity.medium {
  background: #fff7ed;
  color: #9a3412;
}

.thermalSeverity.high {
  background: #fee2e2;
  color: #b91c1c;
}

.thermalSeverity.critical {
  background: #b91c1c;
  color: #ffffff;
}

.rentalInfoBox {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.rentalInfoBox h3 {
  color: var(--navy);
  margin-bottom: 10px;
}

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

.miniChecklist span {
  background: #eef7f5;
  border: 1px solid #cde8e2;
  border-radius: 999px;
  color: #0f766e;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 10px;
}

.largeProjectDetail {
  display: grid;
  gap: 16px;
}

.largeProjectTop {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 420px);
}

.largeProjectKpis {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.largeProjectKpis div,
.insightItem,
.largeTaskColumn,
.largeTaskCard,
.largeProjectLists .compactItem,
.largeTimeline div {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.largeProjectKpis div {
  padding: 12px;
}

.largeProjectKpis span {
  color: var(--muted);
  display: block;
  font-size: 12px;
}

.largeProjectKpis strong {
  color: var(--navy);
  display: block;
  font-size: 22px;
  margin-top: 4px;
}

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

.insightItem {
  border-left: 4px solid var(--gold);
  color: var(--ink);
  padding: 10px 12px;
}

.insightItem.good {
  border-left-color: #12856f;
}

.largeTaskBoard {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, minmax(180px, 1fr));
  overflow-x: auto;
}

.largeTaskColumn {
  background: #f8fafc;
  display: grid;
  gap: 10px;
  min-height: 220px;
  padding: 10px;
}

.largeTaskColumnHead {
  align-items: center;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
}

.largeTaskCard {
  border-left: 4px solid #cbd5e1;
  display: grid;
  gap: 7px;
  padding: 10px;
}

.largeTaskCard.priority-high {
  border-left-color: var(--gold);
}

.largeTaskCard.priority-critical {
  border-left-color: #c51d1d;
}

.largeTaskCard span,
.largeTimeline small,
.largeProjectLists .compactItem span {
  color: var(--muted);
  display: block;
  font-size: 12px;
}

.largeTaskActions {
  display: flex;
  gap: 8px;
}

.dangerText {
  color: #b42318;
}

.largeProjectLists > section {
  display: grid;
  gap: 10px;
}

.miniAddRow {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(120px, 160px) auto;
}

.compactList {
  display: grid;
  gap: 8px;
}

.largeProjectLists .compactItem {
  align-items: start;
  display: grid;
  gap: 10px;
  grid-template-columns: auto 1fr;
  padding: 10px;
}

.largeProjectLists .compactItem > button {
  background: #ffe2e2;
  border: 0;
  border-radius: 6px;
  color: #b42318;
  cursor: pointer;
  font-weight: 800;
  height: 28px;
  width: 28px;
}

.largeTimeline {
  display: grid;
  gap: 8px;
}

.largeTimeline div {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 120px minmax(0, 1fr) 100px;
  padding: 10px;
}

.largeTimeline span {
  color: var(--navy);
  font-weight: 700;
}

.supplierPanel {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
}

.supplierForm {
  display: grid;
  gap: 8px;
}

.supplierList {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
}

.supplierItem {
  align-items: start;
  background: #fafbfe;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr auto;
  padding: 10px;
}

.supplierItem.matched {
  border-color: var(--gold);
}

.supplierItem strong,
.supplierItem span {
  display: block;
}

.supplierItem strong {
  color: var(--navy);
}

.supplierItem span {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
}

.projectCard {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
  display: grid;
  gap: 8px;
  line-height: 1.35;
  padding: 15px;
  text-align: left;
  width: 100%;
}

.projectCard:hover,
.projectCard.active {
  border-color: var(--gold);
  box-shadow: 0 10px 22px rgba(41, 38, 95, 0.12);
}

.projectMeta {
  color: var(--muted);
  font-size: 13px;
  margin-top: 8px;
}

.projectList .quoteTop {
  align-items: center;
  gap: 10px;
}

.projectList .quoteNumber {
  color: var(--navy);
  font-size: 17px;
  line-height: 1.2;
}

.projectList .quoteClient {
  color: #111827;
  font-size: 15px;
  line-height: 1.25;
  margin: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.projectList .quoteMeta {
  color: #475467;
  font-size: 13px;
  line-height: 1.35;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.projectList .quoteMeta:nth-of-type(2) {
  background: #f8fafc;
  border-left: 3px solid var(--gold);
  padding: 7px 9px;
}

.projectWarning {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 6px;
  color: #92400e;
  font-size: 12px;
  font-weight: 700;
  margin-top: 8px;
  padding: 6px 8px;
}

.projectHeader,
.projectSectionHead {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.projectHeader {
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.projectHeader h3 {
  color: var(--navy);
  font-size: 18px;
}

.projectForm {
  gap: 18px;
}

.projectGroup {
  display: grid;
  gap: 10px;
}

.complianceSummary,
.workflowControlList {
  display: grid;
  gap: 10px;
}

.goNoGoCard {
  background: #f9fbff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.goNoGoCard.go {
  border-left: 4px solid #1f8f5f;
}

.goNoGoCard.noGo {
  border-left: 4px solid #dc4c3f;
}

.goNoGoHead {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.goNoGoHead strong {
  color: var(--navy);
}

.goNoGoHead span {
  color: var(--muted);
  font-size: 13px;
}

.goNoGoCard ul {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding-left: 20px;
}

.goNoGoCard li.error {
  color: #9f1239;
}

.goNoGoCard li.warning {
  color: #92400e;
}

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

.requirementMatrix div {
  background: #fafbfe;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
}

.requirementMatrix strong {
  color: var(--navy);
  font-size: 12px;
}

.requirementMatrix span {
  color: var(--muted);
  font-size: 13px;
}

.workflowControlItem {
  background: #fafbfe;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 10px;
}

.workflowControlItem.required {
  border-left: 4px solid var(--teal);
}

.workflowControlItem.notRequired {
  opacity: 0.85;
}

.workflowControlHead {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.workflowControlHead strong {
  color: var(--navy);
}

.workflowControlHead span {
  color: var(--muted);
  font-size: 13px;
}

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

.workflowAuditCard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.workflowAuditCard h4 {
  color: var(--navy);
  font-size: 14px;
  margin: 0;
}

.workflowAuditCard ul {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.workflowAuditCard li {
  background: #fafbfe;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 2px;
  padding: 8px;
}

.workflowAuditCard li strong {
  color: var(--navy);
}

.workflowAuditCard li span,
.workflowAuditCard li small {
  color: var(--muted);
}

.ndtReadiness {
  display: grid;
  gap: 10px;
}

.ndtCard {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.ndtCard.ok {
  border-left: 4px solid #15945f;
  background: #f2fbf6;
}

.ndtCard.blocked {
  border-left: 4px solid #dc4c3f;
  background: #fff6f5;
}

.ndtCard.notRequired {
  background: #fafbfe;
}

.ndtHead {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: space-between;
}

.ndtHead strong {
  color: var(--navy);
}

.ndtHead span {
  color: var(--muted);
  font-size: 13px;
}

.ndtErrors,
.ndtWarnings {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 20px;
}

.ndtErrors li {
  color: #9f1239;
}

.ndtWarnings li {
  color: #92400e;
}

.ndtColumns {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.ndtColumns > div {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.ndtColumns ul {
  display: grid;
  gap: 4px;
  margin: 8px 0 0;
  padding-left: 18px;
}

.projectLines,
.projectChecklist,
.teamChoice {
  display: grid;
  gap: 10px;
}

.projectLine {
  align-items: center;
  background: #fafbfe;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 10px;
}

.projectMaterialLine {
  grid-template-columns: minmax(180px, 1fr) 82px 76px 150px minmax(140px, 1fr) 44px;
}

.projectToolLine {
  grid-template-columns: minmax(190px, 1fr) minmax(220px, 1fr) 120px minmax(160px, 1fr) 44px;
}

.projectChecklistItem {
  align-items: center;
  background: #fafbfe;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 120px 1fr 44px;
  padding: 10px;
}

.projectIsoControlItem {
  grid-template-columns: 120px 110px minmax(220px, 1.3fr) minmax(180px, 1fr) 44px;
}

.inlineCheck,
.teamChip {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  gap: 8px;
}

.inlineCheck input,
.teamChip input {
  min-height: 0;
  padding: 0;
  width: auto;
}

.teamChoice {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.teamChip {
  background: #f7f8fc;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 40px;
  padding: 8px 10px;
}

.projectAiBox ul {
  margin: 8px 0 12px 18px;
  padding: 0;
}

.opsBoard,
.crewBoard,
.portalBoard,
.employeePortalBoard {
  display: grid;
  gap: 16px;
  padding: 16px;
}

.opsBoard {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.opsBoardPanel,
.crewCard,
.portalCard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.opsBoardPanel.span2 {
  grid-column: 1 / -1;
}

.resourceList,
.issueList,
.dashboardRows {
  display: grid;
  gap: 10px;
}

.resourceCard,
.dashboardProjectRow,
.dashboardToolRow {
  background: #fafbfe;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 5px;
  padding: 12px;
  text-align: left;
  width: 100%;
}

.resourceCard:not(.passive):hover,
.dashboardProjectRow:hover,
.dashboardToolRow:hover {
  border-color: var(--teal);
}

.resourceCard strong,
.crewCard h3,
.portalCard h3 {
  color: var(--navy);
}

.resourceCard small,
.resourceCard em,
.crewCard p,
.portalMeta,
.crewInfoGrid small {
  color: var(--muted);
  font-style: normal;
}

.issueList p {
  background: #fff7e6;
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  margin: 0;
  padding: 9px 10px;
}

.crewBoard,
.portalBoard {
  grid-template-columns: 1fr;
}

.crewCard {
  display: grid;
  gap: 14px;
}

.crewCard.attention {
  border-left: 4px solid var(--gold);
}

.crewCardHead {
  align-items: start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.crewInfoGrid,
.progressGrid,
.portalMeta {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.crewInfoGrid > div,
.portalMeta span {
  background: #f7f8fc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 10px;
}

.crewInfoGrid span,
.progressLine span {
  color: var(--muted);
  font-size: 12px;
}

.crewScope {
  background: #fbfcff;
  border-left: 3px solid var(--gold);
  margin: 0;
  padding: 10px 12px;
}

.progressLine {
  background: #f7f8fc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  padding: 10px;
}

.progressLine div {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.progressLine i {
  background: #e5ebf3;
  border-radius: 999px;
  display: block;
  height: 8px;
  overflow: hidden;
}

.progressLine b {
  background: var(--teal);
  display: block;
  height: 100%;
}

.portalCard {
  display: grid;
  gap: 12px;
}

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

.employeePortalSummary article {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  min-height: 88px;
  padding: 14px;
}

.employeePortalSummary span,
.employeePortalSummary small {
  color: var(--muted);
  font-size: 13px;
}

.employeePortalSummary strong {
  color: var(--navy);
  font-size: 24px;
  overflow-wrap: anywhere;
}

.employeePortalPanel {
  margin: 0;
}

.employeeDocGrid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.employeeDocCard {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
}

.employeeDocCard.pending {
  border-color: #fde68a;
}

.employeeDocCard.done {
  border-color: #bbf7d0;
}

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

.employeeDocCard header div {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.employeeDocCard strong {
  color: var(--navy);
}

.employeeDocCard p,
.employeeDocCard small {
  color: var(--muted);
}

.employeeDocCard dl {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.employeeDocCard dt {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.employeeDocCard dd {
  color: var(--text);
  font-weight: 700;
  margin: 0;
}

.employeeDocCard details {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}

.employeeDocCard summary {
  color: var(--navy);
  cursor: pointer;
  font-weight: 800;
}

.employeeDocCard pre {
  color: var(--text);
  font: inherit;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
}

.employeeFolderPanel {
  margin: 0;
  min-width: 0;
  border-top: 1px solid var(--line);
  background: #fff;
  scroll-margin-top: 120px;
}

.employeeFolderHead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  padding: 18px 0 14px;
}

.employeeFolderHead h3 {
  font-size: 16px;
  margin: 0;
}

.employeeFolderFilters {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(160px, 1fr)) auto;
  align-items: end;
  gap: 12px;
  margin-bottom: 16px;
}

.employeeFolderFilters label,
.employeeFolderFilters input,
.employeeFolderFilters select {
  min-width: 0;
  width: 100%;
}

.employeeFolderFilters input,
.employeeFolderFilters select,
.employeeFolderFilters button {
  height: 38px;
  font-size: 12px;
}

.employeeFolderScroll:focus-visible,
.employeeFolderTable a:focus-visible,
.employeeFolderDetails summary:focus-visible {
  outline: 2px solid #147d71;
  outline-offset: -2px;
}

.recordRegisterTable.employeeFolderTable {
  min-width: 1180px;
  table-layout: fixed;
}

.employeeFolderTable td {
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  text-align: left;
}

.employeeFolderTable .folderColIndex { width: 42px; }
.employeeFolderTable .folderColType { width: 138px; }
.employeeFolderTable .folderColNumber { width: 134px; }
.employeeFolderTable .folderColIssuer { width: 144px; }
.employeeFolderTable .folderColDate { width: 100px; }
.employeeFolderTable .folderColStatus { width: 150px; }
.employeeFolderTable .folderIndex { color: var(--muted); }
.employeeFolderTable .folderDate { font-variant-numeric: tabular-nums; white-space: nowrap; }
.employeeFolderTable .docStatus { display: inline-block; max-width: 100%; border-radius: 4px; white-space: normal; line-height: 1.4; }
.employeeFolderTable .recordNumberLink { display: inline-block; padding: 3px 0; }

.employeeFolderDetails {
  margin-top: 5px;
  color: #475467;
}

.employeeFolderDetails summary {
  cursor: pointer;
  color: #17665f;
  width: fit-content;
  padding: 3px 0;
}

.employeeFolderDetails p {
  margin: 6px 0;
  white-space: pre-wrap;
}

@media (max-width: 1250px) {
  .employeeFolderFilters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .employeeFolderFilters button { justify-self: start; }
}

@media (max-width: 600px) {
  .employeeFolderFilters { grid-template-columns: minmax(0, 1fr); }
  .employeeFolderPanel { scroll-margin-top: 80px; }
}

.documentsWorkspace {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr);
  padding: 16px;
}

.documentPanel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.documentPreview {
  background: #fafbfe;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  min-height: 120px;
  overflow: auto;
  padding: 14px;
}

.documentPreview h4,
.documentHtmlPreview h2,
.documentHtmlPreview h3 {
  color: var(--navy);
}

.documentPreview pre {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  line-height: 1.5;
  margin: 8px 0;
  max-height: 320px;
  overflow: auto;
  padding: 12px;
  white-space: pre-wrap;
}

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

.docResultHead strong {
  color: var(--navy);
}

.docResultHead span {
  background: var(--gold-soft);
  border-radius: 999px;
  color: var(--amber);
  font-weight: 700;
  padding: 6px 10px;
}

.documentHtmlPreview {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  line-height: 1.5;
  padding: 14px;
}

.documentHtmlPreview table {
  border-collapse: collapse;
  margin: 10px 0;
  width: 100%;
}

.documentHtmlPreview th,
.documentHtmlPreview td {
  border-bottom: 1px solid var(--line);
  padding: 8px;
  text-align: left;
  vertical-align: top;
}

.documentHtmlPreview th {
  background: var(--navy);
  color: #fff;
}

.documentHtmlPreview .warning {
  background: #fff7e2;
  border-left: 4px solid var(--gold);
  padding: 10px 12px;
}

.documentHtmlPreview .ok {
  background: #effaf3;
  border-left: 4px solid #15945f;
  padding: 10px 12px;
}

.documentHtmlPreview .riskDefinitionTable th {
  width: 180px;
}

.documentHtmlPreview .riskMatrix {
  margin-left: auto;
  margin-right: auto;
  max-width: 620px;
}

.documentHtmlPreview .riskMatrix th,
.documentHtmlPreview .riskMatrix td {
  border: 1px solid #aeb8c8;
  font-weight: 700;
  padding: 7px;
  text-align: center;
}

.documentHtmlPreview .riskMatrix th {
  background: #bcd3f4;
  color: #08122a;
}

.documentHtmlPreview .riskLegend th {
  text-align: center;
  width: 130px;
}

.documentHtmlPreview .riskLow {
  background: #b7e1c0 !important;
  color: #112416 !important;
}

.documentHtmlPreview .riskMedium {
  background: #f3eac8 !important;
  color: #3b2d10 !important;
}

.documentHtmlPreview .riskHigh {
  background: #efb68f !important;
  color: #3d210d !important;
}

.documentHtmlPreview .riskForbidden {
  background: #f76a6a !important;
  color: #4d0d0d !important;
}

.documentHtmlPreview .riskCellLow {
  background: #b7e1c0 !important;
  color: #112416 !important;
  font-weight: 700;
  text-align: center;
}

.documentHtmlPreview .riskCellMedium {
  background: #f3eac8 !important;
  color: #3b2d10 !important;
  font-weight: 700;
  text-align: center;
}

.documentHtmlPreview .riskCellHigh {
  background: #efb68f !important;
  color: #3d210d !important;
  font-weight: 700;
  text-align: center;
}

.documentHtmlPreview .riskCellForbidden {
  background: #f76a6a !important;
  color: #4d0d0d !important;
  font-weight: 700;
  text-align: center;
}

.documentHtmlPreview .ibwrRiskRegister td:nth-child(3),
.documentHtmlPreview .ibwrRiskRegister td:nth-child(5),
.documentHtmlPreview .ibwrRiskRegister td:nth-child(6) {
  text-align: center;
  font-weight: 700;
}

.isoPanel {
  border-top: 4px solid var(--gold);
}

.isoWorkflowPanel {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 14px;
}

.isoWorkflowHeader {
  align-items: flex-start;
  display: flex;
  gap: 14px;
  justify-content: space-between;
}

.isoWorkflowHeader > div {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.isoWorkflowHeader h3,
.isoWorkflowBox h4 {
  color: var(--navy);
  margin: 0;
}

.isoWorkflowHeader p {
  color: var(--muted);
  margin: 4px 0 0;
}

.isoWorkflowHeader > strong {
  background: var(--gold-soft);
  border-radius: 999px;
  color: var(--amber);
  flex: 0 0 auto;
  padding: 7px 10px;
}

.isoWorkflowStats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.isoWorkflowStats article {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  padding: 10px;
}

.isoWorkflowStats span {
  color: var(--muted);
  font-size: 12px;
}

.isoWorkflowStats strong {
  color: var(--navy);
  font-size: 22px;
}

.isoWorkflowSteps {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.isoWorkflowStep {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 30px minmax(0, 1fr);
  padding: 12px;
}

.isoWorkflowStep > span {
  align-items: center;
  background: #eef2ff;
  border-radius: 999px;
  color: var(--navy);
  display: inline-flex;
  font-weight: 800;
  height: 30px;
  justify-content: center;
  width: 30px;
}

.isoWorkflowStep strong {
  color: var(--navy);
}

.isoWorkflowStep small,
.isoWorkflowStep p {
  color: var(--muted);
}

.isoWorkflowStep p {
  margin: 5px 0 0;
}

.isoWorkflowStep.ok {
  border-color: #bbf7d0;
}

.isoWorkflowStep.ok > span {
  background: #dcfce7;
  color: #15803d;
}

.isoWorkflowStep.soon {
  border-color: #fed7aa;
}

.isoWorkflowStep.soon > span,
.isoWorkflowStep.warn > span {
  background: #ffedd5;
  color: #b45309;
}

.isoWorkflowStep.warn {
  border-color: #fde68a;
}

.isoWorkflowStep.danger {
  border-color: #fecaca;
}

.isoWorkflowStep.danger > span {
  background: #fee2e2;
  color: #b91c1c;
}

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

.isoWorkflowBox {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 12px;
}

.isoActionList,
.isoRecordList {
  display: grid;
  gap: 8px;
}

.isoActionItem {
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 10px;
}

.isoActionItem.warn {
  border-left: 4px solid var(--gold);
}

.isoActionItem.soon {
  border-left: 4px solid #60a5fa;
}

.isoActionItem.danger {
  border-left: 4px solid #ef4444;
}

.isoActionItem span,
.isoActionItem small,
.isoRecordList span,
.isoRecordList small {
  color: var(--muted);
  display: block;
}

.isoActionItem strong,
.isoRecordList strong {
  color: var(--navy);
  display: block;
  overflow-wrap: anywhere;
}

.isoRecordList > div {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 10px;
}

.imsDocumentGrid {
  display: grid;
  gap: 14px;
}
.documentAreaTabs { display: flex; gap: 6px; flex-wrap: wrap; }
.documentAreaTabs button { background: #f4f6f8; border: 1px solid #d8dee7; color: #344054; }
.documentAreaTabs button[aria-pressed="true"] { background: #17665f; border-color: #17665f; color: #fff; }
.imsRegisterFilters { display: flex; gap: 12px; margin-bottom: 14px; }
.imsRegisterFilters input { flex: 1; min-width: 260px; }
.imsRegisterFilters select { width: 220px; }
.imsWorkflowDisclosure { border: 1px solid #dce2ea; border-radius: 6px; background: #fafbfc; }
.imsWorkflowDisclosure > summary { cursor: pointer; padding: 12px 14px; color: #344054; font-weight: 700; }
.imsWorkflowDisclosure > .isoWorkflowPanel { margin: 0 14px 14px; }
.imsTableScroll { width: 100%; overflow-x: auto; }
.imsRegisterTable { width: 100%; min-width: 1100px; table-layout: fixed; border-collapse: collapse; text-align: left; }
.imsRegisterTable th { background: #f0f3f6; color: #475467; padding: 12px 10px; border-bottom: 1px solid #dce2ea; font-size: 11px; text-transform: uppercase; }
.imsRegisterTable td { padding: 13px 10px; border-bottom: 1px solid #e8ecf1; color: #344054; font-size: 12px; line-height: 1.45; vertical-align: middle; overflow-wrap: anywhere; }
.imsRegisterTable tbody tr:hover td { background: #f8fafc; }
.imsRegisterTable th:nth-child(1) { width: 42px; }.imsRegisterTable th:nth-child(2) { width: 135px; }.imsRegisterTable th:nth-child(3) { width: 24%; }.imsRegisterTable th:nth-child(5) { width: 70px; }.imsRegisterTable th:nth-child(6) { width: 130px; }.imsRegisterTable th:nth-child(7) { width: 105px; }.imsRegisterTable th:nth-child(8) { width: 125px; }.imsRegisterTable th:nth-child(9) { width: 105px; }
.imsCodeLink { color: #17665f; font-weight: 700; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.imsCodeLink:hover { color: #0b4c47; text-decoration-color: currentColor; }
.imsTitleCell { font-weight: 600; }
.imsReviewCell { white-space: nowrap; font-variant-numeric: tabular-nums; }
.imsRegisterTable tr.expired .imsReviewCell { color: #b42318; font-weight: 700; }
.imsRegisterTable tr.soon .imsReviewCell { color: #9a6700; font-weight: 700; }
.imsRowActions { display: flex; gap: 5px; }
.imsRowActions button { min-height: 34px; padding: 6px 9px; }
.imsTableEmpty { padding: 36px 16px !important; text-align: center; color: #667085 !important; }
.imsEditorNavigation { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid #e8ecf1; }
@media (max-width: 700px) { .imsRegisterFilters { flex-direction: column; }.imsRegisterFilters input, .imsRegisterFilters select { width: 100%; min-width: 0; } }

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

.imsSummary article {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 12px;
}

.imsSummary span {
  color: var(--muted);
  font-size: 12px;
}

.imsSummary strong {
  color: var(--navy);
  font-size: 24px;
}

.imsCards {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.imsCard {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 14px;
}

.imsCard.active {
  border-color: var(--teal);
  box-shadow: 0 10px 24px rgba(20, 116, 110, 0.12);
}

.imsCard.expired {
  border-color: #fecaca;
}

.imsCard.soon {
  border-color: #fde68a;
}

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

.imsCard header div {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.imsCard strong {
  color: var(--navy);
}

.imsCard p,
.imsCard small {
  color: var(--muted);
}

.imsCard details {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}

.imsCard summary {
  color: var(--navy);
  cursor: pointer;
  font-weight: 800;
}

.imsCard pre {
  color: var(--text);
  font: inherit;
  max-height: 260px;
  overflow: auto;
  white-space: pre-wrap;
}

.imsCard dl {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.imsCard dt {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.imsCard dd {
  color: var(--text);
  font-weight: 700;
  margin: 0;
}

.imsApprovalBox {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-width: 0;
  overflow: hidden;
  padding: 10px;
}

.imsApprovalBox.approved {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.imsApprovalBox.pending {
  background: #fffbeb;
  border-color: #fde68a;
}

.imsApprovalBox > span {
  color: var(--muted);
  font-size: 12px;
}

.imsChecksEditor {
  background: #fbfcff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.imsApprovalChecks {
  display: grid;
  gap: 8px;
}

.imsCheckRow {
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
  padding: 10px;
}

.imsCheckRow input {
  margin-top: 3px;
}

.imsCheckRow span {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.imsCheckRow strong {
  color: var(--navy);
  overflow-wrap: anywhere;
}

.imsCheckRow small {
  color: var(--muted);
}

.imsChecksSummary {
  border-radius: 8px;
  display: grid;
  gap: 5px;
  padding: 10px;
}

.imsChecksSummary.complete {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.imsChecksSummary.pending {
  background: #fffbeb;
  border: 1px solid #fde68a;
}

.imsChecksSummary span,
.imsChecksSummary li {
  color: var(--muted);
  font-size: 12px;
}

.imsChecksSummary ul {
  margin: 0;
  padding-left: 18px;
}

.imsVersionNote {
  background: #eef7f5;
  border: 1px solid #cce7e3;
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 9px 10px;
}

.imsVersionNote.archived {
  background: #f8fafc;
  border-color: #d8dee9;
}

.imsVersionNote strong {
  color: var(--teal);
  font-size: 12px;
}

.imsVersionNote span {
  color: var(--text);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.imsApprovalRows {
  display: grid;
  gap: 6px;
}

.imsApprovalRows div {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: minmax(0, 1fr) 82px minmax(0, 1fr);
  min-width: 0;
}

.imsApprovalRows span,
.imsApprovalRows small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.imsApprovalRows b {
  color: var(--muted);
  white-space: nowrap;
}

.imsApprovalRows small {
  text-align: right;
}

.imsApprovalRows .done b {
  color: #15803d;
}

.imsApprovalRows .waiting b {
  color: #b45309;
}

.ncrPanel {
  border-top: 4px solid #0f766e;
}

.ncrWorkspace {
  align-items: start;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.1fr);
}

.ncrListPanel h3 {
  color: var(--navy);
  margin: 0 0 10px;
}

.ncrReportForm {
  display: grid;
  gap: 12px;
}

.ncrBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ncrBadge,
.ncrSeverityBadge {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
}

.ncrBadge.pending {
  background: #eef2ff;
  color: #1e3a8a;
}

.ncrBadge.soon {
  background: #ffedd5;
  color: #b45309;
}

.ncrBadge.warning {
  background: #fef3c7;
  color: #92400e;
}

.ncrBadge.review {
  background: #e0f2fe;
  color: #075985;
}

.ncrBadge.approved {
  background: #dcfce7;
  color: #166534;
}

.ncrBadge.cancelled {
  background: #f1f5f9;
  color: #475569;
}

.ncrSeverityBadge.low {
  background: #ecfeff;
  color: #0f766e;
}

.ncrSeverityBadge.medium {
  background: #fef9c3;
  color: #854d0e;
}

.ncrSeverityBadge.high {
  background: #ffedd5;
  color: #9a3412;
}

.ncrSeverityBadge.critical {
  background: #fee2e2;
  color: #b91c1c;
}

.ncrActionRow {
  align-items: center;
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 8px;
  grid-template-columns: 130px minmax(220px, 1fr) 170px 150px 120px auto;
  padding: 8px;
}

.ncrActionRow .ncrActionNotes {
  grid-column: 1 / -1;
}

.ncrActionDone {
  align-items: center;
  color: var(--navy);
  display: inline-flex;
  font-weight: 700;
  gap: 6px;
}

.workflowList {
  display: grid;
  gap: 8px;
  margin: 10px 0 12px;
}

.workflowStep {
  align-items: start;
  display: grid;
  gap: 8px;
  grid-template-columns: 22px 1fr;
}

.workflowStep span {
  align-items: center;
  background: #f3f1fb;
  border-radius: 999px;
  color: var(--navy);
  display: inline-flex;
  font-weight: 700;
  height: 22px;
  justify-content: center;
  width: 22px;
}

.workflowStep.done span {
  background: #dcfce7;
  color: var(--green);
}

.workflowStep small {
  color: var(--muted);
  display: block;
  margin-top: 2px;
}

.warehouseToolbar {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(150px, 1fr));
  margin: 0 16px 16px;
  padding: 12px;
}

.toolWarehouse {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(330px, 0.9fr) minmax(420px, 1.1fr);
  padding: 0 16px 16px;
}

.warehouseListPanel,
.toolEditor {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 38px rgba(23, 32, 42, 0.08);
  display: grid;
  gap: 12px;
  padding: 16px;
}

.warehouseDetailPanel {
  position: sticky;
  top: 16px;
}

.compactHead {
  margin-bottom: 0;
  padding: 0;
}

.toolCards {
  display: grid;
  gap: 10px;
}

.toolCard {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: inherit;
  display: grid;
  gap: 12px;
  grid-template-columns: 58px minmax(0, 1fr);
  padding: 12px;
  text-align: left;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.toolCard:hover,
.toolCard.active {
  border-color: var(--teal);
  box-shadow: 0 8px 20px rgba(15, 118, 110, 0.12);
  transform: translateY(-1px);
}

.toolThumb {
  align-items: center;
  aspect-ratio: 1;
  background: #e6ecef;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #415260;
  display: flex;
  font-weight: 800;
  justify-content: center;
  overflow: hidden;
  width: 58px;
}

.toolThumb img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.detailThumb {
  width: 128px;
}

.toolCardBody {
  min-width: 0;
}

.toolCardTitle,
.detailTitleLine {
  align-items: start;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.toolCardTitle h4,
.toolReadOnlyDetail h3 {
  margin: 0;
}

.toolMeta,
.toolCardFooter,
.warningText {
  color: var(--muted);
  font-size: 13px;
}

.toolCardFooter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.toolBadge {
  color: inherit;
  font-weight: 800;
}

.toolBadge.available {
  background: #dff7ec;
  color: var(--green);
}

.toolBadge.assigned {
  background: #e6efff;
  color: #2454b7;
}

.toolBadge.service {
  background: #ede7ff;
  color: var(--violet);
}

.toolBadge.failure {
  background: #fde7e4;
  color: var(--red);
}

.toolBadge.review {
  background: #fff1d7;
  color: #783f0b;
}

.toolBadge.retired {
  background: #edf0f2;
  color: #53616f;
}

.toolSubgrid {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
  padding-top: 14px;
}

.reservationList {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.timelineItem {
  background: #ffffff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  padding: 10px;
}

.timelineItem span {
  color: var(--muted);
  font-size: 13px;
}

.timelineItem.projectReservation {
  border-left-color: var(--teal);
}

.warningText {
  color: #a33a14;
  font-weight: 700;
}

.toolAttachmentItem {
  grid-template-columns: 56px 1fr auto auto;
}

.toolAttachmentItem img {
  aspect-ratio: 1;
  border-radius: 6px;
  object-fit: cover;
  width: 56px;
}

.attachmentBadge {
  align-items: center;
  aspect-ratio: 1;
  background: #eef3f7;
  border-radius: 6px;
  color: var(--navy);
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  justify-content: center;
  width: 56px;
}

.pendingAttachment strong {
  color: var(--navy);
  font-size: 14px;
}

.pendingAttachment em {
  color: var(--teal);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  text-align: right;
}

.warehouseStage {
  background: #f6f7f9;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.warehouseAppHeader {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 0 0 22px;
}

.warehouseAppHeader h2 {
  color: #071426;
  font-size: 28px;
  margin: 0;
}

.warehouseAppHeader .eyebrow {
  color: #64748b;
}

.warehouseTopActions {
  display: flex;
  gap: 10px;
}

.warehouseTopActions .primary,
.warehouseToolbar .primary {
  background: var(--teal);
  color: #ffffff;
}

.warehouseTopActions .secondary,
.labelsToolbar .secondary {
  background: #e4edf1;
  color: #071426;
}

.warehouseTabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.warehouseTab {
  background: #e4edf1;
  border: 0;
  border-radius: 8px;
  color: #173039;
  font-weight: 800;
  min-height: 38px;
  padding: 0 14px;
}

.warehouseTab.active {
  background: var(--teal);
  color: #ffffff;
}

.warehouseView {
  display: none;
}

.warehouseView.active {
  display: block;
}

.warehouseToolbar {
  grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(150px, 1fr)) auto;
  margin: 0 0 16px;
}

.labelsToolbar {
  grid-template-columns: minmax(220px, 420px);
}

.toolWarehouse {
  padding: 0;
}

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

.warehouseKpi,
.warehousePanel {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 38px rgba(23, 32, 42, 0.08);
  padding: 16px;
}

.warehouseKpi span {
  color: var(--muted);
  font-size: 13px;
}

.warehouseKpi strong {
  display: block;
  font-size: 30px;
  margin-top: 8px;
}

.warehouseContentGrid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-bottom: 16px;
}

.span7 {
  grid-column: span 7;
}

.span5 {
  grid-column: span 5;
}

.warehouseAlerts,
.warehouseBars {
  display: grid;
  gap: 10px;
}

.warehouseAlert {
  background: #f5f8fc;
  border-left: 4px solid var(--blue);
  border-radius: 8px;
  padding: 10px 12px;
}

.warehouseAlert.warning {
  border-color: var(--amber);
}

.warehouseAlert.danger {
  border-color: var(--red);
  color: #b42318;
  font-weight: 800;
}

.warehouseBarRow {
  display: grid;
  gap: 6px;
}

.warehouseBarLabel {
  color: var(--muted);
  display: flex;
  font-size: 13px;
  justify-content: space-between;
}

.warehouseBarTrack {
  background: #e9eef3;
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}

.warehouseBarFill {
  background: var(--teal);
  height: 100%;
}

.tableWrap {
  overflow: auto;
}

.tableWrap table {
  border-collapse: collapse;
  width: 100%;
}

.tableWrap th,
.tableWrap td {
  border-bottom: 1px solid var(--line);
  padding: 10px 8px;
  text-align: left;
  vertical-align: top;
}

.tableWrap th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.toolReadOnlyDetail {
  display: grid;
  gap: 16px;
}

.toolDetailHead {
  display: grid;
  gap: 16px;
  grid-template-columns: 170px minmax(0, 1fr);
}

.toolDetailHead .detailThumb {
  width: 170px;
}

.detailActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

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

.toolDetailField {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.toolDetailField span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-bottom: 4px;
}

.toolCalendarPanel {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 12px;
}

.toolCalendarLegend {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
}

.toolCalendarLegend span {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.toolCalendarLegend i {
  border-radius: 999px;
  display: inline-block;
  height: 10px;
  width: 10px;
}

.legendReserved {
  background: #f6c453;
}

.legendProject {
  background: #68a5ff;
}

.legendActive {
  background: var(--teal);
}

.toolCalendarMonths {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.toolCalendarMonth {
  background: #fbfcff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.toolCalendarMonth h4 {
  color: #071426;
  font-size: 14px;
  margin: 0 0 8px;
  text-transform: capitalize;
}

.toolCalendarWeekdays,
.toolCalendarGrid {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.toolCalendarWeekdays span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}

.toolCalendarDay {
  align-items: center;
  background: #ffffff;
  border: 1px solid #e3e8f0;
  border-radius: 6px;
  color: #172033;
  display: flex;
  font-size: 12px;
  font-weight: 700;
  justify-content: center;
  min-height: 30px;
}

.toolCalendarDay.empty {
  background: transparent;
  border-color: transparent;
}

.toolCalendarDay.today {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 1px var(--navy);
}

.toolCalendarDay.reserved {
  background: #fff0bd;
  border-color: #f6c453;
  color: #6d4300;
}

.toolCalendarDay.project {
  background: #dceaff;
  border-color: #68a5ff;
  color: #173d7a;
}

.toolCalendarDay.activeReservation {
  background: #c9f3ea;
  border-color: var(--teal);
  color: #0b6f65;
}

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

.toolCalendarReservation {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 3px;
  padding: 9px 10px;
}

.toolCalendarReservation span {
  color: var(--muted);
  font-size: 12px;
}

.toolEmptyState {
  color: var(--muted);
  display: grid;
  gap: 10px;
  min-height: 220px;
  place-items: center;
  text-align: center;
}

.toolEditArea {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  padding-top: 14px;
}

.datePresetField {
  align-content: start;
}

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

.miniDateButton {
  background: #e4edf1;
  border: 1px solid #8aa1b2;
  border-radius: 6px;
  color: #071426;
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  min-height: 34px;
  padding: 7px 11px;
}

.miniDateButton:hover {
  background: #d8e8ef;
  border-color: #0f766e;
}

.labelsGrid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.toolLabelCard {
  background: #ffffff;
  border: 1px dashed #8793a0;
  border-radius: 8px;
  display: grid;
  gap: 8px;
  min-height: 132px;
  padding: 12px;
}

.labelCode {
  color: #071426;
  font-size: 24px;
  font-weight: 900;
}

.barcode {
  align-items: stretch;
  display: flex;
  gap: 2px;
  height: 40px;
}

.barcode span {
  background: #111820;
  display: block;
}

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

.operationForm .full {
  grid-column: 1 / -1;
}

.operationTimeline {
  display: grid;
  gap: 10px;
  max-height: 590px;
  overflow: auto;
}

.operationItem {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 12px;
}

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

.operationItem header span {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 13px;
}

.personnelKpis {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  padding: 16px 16px 0;
}

.personnelKpis article {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  min-height: 82px;
  padding: 14px;
}

.personnelKpis span {
  color: var(--muted);
  font-size: 13px;
}

.personnelKpis strong {
  color: var(--navy);
  font-size: 28px;
}

.personnelKpis small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  min-height: 32px;
  overflow-wrap: anywhere;
}

.archiveKpis {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  padding: 16px;
}

.archiveKpi {
  border: 1px solid var(--line);
  border-top: 3px solid var(--gold);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  min-height: 84px;
  padding: 14px;
}

.archiveKpi span,
.archiveMeta,
.archiveDate {
  color: var(--muted);
  font-size: 13px;
}

.archiveKpi strong {
  color: var(--navy);
  font-size: 26px;
}

.archiveToolbar {
  align-items: end;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(260px, 1fr) minmax(210px, 320px);
  padding: 16px;
}

.archiveList {
  border-top: 1px solid var(--line);
  display: grid;
}

.archiveRow {
  align-items: start;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 16px;
}

.archiveRow:last-child {
  border-bottom: 0;
}

.archiveRow h3 {
  color: var(--navy);
  font-size: 16px;
  margin: 3px 0 6px;
}

.archiveRow p {
  line-height: 1.45;
  margin: 4px 0;
  overflow-wrap: anywhere;
}

.archiveType {
  color: var(--amber);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.archiveFiles {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.archiveFiles a {
  background: #f5f4fc;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--navy);
  font-size: 12px;
  max-width: 280px;
  overflow: hidden;
  padding: 6px 9px;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.archiveFiles a:hover {
  border-color: var(--gold);
}

.personnelWorkspace {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
  padding: 16px;
}

.personnelSidebar,
.personnelDetail {
  background: #fbfcff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
}

.personnelList {
  display: grid;
  gap: 10px;
  max-height: 780px;
  overflow: auto;
}

.personCard {
  align-items: center;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: inherit;
  cursor: pointer;
  display: grid;
  gap: 12px;
  grid-template-columns: 52px 1fr;
  padding: 12px;
  text-align: left;
}

.personCard.active {
  border-color: var(--teal);
  box-shadow: 0 10px 24px rgba(20, 116, 110, 0.13);
}

.personAvatar {
  align-items: center;
  background: #e8eef5;
  border-radius: 10px;
  color: var(--navy);
  display: grid;
  font-weight: 900;
  height: 52px;
  place-items: center;
  width: 52px;
}

.personCard strong,
.personCard small,
.personCard em {
  display: block;
}

.personCard strong {
  color: var(--navy);
  font-size: 15px;
}

.personCard small,
.personCard em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  line-height: 1.35;
}

.personnelDetail {
  display: grid;
  gap: 16px;
}

.personCreateNotice {
  align-items: flex-start;
  background: #fff8eb;
  border: 1px solid #f4c96a;
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
}

.personCreateNotice strong {
  color: var(--navy);
}

.personCreateNotice span {
  color: var(--muted);
  font-size: 13px;
}

.personHeader {
  align-items: flex-start;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.personHeader h3 {
  color: var(--navy);
  font-size: 24px;
}

.personDocumentsPanel {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 14px;
  padding-top: 14px;
}

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

.documentForm button {
  align-self: end;
}

.personDocumentGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.personDocumentCard {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 14px;
}

.personDocumentCard.active {
  border-color: var(--teal);
  box-shadow: 0 10px 24px rgba(20, 116, 110, 0.12);
}

.personDocumentCard.expired {
  border-color: #fecaca;
}

.personDocumentCard.soon {
  border-color: #fde68a;
}

.personDocumentCard.locked {
  border-color: var(--teal);
  background: #fbfffd;
}

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

.personDocumentCard header div {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.personDocumentCard strong {
  color: var(--navy);
}

.personDocumentCard p,
.personDocumentCard small {
  color: var(--muted);
}

.windaStatusLine {
  color: var(--teal) !important;
  font-weight: 700;
}

.docIcon {
  background: #eef7f5;
  border-radius: 8px;
  color: var(--teal);
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 900;
  padding: 8px 7px;
}

.docStatus {
  border-radius: 999px;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  padding: 5px 9px;
}

.docStatus.valid {
  background: #dcfce7;
  color: #166534;
}

.docStatus.soon {
  background: #fef3c7;
  color: #92400e;
}

.docStatus.expired {
  background: #fee2e2;
  color: #b91c1c;
}

.docStatus.missing {
  background: #e5e7eb;
  color: #374151;
}

.personDocumentCard dl {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.personDocumentCard dt {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.personDocumentCard dd {
  color: var(--text);
  font-weight: 700;
  margin: 0;
}

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

.immutableBadge {
  align-items: center;
  background: #eef7f5;
  border-radius: 8px;
  color: var(--teal);
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  padding: 0 10px;
}

.subcontractorPanel {
  background: #fbfcff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 14px;
}

.subcontractorToggle {
  color: var(--navy);
  font-weight: 700;
}

.subcontractorToggleGroup {
  display: grid;
  gap: 10px;
}

.subcontractorFields {
  display: grid;
  gap: 14px;
}

.subcontractorFields.disabledBlock {
  opacity: 0.55;
}

.subcontractorOrderTracking {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding-top: 10px;
}

.subcontractorOrderStep {
  grid-template-columns: 140px minmax(0, 1fr);
}

.subcontractorOrderStep.done {
  background: #f6fffa;
  border-color: #b7eadb;
}

.subcontractorOrderMeta {
  color: var(--muted);
  font-size: 12px;
}

.compactHead {
  align-items: center;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.subcontractorList,
.fieldReportList {
  display: grid;
  gap: 10px;
}

.subcontractorItem,
.fieldReportItem,
.crewFieldReport {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.subcontractorItemHead,
.fieldReportHead {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.subcontractorItemGrid,
.crewFieldReportGrid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.crewFieldReport textarea {
  min-height: 74px;
}

.fieldReportFiles {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

input[readonly] {
  background: #f7f8fc;
  color: var(--navy);
  font-weight: 700;
}

.projectBadge {
  background: #eef2f6;
  color: #344054;
  font-weight: 700;
}

.projectBadge.new {
  background: #eef2f6;
  color: #344054;
}

.projectBadge.preparation,
.projectBadge.materials {
  background: #fff4df;
  color: #783f0b;
}

.projectBadge.ready {
  background: #e7f3f0;
  color: #12564d;
}

.projectBadge.acceptance {
  background: #e5f5f0;
  color: #085748;
}

.projectBadge.in_progress {
  background: #e8f0ff;
  color: #1e40af;
}

.projectBadge.documentation {
  background: #f0eaff;
  color: #5b21b6;
}

.projectBadge.closed {
  background: #e5f5e9;
  color: #14582d;
}

.padded {
  padding: 12px 16px 0;
}

.compactItem {
  display: grid;
  gap: 4px;
}

.catalogItem {
  align-items: center;
  grid-template-columns: 1fr auto;
}

.catalogInfo {
  display: grid;
  gap: 4px;
}

.catalogInfo strong {
  color: var(--navy);
}

.catalogActions {
  display: flex;
  gap: 8px;
  justify-content: end;
}

.catalogDelete {
  min-height: 34px;
}

.compactItem button {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
  text-align: left;
}

.compactItem .catalogActions .secondary {
  background: var(--soft);
  border: 0;
  border-radius: 6px;
  color: var(--navy);
  font-weight: 700;
  min-height: 34px;
  padding: 6px 10px;
  text-align: center;
}

.compactItem .catalogDelete {
  background: #fee2e2;
  border-radius: 6px;
  color: var(--red);
  font-weight: 700;
  min-height: 34px;
  padding: 6px 10px;
  text-align: center;
}

.auditList {
  max-height: 360px;
  overflow: auto;
  padding: 0 16px 16px;
}

.compactList {
  max-height: 320px;
  overflow: auto;
  padding: 0 16px 16px;
}

dialog {
  border: 1px solid var(--line);
  border-radius: 8px;
  max-width: 680px;
  width: min(680px, calc(100vw - 32px));
}

.dialogBody {
  display: grid;
  gap: 14px;
}

.dialogChecklist {
  margin: 8px 0 0;
  padding-left: 18px;
}

.dialogChecklist li {
  margin: 0 0 4px;
}

@media (max-width: 1180px) {
  .dashboard {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboardKpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .five {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  .stageNav,
  .dashboard,
  .workarea,
  .projectsPanel,
  .projectsPanel.toolPanel.wide,
  .calendarStage,
  .calendarStage.toolPanel.wide,
  .crewStage,
  .crewStage.toolPanel.wide,
  .portalStage,
  .portalStage.toolPanel.wide,
  .contractorPortalStage,
  .contractorPortalStage.toolPanel.wide,
  .employeePortalStage,
  .employeePortalStage.toolPanel.wide,
  .documentsStage,
  .documentsStage.toolPanel.wide,
  .thermalStage,
  .thermalStage.toolPanel.wide,
  .opsGrid,
  .customersStage,
  .customersStage.toolPanel.wide,
  .suppliersStage,
  .suppliersStage.toolPanel.wide,
  .toolsStage,
  .toolsStage.toolPanel.wide,
  .rentalsStage,
  .rentalsStage.toolPanel.wide,
  .fleetStage,
  .fleetStage.toolPanel.wide,
  .teamStage,
  .teamStage.toolPanel.wide,
  .archiveStage,
  .archiveStage.toolPanel.wide {
    grid-column: 1;
  }

  .stageNav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    position: static;
  }

  .workarea,
  .controlDashboard,
  .projectWorkspace,
  .opsGrid,
  .opsBoard,
  .crewInfoGrid,
  .progressGrid,
  .portalMeta,
  .contractorPortalWorkspace,
  .contractorInfoGrid,
  .employeePortalSummary,
  .employeeDocGrid,
  .employeeDocCard dl,
  .documentsWorkspace,
  .thermalWorkspace,
  .ncrWorkspace,
  .warehouseToolbar,
  .warehouseContentGrid,
  .toolWarehouse,
  .rentalWorkspace,
  .fleetWorkspace,
  .personnelKpis,
  .archiveKpis,
  .archiveToolbar,
  .archiveRow,
  .personnelWorkspace,
  .documentForm,
  .personDocumentCard dl,
  .imsSummary,
  .isoWorkflowStats,
  .isoWorkflowColumns,
  .imsCards,
  .imsCard dl,
  .toolSubgrid,
  .ncrActionRow {
    grid-template-columns: 1fr;
  }

  .personHeader {
    display: grid;
  }

  .span5,
  .span7 {
    grid-column: 1;
  }

  .quoteList {
    max-height: none;
  }

  .imsApprovalRows div {
    align-items: start;
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .topbar,
  .panelHead,
  .itemsHead,
  .totals,
  .isoWorkflowHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .brandLockup {
    align-items: flex-start;
    flex-direction: column;
  }

  .brandLockup img {
    width: 150px;
  }

  .crewCardHead {
    display: grid;
  }

  .dashboard,
  .dashboardKpis,
  .two,
  .three,
  .four,
  .five,
  .operationForm,
  .itemRow,
  .projectMaterialLine,
  .projectToolLine,
  .projectChecklistItem,
  .subcontractorOrderStep,
  .crewCardHead,
  .teamChoice,
  .toolCard,
  .toolDetailHead,
  .toolDetailGrid,
  .isoActionItem {
    grid-template-columns: 1fr;
  }

  .actions,
  .lookupField,
  .attachmentItem,
  .topActions {
    grid-template-columns: 1fr;
    width: 100%;
  }

  .fleetRow {
    grid-template-columns: 1fr;
  }
}
.projectSaveState {
  align-self: center;
  color: #64748b;
  font-size: 12px;
  white-space: nowrap;
}

.projectSaveState[data-state="saving"],
.projectSaveState[data-state="pending"] {
  color: #9a5a00;
}

.projectSaveState[data-state="error"] {
  color: #b42318;
  font-weight: 700;
}

.projectNextAction {
  align-items: center;
  background: #f4f8f7;
  border: 1px solid #9fd6cc;
  border-left: 4px solid #0f7f73;
  border-radius: 6px;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin: 12px 0 18px;
  padding: 14px 16px;
}

.projectNextAction > div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.projectNextAction strong {
  color: #161650;
  font-size: 17px;
}

.projectNextAction small {
  color: #52627a;
  font-size: 13px;
}

.workflowComplete {
  color: #087467;
  font-size: 13px;
  font-weight: 700;
  padding: 9px 0;
}

.contractorPortalWorkspace {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(280px, 360px) minmax(0, 1fr);
  padding: 16px;
}

.contractorProjectPanel,
.contractorProjectDetail,
.contractorPortalSection {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.contractorProjectPanel {
  align-self: start;
  overflow: hidden;
}

.contractorPanelTitle,
.contractorProjectHeader,
.contractorReportCard header,
.contractorReportActions,
.contractorCardTop {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.contractorPanelTitle {
  border-bottom: 1px solid var(--line);
  padding: 14px;
}

.contractorPanelTitle h3,
.contractorProjectHeader h3 {
  margin: 0;
}

.contractorProjectList {
  display: grid;
  gap: 8px;
  max-height: 72vh;
  overflow-y: auto;
  padding: 10px;
}

.contractorProjectCard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  display: grid;
  gap: 5px;
  padding: 12px;
  text-align: left;
  width: 100%;
}

.contractorProjectCard:hover,
.contractorProjectCard.active {
  border-color: var(--teal);
}

.contractorProjectCard.active {
  box-shadow: inset 3px 0 0 var(--teal);
}

.contractorProjectCard em {
  background: #fff2d7;
  border-radius: 999px;
  color: #8b4d00;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  padding: 3px 7px;
}

.contractorProjectCard small {
  color: var(--muted);
  line-height: 1.35;
}

.contractorProjectDetail {
  min-width: 0;
  padding: 16px;
}

.emptyState {
  align-items: center;
  color: var(--muted);
  display: grid;
  gap: 6px;
  justify-items: center;
  min-height: 220px;
  text-align: center;
}

.contractorProjectHeader {
  align-items: start;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
  padding-bottom: 14px;
}

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

.contractorInfoGrid article {
  background: #f7f9fc;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 5px;
  padding: 11px;
}

.contractorInfoGrid span,
.requestedAction span,
.metricResponse span {
  color: var(--muted);
  font-size: 12px;
}

.contractorPortalSection {
  margin-top: 14px;
  padding: 14px;
}

.contractorReportForm,
.contractorReportList {
  display: grid;
  gap: 12px;
}

.contractorReportActions {
  justify-content: flex-start;
}

.contractorReportActions .primary {
  margin-left: auto;
}

.contractorReportCard {
  border: 1px solid var(--line);
  border-left: 4px solid #6f7c91;
  border-radius: 6px;
  display: grid;
  gap: 10px;
  padding: 12px;
}

.contractorReportCard.priority-high {
  border-left-color: #e19a13;
}

.contractorReportCard.priority-critical {
  border-left-color: #d83b3b;
}

.contractorReportCard p {
  margin: 0;
  white-space: pre-wrap;
}

.contractorReportType {
  color: var(--navy);
  font-weight: 800;
}

.reportStatus {
  background: #edf1f6;
  border-radius: 999px;
  color: #445168;
  font-size: 12px;
  font-weight: 800;
  padding: 5px 9px;
}

.reportStatus.acknowledged,
.reportStatus.in_progress {
  background: #fff2d7;
  color: #875000;
}

.reportStatus.resolved,
.reportStatus.closed {
  background: #dcf6ee;
  color: #087467;
}

.requestedAction,
.metricResponse {
  background: #f7f9fc;
  border-radius: 4px;
  display: grid;
  gap: 4px;
  padding: 9px 10px;
}

.metricResponse {
  background: #eaf8f4;
  border-left: 3px solid var(--teal);
}

.contractorReportManage {
  background: #f7f9fc;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto;
  padding: 10px;
}

.contractorReportManage button {
  align-self: end;
}

.contractorReportManage > label {
  align-self: start;
  min-width: 0;
}

.compactCheck {
  align-self: center;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .projectNextAction {
    align-items: stretch;
    flex-direction: column;
  }

  .projectNextAction button {
    width: 100%;
  }

  .contractorPortalWorkspace,
  .contractorInfoGrid,
  .contractorReportManage {
    grid-template-columns: 1fr;
  }

  .contractorReportActions,
  .contractorProjectHeader {
    align-items: stretch;
    flex-direction: column;
  }

  .contractorReportActions .primary {
    margin-left: 0;
  }
}

/* Interface refresh: compact operational layout */
:root {
  --ink: #182230;
  --muted: #667085;
  --line: #d8dee8;
  --line-strong: #c7cfdb;
  --panel: #ffffff;
  --page: #f5f7fa;
  --navy: #26235d;
  --navy-dark: #1d194b;
  --gold: #f6a91a;
  --gold-soft: #fff6df;
  --teal: #117c73;
  --blue: #2864dc;
  --red: #b42318;
  --green: #147a43;
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.07);
}

html {
  background: var(--page);
}

body {
  background: var(--page);
  overflow-x: hidden;
}

button,
a,
input,
select,
textarea,
summary {
  transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.topbar {
  background: var(--navy-dark);
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 6px 18px rgba(16, 24, 40, 0.14);
  gap: 24px;
  min-height: 76px;
  overflow: visible;
  padding: 10px clamp(16px, 2.4vw, 32px);
  position: sticky;
  top: 0;
  z-index: 40;
}

.topbar::before {
  display: none;
}

.brandLockup {
  gap: 20px;
  min-width: 0;
}

.brandLogoNoTagline {
  flex: 0 0 auto;
  gap: 9px;
}

.brandMarkBubble {
  height: 40px;
  width: 40px;
}

.brandLogoNoTagline .brandMarkImage {
  height: 31px;
  width: 31px;
}

.brandWord {
  font-size: 22px;
  letter-spacing: 6px;
}

.brandCopy {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-left: 18px;
}

.brandCopy .appSection {
  color: var(--gold);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.brandCopy h1 {
  color: #ffffff;
  font-size: 19px;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
}

.topActions {
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
}

.topActions label {
  min-width: 0;
}

.currentUserBox {
  gap: 2px;
  min-width: 220px;
}

.currentUserBox span {
  font-size: 11px;
}

.currentUserBox strong {
  font-size: 13px;
}

.currentUserBox select {
  background: #ffffff;
  border: 0;
  min-height: 36px;
  padding: 7px 32px 7px 10px;
}

.utilityMenu {
  position: relative;
}

.utilityMenu summary {
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  min-height: 36px;
  padding: 7px 12px;
}

.utilityMenu summary::-webkit-details-marker {
  display: none;
}

.utilityMenu summary::after {
  content: "\25BE";
  font-size: 10px;
  margin-left: 8px;
}

.utilityMenu[open] summary,
.utilityMenu summary:hover {
  background: rgba(255, 255, 255, 0.18);
}

.utilityMenuPanel {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.18);
  display: grid;
  gap: 8px;
  min-width: 260px;
  padding: 10px;
  position: absolute;
  right: 0;
  top: calc(100% + 9px);
  z-index: 50;
}

.utilityMenuPanel .hint {
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  line-height: 1.4;
  margin: 0 0 2px;
  overflow-wrap: anywhere;
  padding: 4px 4px 9px;
}

.utilityMenuPanel .secondary,
.utilityMenuPanel .linkLike {
  justify-content: flex-start;
  width: 100%;
}

.topActions > .secondary {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  min-height: 36px;
}

.layout {
  align-items: start;
  gap: 16px;
  grid-template-columns: 224px minmax(0, 1fr);
  max-width: 1920px;
  padding: 16px clamp(12px, 2vw, 28px) 32px;
  width: 100%;
}

.layout > * {
  min-width: 0;
}

.stageNav {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  gap: 2px;
  max-height: calc(100vh - 108px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px;
  scrollbar-color: #c7cfdb transparent;
  scrollbar-width: thin;
  top: 92px;
}

.stageNavLabel {
  color: #8a94a6;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  margin: 10px 10px 4px;
  text-transform: uppercase;
}

.stageNavLabel:first-child {
  margin-top: 4px;
}

.stageTab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  box-shadow: none;
  gap: 2px;
  min-height: 53px;
  padding: 8px 44px 8px 10px;
}

.stageTab:hover {
  background: #f6f7fb;
  border-color: #e8ebf1;
}

.stageTab strong {
  color: #273142;
  font-size: 14px;
  line-height: 1.2;
}

.stageTab span {
  font-size: 11px;
  line-height: 1.25;
}

.stageTab small {
  background: #eef1f6;
  color: #475467;
  font-size: 11px;
  height: 24px;
  min-width: 24px;
  padding: 0 7px;
  right: 9px;
  top: 14px;
}

.stageTab.active {
  background: #f0f1fa;
  border-color: #dedff0;
  box-shadow: inset 3px 0 0 var(--gold);
}

.stageTab.active::before {
  display: none;
}

.stageTab.active strong,
.stageTab.active small {
  color: var(--navy);
}

.dashboard,
.workarea,
.projectsPanel,
.opsGrid,
.calendarStage,
.crewStage,
.portalStage,
.contractorPortalStage,
.documentsStage,
.thermalStage,
.customersStage,
.suppliersStage,
.toolsStage,
.rentalsStage,
.fleetStage,
.teamStage,
.archiveStage {
  width: 100%;
}

.dashboard article,
.dashboardHero,
.dashboardPanel,
.listPanel,
.editorPanel,
.toolPanel {
  border-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.dashboard {
  gap: 10px;
  margin-bottom: 16px;
}

.dashboard article {
  border-top: 0;
  min-height: 82px;
  padding: 14px;
  position: relative;
}

.dashboard article::before {
  background: var(--gold);
  border-radius: 0 0 3px 3px;
  content: "";
  height: 3px;
  left: 14px;
  position: absolute;
  top: 0;
  width: 36px;
}

.dashboard strong {
  font-size: 24px;
  margin-top: 8px;
}

.dashboardHero,
.dashboardPanel {
  box-shadow: var(--shadow-sm);
}

.dashboardHero {
  padding: 16px;
}

.dashboardHero h2 {
  font-size: 21px;
}

.workarea {
  gap: 14px;
  grid-template-columns: 340px minmax(0, 1fr);
}

.listPanel {
  position: sticky;
  top: 92px;
}

.panelHead {
  gap: 10px;
  padding: 14px 16px;
}

.panelHead h2 {
  font-size: 18px;
}

.stackHead {
  gap: 10px;
}

.quoteList {
  gap: 7px;
  max-height: calc(100vh - 272px);
  padding: 9px;
}

.quoteCard,
.projectCard {
  border-color: #dfe4ec;
  box-shadow: none;
  gap: 6px;
  padding: 11px 12px;
}

.quoteCard:hover,
.quoteCard.active,
.projectCard:hover,
.projectCard.active {
  border-color: #d4a137;
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.07);
}

.quoteCard.active,
.projectCard.active {
  background: #fffcf5;
  box-shadow: inset 3px 0 0 var(--gold);
}

.quoteClient,
.projectList .quoteClient {
  font-size: 14px;
  line-height: 1.3;
}

.quoteSummary,
.quoteMeta,
.projectList .quoteMeta {
  font-size: 12px;
  line-height: 1.35;
}

.editorPanel > form > .panelHead {
  background: rgba(255, 255, 255, 0.97);
  position: sticky;
  top: 79px;
  z-index: 20;
}

.actions,
.statusActions {
  gap: 7px;
}

.primary,
.secondary,
.removeItem,
.linkButton,
.linkLike {
  border: 1px solid transparent;
  border-radius: 6px;
  min-height: 38px;
  padding: 8px 12px;
}

.primary {
  box-shadow: 0 1px 2px rgba(113, 75, 0, 0.18);
}

.secondary {
  background: #ffffff;
  border-color: var(--line);
  color: var(--navy);
}

.secondary:hover {
  background: #f7f8fb;
  border-color: var(--line-strong);
}

.dangerSoft {
  background: #fff1f0;
  border-color: #ffd5d2;
  color: var(--red);
}

input,
select,
textarea {
  border-color: var(--line-strong);
  border-radius: 6px;
  min-height: 42px;
  padding: 9px 11px;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #aeb8c7;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #887323;
  box-shadow: 0 0 0 3px rgba(246, 169, 26, 0.14);
}

label {
  color: #536174;
  font-size: 12px;
  font-weight: 600;
  gap: 6px;
}

.richTextToolbar {
  background: #f7f8fb;
  border-color: var(--line);
  padding: 5px;
}

.richTextToolbar button {
  background: #ffffff;
  border-color: var(--line);
  color: #344054;
}

.totals {
  background: var(--gold-soft);
  border-color: #f1dda9;
}

.projectsPanel,
.largeProjectsStage,
.calendarStage,
.crewStage,
.portalStage,
.contractorPortalStage,
.documentsStage,
.thermalStage,
.customersStage,
.suppliersStage,
.toolsStage,
.rentalsStage,
.fleetStage,
.teamStage,
.archiveStage {
  margin-top: 0;
}

.projectWorkspace {
  gap: 14px;
  grid-template-columns: 330px minmax(0, 1fr);
  padding: 14px;
}

.projectWorkspace > *,
.largeProjectWorkspace > *,
.rentalWorkspace > *,
.fleetWorkspace > *,
.thermalWorkspace > * {
  min-width: 0;
}

.recordTableScroll {
  overflow-x: auto;
  width: 100%;
}

.recordRegisterTable {
  border-collapse: collapse;
  min-width: 940px;
  table-layout: auto;
  width: 100%;
}

.recordRegisterTable th {
  background: #f3f5f8;
  color: #566176;
  font-size: 11px;
  font-weight: 700;
  padding: 11px 12px;
  text-align: left;
  text-transform: uppercase;
}

.recordRegisterTable td {
  border-bottom: 1px solid var(--line);
  padding: 13px 12px;
  vertical-align: middle;
}

.recordRegisterTable tbody tr:hover {
  background: #fafbfc;
}

.recordNumberLink {
  background: transparent;
  border: 0;
  color: #08766c;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 0;
  text-align: left;
}

.recordNumberLink:hover {
  text-decoration: underline;
}

.recordStrong {
  color: var(--ink);
  font-weight: 700;
}

.recordMeta {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 400;
  margin-top: 4px;
}

.recordAmount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.recordOverdue {
  color: var(--danger);
  font-weight: 700;
}

.recordEditButton {
  min-height: 34px;
  padding: 7px 12px;
  white-space: nowrap;
}

.recordTableEmpty {
  color: var(--muted);
  padding: 28px !important;
  text-align: center;
}

.recordEditorNavigation {
  border-bottom: 1px solid var(--line);
  margin-bottom: 18px;
  padding-bottom: 12px;
}

.toolWarehouse,
.rentalWorkspace,
.fleetWorkspace {
  display: block;
}

.warehouseListPanel,
.rentalListPanel,
.fleetListPanel {
  max-width: none;
  width: 100%;
}

.personnelWorkspace {
  display: block;
}

.personnelSidebar {
  max-width: none;
  width: 100%;
}

.personnelRegisterTable {
  min-width: 1100px;
}

.projectList {
  gap: 8px;
  max-height: calc(100vh - 225px);
  min-height: 0;
  padding-right: 5px;
}

.projectList .quoteNumber {
  font-size: 15px;
}

.projectList .quoteMeta:nth-of-type(2) {
  background: #f6f7f9;
  padding: 6px 8px;
}

.projectHeader {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.projectHeader .actions {
  justify-content: flex-end;
  margin-left: auto;
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.projectForm {
  container-type: inline-size;
  gap: 14px;
  min-width: 0;
}

.projectForm > *,
.projectForm .grid,
.projectForm .actions,
.projectNextAction {
  max-width: 100%;
  min-width: 0;
  width: 100%;
}

.projectHeader > div:first-child,
.projectTitle,
#projectTitle,
#projectSubtitle {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
}

.projectList .quoteMeta {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.projectList .projectMeta {
  margin-top: 3px;
}

.projectSectionHead,
.projectLines,
.projectLine,
.projectLine > * {
  max-width: 100%;
  min-width: 0;
}

.projectMaterialLine {
  grid-template-columns: minmax(130px, 1.4fr) 70px 70px 118px minmax(110px, 1fr) 44px;
}

.projectToolLine {
  grid-template-columns: minmax(120px, 1.1fr) minmax(150px, 1.4fr) 92px minmax(110px, 1fr) 44px;
}

@container (max-width: 760px) {
  .projectMaterialLine,
  .projectToolLine,
  .projectIsoControlItem {
    grid-template-columns: minmax(150px, 1fr) minmax(120px, 1fr) 74px;
  }

  .projectChecklistItem {
    grid-template-columns: 110px minmax(0, 1fr) 44px;
  }
}

@container (max-width: 520px) {
  .projectMaterialLine,
  .projectToolLine,
  .projectIsoControlItem,
  .projectChecklistItem {
    grid-template-columns: minmax(0, 1fr);
  }

  .projectLine .removeItem,
  .projectChecklistItem .removeItem {
    justify-self: end;
  }
}

.projectGroup {
  border-top: 1px solid var(--line);
  gap: 10px;
  padding-top: 14px;
}

.goNoGoCard,
.workflowControlItem,
.requirementMatrix div,
.fleetSubpanel,
.rentalInfoBox {
  background: #f8fafc;
}

.notice,
.errors {
  border-radius: 6px;
  line-height: 1.45;
}

.archiveKpis {
  gap: 10px;
}

.archiveKpi {
  box-shadow: none;
}

.archiveToolbar {
  background: #f8fafc;
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
}

.archiveRow {
  padding: 14px 16px;
}

@media (max-width: 1320px) {
  .layout {
    grid-template-columns: 208px minmax(0, 1fr);
    padding-left: 12px;
    padding-right: 12px;
  }

  .workarea {
    grid-template-columns: 310px minmax(0, 1fr);
  }

  .projectWorkspace {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .brandCopy {
    display: none;
  }
}

@media (max-width: 1040px) {
  .topbar {
    position: relative;
  }

  .layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding-top: 10px;
  }

  .stageNav {
    align-items: stretch;
    display: flex;
    gap: 6px;
    grid-column: 1;
    max-height: none;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 7px;
    position: sticky;
    top: 0;
    z-index: 30;
  }

  .stageNavLabel {
    display: none;
  }

  .stageTab {
    flex: 0 0 154px;
    min-height: 50px;
  }

  .dashboard,
  .workarea,
  .projectsPanel,
  .opsGrid,
  .calendarStage,
  .crewStage,
  .portalStage,
  .contractorPortalStage,
  .documentsStage,
  .thermalStage,
  .customersStage,
  .suppliersStage,
  .toolsStage,
  .rentalsStage,
  .fleetStage,
  .teamStage,
  .archiveStage,
  .projectsPanel.toolPanel.wide,
  .largeProjectsStage.toolPanel.wide,
  .calendarStage.toolPanel.wide,
  .crewStage.toolPanel.wide,
  .portalStage.toolPanel.wide,
  .contractorPortalStage.toolPanel.wide,
  .documentsStage.toolPanel.wide,
  .thermalStage.toolPanel.wide,
  .customersStage.toolPanel.wide,
  .suppliersStage.toolPanel.wide,
  .toolsStage.toolPanel.wide,
  .rentalsStage.toolPanel.wide,
  .fleetStage.toolPanel.wide,
  .teamStage.toolPanel.wide,
  .archiveStage.toolPanel.wide {
    grid-column: 1;
  }

  .listPanel,
  .editorPanel > form > .panelHead {
    position: static;
  }

  .workarea {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .projectWorkspace {
    grid-template-columns: 290px minmax(0, 1fr);
  }
}

@media (max-width: 780px) {
  .topbar {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
  }

  .brandLockup {
    justify-content: center;
  }

  .topActions {
    align-items: stretch;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .currentUserBox {
    min-width: 0;
  }

  .utilityMenuPanel {
    left: auto;
    max-width: calc(100vw - 24px);
    right: 0;
  }

  .workarea,
  .projectWorkspace,
  .largeProjectWorkspace,
  .rentalWorkspace,
  .fleetWorkspace,
  .thermalWorkspace,
  .controlDashboard,
  .opsGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .quoteList,
  .projectList {
    max-height: 420px;
  }

  .projectList {
    min-height: 0;
  }

  .dashboardKpis,
  .largeProjectKpis,
  .two,
  .three,
  .four,
  .five {
    grid-template-columns: minmax(0, 1fr);
  }

  .panelHead,
  .projectHeader,
  .itemsHead,
  .totals {
    align-items: stretch;
    flex-direction: column;
  }

  .panelHead .actions,
  .projectHeader .actions {
    justify-content: flex-start;
    margin-left: 0;
  }

  .actions > button,
  .actions > a,
  .statusActions > button {
    flex: 1 1 140px;
  }

  .editorPanel form > :not(.panelHead) {
    margin-left: 12px;
    margin-right: 12px;
  }

  .itemRow,
  .catalogDetailRow {
    grid-template-columns: minmax(0, 1fr) minmax(80px, 0.35fr);
  }
}

@media (max-width: 480px) {
  .layout {
    padding-left: 7px;
    padding-right: 7px;
  }

  .brandWord {
    font-size: 19px;
  }

  .stageTab {
    flex-basis: 142px;
  }

  .dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard article {
    min-height: 74px;
    padding: 12px;
  }

  .dashboard strong {
    font-size: 21px;
  }
}

/* Modern enterprise shell */
.topbar {
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(16, 24, 40, 0.06);
  display: grid;
  gap: 0;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: 76px;
  padding: 0;
}

.brandLockup {
  align-self: stretch;
  background: #182238;
  border-bottom: 3px solid var(--gold);
  gap: 0;
  justify-content: center;
  min-height: 76px;
  padding: 0 16px;
}

.brandCopy {
  display: none;
}

.brandMarkBubble {
  background: rgba(255, 255, 255, 0.96);
}

.topActions {
  background: #ffffff;
  justify-content: space-between;
  padding: 10px clamp(16px, 2vw, 28px);
}

.workspaceContext {
  align-self: center;
  display: grid;
  gap: 1px;
  margin-right: auto;
  min-width: 0;
}

.workspaceContext span {
  color: #8a94a6;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.workspaceContext strong {
  color: #182238;
  font-size: 18px;
  line-height: 1.2;
}

.workspaceContext small {
  color: #667085;
  font-size: 12px;
}

.currentUserBox span,
.currentUserBox strong {
  color: #344054;
}

.currentUserBox select {
  background: #f7f8fa;
  border: 1px solid var(--line);
}

.utilityMenu summary {
  background: #f7f8fa;
  border-color: var(--line);
  color: #344054;
}

.utilityMenu[open] summary,
.utilityMenu summary:hover {
  background: #eef1f5;
}

.topActions > .secondary {
  background: #ffffff;
  border-color: var(--line);
  color: #344054;
}

.layout {
  background: linear-gradient(90deg, #182238 0 232px, var(--page) 232px);
  gap: 0;
  grid-template-columns: 232px minmax(0, 1fr);
  max-width: none;
  min-height: calc(100vh - 76px);
  padding: 0 0 28px;
}

.stageNav {
  background: #182238;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  gap: 3px;
  max-height: calc(100vh - 76px);
  padding: 14px 10px 28px;
  scrollbar-color: #43506a transparent;
  top: 76px;
}

.stageNavLabel {
  color: #8490a5;
  margin-left: 12px;
  margin-top: 16px;
}

.stageTab {
  border-color: transparent;
  color: #ffffff;
  min-height: 54px;
  padding-left: 12px;
}

.stageTab:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.06);
}

.stageTab strong {
  color: #f8fafc;
  font-weight: 700;
}

.stageTab span {
  color: #aeb8c8;
}

.stageTab small {
  background: #29364e;
  color: #d7deea;
}

.stageTab.active {
  background: #2a3650;
  border-color: #3b4963;
  box-shadow: inset 3px 0 0 var(--gold);
}

.stageTab.active strong {
  color: #ffffff;
}

.stageTab.active span {
  color: #d8dfeb;
}

.stageTab.active small {
  background: var(--gold);
  color: #33270e;
}

.dashboard,
.workarea,
.projectsPanel,
.opsGrid,
.calendarStage,
.crewStage,
.portalStage,
.contractorPortalStage,
.documentsStage,
.thermalStage,
.customersStage,
.suppliersStage,
.toolsStage,
.rentalsStage,
.fleetStage,
.teamStage,
.archiveStage {
  margin-left: 20px;
  margin-right: 20px;
  width: auto;
}

.dashboard {
  margin-top: 20px;
}

.workarea,
.projectsPanel,
.opsGrid,
.calendarStage,
.crewStage,
.portalStage,
.contractorPortalStage,
.documentsStage,
.thermalStage,
.customersStage,
.suppliersStage,
.toolsStage,
.rentalsStage,
.fleetStage,
.teamStage,
.archiveStage {
  margin-top: 20px;
}

.dashboard article,
.dashboardHero,
.dashboardPanel,
.listPanel,
.editorPanel,
.toolPanel {
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.05);
}

.panelHead {
  background: #ffffff;
}

.editorPanel > form > .panelHead {
  top: 88px;
}

.listPanel {
  top: 96px;
}

.quoteCard.active,
.projectCard.active {
  background: #fffaf0;
}

.dashboardTask,
.dashboardProjectRow,
.dashboardToolRow {
  background: #ffffff;
}

@media (max-width: 1040px) {
  .topbar {
    grid-template-columns: 206px minmax(0, 1fr);
  }

  .brandLockup {
    min-height: 72px;
  }

  .layout {
    background: var(--page);
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .stageNav {
    background: #182238;
    border-radius: 0;
    grid-column: 1;
    max-height: none;
    padding: 8px 10px;
    position: sticky;
    top: 0;
  }

  .stageTab {
    flex-basis: 154px;
  }

  .dashboard,
  .workarea,
  .projectsPanel,
  .opsGrid,
  .calendarStage,
  .crewStage,
  .portalStage,
  .contractorPortalStage,
  .documentsStage,
  .thermalStage,
  .customersStage,
  .suppliersStage,
  .toolsStage,
  .rentalsStage,
  .fleetStage,
  .teamStage,
  .archiveStage {
    margin-left: 12px;
    margin-right: 12px;
  }
}

@media (max-width: 720px) {
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
  }

  .brandLockup {
    justify-content: flex-start;
    min-height: 62px;
    padding: 0 14px;
  }

  .topActions {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 9px 12px;
  }

  .workspaceContext {
    grid-column: 1 / -1;
    width: 100%;
  }

  .stageNav {
    top: 0;
  }

  .dashboard,
  .workarea,
  .projectsPanel,
  .opsGrid,
  .calendarStage,
  .crewStage,
  .portalStage,
  .contractorPortalStage,
  .documentsStage,
  .thermalStage,
  .customersStage,
  .suppliersStage,
  .toolsStage,
  .rentalsStage,
  .fleetStage,
  .teamStage,
  .archiveStage {
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 10px;
  }
}

/* ==========================================================================
   Koszty zlecenia, karta pracy i marza
   ========================================================================== */

.projectCostForm {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--page);
}

.projectCostForm label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  min-width: 96px;
}

.projectCostForm label.grow {
  flex: 1 1 220px;
  min-width: 180px;
}

.projectCostForm input,
.projectCostForm select {
  width: 100%;
}

.marginSummary {
  display: grid;
  gap: 12px;
}

.marginTiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}

.marginTile {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy);
  border-radius: 8px;
  background: var(--panel);
}

.marginTile.marginGood {
  border-left-color: var(--green);
}

.marginTile.marginBad {
  border-left-color: var(--red);
}

.marginLabel {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.marginValue {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

.marginTile.marginGood .marginValue {
  color: var(--green);
}

.marginTile.marginBad .marginValue {
  color: var(--red);
}

.marginTile small {
  color: var(--muted);
  font-size: 12px;
}

.marginBreakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 6px 18px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.marginRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  padding: 3px 0;
}

.marginRow strong {
  font-variant-numeric: tabular-nums;
}

.costRow {
  display: grid;
  grid-template-columns: 130px 1fr auto auto auto;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  font-size: 13px;
}

.costType {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.costDescription {
  min-width: 0;
  overflow-wrap: anywhere;
}

.costMeta {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}

.costAmount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  font-weight: 600;
}

@media (max-width: 780px) {
  .costRow {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "type    delete"
      "desc    desc"
      "meta    amount";
    row-gap: 4px;
  }

  .costType { grid-area: type; }
  .costDescription { grid-area: desc; }
  .costMeta { grid-area: meta; }
  .costAmount { grid-area: amount; text-align: right; }
  .costRow .linkBtn { grid-area: delete; justify-self: end; }

  .projectCostForm label {
    flex: 1 1 130px;
  }
}

/* ==========================================================================
   Wyszukiwarka globalna
   ========================================================================== */

.globalSearch {
  position: relative;
  flex: 1 1 260px;
  max-width: 380px;
  min-width: 0;
}

.globalSearch input {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 6px;
  min-height: 38px;
  padding: 8px 12px;
  width: 100%;
}

.globalSearchResults {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.22);
  color: var(--ink);
  display: grid;
  gap: 2px;
  left: 0;
  max-height: min(60vh, 460px);
  overflow-y: auto;
  padding: 8px;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 60;
}

.globalSearchGroup {
  display: grid;
  gap: 2px;
}

.globalSearchGroup + .globalSearchGroup {
  border-top: 1px solid var(--line);
  margin-top: 6px;
  padding-top: 6px;
}

.globalSearchGroupLabel {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 8px 2px;
  text-transform: uppercase;
}

.globalSearchHit {
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  text-align: left;
  width: 100%;
}

.globalSearchHit:hover,
.globalSearchHit:focus-visible {
  background: var(--page);
}

.globalSearchHit strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.globalSearchHit small {
  color: var(--muted);
  font-size: 11px;
}

.globalSearchEmpty {
  color: var(--muted);
  font-size: 13px;
  margin: 0;
  padding: 10px;
}

/* ==========================================================================
   Wiersz pozycji oferty — nazwa na własnej linii

   Pole nazwy miało 322 px, czyli ok. 42 widoczne znaki. Zmierzone na realnych
   ofertach: mediana nazwy to 42 znaki, 90. percentyl 96, najdłuższa 162 —
   43% nazw nie mieściło się w polu. Skutek widać w danych: w ofercie dla
   DP World jest pozycja "nstalacja gniazd zasilających..." — brakującego "I"
   na początku nie dało się zauważyć, bo pisząc koniec nazwy nie widać jej
   początku.

   Nazwa dostaje teraz całą szerokość wiersza (ok. 780 px, czyli ~100 znaków),
   a ilość, jednostka, cena i VAT schodzą do drugiego rzędu.
   ========================================================================== */

@media (min-width: 641px) {
  .itemRow,
  .catalogDetailRow {
    /* Waskie pola liczbowe maja stale szerokosci, a wolne miejsce zostaje
       w piatej kolumnie - dzieki temu ilosc nie rozciaga sie na pol wiersza. */
    grid-template-columns: 92px 92px 132px 84px minmax(0, 1fr) 44px;
    grid-template-areas:
      "name name name name name remove"
      "qty  unit price vat  .    .";
    row-gap: 4px;
  }

  /* Dwa rzedy zamiast jednego oznaczaja wyzszy wiersz. Zbijamy etykiety
     i odstepy, zeby przy ofercie na kilkanascie pozycji nie trzeba bylo
     przewijac dwa razy wiecej niz wczesniej. */
  .itemRow label,
  .catalogDetailRow label {
    gap: 2px;
  }

  .itemRow label > span,
  .catalogDetailRow label > span,
  .itemRow > label,
  .catalogDetailRow > label {
    font-size: 11px;
  }

  .itemRow input,
  .catalogDetailRow input {
    min-height: 34px;
    padding-bottom: 6px;
    padding-top: 6px;
  }

  .itemRow > label:nth-of-type(1),
  .catalogDetailRow > label:nth-of-type(1) {
    grid-area: name;
  }

  .itemRow > label:nth-of-type(2),
  .catalogDetailRow > label:nth-of-type(2) {
    grid-area: qty;
  }

  .itemRow > label:nth-of-type(3),
  .catalogDetailRow > label:nth-of-type(3) {
    grid-area: unit;
  }

  .itemRow > label:nth-of-type(4),
  .catalogDetailRow > label:nth-of-type(4) {
    grid-area: price;
  }

  .itemRow > label:nth-of-type(5),
  .catalogDetailRow > label:nth-of-type(5) {
    grid-area: vat;
  }

  .itemRow > .removeItem,
  .catalogDetailRow > .removeItem {
    align-self: start;
    grid-area: remove;
  }

  /* Wiersz pozycji jako wyraźnie oddzielona całość - przy dwóch rzędach
     bez tego trudno rozpoznać, gdzie kończy się jedna pozycja. */
  .itemRow,
  .catalogDetailRow {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px 12px;
  }
}

/* ==========================================================================
   Pasek formatowania — zwinięty do czasu kliknięcia w pole

   Przy pięciu polach tekstowych w formularzu oferty dawało to pięć pasków
   po dwanaście przycisków plus pięć razy powtórzoną podpowiedź. Teraz pasek
   pokazuje się tylko przy polu, w którym akurat piszesz.
   ========================================================================== */

.richTextField {
  display: grid;
  gap: 6px;
}

.richTextToolbar {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  pointer-events: none;
  transition: max-height 120ms ease, opacity 120ms ease;
}

.richTextField:focus-within .richTextToolbar,
.richTextToolbar:hover {
  max-height: 120px;
  opacity: 1;
  overflow: visible;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .richTextToolbar {
    transition: none;
  }
}

/* ==========================================================================
   Podpowiedzi pozycji oferty
   ========================================================================== */

.itemSuggestBox {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(16, 24, 40, 0.22);
  display: grid;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  position: absolute;
  z-index: 120;
}

.itemSuggestHit {
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  text-align: left;
  width: 100%;
}

.itemSuggestHit:hover,
.itemSuggestHit:focus-visible {
  background: var(--page);
}

.itemSuggestHit strong {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.itemSuggestHit small {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Raport z budowy i szybkie godziny w karcie brygady
   ========================================================================== */

.crewReports {
  border-top: 1px dashed var(--line);
  display: grid;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
}

.crewReportsLabel {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crewReportRow {
  background: var(--page);
  border-radius: 6px;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
}

.crewReportRow strong {
  font-size: 12px;
}

.crewReportRow span {
  font-size: 13px;
  overflow-wrap: anywhere;
}

.crewReportRow small {
  color: var(--muted);
  font-size: 11px;
}

.crewPromptOverlay {
  align-items: center;
  background: rgba(15, 22, 36, 0.55);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 16px;
  position: fixed;
  z-index: 200;
}

.crewPrompt {
  background: var(--panel);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(16, 24, 40, 0.3);
  max-height: 90vh;
  max-width: 460px;
  overflow-y: auto;
  padding: 20px;
  width: 100%;
}

.crewPrompt h3 {
  margin: 0 0 14px;
  overflow-wrap: anywhere;
}

.crewPromptForm {
  display: grid;
  gap: 12px;
}

.crewPromptForm label {
  display: grid;
  font-size: 12px;
  gap: 4px;
  color: var(--muted);
}

.crewPromptForm input,
.crewPromptForm select,
.crewPromptForm textarea {
  width: 100%;
}

.crewPromptActions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 4px;
}

.crewPromptActions button {
  flex: 1 1 auto;
  min-height: 44px;
}

/* ==========================================================================
   Telefon i tablet — poprawki wykryte pomiarem w przegladarce
   ========================================================================== */

/* 1. Naglowek panelu nie potrafil sie skurczyc ponizej szerokosci swojej
   tresci (670 px), przez co na tablecie 820 px cala strona przewijala sie
   w poziomie o 177 px. Elementy siatki domyslnie maja min-width: auto. */
@media (max-width: 1024px) {
  .editorPanel form,
  .editorPanel form > * {
    min-width: 0;
  }

  .panelHead {
    flex-wrap: wrap;
    min-width: 0;
  }

  .panelHead > * {
    min-width: 0;
  }

  /* Wiersz pozycji oferty ma szesc kolumn o sztywnych szerokosciach
     (180+80+84+120+80+44 plus odstepy = 638 px minimum). Aplikacja zwijala go
     do dwoch kolumn dopiero ponizej 640 px, wiec na tablecie 820 px wypychal
     panel edytora poza ekran. Zwijamy go tak samo, tylko wczesniej. */
  .itemRow,
  .catalogDetailRow {
    grid-template-columns: minmax(0, 1fr) minmax(80px, 0.35fr);
  }
}

/* 2. Pasek zakladek na telefonie.
   17 zakladek po 154 px dawalo pasek szerokosci 2058 px w oknie 390 px -
   do ostatniej trzeba bylo przewinac 1668 px na slepo. Na telefonie
   zdejmujemy opis pod nazwa; sama nazwa wystarczy do nawigacji. */
@media (max-width: 560px) {
  .stageTab {
    /* Wczesniejsza regula ustawia flex: 0 0 154px - sama szerokosc: auto
       jej nie przebije, bo o rozmiarze decyduje flex-basis. */
    flex: 0 0 auto;
    min-height: 44px;
    padding: 8px 38px 8px 10px;
    width: auto;
  }

  .stageTab span {
    display: none;
  }

  .stageTab strong {
    font-size: 13px;
    white-space: nowrap;
  }

  .stageTab small {
    top: 50%;
    transform: translateY(-50%);
  }

  .stageNavLabel {
    align-self: center;
    margin: 0 4px;
    white-space: nowrap;
  }
}

/* 3. Zwiniety naglowek na telefonie.
   Pasek gorny zajmowal 249 px, a razem z nawigacja 346 px z 844 px ekranu -
   41% wysokosci, zanim pokazala sie jakakolwiek tresc. Imie uzytkownika bylo
   pokazane dwa razy: jako tekst i w liscie rozwijanej tuz pod nim. */
@media (max-width: 560px) {
  .currentUserBox span,
  .currentUserBox strong {
    display: none;
  }

  .currentUserBox {
    min-width: 0;
  }

  .workspaceContext span,
  .workspaceContext small {
    display: none;
  }

  .workspaceContext strong {
    font-size: 15px;
  }

  .brandCopy .appSection {
    display: none;
  }

  /* Pasmo z logo zajmowalo ~120 px wysokosci telefonu na sam znak firmowy. */
  .brandLockup {
    gap: 10px;
    padding: 6px 0;
  }

  .brandMarkBubble {
    height: 30px;
    width: 30px;
  }

  .brandWord {
    font-size: 15px;
    letter-spacing: 0.18em;
  }

  /* Lista uzytkownika, Narzedzia i Wyloguj w jednym wierszu zamiast trzech. */
  .topActions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .currentUserBox {
    flex: 1 1 140px;
  }

  .topActions > .secondary,
  .utilityMenu {
    flex: 0 0 auto;
  }

  #logoutBtn {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* 4. Pola formularzy na ekranach dotykowych.
   Safari na iOS automatycznie przybliza strone przy dotknieciu pola
   o czcionce mniejszej niz 16 px - uzytkownik po kazdym kliknieciu musi
   odreczne oddalac widok. */
@media (pointer: coarse) {
  input,
  select,
  textarea {
    font-size: 16px;
  }

  /* Cele dotyku wygodne w rekawicy roboczej. */
  button,
  .linkLike,
  select {
    min-height: 40px;
  }

  .stageTab {
    min-height: 44px;
  }
}

/* ---- Asystent: oferta z zapytania ------------------------------------- */

dialog.wideDialog {
  max-width: 940px;
  width: min(940px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
}

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

.enquiryOutput {
  display: grid;
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.enquiryHead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.enquiryHead span {
  color: var(--muted);
  font-size: 13px;
}

.enquiryWarnings {
  border-left: 3px solid #d97706;
  background: rgba(217, 119, 6, 0.08);
  border-radius: 4px;
  padding: 10px 12px;
}

.enquiryWarnings h4,
.enquiryOutput section h4 {
  margin: 0 0 6px;
  font-size: 13px;
}

.enquiryWarnings ul,
.enquiryOutput section ul {
  margin: 0;
  padding-left: 18px;
}

.enquiryWarnings li,
.enquiryOutput section li {
  margin: 0 0 4px;
  font-size: 13px;
}

/* Tabela sama sie przewija w poziomie - ani strona, ani okno dialogowe.
   min-width: 0 jest tu konieczne: element siatki ma domyslnie min-width: auto,
   wiec bez tego szeroka tabela rozpycha caly dialog zamiast sie przewijac. */
.enquiryOutput > * {
  min-width: 0;
}

.enquiryTableWrap {
  overflow-x: auto;
  min-width: 0;
  max-width: 100%;
}

.enquiryTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 560px;
}

.enquiryTable th,
.enquiryTable td {
  border-bottom: 1px solid var(--line);
  padding: 7px 8px;
  text-align: left;
  vertical-align: top;
}

.enquiryTable th {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.enquiryTable .num {
  text-align: right;
  white-space: nowrap;
}

.enquiryNote {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.enquiryTotals {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 13px;
}

.marginBad {
  color: #b91c1c;
  font-weight: 600;
}

@media (max-width: 700px) {
  .enquiryRow {
    grid-template-columns: minmax(0, 1fr);
  }
  .enquiryTotals {
    gap: 6px 14px;
  }
}

/* Nazwa zalacznika bywa jednym dlugim ciagiem bez spacji - bez tego
   rozpycha okno dialogowe na telefonie. */
#enquiryFileList {
  overflow-wrap: anywhere;
}

#enquiryDialog input,
#enquiryDialog textarea,
#enquiryDialog select {
  max-width: 100%;
}

/* ---- Dostęp do systemu ------------------------------------------------ */

.permissionsPanel {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 14px;
}

.permissionDeviations {
  border-left: 3px solid #d97706;
  background: rgba(217, 119, 6, 0.08);
  border-radius: 4px;
  padding: 10px 12px;
  margin-bottom: 12px;
  font-size: 13px;
}

.permissionDeviations div {
  margin-top: 4px;
  color: var(--muted);
}

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

.permissionGroup {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px 12px;
  margin: 0;
  min-width: 0;
}

.permissionGroup legend {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 4px;
}

.permissionRow {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  padding: 5px 0;
  cursor: pointer;
}

.permissionRow input {
  margin: 2px 0 0;
  width: 16px;
  height: 16px;
}

.permissionText {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.permissionLabel {
  font-size: 13px;
  line-height: 1.35;
}

.permissionHint {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}

.permissionFlag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(185, 28, 28, 0.12);
  color: #b91c1c;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: 1px;
}

.permissionRow.isDeviation {
  background: rgba(217, 119, 6, 0.07);
  border-radius: 4px;
  margin: 0 -6px;
  padding-left: 6px;
  padding-right: 6px;
}

.deviationNote {
  color: #b45309;
}

body.standards-active { overflow-anchor: none; }
.workarea.quoteWorkspace { display: block; min-width: 0; }
.quoteRegister { min-width: 0; background: #fff; border-top: 1px solid #dce2ea; border-bottom: 1px solid #dce2ea; }
.quoteRegisterHead { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; }
.quoteRegisterHead h2 { color: #1d2939; font-size: 20px; line-height: 1.3; margin: 0 0 4px; }
.quoteRegisterHead .actions { margin-left: auto; }
.quoteRegisterFilters { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 20px 16px; }
.quoteRegisterFilters input { flex: 1 1 300px; max-width: 480px; min-width: 0; }
.quoteRegisterFilters select { width: 220px; max-width: 100%; }
.quoteTableScroll { width: 100%; overflow-x: auto; }
.quoteTableScroll:focus-visible { outline: 2px solid #147d71; outline-offset: -2px; }
.quoteRegisterTable { width: 100%; min-width: 1160px; table-layout: fixed; border-collapse: collapse; text-align: left; }
.quoteRegisterTable th { background: #f0f3f6; color: #475467; font-size: 11px; font-weight: 700; line-height: 1.4; text-transform: uppercase; padding: 12px 10px; border-bottom: 1px solid #dce2ea; vertical-align: middle; }
.quoteRegisterTable td { background: #fff; color: #344054; padding: 14px 10px; border-bottom: 1px solid #e8ecf1; font-size: 12px; line-height: 1.5; text-align: left; vertical-align: middle; overflow-wrap: anywhere; }
.quoteRegisterTable tbody tr:hover td { background: #f8fafc; }
.quoteRegisterTable tbody tr:last-child td { border-bottom: 0; }
.quoteRegisterTable .quoteRowIndex { color: #667085; font-variant-numeric: tabular-nums; }
.quoteColIndex { width: 42px; }
.quoteColNumber { width: 140px; }
.quoteColDate { width: 104px; }
.quoteColClient { width: 22%; }
.quoteColAmount { width: 122px; }
.quoteColStatus { width: 174px; }
.quoteColActions { width: 90px; }
.quoteDateCell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.quoteClientCell { font-weight: 600; }
.quoteAmountCell { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.quoteNumberLink { display: inline-flex; align-items: center; min-height: 32px; color: #17665f; font-size: 12px; font-weight: 700; line-height: 1.35; text-align: left; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.quoteNumberLink:hover { color: #0b4c47; text-decoration-color: currentColor; }
.quoteNumberLink:focus-visible { outline: 2px solid #147d71; outline-offset: 4px; }
.quoteEditButton { width: 100%; min-height: 36px; padding: 7px 10px; }
.quoteServiceCell { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.quoteRegisterTable .quoteRowStatus { width: 100%; min-width: 0; height: 36px; padding: 6px 24px 6px 8px; border-radius: 4px; font-size: 12px; color: #344054; background-color: #f6f7f9; border: 1px solid #d5dbe3; }
.quoteRowStatus[data-status="sent"] { color: #1b5ba2; background-color: #edf5ff; border-color: #c8dbf1; }
.quoteRowStatus[data-status="accepted"], .quoteRowStatus[data-status="approved_internal"] { color: #126b50; background-color: #eef9f3; border-color: #c3e2d0; }
.quoteRowStatus[data-status="rejected"] { color: #aa3737; background-color: #fff1f1; border-color: #efc9c9; }
.quoteRowStatus[data-status="negotiation"], .quoteRowStatus[data-status="needs_approval"] { color: #876211; background-color: #fff9e7; border-color: #eadba6; }
.quoteRegisterTable .quoteRowStatus:disabled { opacity: 1; cursor: default; }
.quoteRegisterTable .quoteTableEmpty { text-align: center; padding: 40px 20px; color: #667085; }
.quoteListMessage { margin: 0 20px 16px; padding: 10px 12px; border-left: 3px solid #147d71; color: #175f52; background: #f0f8f5; font-size: 13px; overflow-wrap: anywhere; }
.quoteListMessage.isError { color: #a52a2a; border-color: #c54040; background: #fff1f1; }
.quoteEditorNavigation { padding: 14px 16px; border-bottom: 1px solid #e8ecf1; }
.projectsPanel .projectWorkspace { display: block; }
.projectRegisterPanel { min-width: 0; }
.projectRegisterPanel .projectListHead { padding: 18px 20px 10px; }
.projectRegisterPanel .projectListControls { grid-template-columns: minmax(260px, 1fr) auto 220px auto; align-items: end; padding: 0 20px 16px; }
.projectRegisterPanel .projectListControls > label { display: none; }
.projectRegisterPanel .projectViews { align-self: center; }
.projectTableScroll { width: 100%; overflow-x: auto; }
.projectTableScroll:focus-visible { outline: 2px solid #147d71; outline-offset: -2px; }
.projectRegisterTable { width: 100%; min-width: 1120px; table-layout: fixed; border-collapse: collapse; text-align: left; }
.projectRegisterTable th { background: #f0f3f6; color: #475467; font-size: 11px; font-weight: 700; line-height: 1.4; text-transform: uppercase; padding: 12px 10px; border-bottom: 1px solid #dce2ea; }
.projectRegisterTable td { background: #fff; color: #344054; padding: 14px 10px; border-bottom: 1px solid #e8ecf1; font-size: 12px; line-height: 1.5; vertical-align: middle; overflow-wrap: anywhere; }
.projectRegisterTable tbody tr:hover td { background: #f8fafc; }
.projectColIndex { width: 42px; }
.projectColNumber { width: 150px; }
.projectColDates { width: 165px; }
.projectColClient { width: 22%; }
.projectColManager { width: 145px; }
.projectColStatus { width: 145px; }
.projectColActions { width: 90px; }
.projectRowIndex { color: #667085; font-variant-numeric: tabular-nums; }
.projectNumberLink { display: inline-flex; min-height: 32px; align-items: center; padding: 0; border: 0; background: transparent; box-shadow: none; color: #17665f; font-size: 12px; font-weight: 700; text-align: left; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.projectNumberLink:hover { background: transparent; color: #0b4c47; text-decoration-color: currentColor; }
.projectNumberLink:focus-visible { outline: 2px solid #147d71; outline-offset: 3px; }
.projectQuoteReference { display: block; color: #667085; font-size: 10px; }
.projectDatesCell { font-variant-numeric: tabular-nums; white-space: nowrap; }
.projectDatesCell.overdue { color: #b42318; font-weight: 700; }
.projectClientCell { font-weight: 600; }
.projectScopeCell { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.projectRowWarning { display: block; margin-top: 5px; color: #9a6700; }
.projectEditButton { width: 100%; min-height: 36px; padding: 7px 10px; }
.projectRegisterTable .projectListEmpty { padding: 40px 20px; text-align: center; color: #667085; }
.projectEditorNavigation { margin: -1px -1px 16px; padding: 14px 16px; border-bottom: 1px solid #e8ecf1; }
@media (max-width: 900px) {
  .projectRegisterPanel .projectListControls { grid-template-columns: 1fr; }
  .projectRegisterPanel .projectViews { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .quoteRegisterHead { flex-wrap: wrap; padding: 16px; }
  .quoteRegisterHead .actions { margin-left: 0; }
  .quoteRegisterFilters { padding: 0 16px 16px; }
  .quoteRegisterFilters input, .quoteRegisterFilters select { flex-basis: 100%; width: 100%; max-width: none; }
}

.projectsPanel .projectListHead { align-items: center; margin-bottom: 10px; }
.projectsPanel .projectListHead h3 { margin: 0; }
.projectsPanel > .panelHead > div { flex: 1; min-width: 0; }
#projectStatusFilter { width: 260px; max-width: 100%; flex: 0 0 auto; }
.projectListControls { display: grid; gap: 7px; padding-bottom: 14px; }
.projectListControls > label { font-size: 12px; color: var(--muted); }
.projectListControls input, .projectListControls select { min-width: 0; width: 100%; }
.projectViews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin: 3px 0; }
.projectViews button { background: #f5f6f8; border: 1px solid #d9dfe7; border-radius: 4px; color: #475467; font-size: 12px; line-height: 1.3; min-height: 38px; padding: 7px; white-space: normal; }
.projectViews button[aria-pressed="true"] { background: #e6f4f0; border-color: #147d71; color: #116256; }
.projectClearFilters { background: transparent; color: #116256; font-size: 12px; justify-self: start; padding: 4px 0; text-decoration: underline; }
.projectOutsideFilter { background: #fff6dd; border-left: 3px solid #c88817; color: #775015; font-size: 12px; margin: 0 0 10px; padding: 8px; }
.projectsPanel .projectList { align-content: start; max-height: max(360px, calc(100dvh - 410px)); }
.projectsPanel .projectCard { border-radius: 6px; padding: 12px; }
.projectsPanel .projectCard:focus-visible { outline: 2px solid #147d71; outline-offset: 2px; }
.projectsPanel .projectCard.active { background: #f1f8f6; border-color: #147d71; box-shadow: inset 3px 0 #147d71; }
.projectsPanel .projectCard .quoteTop { align-items: start; flex-wrap: wrap; gap: 6px; }
.projectsPanel .projectCard .quoteNumber { color: #1d2939; font-size: 14px; overflow-wrap: anywhere; }
.projectsPanel .projectCard .quoteClient { color: #344054; font-size: 13px; font-weight: 600; line-height: 1.4; margin: 7px 0; }
.projectCardDates { color: #116256; font-size: 12px; font-variant-numeric: tabular-nums; margin: 6px 0; }
.projectCardDates.overdue { color: #b42318; font-weight: 600; }
.projectCardScope { -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: #475467; display: -webkit-box; font-size: 12px; line-height: 1.5; margin-bottom: 8px; overflow: hidden; overflow-wrap: anywhere; }
.projectCardReference { color: #667085; font-size: 11px; margin-top: 7px; }
.projectsPanel .projectCard .projectMeta { font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; }
.projectsPanel .projectWarning { background: #fff6dd; border-color: #ead29b; color: #805710; font-size: 11px; }
.projectListEmpty { color: #667085; font-size: 13px; padding: 20px 0; }
@media (min-width: 1101px) {
  .projectsPanel .projectWorkspace { grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); }
}
@media (max-width: 1100px) {
  .projectsPanel .projectWorkspace { grid-template-columns: minmax(0, 1fr); }
  .projectsPanel .projectList { max-height: 360px; }
}
#projectChecksWorkspace > .projectSectionHead { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
#projectChecksWorkspace > .projectSectionHead h3 { flex: 1 0 180px; margin: 0; }
#projectChecksWorkspace > .projectSectionHead .actions { width: auto; flex: 0 1 auto; flex-wrap: wrap; }
.securityStage { grid-column: 2; min-width: 0; background: #fff; padding: 20px; border: 1px solid #e1e6ee; align-self: start; }
.securityHead, .securityResultsHead { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.securityHead h2 { margin: 0 0 5px; font-size: 20px; }
.securityFilters { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(3, minmax(140px, 1fr)); gap: 12px; padding: 16px 0; border-top: 1px solid #e1e6ee; border-bottom: 1px solid #e1e6ee; margin-bottom: 16px; }
.securityFilters label { min-width: 0; margin: 0; }
.securityFilters input, .securityFilters select { width: 100%; min-width: 0; }
.securityFilters .actions { align-items: end; grid-column: span 2; justify-content: end; }
.securityTableScroll { width: 100%; overflow-x: auto; }
.securityTable { width: 100%; min-width: 1040px; table-layout: fixed; border-collapse: collapse; }
.securityTable th { text-align: left; background: #f0f3f6; color: #475467; font-size: 11px; padding: 12px 10px; }
.securityTable td { padding: 12px 10px; border-bottom: 1px solid #e7ebf1; font-size: 12px; vertical-align: top; overflow-wrap: anywhere; }
.securityTable th:nth-child(1) { width: 125px; }
.securityTable th:nth-child(2) { width: 165px; }
.securityTable th:nth-child(3) { width: 170px; }
.securityTable th:nth-child(5) { width: 132px; }
.securityTable th:nth-child(6) { width: 116px; }
.securityTable th:nth-child(7) { width: 100px; }
.securityTable td small { display: block; color: #667085; margin-top: 4px; }
.securityTable tr:hover { background: #f8fafb; }
.securityTable button { padding: 7px; font-size: 12px; }
.securityOutcome { color: #176b5b; }
.securityOutcome.outcome-failed, .securityOutcome.outcome-denied, .securityOutcome.outcome-aborted { color: #b42318; }
.securityPaging { display: flex; justify-content: end; align-items: center; gap: 14px; margin-top: 16px; font-size: 13px; }
.securityDetails { width: min(700px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; border: 1px solid #dce2ea; border-radius: 6px; padding: 20px; }
.securityDetails h2 { font-size: 20px; margin: 0 0 16px; }
.securityDetails dl { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 0 16px; }
.securityDetails dt, .securityDetails dd { padding: 8px 0; border-bottom: 1px solid #e7ebf1; margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.securityDetails dt { color: #667085; }
@media (max-width: 1100px) { .securityFilters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1040px) { .securityStage { grid-column: 1; } }
@media (max-width: 600px) {
  .securityStage { padding: 12px; }
  .securityFilters { grid-template-columns: minmax(0, 1fr); }
  .securityFilters .actions { grid-column: auto; justify-content: start; }
  .securityDetails dl { grid-template-columns: minmax(0, 1fr); }
  .securityDetails dt { padding-bottom: 0; border: 0; }
}
.projectChecksGroup { border-bottom: 1px solid #dce2ea; }
.projectChecksGroup > summary { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 0; cursor: pointer; }
.projectChecksGroup > summary::before { content: "+"; width: 16px; color: #147d71; }
.projectChecksGroup[open] > summary::before { content: "-"; }
.projectChecksGroup > summary strong { flex: 1; min-width: 160px; font-size: 14px; }
.projectChecksGroup ul { padding: 0; margin: 0 0 16px 28px; list-style: none; }
.projectChecksGroup li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid #eaecf0; align-items: center; }
.projectChecksGroup li > div { min-width: 0; overflow-wrap: anywhere; }
.projectChecksGroup li small { display: block; margin-top: 4px; }
.projectChecksGroup li button { flex: 0 0 auto; }
.projectCheckDoneLabel { color: #147d71; font-size: 12px; }
.projectChecksEditor { margin: 16px 0; border-top: 1px solid #dce2ea; padding-top: 12px; }
.projectChecksEditor > summary, .projectRequirementDetails > summary { cursor: pointer; color: #475467; font-size: 13px; }
.projectChecksSelection { max-height: 38dvh; overflow: auto; margin: 12px 0; border-top: 1px solid #dce2ea; border-bottom: 1px solid #dce2ea; }
.projectChecksSelection label { display: flex; align-items: start; gap: 10px; padding: 10px 4px; margin: 0; color: #344054; }
.projectChecksSelection input { width: 16px; flex: 0 0 16px; margin-top: 3px; }
#projectChecksDialog { max-height: calc(100dvh - 24px); overflow-y: auto; }
#projectChecksFilter { width: auto; }
@media (max-width: 600px) {
  .projectChecksGroup li { align-items: start; flex-wrap: wrap; }
  .projectChecksGroupAction { margin-left: 28px; }
}
.quotePdfDialog { width: min(1440px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); border: 1px solid #d5dbe3; border-radius: 6px; padding: 0; }
.quotePdfDialog .dialogBody { padding: 20px; }
.quotePdfHeader { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.quotePdfHeader h2, .quotePdfHeader h3 { margin: 0; }
.quotePdfReview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.quotePdfPreview { min-width: 0; position: sticky; top: 0; }
.quotePdfPreview a { display: inline-block; color: #17665f; margin-bottom: 12px; }
.localPdfViewer { border: 1px solid #d5dbe3; min-width: 0; }
.localPdfToolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; background: #f0f3f6; }
.localPdfToolbar button { flex: 0 0 34px; width: 34px; height: 34px; padding: 0; font-size: 18px; }
.localPdfToolbar label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; }
.localPdfToolbar input { width: 52px; height: 34px; padding: 4px; }
.localPdfToolbar select { margin-left: auto; width: 165px; height: 34px; padding: 4px; font-size: 12px; }
.localPdfToolbar span { font-size: 12px; min-width: 25px; }
.localPdfViewport { height: 660px; max-height: 75dvh; overflow: auto; background: #e7e9ed; padding: 10px; }
.localPdfViewport canvas { display: block; background: white; margin: 0 auto; }
.localPdfViewport canvas[hidden] { display: none; }
.localPdfViewport p { font-size: 13px; color: #475467; margin: 0; }
.localPdfViewport:focus-visible { outline: 2px solid #147d71; outline-offset: -2px; }
.quotePdfFields { min-width: 0; display: grid; gap: 12px; }
.quotePdfFields h3 { font-size: 15px; }
.quotePdfFields .grid { margin: 0; }
.quotePdfFields label { margin: 0; }
.quotePdfFields .hint { margin: 0; }
.quotePdfItemsScroll { overflow-x: auto; }
.quotePdfItems { width: 100%; min-width: 470px; table-layout: fixed; border-collapse: collapse; }
.quotePdfItems th { font-size: 11px; color: #475467; text-align: left; padding: 6px; background: #f0f3f6; }
.quotePdfItems td { padding: 6px 3px; border-bottom: 1px solid #e8ecf1; }
.quotePdfItems th:first-child { width: 36%; }
.quotePdfItems th:nth-child(2) { width: 13%; }
.quotePdfItems th:nth-child(3) { width: 23%; }
.quotePdfItems th:last-child { width: 40px; }
.quotePdfItems input, .quotePdfItems select, .quotePdfItems textarea { min-width: 0; padding: 8px 4px; font-size: 12px; }
.quotePdfItems textarea { width: 100%; min-height: 80px; resize: vertical; }
.quotePdfUnit { display: block; color: #667085; margin-top: 4px; }
.quotePdfItems button { padding: 6px; min-width: 32px; min-height: 36px; }
.quotePdfFields .quotePdfConfirmation { display: flex; align-items: start; gap: 8px; color: #344054; }
.quotePdfConfirmation input { width: 16px; flex: 0 0 16px; }
.quotePdfDialog .isError { color: #b42318; white-space: pre-line; }
@media (max-width: 1050px) {
  .quotePdfReview { grid-template-columns: minmax(0, 1fr); }
  .quotePdfPreview { position: static; }
  .localPdfViewport { height: 380px; }
}
@media (max-width: 600px) {
  .quotePdfDialog .dialogBody { padding: 12px; }
  .quotePdfFields .grid.two { grid-template-columns: minmax(0, 1fr); }
  .quotePdfHeader { flex-wrap: wrap; gap: 8px; }
}
.standardsStage { min-width: 0; width: 100%; grid-column: 2; }
.standardsStage iframe { display: block; width: 100%; height: max(720px, calc(100vh - 150px)); border: 0; background: #fff; }

@media (min-width: 1041px) {
  body.standards-active { overflow: hidden; }
  body.standards-active .layout { height: calc(100dvh - var(--standards-header-height, 96px)); min-height: 0; padding-bottom: 0; }
  body.standards-active .stageNav { max-height: 100%; position: static; }
  .standardsStage { height: 100%; min-height: 0; }
  .standardsStage iframe { height: 100%; }
}

@media (max-width: 1040px) {
  .standardsStage { grid-column: 1; }
}

@media (max-width: 700px) {
  .standardsStage iframe { height: max(750px, calc(100dvh - 100px)); }
}

/* Na telefonie jedna kolumna i większe pola dotykowe. */
@media (max-width: 700px) {
  .permissionGroups {
    grid-template-columns: minmax(0, 1fr);
  }
  .permissionRow {
    padding: 8px 0;
  }
}
.projectDeliveryChecks { margin-top: 16px; }
.projectDeliveryStep { display: grid; grid-template-columns: 20px minmax(0, 1fr) minmax(100px, auto); align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid #d8deea; }
.projectDeliveryStep input { width: 16px; height: 16px; margin: 0; }
.projectDeliveryStep span, .projectDeliveryStep small { overflow-wrap: anywhere; min-width: 0; }
.projectDeliveryStep small { color: #526274; }
@media (max-width: 640px) {
  .projectDeliveryStep { grid-template-columns: 20px minmax(0, 1fr); }
  .projectDeliveryStep small { grid-column: 2; }
}
.projectAttachmentArchive { margin-top: 16px; border-top: 1px solid #d8deea; padding-top: 12px; }
.projectDocumentPlan { margin: 0 0 20px; min-width: 0; }
.projectDocumentPlan .itemsHead { gap: 12px; flex-wrap: wrap; }
.projectDocumentPlan h4 { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.projectDocumentPlanTable { overflow-x: auto; }
.projectDocumentPlan table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; }
.projectDocumentPlan th, .projectDocumentPlan td { text-align: left; padding: 10px 12px; vertical-align: top; border-bottom: 1px solid #d8deea; overflow-wrap: anywhere; }
.projectDocumentPlan th { background: #eef2f5; color: #263648; }
.projectDocumentPlan th:first-child { width: 60%; }
.projectDocumentPlan small { display: block; color: #526274; margin-top: 4px; line-height: 1.4; }
@media (max-width: 640px) {
  .projectDocumentPlan th:first-child { width: 48%; }
  .projectDocumentPlan th, .projectDocumentPlan td { padding: 8px 5px; }
}
.projectAttachmentArchive > summary { color: #526274; cursor: pointer; padding: 8px 0; overflow-wrap: anywhere; }
.projectAttachmentArchive > .attachmentList { margin-top: 12px; }
#projectAttachmentList, #projectInactiveAttachmentList,
#projectAttachmentList .attachmentItem, #projectInactiveAttachmentList .attachmentItem { min-width: 0; }
@media (max-width: 640px) {
  #projectAttachmentList .attachmentItem, #projectInactiveAttachmentList .attachmentItem { grid-template-columns: minmax(0, 1fr); }
  #projectAttachmentList .attachmentActions, #projectInactiveAttachmentList .attachmentActions { flex-wrap: wrap; justify-content: flex-start; }
  #projectAttachmentList .attachmentActions > span, #projectInactiveAttachmentList .attachmentActions > span { flex-basis: 100%; }
}
/* Order acceptance notification: a compact, unframed section. */
.clientMailPanel { border-block: 1px solid #d9e0e7; padding: 18px 0; margin: 16px 0; }
.clientMailPanel h3 { font-size: 16px; margin: 0 0 12px; }
.clientMailOverview { display: grid; grid-template-columns: minmax(200px, 360px) minmax(0, 1fr); gap: 16px; }
.clientMailOverview label { min-width: 0; }
.clientMailOverview [data-mail-summary] { display: grid; gap: 5px; font-size: 13px; overflow-wrap: anywhere; }
.clientMailOverview [data-state="sent"] strong { color: #116549; }
.clientMailOverview [data-state="error"] strong, .clientMailOverview [data-state="unknown"] strong, .clientMailError { color: #9b3517; }
.clientMailPanel details { margin-top: 12px; }
.clientMailPanel summary { cursor: pointer; font-weight: 600; }
.clientMailPanel .actions { margin: 12px 0; flex-wrap: wrap; }
.clientMailHistory { max-width: 100%; overflow: auto; }
.clientMailHistory table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 13px; }
.clientMailHistory th { white-space: nowrap; }
.clientMailHistory th, .clientMailHistory td { padding: 8px; text-align: left; border-bottom: 1px solid #d9e0e7; overflow-wrap: anywhere; }
.clientMailPreview { width: min(760px, calc(100% - 24px)); max-height: calc(100vh - 40px); border: 1px solid #cbd5df; border-radius: 6px; padding: 22px; }
.clientMailPreview::backdrop { background: #0006; }
.clientMailPreview .actions { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.clientMailPreview h3 { font-size: 18px; margin: 0; overflow-wrap: anywhere; }
.clientMailPreview pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; line-height: 1.6; }
@media (max-width: 720px) { .clientMailOverview { grid-template-columns: minmax(0, 1fr); } }