:root {
  color-scheme: light;
  --bg: #eef2f5;
  --surface: #ffffff;
  --surface-2: #f6f8fa;
  --line: #dbe3ea;
  --text: #17202a;
  --muted: #667085;
  --blue: #0877b9;
  --blue-2: #dff1fb;
  --green: #18794e;
  --amber: #ad6b00;
  --red: #b42318;
  --shadow: 0 18px 50px rgba(16, 24, 40, 0.12);
  --radius: 8px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
}

button,
input,
select {
  font: inherit;
}

.primary-button,
.secondary-button {
  min-height: 38px;
  padding: 8px 13px;
  border-radius: 8px;
  font-weight: 750;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.primary-button { border: 1px solid #0877b9; background: #0877b9; color: #fff; }
.primary-button:hover { background: #06669f; border-color: #06669f; transform: translateY(-1px); }
.secondary-button { border: 1px solid #cbd6df; background: #fff; color: #243746; }
.secondary-button:hover { border-color: #0877b9; color: #0877b9; background: #f5fbff; }
.primary-button:disabled,
.secondary-button:disabled { cursor: not-allowed; opacity: .55; transform: none; }

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
}

.sidebar {
  background: #142433;
  color: #ffffff;
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 4px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: #19a7ce;
  color: #ffffff;
  font-weight: 800;
}

.brand strong,
.brand span,
.sidebar-footer strong,
.sidebar-footer span {
  display: block;
}

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

.module-nav {
  display: grid;
  gap: 6px;
}

.nav-button {
  width: 100%;
  height: 42px;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  text-align: left;
  cursor: pointer;
}

.nav-button:hover,
.nav-button.active {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.nav-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.12);
  font-size: 12px;
  font-weight: 800;
}

.nav-count {
  color: rgba(255, 255, 255, 0.56);
  font-size: 12px;
}

.sidebar-footer {
  margin-top: auto;
  display: grid;
  grid-template-columns: 10px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
}

.status-dot {
  width: 10px;
  height: 10px;
  margin-top: 5px;
  border-radius: 999px;
  background: #33d17a;
}

.workspace {
  min-width: 0;
  padding: 22px;
  max-width: 1880px;
  width: 100%;
  margin: 0 auto;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  align-items: end;
  gap: 18px 22px;
  margin-bottom: 18px;
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 0 0 14px;
  background: linear-gradient(180deg, var(--bg) 78%, rgba(238, 242, 245, 0));
}

.flow-strip {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.flow-step {
  min-height: 64px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  padding: 8px 6px;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(16, 24, 40, 0.06);
  min-width: 0;
}

.flow-step span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.flow-step strong {
  display: block;
  min-width: 0;
  font-size: 12px;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.flow-step:hover,
.flow-step.active {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(8, 119, 185, 0.1);
}

.flow-step.cfo span {
  background: #dcfce7;
  color: var(--green);
}

.eyebrow {
  margin: 0 0 4px;
  color: var(--blue);
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 800;
}

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

h1 {
  margin-bottom: 0;
  font-size: 30px;
  line-height: 1.15;
}

h2 {
  margin-bottom: 4px;
  font-size: 18px;
}

.topbar-actions {
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
  justify-content: end;
  min-width: 0;
}

.auth-status {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--bg);
}

.login-panel {
  width: min(420px, 100%);
  display: grid;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.login-panel h1 {
  font-size: 24px;
}

.login-panel label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.login-panel input {
  width: 100%;
}

.login-brand {
  padding: 0 0 14px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

.login-brand span {
  color: var(--muted);
}

.search-wrap,
.select-wrap {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.period-filter {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}

.period-detail {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}

.period-detail input,
.period-detail select {
  width: auto;
  min-width: 132px;
}

.period-mode-wrap select {
  min-width: 132px;
}

input,
select {
  height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 0 12px;
  outline: none;
}

.search-button {
  height: 40px;
  border: 1px solid #0f766e;
  border-radius: var(--radius);
  background: #0f766e;
  color: #ffffff;
  padding: 0 14px;
  font-weight: 800;
  cursor: pointer;
}

.search-button:hover {
  background: #115e59;
}

input {
  width: 280px;
}

select {
  min-width: 170px;
}

input:focus,
select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(8, 119, 185, 0.12);
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

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

.panel {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.main-panel {
  min-width: 0;
  overflow: hidden;
}

.panel-head {
  padding: 18px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.panel-head > div {
  min-width: 0;
}

.panel-head p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
}

.panel-head.compact {
  display: block;
}

.panel-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: end;
  min-width: 0;
}

.tool-button {
  height: 36px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  padding: 0 10px;
  font-weight: 700;
  cursor: pointer;
}

.tool-button.primary {
  border-color: var(--blue);
  background: var(--blue);
  color: #ffffff;
}

.tool-button:hover {
  border-color: var(--blue);
}

.quick-form {
  margin: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.quick-form h3 {
  margin: 0 0 12px;
  font-size: 15px;
}

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

.form-grid label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.form-grid input,
.form-grid select {
  width: 100%;
}

.quote-lines-editor {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

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

.quote-lines-head h4 {
  margin: 0;
  font-size: 13px;
}

.quote-lines-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.quote-line-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  align-items: end;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

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

.quote-line-row label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.quote-line-row input {
  width: 100%;
}

.quote-line-description {
  grid-column: span 2;
}

.tool-button.compact {
  min-height: 34px;
  padding: 7px 10px;
}

.tool-button.danger-light {
  color: var(--danger);
}

.form-actions {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.notice {
  margin: 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff7ed;
  color: #9a3412;
  font-size: 14px;
}

.filter-summary {
  margin: 18px 18px 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #edf7ff;
  color: #075985;
  font-size: 13px;
  font-weight: 700;
}

.filter-summary.muted {
  background: var(--surface-2);
  color: var(--muted);
}

.workspace-context {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 18px 0;
  padding: 12px;
  border: 1px solid #c9d7e3;
  border-radius: var(--radius);
  background: #f8fbfd;
}

.workspace-context p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.context-chip {
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
}

.context-chip span {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.context-chip strong {
  display: block;
  min-width: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.module-filter-strip {
  margin: 12px 18px 0;
  display: flex;
  gap: 10px;
  align-items: end;
  flex-wrap: wrap;
}

.module-filter-strip label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.module-filter-strip select {
  min-width: 170px;
}

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

.kpi-grid.compact-grid {
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
}

.kpi {
  min-width: 0;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.kpi span {
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.kpi strong {
  display: block;
  min-width: 0;
  margin-top: 0;
  font-size: clamp(18px, 1.35vw, 24px);
  line-height: 1.12;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  word-break: normal;
}

.ops-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0 18px 18px;
}

.ops-grid.datahub-grid {
  padding-top: 0;
}

.ops-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 14px;
}

.ops-card h3 {
  margin: 0 0 8px;
  font-size: 15px;
}

.ops-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

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

.dashboard-data {
  padding: 0 18px 18px;
}

.dashboard-data-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.dashboard-data-head h3 {
  margin: 0;
  font-size: 17px;
}

.dashboard-data-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.dashboard-data-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.dashboard-data-grid .analysis-panel:first-child {
  grid-row: auto;
}

.analysis-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.analysis-panel h3 {
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 14px;
}

.sync-list {
  display: grid;
  gap: 8px;
}

.sync-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.sync-row:last-child {
  border-bottom: 0;
}

.sync-row strong {
  font-size: 14px;
}

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

.operator-rates-panel {
  margin: 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.operator-rates-panel .dashboard-data-head {
  margin-bottom: 12px;
}

.operator-rate-kpis {
  margin-bottom: 12px;
}

.rate-input {
  width: 100%;
  min-width: 0;
}

.rate-email-input {
  width: 100%;
  min-width: 0;
}

.rate-role-input {
  width: 100%;
  min-width: 0;
}

.rate-notes-input {
  width: 100%;
  min-width: 0;
}

.muted-line {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.rate-custom-row {
  background: #f8fbff;
}

.weekly-ops-panel {
  margin: 0 18px 18px;
  padding: 14px;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius);
  background: #f8fafc;
}

.daily-timesheet-panel {
  margin: 0 18px 18px;
  padding: 14px;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius);
  background: #f8fbff;
}

.daily-timesheet-kpis {
  margin-bottom: 14px;
}

.timesheet-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  align-items: end;
  padding: 12px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
}

.timesheet-form label {
  min-width: 0;
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.timesheet-form input,
.timesheet-form select {
  min-width: 0;
  width: 100%;
}

.timesheet-description {
  grid-column: span 2;
}

.timesheet-form .tool-button {
  height: 42px;
}

.daily-timesheet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.daily-timesheet-grid table {
  min-width: 100%;
}

.weekly-ops-kpis {
  margin-bottom: 14px;
}

.weekly-ops-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.weekly-ops-grid table {
  min-width: 100%;
}

.weekly-mail-drafts {
  margin: 14px 0 0;
  background: #ffffff;
}

.weekly-mail-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--line);
}

.weekly-mail-summary span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.mail-draft-preview,
.mail-draft-card pre {
  max-height: 260px;
  overflow: auto;
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #0f172a;
  color: #e5eefb;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

.mail-draft-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
}

.mail-draft-card summary {
  cursor: pointer;
  padding: 10px 12px;
  font-weight: 800;
}

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

.detail-section-head h4 {
  margin: 0;
}

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

.line-hours-input {
  width: 90px;
}

.line-cost-input {
  width: 120px;
}

.table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: auto;
  max-height: 430px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.compact-table {
  max-height: 300px;
}

.lookup-strip {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 14px;
}

.table-action {
  min-width: 48px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--blue);
  font-weight: 800;
  font-size: 12px;
  padding: 0 8px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.table-action:hover {
  border-color: var(--blue);
  background: var(--blue-2);
}

.row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
}

.file-link {
  color: var(--blue);
  font-weight: 800;
  text-decoration: none;
}

.file-link:hover {
  text-decoration: underline;
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 780px;
  table-layout: fixed;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
  min-width: 0;
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

td {
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.data-table th,
.data-table td {
  overflow: hidden;
  text-overflow: ellipsis;
}

.cell-action {
  text-align: center;
  white-space: nowrap;
}

.cell-code,
.cell-date,
.cell-number,
.cell-status {
  white-space: nowrap;
}

td.cell-number,
th.cell-number {
  text-align: right;
}

.cell-wide {
  white-space: normal;
  text-overflow: clip;
}

.stacked-cell {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.stacked-cell strong,
.stacked-cell small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.stacked-cell small {
  color: var(--muted);
  font-size: 12px;
}

.compact-notice {
  margin-bottom: 0;
}

.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #344054;
  white-space: nowrap;
}

.badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--blue-2);
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.badge.green {
  background: #dcfce7;
  color: var(--green);
}

.badge.amber {
  background: #fef3c7;
  color: var(--amber);
}

.badge.red {
  background: #fee4e2;
  color: var(--red);
}

.split-view {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: auto;
}

.detail-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #ffffff;
}

.detail-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}

.detail-eyebrow {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.detail-head h3 {
  margin: 0;
  font-size: 20px;
}

.detail-head p {
  margin: 6px 0 0;
  color: var(--muted);
  line-height: 1.45;
}

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

.detail-metrics div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.detail-metrics span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.detail-metrics strong {
  display: block;
  font-size: 15px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

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

.detail-section {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.detail-section.wide {
  display: block;
}

.detail-disclosure {
  overflow: clip;
}

.detail-disclosure summary {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  list-style: none;
}

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

.detail-disclosure summary span {
  font-size: 14px;
  font-weight: 800;
}

.detail-disclosure summary strong {
  color: var(--blue);
  font-size: 12px;
}

.detail-disclosure[open] summary strong {
  color: var(--muted);
}

.detail-disclosure[open] summary strong::before {
  content: "Chiudi ";
}

.detail-disclosure-body {
  min-width: 0;
}

.detail-disclosure-body > .notice {
  margin: 12px;
}

.detail-section h4 {
  margin: 0;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 14px;
}

.detail-section p,
.detail-links {
  margin: 0;
  padding: 14px;
  color: var(--muted);
  line-height: 1.45;
}

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

.detail-links span {
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--blue-2);
  color: var(--blue);
  font-size: 12px;
  font-weight: 800;
}

.tree {
  border-bottom: 1px solid var(--line);
  padding: 12px 14px;
  background: var(--surface-2);
}

.tree h3 {
  margin: 0 0 12px;
  font-size: 14px;
}

.tree ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.tree li {
  margin: 0;
  font-size: 14px;
}

.tree > ul > li {
  display: grid;
  gap: 10px;
  font-weight: 800;
}

.tree > ul > li > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 700;
}

.tree > ul > li > ul li {
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #ffffff;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.insight-panel {
  position: sticky;
  top: 24px;
}

.insight-block {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.insight-block:last-child {
  border-bottom: 0;
}

.insight-block h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

.insight-block p,
.insight-block li {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

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

.timeline {
  padding: 18px;
  display: grid;
  gap: 10px;
}

.timeline-item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 12px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.timeline-item span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.timeline-item strong {
  display: block;
  margin-bottom: 4px;
}

@media (max-width: 1180px) {
  .app-shell {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .flow-strip,
  .ops-grid,
  .daily-timesheet-grid,
  .weekly-ops-grid,
  .workspace-context,
  .detail-metrics,
  .dashboard-data-grid,
  .detail-grid,
  .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .quote-line-description {
    grid-column: 1 / -1;
  }

  .dashboard-data-grid .analysis-panel:first-child {
    grid-row: auto;
  }

  .insight-panel {
    position: static;
  }

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

@media (max-width: 820px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: auto;
  }

  .topbar,
  .topbar-actions {
    display: grid;
    width: 100%;
    justify-content: stretch;
  }

  .topbar {
    position: static;
  }

  input,
  select,
  .search-button {
    width: 100%;
  }

  .period-filter,
  .period-detail {
    display: grid;
    width: 100%;
  }

  .detail-head,
  .lookup-strip,
  .detail-metrics,
  .detail-grid {
    grid-template-columns: 1fr;
  }

  .period-detail input,
  .period-detail select,
  .period-mode-wrap select {
    width: 100%;
  }

  .kpi-grid,
  .split-view,
  .flow-strip,
  .ops-grid,
  .daily-timesheet-grid,
  .weekly-ops-grid,
  .mail-drafts-grid,
  .workspace-context,
  .dashboard-data-grid,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-data-head {
    display: grid;
  }

  .timesheet-form {
    grid-template-columns: 1fr;
  }

  .timesheet-description {
    grid-column: 1 / -1;
  }

  .quote-lines-head,
  .quote-lines-actions {
    display: grid;
    width: 100%;
  }

  .quote-line-row {
    grid-template-columns: 1fr;
  }

  .tree {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* Statistiche per anno (parità con Elenco Statistiche legacy) */
.year-stats-chart {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  height: 180px;
  padding: 12px 4px 4px;
  overflow-x: auto;
}
.year-stat-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 52px;
  flex: 1;
}
.year-stat-col span { font-size: 11px; color: #5b6470; }
.year-stat-bars {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 150px;
  width: 100%;
  justify-content: center;
}
.year-bar { width: 16px; border-radius: 3px 3px 0 0; min-height: 2px; }
.year-bar.ricavi { background: #8aa832; }
.year-bar.costi { background: #2f6fa8; }
.year-stats-legend { font-size: 12px; color: #5b6470; display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.year-stats-legend .dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.year-stats-legend .dot.ricavi { background: #8aa832; }
.year-stats-legend .dot.costi { background: #2f6fa8; }

/* Riga di sintesi affidabilità collegamenti ricostruiti */
.relation-summary-line {
  font-size: 12px;
  color: #5b6470;
  margin: 0 0 8px;
  padding: 6px 10px;
  background: #f4f6f8;
  border-radius: 6px;
}

/* Cruscotto economico commessa */
.project-economics { background: #fbfcfd; border: 1px solid #e5e9ee; }
.econ-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.econ-head h4 { display: flex; align-items: center; gap: 8px; margin: 0; }
.econ-note { font-size: 12px; color: #7a828c; }
.econ-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 12px;
}
.econ-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e9edf1;
  border-radius: 8px;
}
.econ-cell span { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #7a828c; }
.econ-cell strong { font-size: 17px; color: #1f2733; }
.econ-cell small { font-size: 11px; color: #8a919b; }
.econ-cell strong.econ-neg { color: #c0392b; }
.econ-cell strong.econ-pos { color: #2e7d32; }
.econ-alerts { margin: 12px 0 0; padding-left: 18px; }
.econ-alerts li { font-size: 13px; color: #8a5000; margin: 3px 0; }

/* Contenitore collassabile dashboard: essenziale visibile, dettaglio a richiesta */
.dashboard-collapsible {
  border: 1px solid #e5e9ee;
  border-radius: 12px;
  background: #fff;
  margin: 14px 0;
  overflow: hidden;
}
.dashboard-collapsible > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  font-weight: 600;
  color: #1f2733;
}
.dashboard-collapsible > summary::-webkit-details-marker { display: none; }
.dashboard-collapsible > summary::before {
  content: "▸";
  color: #8a919b;
  font-size: 12px;
  transition: transform .15s ease;
}
.dashboard-collapsible[open] > summary::before { transform: rotate(90deg); }
.dashboard-collapsible-title { font-size: 15px; }
.dashboard-collapsible-summary { flex: 1; font-weight: 400; font-size: 13px; color: #5b6470; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dashboard-collapsible-toggle { font-size: 12px; color: #2f6fa8; font-weight: 500; }
.dashboard-collapsible-body { padding: 0 6px 6px; }
.dashboard-collapsible-body > section { margin: 0; }

/* Vista Avanzamento lavori: barra SAL con marcatore avanzamento atteso */
.work-progress-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.work-progress-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #5b6470;
}
.work-progress-controls select {
  padding: 6px 10px;
  border: 1px solid #d7dde3;
  border-radius: 8px;
  min-width: 200px;
}
.sal-bar {
  position: relative;
  width: 120px;
  height: 8px;
  background: #eef1f4;
  border-radius: 5px;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
}
.sal-fill { position: absolute; top: 0; left: 0; height: 100%; border-radius: 5px; }
.sal-expected { position: absolute; top: -2px; width: 2px; height: 12px; background: #1f2733; opacity: .55; }
.sal-label { font-size: 11px; color: #5b6470; margin-left: 8px; vertical-align: middle; }

/* Cabina di regia capacita: calendario settimanale, saturazione e backlog. */
.capacity-command {
  margin-bottom: 22px;
  padding: 18px;
  border: 1px solid #cfdce7;
  border-radius: 12px;
  background: linear-gradient(145deg, #fafdff 0%, #f3f8fb 100%);
  box-shadow: 0 14px 36px rgba(26, 65, 91, .08);
}
.capacity-command-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}
.capacity-command-head h2 { margin: 0 0 6px; font-size: 22px; }
.capacity-command-head p:last-child { margin: 0; color: var(--muted); max-width: 760px; }
.capacity-command-actions { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; justify-content: end; }
.capacity-command-actions label { display: grid; gap: 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.capacity-command-actions select { min-height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; background: #fff; }
.capacity-kpis { margin: 18px 0 12px; }
.capacity-kpis .kpi { background: rgba(255, 255, 255, .82); }
.capacity-kpis small { color: var(--muted); line-height: 1.25; }
.capacity-legend { display: flex; gap: 18px; flex-wrap: wrap; margin: 8px 0 10px; color: var(--muted); font-size: 12px; }
.capacity-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.legend-dot.forecast { background: #8fb9d2; }
.legend-dot.overload { background: var(--red); }
.capacity-grid-scroll { width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.capacity-grid {
  display: grid;
  grid-template-columns: 210px repeat(var(--capacity-weeks), minmax(132px, 1fr));
  min-width: calc(210px + var(--capacity-weeks) * 132px);
}
.capacity-grid > * { border-right: 1px solid #e3e9ef; border-bottom: 1px solid #e3e9ef; }
.capacity-grid-corner,
.capacity-week-head { min-height: 58px; padding: 10px 12px; background: #edf4f8; }
.capacity-grid-corner { display: grid; align-items: center; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.capacity-week-head { display: grid; align-content: center; gap: 2px; text-align: center; }
.capacity-week-head strong { font-size: 12px; }
.capacity-week-head span { color: var(--muted); font-size: 10px; }
.capacity-person { min-height: 94px; padding: 12px; display: grid; align-content: center; gap: 5px; background: #fbfcfd; }
.capacity-person strong { font-size: 13px; }
.capacity-person small { color: var(--muted); font-size: 10px; }
.capacity-person-status { width: fit-content; padding: 2px 7px; border-radius: 999px; font-size: 10px; font-weight: 800; background: #e7f0f6; color: #315f7b; }
.capacity-person-status.sovraccarico { background: #fee4e2; color: var(--red); }
.capacity-person-status.saturo { background: #fff0d5; color: var(--amber); }
.capacity-person-status.da_pianificare { background: #fff8db; color: #806000; }
.capacity-cell { min-height: 94px; padding: 11px; display: grid; align-content: center; gap: 8px; background: #fff; }
.capacity-cell > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.capacity-cell strong { font-size: 16px; }
.capacity-cell span { color: var(--muted); font-size: 10px; }
.capacity-cell small { color: var(--muted); font-size: 9px; line-height: 1.2; }
.capacity-cell.saturo { background: #fffaf0; }
.capacity-cell.sovraccarico { background: #fff3f2; }
.capacity-meter { height: 7px; overflow: hidden; border-radius: 999px; background: #eaf0f4; }
.capacity-meter i { display: block; height: 100%; border-radius: inherit; background: #4b9aca; }
.capacity-cell.saturo .capacity-meter i { background: #d99614; }
.capacity-cell.sovraccarico .capacity-meter i { background: var(--red); }
.capacity-method { margin: 9px 2px 0; color: var(--muted); font-size: 11px; }
.capacity-planning-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 12px; margin-top: 18px; }
.capacity-form { padding: 15px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; align-items: end; }
.capacity-form > div:first-child { grid-column: 1 / -1; }
.capacity-form h3 { margin: 0; font-size: 16px; }
.capacity-form label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 800; }
.capacity-form input,
.capacity-form select { min-width: 0; width: 100%; min-height: 39px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); }
.capacity-form-wide { grid-column: 1 / -1; }
.capacity-form button { min-height: 39px; }
.capacity-backlog { margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.capacity-backlog summary { cursor: pointer; list-style: none; padding: 13px 15px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.capacity-backlog summary::-webkit-details-marker { display: none; }
.capacity-backlog summary span { color: var(--muted); font-size: 12px; }
.capacity-bucket { display: inline-flex; padding: 3px 7px; border-radius: 999px; background: #edf2f6; color: #53626e; font-size: 10px; font-weight: 800; }
.capacity-bucket.arretrato,
.capacity-bucket.sovra_assegnata { background: #fee4e2; color: var(--red); }
.capacity-bucket.senza_scadenza,
.capacity-bucket.senza_budget_ore { background: #fff0d5; color: var(--amber); }
.capacity-assignments { margin-top: 14px; }
.table-action.danger { border-color: #f3b7b3; color: var(--red); background: #fff7f6; }
.table-action.danger:hover { background: #fee4e2; }

@media (max-width: 980px) {
  .capacity-command-head { display: grid; }
  .capacity-command-actions { justify-content: start; }
  .capacity-planning-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .capacity-command { padding: 12px; }
  .capacity-form { grid-template-columns: 1fr; }
  .capacity-form > div:first-child,
  .capacity-form-wide { grid-column: auto; }
  .capacity-backlog summary { align-items: start; flex-direction: column; }
}

/* Consegne, approvazioni cliente e passaggio controllato alla fattura. */
.delivery-command {
  margin-bottom: 22px;
  padding: 18px;
  border: 1px solid #d8d4ea;
  border-radius: 12px;
  background: linear-gradient(145deg, #fdfcff 0%, #f6f3fb 100%);
  box-shadow: 0 14px 36px rgba(70, 48, 115, .07);
}
.delivery-command-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
.delivery-command-head h2 { margin: 0 0 6px; font-size: 22px; }
.delivery-command-head p:last-child { margin: 0; max-width: 820px; color: var(--muted); }
.delivery-kpis { margin: 18px 0 14px; }
.delivery-kpis .kpi { background: rgba(255,255,255,.84); }
.delivery-kpis small { color: var(--muted); line-height: 1.25; }
.delivery-board { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; margin: 0 0 14px; }
.delivery-column { min-width: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.74); }
.delivery-column-head { min-height: 44px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #f1eef8; }
.delivery-column-head strong { font-size: 12px; }
.delivery-column-head span { min-width: 24px; height: 24px; display: grid; place-items: center; border-radius: 999px; background: #fff; color: #59477c; font-size: 11px; font-weight: 800; }
.delivery-column-body { min-height: 92px; padding: 8px; display: grid; align-content: start; gap: 8px; }
.delivery-empty { min-height: 72px; display: grid; place-items: center; color: var(--muted); font-size: 11px; text-align: center; }
.delivery-card { padding: 10px; border: 1px solid var(--line); border-left: 4px solid #8c7aae; border-radius: 8px; background: #fff; display: grid; gap: 6px; }
.delivery-card.waiting_client { border-left-color: var(--amber); }
.delivery-card.approved,
.delivery-card.completed { border-left-color: var(--green); }
.delivery-card.blocked,
.delivery-card.changes_requested { border-left-color: var(--red); }
.delivery-card-top { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 9px; }
.delivery-card-top strong { color: #59477c; }
.delivery-card h4 { margin: 0; font-size: 13px; line-height: 1.25; }
.delivery-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.3; }
.delivery-card-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--muted); font-size: 10px; }
.delivery-card .table-action { width: fit-content; }
.delivery-legacy .notice { margin: 0 12px 10px; }

.project-milestone-panel { margin: 16px 0; padding: 16px; border: 1px solid #d9d5e7; border-radius: 10px; background: #faf9fd; }
.project-milestone-head { display: flex; align-items: start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.project-milestone-head h4 { margin: 0 0 5px; font-size: 17px; }
.project-milestone-head p:last-child { margin: 0; color: var(--muted); font-size: 12px; }
.project-milestone-head > span { padding: 4px 9px; border-radius: 999px; background: #eee9f7; color: #59477c; font-size: 11px; font-weight: 800; }
.project-milestone-list { position: relative; display: grid; gap: 10px; }
.project-milestone { display: grid; grid-template-columns: 18px minmax(0,1fr); gap: 10px; }
.project-milestone-marker { width: 12px; height: 12px; margin: 15px 0 0 2px; border: 3px solid #fff; border-radius: 50%; background: #8c7aae; box-shadow: 0 0 0 2px #cfc5df; }
.project-milestone.waiting_client .project-milestone-marker { background: var(--amber); box-shadow: 0 0 0 2px #f0d298; }
.project-milestone.approved .project-milestone-marker,
.project-milestone.completed .project-milestone-marker { background: var(--green); box-shadow: 0 0 0 2px #a9d2bf; }
.project-milestone.blocked .project-milestone-marker,
.project-milestone.changes_requested .project-milestone-marker { background: var(--red); box-shadow: 0 0 0 2px #efb6b1; }
.project-milestone-body { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.project-milestone-title { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.project-milestone-title > div:first-child { display: grid; gap: 3px; }
.project-milestone-title strong { font-size: 14px; }
.project-milestone-title span { color: var(--muted); font-size: 10px; }
.project-milestone-title > div:last-child { display: flex; gap: 5px; flex-wrap: wrap; justify-content: end; }
.milestone-status,
.milestone-billing { display: inline-flex; padding: 3px 7px; border-radius: 999px; font-size: 9px !important; font-weight: 800; }
.milestone-status { background: #edf2f6; color: #52616d !important; }
.milestone-status.waiting_client { background: #fff0d5; color: var(--amber) !important; }
.milestone-status.approved,
.milestone-status.completed { background: #dcfce7; color: var(--green) !important; }
.milestone-status.blocked,
.milestone-status.changes_requested { background: #fee4e2; color: var(--red) !important; }
.milestone-billing { background: #eee9f7; color: #59477c !important; }
.milestone-billing.ready { background: #dcfce7; color: var(--green) !important; }
.milestone-billing.invoiced { background: var(--blue-2); color: var(--blue) !important; }
.project-milestone-body > p { margin: 8px 0; color: var(--muted); font-size: 12px; }
.project-milestone-meta { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 10px; }
.project-milestone-actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 10px; }
.project-milestone-actions button { min-height: 32px; padding: 6px 9px; font-size: 11px; }
.project-milestone-body details { margin-top: 9px; }
.project-milestone-body summary { cursor: pointer; color: #59477c; font-size: 10px; font-weight: 700; }
.milestone-events { margin-top: 7px; display: grid; gap: 5px; }
.milestone-events > div { display: grid; grid-template-columns: 90px 120px minmax(0,1fr); gap: 7px; padding: 6px 8px; border-radius: 6px; background: var(--surface-2); font-size: 9px; }
.milestone-events span,
.milestone-events small { color: var(--muted); }
.milestone-create { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.milestone-create > summary { cursor: pointer; width: fit-content; color: #59477c; font-size: 12px; font-weight: 800; }
.milestone-create form { margin-top: 10px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; align-items: end; }
.milestone-create label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 800; }
.milestone-create input,
.milestone-create select { min-width: 0; width: 100%; min-height: 38px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.milestone-create .milestone-check { display: flex; flex-direction: row; align-items: center; gap: 7px; min-height: 38px; }
.milestone-create .milestone-check input { width: 16px; min-height: 16px; }
.milestone-create .milestone-wide { grid-column: span 2; }

@media (max-width: 1100px) {
  .delivery-board { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .milestone-create form { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 680px) {
  .delivery-command { padding: 12px; }
  .delivery-command-head,
  .project-milestone-head,
  .project-milestone-title { display: grid; }
  .delivery-board,
  .milestone-create form { grid-template-columns: 1fr; }
  .milestone-create .milestone-wide { grid-column: auto; }
  .milestone-events > div { grid-template-columns: 1fr; }
}

/* Banner errore runtime: avviso non bloccante per errori imprevisti dopo l'avvio */
.runtime-error-banner {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  max-width: min(640px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #b42318;
  color: #ffffff;
  font-size: 13px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
.runtime-error-banner button {
  background: transparent;
  border: 0;
  color: #ffffff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}

/* Cockpit direzionale: stato azienda, priorita e cassa in un colpo d'occhio. */
.executive-cockpit {
  display: grid;
  gap: 14px;
  margin: 16px 0 20px;
}

.cockpit-hero {
  display: grid;
  grid-template-columns: 120px minmax(240px, 1fr) minmax(360px, 1.25fr);
  align-items: center;
  gap: 22px;
  min-height: 176px;
  padding: 22px 24px;
  border: 1px solid #dbe5ea;
  border-radius: 16px;
  color: #f8fbfd;
  background:
    radial-gradient(circle at 8% 12%, rgba(49, 203, 183, .22), transparent 30%),
    linear-gradient(135deg, #122b38 0%, #173f4d 58%, #0e5360 100%);
  box-shadow: 0 18px 42px rgba(20, 45, 58, .16);
}

.cockpit-hero.warning {
  background: radial-gradient(circle at 8% 12%, rgba(255, 192, 85, .22), transparent 30%), linear-gradient(135deg, #342b1d, #5a421f 58%, #75511d);
}

.cockpit-hero.critical {
  background: radial-gradient(circle at 8% 12%, rgba(255, 121, 112, .24), transparent 30%), linear-gradient(135deg, #351f25, #61272d 58%, #792d32);
}

.health-gauge {
  --score: 0;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#54d6b3 calc(var(--score) * 1%), rgba(255, 255, 255, .15) 0);
  position: relative;
}

.warning .health-gauge { background: conic-gradient(#ffc65c calc(var(--score) * 1%), rgba(255,255,255,.14) 0); }
.critical .health-gauge { background: conic-gradient(#ff7e76 calc(var(--score) * 1%), rgba(255,255,255,.14) 0); }
.health-gauge::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: #173845; }
.warning .health-gauge::after { background: #4d381f; }
.critical .health-gauge::after { background: #53262b; }
.health-gauge div { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 2px; }
.health-gauge strong { font-size: 34px; line-height: 1; }
.health-gauge span { font-size: 12px; opacity: .68; }

.cockpit-hero-copy h2 { margin: 2px 0 6px; font-size: 25px; }
.cockpit-hero-copy p { margin: 0 0 12px; max-width: 520px; color: rgba(255,255,255,.78); }
.cockpit-hero-copy small { color: rgba(255,255,255,.58); }
.cockpit-hero .detail-eyebrow { color: #8ee7d4; }
.cockpit-hero.warning .detail-eyebrow { color: #ffd17b; }
.cockpit-hero.critical .detail-eyebrow { color: #ffaaa5; }

.cockpit-score-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cockpit-score { padding: 11px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.07); }
.cockpit-score span { color: rgba(255,255,255,.7); font-size: 12px; }
.cockpit-score strong { float: right; font-size: 16px; }
.cockpit-score i, .cfo-quality > i { display: block; clear: both; height: 4px; margin-top: 9px; overflow: hidden; border-radius: 9px; background: rgba(255,255,255,.12); }
.cockpit-score i b, .cfo-quality > i b { display: block; height: 100%; border-radius: inherit; background: #54d6b3; }
.cockpit-score.warning i b { background: #ffc65c; }
.cockpit-score.critical i b { background: #ff7e76; }

.cockpit-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); gap: 12px; }
.cockpit-metric { position: relative; overflow: hidden; padding: 17px 18px 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cockpit-metric::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #9ca8b3; }
.cockpit-metric.good::before { background: #27a47a; }
.cockpit-metric.warning::before { background: #e1a12c; }
.cockpit-metric.critical::before { background: #d34f45; }
.cockpit-metric span { display: block; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .035em; }
.cockpit-metric strong { display: block; margin: 6px 0 3px; font-size: clamp(20px, 2vw, 27px); line-height: 1.05; }
.cockpit-metric small { color: var(--muted); font-size: 12px; }

.cockpit-body-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr); gap: 12px; }
.cockpit-panel { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cockpit-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cockpit-panel-head h3 { margin: 2px 0 0; font-size: 17px; }

.priority-list { display: grid; gap: 7px; }
.priority-row { width: 100%; display: grid; grid-template-columns: 9px minmax(0, 1fr) auto auto; align-items: center; gap: 11px; padding: 10px 12px; border: 1px solid #e8edf0; border-radius: 9px; background: #fbfcfd; color: var(--text); text-align: left; cursor: pointer; }
.priority-row:hover { border-color: #91b7c8; background: #f4fafc; transform: translateY(-1px); }
.priority-signal { width: 8px; height: 8px; border-radius: 50%; background: #7c8a96; box-shadow: 0 0 0 4px rgba(124,138,150,.12); }
.priority-row.critical .priority-signal { background: #d34f45; box-shadow: 0 0 0 4px rgba(211,79,69,.12); }
.priority-row.warning .priority-signal { background: #e1a12c; box-shadow: 0 0 0 4px rgba(225,161,44,.14); }
.priority-row strong, .priority-row small { display: block; }
.priority-row strong { font-size: 13px; }
.priority-row small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.priority-row > b { color: #b42318; font-size: 13px; white-space: nowrap; }
.priority-row > i { color: var(--blue); font-size: 11px; font-style: normal; white-space: nowrap; }
.empty-positive { display: grid; gap: 3px; padding: 18px; border-radius: 9px; color: #176b4c; background: #effaf5; }
.empty-positive span { color: #4d7566; font-size: 12px; }

.cash-horizon { display: grid; gap: 13px; }
.cash-row { display: grid; grid-template-columns: 72px minmax(90px, 1fr) auto; align-items: center; gap: 10px; }
.cash-row > span { color: var(--muted); font-size: 12px; }
.cash-row > strong { min-width: 86px; text-align: right; font-size: 13px; }
.cash-row > small { grid-column: 2 / -1; margin-top: -7px; color: #84909a; font-size: 10px; }
.cash-bars { display: grid; gap: 3px; }
.cash-bars i { display: block; height: 6px; border-radius: 6px; }
.cash-in { background: #39ae82; }
.cash-out { background: #de7169; }
.cfo-quality { margin-top: 17px; padding-top: 14px; border-top: 1px solid var(--line); }
.cfo-quality > div { display: flex; justify-content: space-between; font-size: 12px; }
.cfo-quality > i { background: #edf1f3; height: 6px; }
.cfo-quality > small { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.reconciliation-block .compact-grid { margin: 14px 0; }
.warning-notice { border-color: #f0d39a; background: #fff8e9; color: #7a5000; }

.invoice-review-block .compact-grid { margin: 14px 0; }
.invoice-review-disclosure { margin-top: 14px; }
.invoice-review-list { display: grid; gap: 12px; }
.invoice-review-card { padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 4px 16px rgba(22, 42, 55, .04); }
.invoice-review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.invoice-review-head strong, .invoice-review-head span { display: block; }
.invoice-review-head > div > strong { font-size: 14px; }
.invoice-review-head > div > span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.invoice-review-description { margin: 10px 0; color: #4d5c67; font-size: 12px; line-height: 1.5; }
.invoice-review-risks { margin: 8px 0; padding: 8px 10px; border-left: 3px solid #e1a12c; border-radius: 6px; color: #795000; background: #fff8e9; font-size: 11px; }
.invoice-review-candidates { display: grid; gap: 8px; margin-top: 10px; }
.invoice-review-candidate { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 11px; border: 1px solid #e4eaee; border-radius: 9px; background: #fafcfd; }
.invoice-review-candidate.best { border-color: #9ccfc1; background: #f4fbf8; }
.invoice-review-candidate-main { display: grid; grid-template-columns: minmax(0, 1fr) 54px; align-items: center; gap: 12px; }
.invoice-review-candidate-main strong, .invoice-review-candidate-main span { display: block; }
.invoice-review-candidate-main strong { font-size: 12px; line-height: 1.4; }
.invoice-review-candidate-main span { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.invoice-review-score { padding: 7px 5px; border-radius: 8px; color: #176b4c; background: #e6f6ef; text-align: center; }
.invoice-review-score strong { font-size: 17px; line-height: 1; }
.invoice-review-score span { margin: 1px 0 0; color: #4e7c6b; font-size: 9px; }
.invoice-review-candidate .detail-actions { flex-wrap: nowrap; }

.invoice-allocation-form { display: grid; gap: 13px; }
.invoice-allocation-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.invoice-allocation-summary > div { padding: 10px 12px; border: 1px solid #e4eaee; border-radius: 9px; background: #fafcfd; }
.invoice-allocation-summary span, .invoice-allocation-summary strong { display: block; }
.invoice-allocation-summary span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .035em; }
.invoice-allocation-summary strong { margin-top: 4px; font-size: 15px; }
.invoice-allocation-summary .allocation-balanced { color: #177452; }
.invoice-allocation-summary .allocation-unbalanced { color: #b24c29; }
.invoice-allocation-rows { display: grid; gap: 7px; }
.invoice-allocation-row { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 8px; }
.invoice-allocation-row select, .invoice-allocation-row input { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #d6dfe4; border-radius: 8px; background: #fff; color: var(--text); }
.invoice-allocation-row input { text-align: right; font-variant-numeric: tabular-nums; }
.invoice-allocation-actions { justify-content: flex-end; }

.credit-control-block { display: grid; gap: 15px; }
.credit-control-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.credit-kpi { position: relative; overflow: hidden; padding: 14px 15px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.credit-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #7895a4; }
.credit-kpi.good::before { background: #2d9b72; }
.credit-kpi.warning::before { background: #dda02f; }
.credit-kpi.critical::before { background: #d3554c; }
.credit-kpi span, .credit-kpi strong, .credit-kpi small { display: block; }
.credit-kpi span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.credit-kpi strong { margin: 6px 0 4px; font-size: 20px; }
.credit-kpi small { color: var(--muted); font-size: 10px; }
.credit-control-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(240px, .5fr); gap: 12px; }
.credit-aging-panel, .credit-promise-panel { padding: 15px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.credit-aging-panel h4, .credit-promise-panel h4, .credit-priority-section h4 { margin: 0 0 12px; }
.credit-aging-list { display: grid; gap: 9px; }
.credit-aging-row { display: grid; grid-template-columns: 128px minmax(80px, 1fr) 110px 34px; align-items: center; gap: 9px; }
.credit-aging-row > span { color: #53636d; font-size: 11px; }
.credit-aging-row > i { display: block; height: 7px; overflow: hidden; border-radius: 7px; background: #edf1f3; }
.credit-aging-row > i b { display: block; height: 100%; border-radius: inherit; background: #3d9e81; }
.credit-aging-row.historical > i b { background: #d49b38; }
.credit-aging-row > strong { text-align: right; font-size: 11px; }
.credit-aging-row > small { display: grid; place-items: center; min-width: 28px; height: 22px; border-radius: 11px; color: #60717b; background: #eef2f4; font-size: 9px; }
.credit-promise-panel { display: grid; align-content: center; justify-items: center; text-align: center; }
.credit-promise-panel p { max-width: 280px; margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.credit-quality-ring { width: 116px; aspect-ratio: 1; display: grid; place-content: center; border-radius: 50%; background: radial-gradient(circle at center, #fff 58%, transparent 59%), conic-gradient(#36a77f var(--credit-quality), #e8edef 0); }
.credit-quality-ring strong, .credit-quality-ring span { display: block; text-align: center; }
.credit-quality-ring strong { font-size: 22px; }
.credit-quality-ring span { max-width: 70px; color: var(--muted); font-size: 9px; line-height: 1.25; }
.credit-action-form { padding: 16px; border: 1px solid #9fcfc2; border-radius: 12px; background: #f4fbf8; }
.credit-action-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 13px; }
.credit-action-head h4 { margin: 3px 0; }
.credit-action-head p { margin: 0; color: var(--muted); font-size: 11px; }
.credit-action-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.credit-action-fields label { display: grid; gap: 5px; }
.credit-action-fields label.wide { grid-column: 1 / -1; }
.credit-action-fields label > span { color: var(--muted); font-size: 10px; font-weight: 700; }
.credit-action-fields input, .credit-action-fields select, .credit-action-fields textarea { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #ccd9d5; border-radius: 8px; background: #fff; color: var(--text); font: inherit; }
.credit-action-fields label.inactive { opacity: .45; }
.credit-action-form > .detail-actions { margin-top: 10px; justify-content: flex-end; }
.credit-draft-panel { padding: 16px; border: 1px solid #9bbfd0; border-radius: 12px; background: #f3f9fc; }
.credit-draft-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.credit-draft-toolbar label { display: grid; gap: 4px; }
.credit-draft-toolbar label span, .credit-draft-fields label > span { color: var(--muted); font-size: 10px; font-weight: 700; }
.credit-draft-toolbar select { min-width: 130px; padding: 8px 10px; border: 1px solid #c8d8df; border-radius: 8px; background: #fff; }
.credit-draft-fields { display: grid; grid-template-columns: minmax(200px, .45fr) minmax(300px, 1.55fr); gap: 9px; }
.credit-draft-fields label { display: grid; gap: 5px; }
.credit-draft-fields label.wide { grid-column: 1 / -1; }
.credit-draft-fields input, .credit-draft-fields textarea { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid #c8d8df; border-radius: 8px; background: #fff; color: var(--text); font: inherit; }
.credit-draft-fields textarea { resize: vertical; line-height: 1.55; }
.credit-draft-actions { margin: 10px 0; justify-content: flex-end; }
.credit-priority-section { display: grid; gap: 8px; }
.credit-priority-section .detail-section-head { margin: 0; }
.credit-priority-section .detail-section-head > span { color: var(--muted); font-size: 11px; }
.credit-priority-card { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 12px; border: 1px solid #e1e8eb; border-left: 4px solid #8ba0aa; border-radius: 10px; background: #fff; }
.credit-priority-card.alta { border-left-color: #dd9e2f; }
.credit-priority-card.critica { border-left-color: #d3554c; }
.credit-priority-score { display: grid; place-content: center; width: 54px; height: 54px; border-radius: 50%; background: #eef3f4; text-align: center; }
.credit-priority-card.alta .credit-priority-score { color: #8b5900; background: #fff4db; }
.credit-priority-card.critica .credit-priority-score { color: #9b2d27; background: #fff0ee; }
.credit-priority-score strong, .credit-priority-score span { display: block; }
.credit-priority-score strong { font-size: 18px; line-height: 1; }
.credit-priority-score span { margin-top: 2px; font-size: 8px; text-transform: uppercase; }
.credit-priority-main { min-width: 0; }
.credit-priority-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 9px; }
.credit-priority-title strong, .credit-priority-title span { display: block; }
.credit-priority-title > div > strong { font-size: 13px; }
.credit-priority-title > div > span { margin-top: 2px; color: var(--muted); font-size: 10px; }
.credit-priority-values { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 8px; }
.credit-priority-values > span { color: var(--muted); font-size: 10px; }
.credit-priority-values strong { color: var(--text); }
.credit-next-action { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.credit-next-action > span:first-child { color: #176b4c; font-size: 11px; font-weight: 700; }
.credit-priority-actions { display: grid; gap: 6px; justify-items: stretch; }

.commercial-pipeline-block { display: grid; gap: 14px; }
.commercial-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.commercial-kpi { position: relative; overflow: hidden; padding: 14px 15px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.commercial-kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: #6f91a2; }
.commercial-kpi.good::before { background: #2e9f76; }
.commercial-kpi.warning::before { background: #dda02f; }
.commercial-kpi span, .commercial-kpi strong, .commercial-kpi small { display: block; }
.commercial-kpi span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.commercial-kpi strong { margin: 6px 0 4px; font-size: 20px; }
.commercial-kpi small { color: var(--muted); font-size: 10px; }
.commercial-stage-grid { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 3px; }
.commercial-stage { min-width: 110px; padding: 11px; border: 1px solid #e0e7ea; border-top: 4px solid #8da0aa; border-radius: 9px; background: #fff; }
.commercial-stage.sent { border-top-color: #3f8fb2; }
.commercial-stage.negotiation { border-top-color: #8c6cc4; }
.commercial-stage.accepted { border-top-color: #2d9c72; }
.commercial-stage.rejected, .commercial-stage.expired { border-top-color: #cf5d55; }
.commercial-stage.archived { border-top-color: #a1a8ad; }
.commercial-stage span, .commercial-stage strong, .commercial-stage small { display: block; }
.commercial-stage span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.commercial-stage strong { margin: 4px 0; font-size: 20px; }
.commercial-stage small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.commercial-quality-row { display: flex; flex-wrap: wrap; gap: 8px; }
.commercial-quality-row span { padding: 6px 9px; border-radius: 12px; color: #4f6470; background: #edf3f5; font-size: 10px; }
.commercial-priority-list { display: grid; gap: 7px; }
.commercial-priority-list .detail-section-head { margin: 0; }
.commercial-priority-card { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid #e2e8eb; border-left: 4px solid #8da0aa; border-radius: 9px; background: #fff; }
.commercial-priority-card.warning { border-left-color: #dda02f; }
.commercial-priority-card.critical { border-left-color: #cf5d55; }
.commercial-priority-card > div:first-child strong, .commercial-priority-card > div:first-child span { display: block; }
.commercial-priority-card > div:first-child strong { font-size: 12px; }
.commercial-priority-card > div:first-child span { margin-top: 3px; color: #815a11; font-size: 10px; }
.commercial-priority-value { text-align: right; }
.commercial-priority-value strong, .commercial-priority-value span { display: block; }
.commercial-priority-value strong { font-size: 12px; }
.commercial-priority-value span { margin-top: 2px; color: var(--muted); font-size: 9px; }
.commercial-workflow-panel { border-color: #a8c8d6; background: #f7fbfd; }
.commercial-workflow-panel .detail-section-head > div:first-child h4 { margin-bottom: 2px; }
.commercial-activity-form { display: grid; grid-template-columns: 170px 170px minmax(260px, 1fr) auto; align-items: end; gap: 8px; margin-top: 12px; }
.commercial-activity-form label { display: grid; gap: 5px; }
.commercial-activity-form label > span { color: var(--muted); font-size: 10px; font-weight: 700; }
.commercial-activity-form input, .commercial-activity-form select { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #cbd9df; border-radius: 8px; background: #fff; color: var(--text); }

/* Portafoglio rinnovi: valore ricorrente, concentrazione e coda operativa. */
.renewal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  margin: 0 18px 14px;
  padding: 22px 24px;
  border: 1px solid #b9d8e6;
  border-radius: 14px;
  background: linear-gradient(125deg, #f5fcff 0%, #eaf7fb 56%, #f8fbf1 100%);
  box-shadow: 0 12px 32px rgba(21, 78, 100, .08);
}
.renewal-hero h3 { margin: 2px 0 7px; color: #12384a; font-size: clamp(27px, 3vw, 40px); letter-spacing: -.035em; }
.renewal-hero h3 small { color: #557382; font-size: 14px; font-weight: 700; letter-spacing: 0; }
.renewal-hero p { max-width: 720px; margin: 0; color: #557382; line-height: 1.48; }
.renewal-hero-actions { display: grid; justify-items: end; gap: 7px; }
.renewal-hero-actions span { color: #6f8792; font-size: 11px; }
.renewal-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 0 18px 14px; }
.renewal-kpis > div { min-width: 0; padding: 14px; border: 1px solid #dbe5e9; border-top: 3px solid #65a8c3; border-radius: 10px; background: #fff; }
.renewal-kpis > div.warning { border-top-color: #d99a2b; background: #fffdf7; }
.renewal-kpis > div.danger { border-top-color: #ca534b; background: #fffafa; }
.renewal-kpis > div.good { border-top-color: #3e9a6c; }
.renewal-kpis span, .renewal-kpis small, .renewal-kpis strong { display: block; min-width: 0; }
.renewal-kpis span { color: #687b84; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; }
.renewal-kpis strong { margin: 6px 0 3px; font-size: clamp(20px, 2vw, 28px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.renewal-kpis small { color: #7a8c94; font-size: 10px; line-height: 1.35; }
.renewal-main-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(290px, .75fr); gap: 12px; margin: 0 18px 14px; }
.renewal-panel { min-width: 0; margin: 0 18px 14px; padding: 16px; border: 1px solid #dbe5e9; border-radius: 12px; background: #fff; }
.renewal-main-grid .renewal-panel { margin: 0; }
.renewal-panel-head { display: flex; align-items: end; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.renewal-panel-head span, .renewal-panel-head strong { display: block; }
.renewal-panel-head span { margin-bottom: 3px; color: #6b818c; font-size: 10px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.renewal-panel-head strong { color: #213943; font-size: 15px; }
.renewal-panel-head > small { color: #7b8e96; font-size: 10px; text-align: right; }
.renewal-months { display: flex; align-items: end; gap: 8px; min-height: 190px; overflow-x: auto; padding: 8px 2px 3px; }
.renewal-month { flex: 1 0 62px; display: grid; grid-template-rows: 18px 108px 18px 15px; gap: 3px; align-items: end; text-align: center; }
.renewal-month > span { color: #617984; font-size: 10px; font-weight: 750; text-transform: capitalize; }
.renewal-month > div { height: 108px; display: flex; align-items: end; justify-content: center; border-radius: 6px; background: linear-gradient(180deg, #f8fbfc, #edf4f7); overflow: hidden; }
.renewal-month i { display: block; width: 72%; min-height: 5px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg, #33a7cf, #14799f); box-shadow: 0 4px 10px rgba(8, 119, 185, .15); }
.renewal-month strong { font-size: 10px; white-space: nowrap; }
.renewal-month small { color: #84939a; font-size: 9px; white-space: nowrap; }
.renewal-stage-list { display: grid; gap: 7px; }
.renewal-stage-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 11px; border: 1px solid #e3e9ec; border-radius: 8px; background: #fafcfd; }
.renewal-stage-list span { color: #4f6670; font-size: 11px; font-weight: 750; }
.renewal-stage-list strong { font-size: 15px; }
.renewal-stage-list small { grid-column: 1 / -1; color: #87969c; font-size: 9px; }
.renewal-priority-list { display: grid; gap: 8px; }
.renewal-priority-list article { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 11px 12px; border: 1px solid #e1e8eb; border-left: 4px solid #92a6af; border-radius: 9px; background: #fff; }
.renewal-priority-list article.medium { border-left-color: #dfa33a; }
.renewal-priority-list article.high, .renewal-priority-list article.critical { border-left-color: #ca534b; background: #fffdfd; }
.renewal-priority-date strong, .renewal-priority-date span { display: block; }
.renewal-priority-date strong { font-size: 12px; }
.renewal-priority-date span { margin-top: 2px; color: #788b93; font-size: 10px; }
.renewal-priority-title { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.renewal-priority-title > strong { font-size: 13px; }
.renewal-priority-list p { margin: 3px 0; color: #4d626b; font-size: 11px; }
.renewal-priority-list article > div > small { color: #8a5d1d; font-size: 9px; }
.renewal-priority-pill { padding: 3px 6px; border-radius: 999px; background: #edf1f3; color: #53676f; font-size: 8px; font-weight: 850; text-transform: uppercase; letter-spacing: .035em; }
.renewal-priority-pill.medium { background: #fff0cf; color: #885b07; }
.renewal-priority-pill.high, .renewal-priority-pill.critical { background: #fee4e2; color: #9f2f29; }
.renewal-empty-success { padding: 22px; border-radius: 9px; background: #eef9f3; color: #26764d; text-align: center; font-size: 12px; font-weight: 750; }
.renewal-quality-strip { display: flex; align-items: stretch; gap: 8px; margin: 0 18px 14px; padding: 12px; border: 1px solid #ead9b3; border-radius: 12px; background: #fffaf0; overflow-x: auto; }
.renewal-quality-strip > div { flex: 1 0 250px; display: grid; align-content: center; }
.renewal-quality-strip > div strong, .renewal-quality-strip > div span { display: block; }
.renewal-quality-strip > div strong { font-size: 12px; }
.renewal-quality-strip > div span { margin-top: 2px; color: #806a43; font-size: 10px; }
.renewal-quality-strip button { flex: 0 0 185px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: center; padding: 9px; border: 1px solid #ead9b3; border-radius: 8px; background: #fff; color: #4b4438; text-align: left; cursor: pointer; }
.renewal-quality-strip button strong { font-size: 20px; color: #a96b08; }
.renewal-quality-strip button span { font-size: 9px; line-height: 1.25; }
.renewal-detail-panel { margin: 0 18px 16px; border-color: #9ec9da; box-shadow: 0 14px 36px rgba(21, 78, 100, .10); }
.renewal-quality-banner { display: flex; flex-wrap: wrap; gap: 7px; padding: 10px; border: 1px solid #ebd7aa; border-radius: 8px; background: #fff9ec; }
.renewal-quality-banner span { padding: 4px 7px; border-radius: 999px; background: #fff; color: #88611d; font-size: 10px; font-weight: 750; }
.renewal-detail-grid { grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr); }
.renewal-workflow-panel { border-color: #a8c8d6; background: #f8fcfd; }
.renewal-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 9px; padding: 14px; }
.renewal-form-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.renewal-form-grid label { display: grid; gap: 5px; min-width: 0; }
.renewal-form-grid label.wide { grid-column: 1 / -1; }
.renewal-form-grid label span { color: #687d86; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .035em; }
.renewal-form-grid input, .renewal-form-grid select { width: 100%; min-width: 0; padding: 9px 10px; border: 1px solid #cbd9df; border-radius: 8px; background: #fff; color: var(--text); }
.renewal-generate-callout { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; margin: 0 14px 14px; padding: 12px; border-radius: 9px; background: #e8f7ef; color: #245b3f; }
.renewal-generate-callout strong, .renewal-generate-callout span { display: block; }
.renewal-generate-callout span { margin-top: 3px; font-size: 10px; line-height: 1.4; }
.renewal-last-project { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border: 1px solid #dbe5e9; border-radius: 9px; background: #f7fafb; }
.renewal-last-project span { color: #71858e; font-size: 10px; }
.renewal-last-project strong { margin-right: auto; font-size: 12px; }
.renewal-event-list { display: grid; padding: 8px 14px 14px; }
.renewal-event-list article { display: grid; grid-template-columns: 95px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid #e8edef; }
.renewal-event-list article:last-child { border-bottom: 0; }
.renewal-event-list time { color: #6f848d; font-size: 10px; font-weight: 750; }
.renewal-event-list strong { font-size: 11px; }
.renewal-event-list p { margin: 3px 0; color: #53676f; font-size: 11px; }
.renewal-event-list small { color: #8a6a2f; font-size: 9px; }
.renewal-detail-loading, .empty-detail { padding: 20px; color: #6d818a; text-align: center; }
.renewal-loading-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 18px; }
.renewal-loading-grid div { height: 120px; border-radius: 12px; background: linear-gradient(90deg, #edf1f3 25%, #f7f9fa 50%, #edf1f3 75%); background-size: 200% 100%; animation: cockpit-pulse 1.4s infinite; }

/* Cliente 360: redditivita, credito, pipeline e ricorrenza in una lettura. */
.customer-360-hero { display: grid; grid-template-columns: 58px minmax(0, 1fr) 180px; gap: 15px; align-items: center; padding: 16px; border: 1px solid #bcd8c9; border-radius: 11px; background: #f4fbf7; }
.customer-360-hero.attention { border-color: #ead29e; background: #fffaf0; }
.customer-360-hero.critical { border-color: #efb8b4; background: #fff7f6; }
.customer-health-mark { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 50%; background: #dff3e7; color: #23754b; font-size: 23px; font-weight: 900; }
.customer-360-hero.attention .customer-health-mark { background: #ffedc6; color: #92600b; }
.customer-360-hero.critical .customer-health-mark { background: #fee4e2; color: #a43a32; }
.customer-360-hero h4 { margin: 2px 0 4px; font-size: 20px; }
.customer-360-hero p { margin: 0; color: #62767f; font-size: 11px; line-height: 1.4; }
.customer-health-score { padding-left: 14px; border-left: 1px solid rgba(80, 110, 120, .18); text-align: right; }
.customer-health-score span, .customer-health-score strong, .customer-health-score small { display: block; }
.customer-health-score span { color: #6c7f87; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.customer-health-score strong { margin: 4px 0 2px; font-size: 24px; }
.customer-health-score small { color: #819097; font-size: 9px; }
.customer-360-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 9px; }
.customer-360-grid > div { min-width: 0; padding: 12px; border: 1px solid #dce5e8; border-top: 3px solid #78a7b9; border-radius: 9px; background: #fff; }
.customer-360-grid > div.good { border-top-color: #43966c; }
.customer-360-grid > div.warning { border-top-color: #d49a32; }
.customer-360-grid > div.critical { border-top-color: #c85149; }
.customer-360-grid span, .customer-360-grid strong, .customer-360-grid small { display: block; min-width: 0; }
.customer-360-grid span { color: #6d8088; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.customer-360-grid strong { margin: 5px 0 2px; font-size: 17px; overflow-wrap: anywhere; }
.customer-360-grid small { color: #87959b; font-size: 9px; line-height: 1.3; }

/* Forecast finanziario rolling: bande di confidenza e target mensili. */
.forecast-panel { margin: 0 18px 18px; padding: 18px; border: 1px solid #cddde4; border-radius: 14px; background: #fff; box-shadow: 0 10px 28px rgba(29, 67, 83, .06); }
.forecast-head { display: flex; justify-content: space-between; align-items: start; gap: 18px; margin-bottom: 14px; }
.forecast-head h3 { margin: 2px 0 4px; font-size: 18px; }
.forecast-head p { margin: 0; color: #687d86; font-size: 11px; }
.forecast-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.forecast-kpis > div { min-width: 0; padding: 11px; border: 1px solid #dfe7ea; border-top: 3px solid #6b9fb4; border-radius: 9px; background: #fafcfd; }
.forecast-kpis > div.good { border-top-color: #3f9669; }
.forecast-kpis > div.warning { border-top-color: #d69a30; }
.forecast-kpis span, .forecast-kpis strong, .forecast-kpis small { display: block; }
.forecast-kpis span { color: #6e828b; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.forecast-kpis strong { margin: 5px 0 2px; font-size: 17px; overflow-wrap: anywhere; }
.forecast-kpis small { color: #85949a; font-size: 9px; line-height: 1.3; }
.forecast-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 5px 0 10px; color: #667b84; font-size: 9px; }
.forecast-legend span { display: flex; align-items: center; gap: 4px; }
.forecast-legend i { width: 10px; height: 7px; border-radius: 2px; }
.forecast-legend b { width: 2px; height: 10px; background: #263a43; }
.forecast-legend .actual, .forecast-track .actual { background: #167ca4; }
.forecast-legend .ready, .forecast-track .ready { background: #39a97a; }
.forecast-legend .scheduled, .forecast-track .scheduled { background: #80b6c8; }
.forecast-legend .renewal, .forecast-track .renewal { background: #d2a548; }
.forecast-legend .pipeline, .forecast-track .pipeline { background: #bda5d8; }
.forecast-chart { display: grid; gap: 6px; }
.forecast-month-row { display: grid; grid-template-columns: 72px minmax(180px, 1fr) 105px 90px; gap: 9px; align-items: center; min-width: 0; }
.forecast-month-row > span { color: #576d76; font-size: 10px; font-weight: 750; text-transform: capitalize; }
.forecast-month-row > strong { font-size: 10px; text-align: right; }
.forecast-month-row > small { color: #7c8d94; font-size: 9px; text-align: right; }
.forecast-track { position: relative; height: 14px; display: flex; overflow: visible; border-radius: 4px; background: #edf2f4; }
.forecast-track i { display: block; height: 100%; min-width: 0; }
.forecast-track i:first-child { border-radius: 4px 0 0 4px; }
.forecast-track b { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #263a43; transform: translateX(-1px); box-shadow: 0 0 0 1px rgba(255,255,255,.8); }
.forecast-warning { display: flex; gap: 9px; align-items: center; margin-top: 12px; padding: 10px 12px; border: 1px solid #ead29f; border-radius: 8px; background: #fff9ec; color: #74551d; font-size: 10px; }
.forecast-warning span { color: #8a754f; }
.forecast-method { margin-top: 12px; border-top: 1px solid #e2e8eb; }
.forecast-method > summary { padding: 11px 2px 0; cursor: pointer; color: #46616d; font-size: 10px; font-weight: 800; }
.forecast-method-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .8fr); gap: 14px; padding-top: 12px; }
.forecast-method-grid strong { font-size: 10px; }
.forecast-method-grid p { margin: 2px 0 8px; color: #6f8189; font-size: 10px; }
.forecast-target-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; border: 1px solid #d8e3e7; border-radius: 9px; background: #f8fbfc; }
.forecast-target-form label { display: grid; gap: 4px; }
.forecast-target-form label.wide { grid-column: 1 / -1; }
.forecast-target-form label span { color: #6c8089; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.forecast-target-form input { width: 100%; min-width: 0; padding: 8px 9px; border: 1px solid #cbd9df; border-radius: 7px; background: #fff; }
.forecast-loading { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.forecast-loading div { height: 100px; border-radius: 10px; background: linear-gradient(90deg, #edf1f3 25%, #f7f9fa 50%, #edf1f3 75%); background-size: 200% 100%; animation: cockpit-pulse 1.4s infinite; }

/* Controllo fornitori: uscite confermate, stimate e storico separati. */
.supplier-control { margin: 0 18px 18px; padding: 16px; border: 1px solid #d8e1e5; border-radius: 12px; background: #fff; }
.supplier-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 13px 0; }
.supplier-kpis > div { min-width: 0; padding: 11px; border: 1px solid #e0e7ea; border-top: 3px solid #719cad; border-radius: 8px; background: #fafcfd; }
.supplier-kpis > div.warning { border-top-color: #d39a31; background: #fffaf1; }
.supplier-kpis > div.critical { border-top-color: #c75048; background: #fff7f6; }
.supplier-kpis > div.good { border-top-color: #42946a; }
.supplier-kpis span, .supplier-kpis strong, .supplier-kpis small { display: block; }
.supplier-kpis span { color: #6e8189; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.supplier-kpis strong { margin: 5px 0 2px; font-size: 17px; overflow-wrap: anywhere; }
.supplier-kpis small { color: #87949a; font-size: 9px; }
.supplier-priority-list { display: grid; gap: 7px; margin-bottom: 12px; }
.supplier-priority-list article { display: grid; grid-template-columns: minmax(180px, 1fr) 150px minmax(170px, .7fr) auto; gap: 12px; align-items: center; padding: 10px 11px; border: 1px solid #e0e7e9; border-left: 4px solid #8ba1aa; border-radius: 8px; }
.supplier-priority-list article.high, .supplier-priority-list article.critical { border-left-color: #d18f28; background: #fffdf8; }
.supplier-priority-list strong, .supplier-priority-list span { display: block; }
.supplier-priority-list strong { font-size: 11px; }
.supplier-priority-list span { margin-top: 2px; color: #7d8e95; font-size: 9px; }
.supplier-priority-list p { margin: 0; color: #6f5525; font-size: 10px; }

.cockpit-loading { grid-template-columns: repeat(3, 1fr); }
.cockpit-skeleton { height: 110px; border-radius: 12px; background: linear-gradient(90deg, #edf1f3 25%, #f7f9fa 50%, #edf1f3 75%); background-size: 200% 100%; animation: cockpit-pulse 1.4s infinite; }
.cockpit-skeleton.wide { grid-column: 1 / -1; height: 170px; }
@keyframes cockpit-pulse { to { background-position: -200% 0; } }

@media (max-width: 1180px) {
  .cockpit-hero { grid-template-columns: 104px 1fr; }
  .cockpit-score-grid { grid-column: 1 / -1; grid-template-columns: repeat(4, 1fr); }
  .cockpit-metrics { grid-template-columns: repeat(2, 1fr); }
  .cockpit-body-grid { grid-template-columns: 1fr; }
}

@media (max-width: 820px) {
  .sidebar {
    padding: 10px;
    gap: 9px;
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }
  .brand {
    padding: 2px 4px 9px;
  }
  .brand-mark {
    width: 36px;
    height: 36px;
  }
  .module-nav {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 3px;
    width: 100%;
    min-width: 0;
  }
  .nav-button {
    flex: 0 0 auto;
    width: auto;
    grid-template-columns: 28px auto;
    padding-right: 12px;
    white-space: nowrap;
  }
  .nav-count,
  .sidebar-footer {
    display: none;
  }
  .workspace {
    padding: 14px;
  }
  .topbar {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .flow-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 4px;
  }
  .flow-step {
    flex: 0 0 145px;
    min-height: 54px;
  }
  .workspace-context {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .workspace-context > p {
    display: none;
  }
  .cockpit-hero { grid-template-columns: 1fr; text-align: center; }
  .health-gauge { margin: 0 auto; }
  .cockpit-score-grid, .cockpit-metrics { grid-template-columns: 1fr; text-align: left; }
  .priority-row { grid-template-columns: 9px minmax(0, 1fr) auto; }
  .priority-row > b { grid-column: 2; }
  .priority-row > i { grid-column: 3; grid-row: 1 / 3; }
  .invoice-review-head { display: grid; }
  .invoice-review-candidate { grid-template-columns: 1fr; }
  .invoice-review-candidate-main { grid-template-columns: minmax(0, 1fr) 50px; }
  .invoice-review-candidate .detail-actions { justify-content: flex-end; }
  .invoice-allocation-summary { grid-template-columns: 1fr; }
  .invoice-allocation-row { grid-template-columns: 1fr; }
  .credit-control-kpis, .credit-control-grid { grid-template-columns: 1fr; }
  .credit-action-fields { grid-template-columns: 1fr 1fr; }
  .credit-draft-fields { grid-template-columns: 1fr; }
  .credit-draft-fields label.wide { grid-column: 1; }
  .credit-priority-card { grid-template-columns: 54px minmax(0, 1fr); }
  .credit-priority-card > .credit-priority-actions { grid-column: 2; justify-self: end; grid-template-columns: repeat(2, auto); }
  .commercial-kpis { grid-template-columns: repeat(2, 1fr); }
  .commercial-priority-card { grid-template-columns: minmax(0, 1fr) auto; }
  .commercial-priority-card .commercial-priority-value { grid-column: 1; text-align: left; }
  .commercial-priority-card > .tool-button { grid-column: 2; grid-row: 1 / 3; }
  .commercial-activity-form { grid-template-columns: 1fr 1fr; }
  .commercial-activity-form label.wide { grid-column: 1 / -1; }
  .renewal-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .renewal-main-grid, .renewal-detail-grid { grid-template-columns: 1fr; }
  .renewal-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .customer-360-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .forecast-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .forecast-method-grid { grid-template-columns: 1fr; }
  .supplier-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .supplier-priority-list article { grid-template-columns: minmax(0, 1fr) 130px; }
  .supplier-priority-list article p { grid-column: 1; }
}

/* Redditivita d'agenzia, WIP e governance settimanale delle ore. */
.profitability-command {
  margin: 18px 4px;
  padding: 22px;
  border: 1px solid rgba(37, 92, 104, .16);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, rgba(50, 170, 148, .13), transparent 30%),
    linear-gradient(145deg, #fbfdfc 0%, #f3f8f7 100%);
  box-shadow: 0 14px 34px rgba(30, 70, 80, .08);
}
.profitability-head {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  align-items: flex-start;
  margin-bottom: 16px;
}
.profitability-head h3 { margin: 4px 0 5px; font-size: 21px; color: #163c43; }
.profitability-head p { margin: 0; max-width: 760px; color: #5b6f73; }
.profitability-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.profitability-kpis > div {
  min-height: 104px;
  padding: 14px;
  border: 1px solid rgba(39, 86, 96, .12);
  border-radius: 15px;
  background: rgba(255,255,255,.86);
  display: grid;
  align-content: center;
  gap: 4px;
}
.profitability-kpis span, .profitability-kpis small { color: #667b7e; }
.profitability-kpis strong { color: #143b42; font-size: 21px; }
.profitability-kpis > .good { border-top: 4px solid #27a889; }
.profitability-kpis > .warning { border-top: 4px solid #e2a538; }
.profitability-kpis > .critical { border-top: 4px solid #d75a57; }
.profitability-kpis > .neutral { border-top: 4px solid #93a6aa; }
.profitability-warning {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 15px;
  margin-top: 12px;
  padding: 13px 15px;
  border-radius: 13px;
  background: #fff7e8;
  border: 1px solid rgba(219, 156, 45, .28);
  color: #73561e;
}
.profitability-core-grid, .profitability-breakdowns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.profitability-core-grid > div, .profitability-breakdowns > div {
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(39, 86, 96, .11);
  border-radius: 16px;
  background: rgba(255,255,255,.74);
}
.profitability-breakdowns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profitability-risk-list { display: grid; gap: 8px; }
.profitability-risk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border-radius: 12px;
  background: #fff;
  border-left: 4px solid #e2a538;
}
.profitability-risk.critical { border-left-color: #d75a57; background: #fff9f8; }
.profitability-risk div { display: grid; gap: 3px; min-width: 0; }
.profitability-risk span { color: #6b797c; font-size: 12px; overflow-wrap: anywhere; }
.profitability-risk b { color: #314e54; white-space: nowrap; }
.profitability-rank-row {
  display: grid;
  grid-template-columns: minmax(105px, 1fr) minmax(70px, 1.3fr) 90px;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid rgba(40, 80, 90, .08);
}
.profitability-rank-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; color: #294b52; }
.profitability-rank-row i { height: 7px; border-radius: 99px; background: #e7efed; overflow: hidden; }
.profitability-rank-row i b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #218a78, #55b8a5); }
.profitability-rank-row > strong { text-align: right; color: #21464d; font-size: 12px; }
.profitability-rank-row > small { grid-column: 1 / -1; color: #718286; }
.profitability-method { margin-top: 14px; color: #587074; }
.profitability-method summary { cursor: pointer; font-weight: 700; }
.profitability-method li { margin: 5px 0; }
.profitability-loading { min-height: 230px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.profitability-loading div { border-radius: 18px; background: linear-gradient(90deg, #edf3f2, #f7faf9, #edf3f2); }

.timesheet-week-governance {
  margin: 14px 0;
  border: 1px solid rgba(45, 104, 113, .16);
  border-radius: 16px;
  background: linear-gradient(145deg, #f8fbfb, #eef6f4);
  overflow: hidden;
}
.timesheet-week-governance > summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.timesheet-week-governance > summary span:first-child { display: grid; gap: 3px; }
.timesheet-week-governance > summary small { color: #718286; }
.timesheet-week-body { padding: 0 15px 15px; }
.timesheet-week-meter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}
.timesheet-week-meter > div { padding: 11px; border-radius: 11px; background: rgba(255,255,255,.82); display: grid; gap: 3px; }
.timesheet-week-meter span { color: #718286; font-size: 12px; }
.timesheet-week-meter strong { color: #244c53; font-size: 17px; }
.warning-text strong { color: #a96f13; }

@media (max-width: 980px) {
  .profitability-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .profitability-breakdowns { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .profitability-command { margin-inline: 0; padding: 15px; }
  .profitability-head { display: grid; }
  .profitability-kpis { grid-template-columns: 1fr 1fr; }
  .profitability-core-grid { grid-template-columns: 1fr; }
  .profitability-warning { grid-template-columns: 1fr; }
  .timesheet-week-meter { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .profitability-kpis { grid-template-columns: 1fr; }
  .profitability-rank-row { grid-template-columns: minmax(90px, 1fr) 75px; }
  .profitability-rank-row i { grid-column: 1 / -1; grid-row: 2; }
  .timesheet-week-meter { grid-template-columns: 1fr; }
}

.commercial-presentation-panel {
  padding: 0;
  overflow: hidden;
  border-color: rgba(31, 132, 114, .22);
  background: linear-gradient(145deg, #fbfdfc, #f2f8f6);
}
.commercial-presentation-panel > summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 15px 17px;
  cursor: pointer;
  list-style: none;
}
.commercial-presentation-panel > summary span { display: grid; gap: 3px; }
.commercial-presentation-panel > summary small { color: #718286; font-weight: 400; }
.commercial-presentation-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 0 17px 17px;
}
.commercial-presentation-form label { display: grid; gap: 5px; color: #405b60; font-size: 12px; font-weight: 700; }
.commercial-presentation-form label.wide, .commercial-presentation-form .wide { grid-column: 1 / -1; }
.commercial-presentation-form input, .commercial-presentation-form textarea {
  width: 100%;
  border: 1px solid #c7d8d5;
  border-radius: 10px;
  padding: 10px 11px;
  background: rgba(255,255,255,.9);
  color: #24484f;
  font: inherit;
  resize: vertical;
}
.commercial-presentation-form input:focus, .commercial-presentation-form textarea:focus {
  outline: 2px solid rgba(31, 145, 123, .18);
  border-color: #3a9c89;
}
@media (max-width: 700px) {
  .commercial-presentation-form { grid-template-columns: 1fr; }
  .commercial-presentation-form label.wide, .commercial-presentation-form .wide { grid-column: 1; }
}

.audit-trail-panel {
  margin: 18px 4px;
  padding: 18px;
  border: 1px solid rgba(38, 83, 92, .14);
  border-radius: 18px;
  background: linear-gradient(145deg, #fbfcfc, #f3f7f7);
}
.audit-trail-panel .table-wrap { margin-top: 14px; max-height: 520px; }
@media (max-width: 600px) {
  .audit-trail-panel { margin-inline: 0; padding: 13px; }
}

@media (max-width: 560px) {
  .credit-action-fields { grid-template-columns: 1fr; }
  .credit-aging-row { grid-template-columns: 100px minmax(60px, 1fr) 90px 30px; }
  .credit-priority-card { grid-template-columns: 1fr; }
  .credit-priority-score { width: 48px; height: 48px; }
  .credit-priority-card > .credit-priority-actions { grid-column: 1; grid-template-columns: 1fr; width: 100%; }
  .commercial-kpis { grid-template-columns: 1fr; }
  .commercial-priority-card { grid-template-columns: 1fr; }
  .commercial-priority-card > .tool-button, .commercial-priority-card .commercial-priority-value { grid-column: 1; grid-row: auto; }
  .commercial-activity-form { grid-template-columns: 1fr; }
  .commercial-activity-form label.wide { grid-column: 1; }
  .renewal-hero { grid-template-columns: 1fr; margin-inline: 0; }
  .renewal-hero-actions { justify-items: start; }
  .renewal-kpis { grid-template-columns: 1fr 1fr; margin-inline: 0; }
  .renewal-main-grid, .renewal-panel, .renewal-quality-strip, .renewal-detail-panel { margin-inline: 0; }
  .renewal-priority-list article { grid-template-columns: 85px minmax(0, 1fr); }
  .renewal-priority-list article > button { grid-column: 2; justify-self: end; }
  .renewal-form-grid, .renewal-form-grid.compact { grid-template-columns: 1fr; }
  .renewal-form-grid label.wide { grid-column: 1; }
  .renewal-generate-callout { grid-template-columns: 1fr; }
  .renewal-loading-grid { grid-template-columns: 1fr 1fr; padding-inline: 0; }
  .customer-360-hero { grid-template-columns: 50px minmax(0, 1fr); }
  .customer-health-score { grid-column: 1 / -1; padding: 10px 0 0; border-left: 0; border-top: 1px solid rgba(80, 110, 120, .18); text-align: left; }
  .customer-360-grid { grid-template-columns: 1fr 1fr; }
  .forecast-panel { margin-inline: 0; padding: 14px; }
  .forecast-head { display: grid; }
  .forecast-kpis { grid-template-columns: 1fr 1fr; }
  .forecast-month-row { grid-template-columns: 58px minmax(120px, 1fr) 88px; }
  .forecast-month-row > small { grid-column: 2 / -1; text-align: right; }
  .forecast-target-form { grid-template-columns: 1fr; }
  .forecast-target-form label.wide { grid-column: 1; }
  .supplier-control { margin-inline: 0; }
  .supplier-kpis { grid-template-columns: 1fr 1fr; }
  .supplier-priority-list article { grid-template-columns: 1fr; }
  .supplier-priority-list article p { grid-column: 1; }
}
.purchase-control-block { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border, #dfe5ec); }
.purchase-kpis { margin: 14px 0; }
.purchase-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }