:root {
  color-scheme: light;
  --color-background: #f6f8fb;
  --color-surface: #ffffff;
  --color-surface-subtle: #f8fafc;
  --color-surface-strong: #eef2f7;
  --color-text: #172033;
  --color-text-muted: #5b6678;
  --color-text-soft: #738095;
  --color-border: #dfe5ed;
  --color-border-strong: #c8d1dc;
  --color-primary: #1d4ed8;
  --color-primary-hover: #1e40af;
  --color-primary-soft: #eaf1ff;
  --color-success: #166534;
  --color-success-soft: #eaf7ef;
  --color-warning: #8a4b08;
  --color-warning-soft: #fff5df;
  --color-danger: #b42318;
  --color-danger-soft: #fff0ee;
  --color-violet: #6541a5;
  --color-violet-soft: #f2edff;
  --color-teal: #0f6b64;
  --color-teal-soft: #e8f7f4;
  --shadow-panel: 0 1px 2px rgb(15 23 42 / 4%), 0 8px 24px rgb(15 23 42 / 4%);
  --sidebar-width: 188px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --transition-fast: 160ms ease;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--color-background);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--color-text);
  background: var(--color-background);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--color-primary);
  text-underline-offset: 3px;
}

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

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

button,
.button,
summary,
[data-row-href] {
  touch-action: manipulation;
}

:focus-visible {
  outline: 3px solid #1d4ed8;
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

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

h1,
h2,
h3 {
  color: var(--color-text);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

h1 {
  margin-bottom: 8px;
  font-size: clamp(1.75rem, 2.5vw, 2.2rem);
  font-weight: 720;
}

h2 {
  margin-bottom: 8px;
  font-size: 1.2rem;
  font-weight: 680;
}

h3 {
  font-size: 1rem;
  font-weight: 650;
}

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

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 14px;
  color: var(--color-surface);
  background: var(--color-primary);
  border-radius: var(--radius-sm);
  transform: translateY(-150%);
}

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

.app-shell {
  min-height: 100vh;
}

.sidebar {
  position: fixed;
  z-index: 20;
  inset: 0 auto 0 0;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  padding: 14px 10px 12px;
  overflow-y: auto;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
}

.brand {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 9px;
  padding: 2px 6px;
  color: var(--color-text);
  text-decoration: none;
}

.brand:hover {
  color: var(--color-text);
}

.brand__mark {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  place-items: center;
  color: var(--color-surface);
  background: var(--color-primary);
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 0.84rem;
  letter-spacing: -0.02em;
}

.brand small {
  color: var(--color-text-muted);
  font-size: 0.68rem;
}

.primary-nav {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  margin-top: 16px;
}

.nav-section-label {
  margin: 0 8px 4px;
  color: var(--color-text-soft);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-section-label--secondary {
  margin-top: 14px;
}

.nav-item {
  display: flex;
  min-height: 30px;
  align-items: center;
  padding: 0 9px;
  color: var(--color-text-muted);
  border-radius: 5px;
  font-size: 0.79rem;
  font-weight: 580;
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.nav-item:hover {
  color: var(--color-text);
  background: var(--color-surface-subtle);
}

.nav-item.is-active {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.sidebar-user {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px 6px 2px;
  border-top: 1px solid var(--color-border);
}

.user-avatar {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: 50%;
  font-weight: 750;
}

.sidebar-user__identity {
  min-width: 0;
}

.sidebar-user__identity strong,
.sidebar-user__identity span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-user__identity strong {
  font-size: 0.76rem;
}

.sidebar-user__identity span {
  color: var(--color-text-muted);
  font-size: 0.68rem;
}

.sidebar-user form {
  grid-column: 1 / -1;
}

.app-workspace {
  min-height: 100vh;
  margin-left: var(--sidebar-width);
}

.mobile-header {
  display: none;
}

.content-container {
  width: min(100%, 1380px);
  margin: 0 auto;
  padding: 40px clamp(24px, 4vw, 56px) 64px;
}

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

.page-header {
  margin-bottom: 24px;
}

.page-header-with-action {
  margin-bottom: 8px;
}

.page-header-with-action .page-header {
  margin-bottom: 0;
}

.page-subtitle {
  max-width: 680px;
  margin-bottom: 0;
  color: var(--color-text-muted);
  font-size: 1rem;
}

.eyebrow {
  margin-bottom: 6px;
  color: var(--color-primary);
  font-size: 0.73rem;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.back-link {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  margin-bottom: 16px;
  color: var(--color-text-muted);
  font-weight: 600;
  text-decoration: none;
}

.back-link::before {
  margin-right: 7px;
  content: "←";
}

.panel {
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
}

.panel + .panel,
.content-grid + .panel,
.callout + .panel,
.panel + .technical-details,
.approval-actions + .technical-details,
.permission-note--panel + .technical-details {
  margin-top: 20px;
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.panel-heading h2,
.panel-heading p {
  margin-bottom: 0;
}

.panel-heading--with-action {
  align-items: center;
}

.callout {
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 18px;
  margin-bottom: 24px;
  color: var(--color-text);
  background: var(--color-primary-soft);
  border: 1px solid #cddcff;
  border-radius: var(--radius-md);
}

.callout__marker {
  width: 4px;
  min-height: 100%;
  background: var(--color-primary);
  border-radius: 999px;
}

.callout__title {
  margin-bottom: 4px;
  font-size: 0.98rem;
}

.callout p:last-child,
.callout ul:last-child {
  margin-bottom: 0;
}

.callout--safe,
.callout--success {
  background: var(--color-success-soft);
  border-color: #bfdfc9;
}

.callout--safe .callout__marker,
.callout--success .callout__marker {
  background: var(--color-success);
}

.callout--review {
  background: var(--color-warning-soft);
  border-color: #f0d39b;
}

.callout--review .callout__marker {
  background: var(--color-warning);
}

.callout--danger {
  background: var(--color-danger-soft);
  border-color: #f0c5c0;
}

.callout--danger .callout__marker {
  background: var(--color-danger);
}

.callout--neutral {
  background: var(--color-surface-strong);
  border-color: var(--color-border-strong);
}

.callout--neutral .callout__marker {
  background: var(--color-text-muted);
}

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

.metric-card {
  position: relative;
  display: flex;
  min-height: 150px;
  flex-direction: column;
  padding: 20px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.metric-card::before {
  width: 32px;
  height: 4px;
  margin-bottom: 18px;
  background: var(--color-primary);
  border-radius: 999px;
  content: "";
}

.metric-card:hover {
  color: var(--color-text);
  border-color: var(--color-border-strong);
  box-shadow: 0 1px 2px rgb(15 23 42 / 4%), 0 12px 30px rgb(15 23 42 / 8%);
}

.metric-card span {
  color: var(--color-text-muted);
  font-weight: 630;
}

.metric-card strong {
  margin: 2px 0 6px;
  font-size: 2rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.metric-card small {
  margin-top: auto;
  color: var(--color-text-soft);
}

.metric-card--review::before {
  background: var(--color-warning);
}

.metric-card--draft::before {
  background: var(--color-violet);
}

.metric-card--waiting::before {
  background: var(--color-teal);
}

.section-block {
  margin-top: 28px;
}

.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
}

.section-heading h2 {
  margin-bottom: 0;
  font-size: 1.35rem;
}

.text-link {
  min-height: 40px;
  padding-top: 8px;
  font-weight: 630;
  text-decoration: none;
}

.table-panel {
  padding: 0;
  overflow: hidden;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
}

.data-table th,
.data-table td {
  padding: 15px 18px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--color-border);
}

.data-table th {
  color: var(--color-text-muted);
  background: var(--color-surface-subtle);
  font-size: 0.72rem;
  font-weight: 720;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.clickable-row {
  cursor: pointer;
  transition: background var(--transition-fast);
}

.clickable-row:hover,
.clickable-row:focus-visible {
  background: #fafcff;
}

.row-needs-review {
  box-shadow: inset 3px 0 0 var(--color-warning);
}

.primary-cell-link {
  display: block;
  color: var(--color-text);
  font-weight: 650;
  text-decoration: none;
}

.cell-secondary,
.row-warning {
  display: block;
  margin-top: 3px;
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

.row-warning {
  color: var(--color-warning);
  font-weight: 650;
}

.filter-tabs {
  display: flex;
  gap: 4px;
  margin: 20px 0 16px;
  padding-bottom: 4px;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
}

.filter-tabs a {
  display: inline-flex;
  min-height: 42px;
  flex: 0 0 auto;
  align-items: center;
  padding: 0 12px;
  color: var(--color-text-muted);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-weight: 600;
  text-decoration: none;
}

.filter-tabs a:hover {
  color: var(--color-text);
  background: var(--color-surface-strong);
}

.filter-tabs a.is-active {
  color: var(--color-primary);
  background: var(--color-primary-soft);
}

.filter-summary {
  margin-bottom: 12px;
  color: var(--color-text-muted);
}

.status-badge {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  padding: 3px 9px;
  color: var(--color-text-muted);
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.status-badge--new {
  color: var(--color-primary);
  background: var(--color-primary-soft);
  border-color: #cbdafe;
}

.status-badge--review,
.status-badge--waiting {
  color: var(--color-warning);
  background: var(--color-warning-soft);
  border-color: #eed39f;
}

.status-badge--ready {
  color: var(--color-teal);
  background: var(--color-teal-soft);
  border-color: #b8ddd8;
}

.status-badge--draft {
  color: var(--color-violet);
  background: var(--color-violet-soft);
  border-color: #d7c8f4;
}

.status-badge--approved {
  color: var(--color-success);
  background: var(--color-success-soft);
  border-color: #bfdfc9;
}

.status-badge--danger {
  color: var(--color-danger);
  background: var(--color-danger-soft);
  border-color: #efc4bf;
}

.summary-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-panel);
}

.summary-strip > div {
  min-width: 0;
  padding: 16px 20px;
  border-right: 1px solid var(--color-border);
}

.summary-strip > div:last-child {
  border-right: 0;
}

.summary-strip span,
.summary-strip strong {
  display: block;
}

.summary-strip span {
  margin-bottom: 4px;
  color: var(--color-text-muted);
  font-size: 0.75rem;
}

.summary-strip strong {
  overflow: hidden;
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-grid {
  display: grid;
  gap: 20px;
  margin-bottom: 20px;
}

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

.detail-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.detail-list > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr);
  gap: 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border);
}

.detail-list > div:last-child {
  border-bottom: 0;
}

.detail-list dt {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 620;
}

.detail-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 560;
}

.detail-list--horizontal {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.detail-list--horizontal > div {
  display: block;
  padding: 0;
  border: 0;
}

.detail-list--horizontal dt {
  margin-bottom: 4px;
}

.privacy-note,
.permission-note,
.field-help,
.section-intro,
.quiet-state {
  color: var(--color-text-muted);
  font-size: 0.83rem;
}

.privacy-note {
  margin: 18px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--color-border);
}

.subheading {
  margin: 20px 0 8px;
}

.customer-message {
  max-width: 72ch;
  margin-bottom: 0;
  color: var(--color-text);
  line-height: 1.7;
}

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

.classification-field {
  display: flex;
  min-height: 112px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.classification-field__label {
  margin-bottom: 4px;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 620;
}

.classification-field__value {
  margin-bottom: 3px;
  font-weight: 660;
}

.determination-label {
  flex: 0 0 auto;
  padding: 3px 8px;
  color: var(--color-text-muted);
  background: var(--color-surface-strong);
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 650;
  white-space: nowrap;
}

.determination-label--manual {
  color: var(--color-success);
  background: var(--color-success-soft);
}

.editor-panel,
.technical-details {
  margin-top: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.editor-panel > summary,
.technical-details > summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}

.editor-panel > summary::-webkit-details-marker,
.technical-details > summary::-webkit-details-marker {
  display: none;
}

.editor-panel > summary::after,
.technical-details > summary::after {
  color: var(--color-text-muted);
  content: "+";
  font-size: 1.2rem;
}

.editor-panel[open] > summary::after,
.technical-details[open] > summary::after {
  content: "−";
}

.editor-panel__content,
.technical-details__content {
  padding: 20px;
  border-top: 1px solid var(--color-border);
}

.technical-details {
  background: var(--color-surface);
}

.technical-details__content {
  display: grid;
  gap: 24px;
}

.technical-details h2 {
  font-size: 1rem;
}

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

.form-field {
  min-width: 0;
}

.form-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.83rem;
  font-weight: 650;
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-field textarea {
  min-height: 180px;
  resize: vertical;
}

.form-field input[type="checkbox"] {
  width: 20px;
  min-height: 20px;
  margin: 4px 0;
  vertical-align: middle;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgb(29 78 216 / 12%);
  outline: 0;
}

.form-field--error input,
.form-field--error select,
.form-field--error textarea {
  border-color: var(--color-danger);
}

.field-help {
  margin: 5px 0 0;
}

.field-error {
  margin: 5px 0 0;
  color: var(--color-danger);
  font-size: 0.82rem;
  font-weight: 620;
}

.form-actions,
.workflow-actions,
.approval-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.form-actions {
  grid-column: 1 / -1;
  margin-top: 6px;
}

button,
.button {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  color: var(--color-surface);
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
  transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
}

button:hover,
.button:hover {
  color: var(--color-surface);
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

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

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

.button--ghost {
  color: var(--color-text-muted);
  background: transparent;
  border-color: transparent;
}

.button--ghost:hover {
  color: var(--color-text);
  background: var(--color-surface-strong);
  border-color: transparent;
}

.button--quiet {
  color: var(--color-text-muted);
  background: var(--color-surface);
  border-color: var(--color-border);
  font-weight: 600;
}

.button--quiet:hover {
  color: var(--color-text);
  background: var(--color-surface-subtle);
  border-color: var(--color-border-strong);
}

.button--danger-quiet {
  color: var(--color-danger);
  background: var(--color-surface);
  border-color: #e9b9b4;
}

.button--danger-quiet:hover {
  color: #8e1b12;
  background: var(--color-danger-soft);
  border-color: #e9b9b4;
}

.button--compact {
  min-height: 38px;
  padding: 7px 11px;
  font-size: 0.8rem;
}

.button--full {
  width: 100%;
}

.email-preview {
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
}

.email-preview__meta {
  margin: 0;
  padding: 16px 20px;
  background: var(--color-surface-subtle);
  border-bottom: 1px solid var(--color-border);
}

.email-preview__meta > div {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr);
  gap: 12px;
  padding: 4px 0;
}

.email-preview__meta dt {
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-weight: 620;
}

.email-preview__meta dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 560;
}

.email-preview__body {
  max-width: 76ch;
  min-height: 180px;
  padding: 28px 24px;
  line-height: 1.7;
}

.email-preview__notice {
  margin: 0;
  padding: 12px 20px;
  color: var(--color-success);
  background: var(--color-success-soft);
  border-top: 1px solid #c8e2d0;
  font-size: 0.82rem;
  font-weight: 650;
}

.workflow-actions {
  justify-content: flex-end;
  margin-top: 16px;
}

.workflow-actions .editor-panel {
  margin: 0 auto 0 0;
}

.editor-panel--compact > summary {
  min-height: 44px;
  color: var(--color-text);
  background: var(--color-surface);
}

.version-label {
  color: var(--color-text-muted);
  font-size: 0.8rem;
  font-weight: 650;
}

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

.proposal-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}

.proposal-list li:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.proposal-list li:first-child {
  padding-top: 0;
}

.proposal-list strong,
.proposal-list span {
  display: block;
  margin-top: 5px;
}

.proposal-list span {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.timeline {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.timeline::before {
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 110px;
  width: 1px;
  background: var(--color-border);
  content: "";
}

.timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 34px;
  padding: 10px 0;
}

.timeline li::before {
  position: absolute;
  top: 17px;
  left: 106px;
  width: 9px;
  height: 9px;
  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  content: "";
}

.timeline time {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

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

.timeline span {
  margin-top: 2px;
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.technical-list {
  margin: 0;
  padding-left: 20px;
}

.technical-list li + li {
  margin-top: 12px;
}

pre {
  max-width: 100%;
  margin: 8px 0 0;
  padding: 14px;
  overflow: auto;
  color: #273248;
  background: var(--color-surface-strong);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.payload {
  max-height: 480px;
}

.breakable {
  overflow-wrap: anywhere;
}

.plain-list {
  margin: 8px 0;
  padding-left: 20px;
}

.approval-actions {
  justify-content: flex-end;
  margin-top: 18px;
}

.permission-note--panel {
  padding: 12px 16px;
  margin: 18px 0 0;
  background: var(--color-surface-strong);
  border-radius: var(--radius-sm);
}

.empty-state,
.error-state {
  padding: 48px 24px;
  text-align: center;
  background: var(--color-surface);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}

.empty-state__mark {
  width: 36px;
  height: 4px;
  margin: 0 auto 20px;
  background: var(--color-border-strong);
  border-radius: 999px;
}

.empty-state h2,
.empty-state h3,
.error-state h1 {
  margin-bottom: 8px;
}

.empty-state p,
.error-state p {
  max-width: 580px;
  margin-right: auto;
  margin-bottom: 20px;
  margin-left: auto;
  color: var(--color-text-muted);
}

.empty-state--inline {
  padding: 32px 20px;
  border-style: solid;
  box-shadow: none;
}

.message {
  padding: 13px 16px;
  margin-bottom: 20px;
  color: var(--color-primary-hover);
  background: var(--color-primary-soft);
  border: 1px solid #cddcff;
  border-radius: var(--radius-sm);
  font-weight: 580;
}

.message--success {
  color: var(--color-success);
  background: var(--color-success-soft);
  border-color: #bfdfc9;
}

.message--error {
  color: var(--color-danger);
  background: var(--color-danger-soft);
  border-color: #efc4bf;
}

.public-header {
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.brand--public {
  pointer-events: none;
}

.public-main {
  width: min(100% - 32px, 460px);
  margin: 48px auto 80px;
}

.auth-card {
  padding: 32px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-panel);
}

.auth-card__intro {
  margin-bottom: 24px;
  color: var(--color-text-muted);
}

.auth-form {
  display: grid;
  gap: 18px;
}

.auth-card__safety {
  margin: 20px 0 0;
  padding-top: 18px;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  font-size: 0.78rem;
  text-align: center;
}

.form-panel {
  max-width: 900px;
}

.section-heading--metrics {
  margin-top: 30px;
}

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

.form-grid--filters {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
}

.filter-panel {
  padding-bottom: 18px;
}

.inline-editors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  margin-top: 18px;
}

.inline-editors .editor-panel {
  min-width: min(100%, 280px);
  margin-top: 0;
}

.inline-editors .inline-action {
  display: flex;
  min-height: 48px;
  align-items: center;
}

.price-highlight {
  display: flex;
  min-height: 126px;
  flex-direction: column;
  justify-content: center;
  padding: 20px 24px;
  background: var(--color-success-soft);
  border: 1px solid #bfdfc9;
  border-radius: var(--radius-md);
}

.price-highlight span,
.price-highlight small {
  color: var(--color-text-muted);
}

.price-highlight strong {
  margin: 3px 0 5px;
  font-size: clamp(1.65rem, 3vw, 2.3rem);
  font-variant-numeric: tabular-nums;
}

.price-history,
.assignment-history {
  padding: 0;
  margin: 0;
  list-style: none;
}

.price-history li,
.assignment-history li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
}

.price-history li:last-child,
.assignment-history li:last-child {
  border-bottom: 0;
}

.price-history strong,
.price-history span,
.assignment-history strong,
.assignment-history span {
  display: block;
}

.price-history span,
.assignment-history span {
  color: var(--color-text-muted);
  font-size: 0.8rem;
}

.price-history__amount {
  flex: 0 0 auto;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.task-stack {
  display: grid;
  gap: 14px;
}

.task-card {
  padding: 20px;
  background: var(--color-surface-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  scroll-margin-top: 24px;
}

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

.task-card__header h3 {
  margin: 3px 0 4px;
  font-size: 1.05rem;
}

.task-card__header p,
.task-description {
  margin-bottom: 0;
  color: var(--color-text-muted);
}

.task-sequence {
  color: var(--color-primary);
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.task-description {
  max-width: 78ch;
  padding-top: 14px;
}

.task-meta {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--color-border);
}

.workflow-actions--split,
.workflow-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
}

.workflow-next {
  padding: 16px;
  background: var(--color-primary-soft);
  border: 1px solid #cddcff;
  border-radius: var(--radius-md);
}

.workflow-next strong,
.workflow-next span {
  display: block;
}

.workflow-next span {
  color: var(--color-text-muted);
  font-size: 0.83rem;
}

@media (max-width: 1120px) {
  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .summary-strip > div:nth-child(2) {
    border-right: 0;
  }

  .summary-strip > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--color-border);
  }

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

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

@media (max-width: 860px) {
  .sidebar {
    position: static;
    width: 100%;
    min-height: auto;
    padding: 12px 16px;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .sidebar > .brand,
  .sidebar-user,
  .nav-section-label {
    display: none;
  }

  .primary-nav {
    flex-direction: row;
    gap: 4px;
    margin: 0;
    overflow-x: auto;
  }

  .nav-item {
    flex: 0 0 auto;
    padding: 0 11px;
  }

  .app-workspace {
    margin-left: 0;
  }

  .mobile-header {
    display: flex;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
  }

  .mobile-header span {
    color: var(--color-text-muted);
    font-size: 0.8rem;
  }

  .mobile-brand {
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
  }

  .content-container {
    padding: 28px 20px 48px;
  }

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

  .workflow-actions--split,
  .workflow-next {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 700px) {
  body {
    font-size: 16px;
  }

  .page-header,
  .page-header-with-action,
  .section-heading,
  .panel-heading--with-action {
    align-items: flex-start;
    flex-direction: column;
  }

  .metric-grid,
  .summary-strip,
  .form-grid,
  .detail-list--horizontal {
    grid-template-columns: 1fr;
  }

  .summary-strip > div,
  .summary-strip > div:nth-child(2) {
    border-right: 0;
    border-bottom: 1px solid var(--color-border);
  }

  .summary-strip > div:last-child {
    border-bottom: 0;
  }

  .panel,
  .auth-card {
    padding: 20px;
  }

  .data-table,
  .data-table tbody,
  .data-table tr,
  .data-table td {
    display: block;
    width: 100%;
  }

  .data-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .data-table tr {
    padding: 12px 16px;
    border-bottom: 1px solid var(--color-border);
  }

  .data-table tbody tr:last-child {
    border-bottom: 0;
  }

  .data-table td,
  .data-table tbody tr:last-child td {
    display: grid;
    grid-template-columns: minmax(110px, 0.6fr) minmax(0, 1fr);
    gap: 12px;
    padding: 8px 0;
    border: 0;
  }

  .data-table td::before {
    color: var(--color-text-muted);
    content: attr(data-label);
    font-size: 0.75rem;
    font-weight: 650;
  }

  .row-needs-review {
    box-shadow: inset 3px 0 0 var(--color-warning);
  }

  .detail-list > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .classification-field {
    flex-direction: column;
  }

  .workflow-actions,
  .approval-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .workflow-actions .editor-panel,
  .workflow-actions form,
  .workflow-actions .button,
  .approval-actions form,
  .approval-actions button {
    width: 100%;
  }

  .email-preview__meta > div {
    grid-template-columns: 62px minmax(0, 1fr);
  }

  .email-preview__body {
    padding: 22px 18px;
  }

  .timeline::before {
    left: 7px;
  }

  .timeline li {
    grid-template-columns: 1fr;
    gap: 3px;
    padding-left: 28px;
  }

  .timeline li::before {
    left: 3px;
  }

  .proposal-list li {
    align-items: stretch;
    flex-direction: column;
  }

  .task-card__header,
  .price-history li,
  .assignment-history li {
    align-items: flex-start;
    flex-direction: column;
  }

  .public-main {
    margin-top: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Document Services · sdílené designové tokeny provozních obrazovek.
   Jeden zdroj pravdy pro grid Zakázek i detail zakázky.
   ========================================================================== */
:root {
  --op-surface: #fff;
  --op-surface-muted: #f8fafc;
  --op-surface-head: #f3f6fa;
  --op-line: #e6eaf1;
  --op-line-strong: #d3dae5;
  --op-ink: #1b2434;
  --op-ink-muted: #5d6b80;
  --op-ink-soft: #8a97a8;
  --op-accent: #2563eb;
  --op-accent-ink: #1d4ed8;
  --op-accent-soft: #eef4ff;
  --op-radius: 6px;
  --op-radius-sm: 4px;
  --op-shadow: 0 1px 2px rgb(16 24 40 / 6%);
  --op-shadow-pop: 0 12px 28px -14px rgb(16 24 40 / 45%);
  --op-row-height: 52px;
  --op-control: 16px;
  --op-font-cell: 11px;
  --op-font-meta: 10px;
}

/* ==========================================================================
   Kompaktní provozní grid Dokumentových služeb.
   ========================================================================== */
.content-container--compact-grid {
  width: 100%;
  max-width: none;
  padding: 12px 12px 20px;
}

.compact-breadcrumbs {
  margin-bottom: 10px;
  color: var(--op-ink-soft);
  font-size: 0.75rem;
}

.compact-breadcrumbs a {
  color: var(--op-ink-muted);
  text-decoration: none;
}

.compact-breadcrumbs a:hover {
  color: var(--op-accent-ink);
  text-decoration: underline;
}

.compact-grid-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-bottom: 12px;
}

.compact-grid-header > div {
  display: grid;
  gap: 2px;
}

.compact-grid-header h1 {
  margin: 0;
  color: var(--op-ink);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.compact-grid-header .eyebrow {
  margin: 0;
  color: var(--op-ink-soft);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.compact-grid-header p {
  margin: 0;
  color: var(--op-ink-muted);
  font-size: 0.76rem;
}

.compact-grid-header > p {
  flex: 1 1 240px;
  padding-left: 18px;
  border-left: 1px solid var(--op-line);
}

.compact-grid-header__actions {
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  gap: 6px;
}

.compact-grid-header__actions .button {
  min-height: 30px;
  padding: 5px 12px;
  border-radius: var(--op-radius-sm);
  font-size: 0.76rem;
}

/* --- Filtrační panel ----------------------------------------------------- */
.compact-filters {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--op-line);
  border-radius: var(--op-radius);
  background: var(--op-surface);
  box-shadow: var(--op-shadow);
}

.compact-filter {
  display: grid;
  flex: 1 1 140px;
  min-width: 124px;
  gap: 4px;
  margin: 0;
}

.compact-filter--search {
  flex: 2.2 1 240px;
  min-width: 200px;
}

.compact-filter > span {
  color: var(--op-ink-soft);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.compact-filter input,
.compact-filter select {
  width: 100%;
  min-height: 32px;
  padding: 5px 8px;
  border: 1px solid var(--op-line-strong);
  border-radius: var(--op-radius-sm);
  color: var(--op-ink);
  background: var(--op-surface);
  font-size: 0.79rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.compact-filter input::placeholder {
  color: var(--op-ink-soft);
}

.compact-filter input:hover,
.compact-filter select:hover {
  border-color: #b4bfcf;
}

.compact-filter input:focus,
.compact-filter select:focus {
  border-color: var(--op-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 14%);
}

.compact-filter--check {
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
  min-height: 32px;
  align-items: center;
  gap: 7px;
  padding: 0 10px;
  border: 1px solid var(--op-line-strong);
  border-radius: var(--op-radius-sm);
  background: var(--op-surface);
  cursor: pointer;
  white-space: nowrap;
}

.compact-filter--check:hover {
  border-color: #b4bfcf;
  background: var(--op-surface-muted);
}

.compact-filter--check input {
  width: 15px;
  height: 15px;
  min-height: 15px;
  flex: 0 0 15px;
  accent-color: var(--op-accent);
}

.compact-filter--check > span {
  color: var(--op-ink);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.compact-filter-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 6px;
}

.compact-filter-actions .button {
  min-height: 32px;
  padding: 6px 14px;
  border-radius: var(--op-radius-sm);
  font-size: 0.78rem;
}

/* --- Hlavička tabulky (počet + volba sloupců) ---------------------------- */
.compact-grid-toolbar {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 12px;
  border: 1px solid var(--op-line-strong);
  border-bottom: 0;
  border-radius: var(--op-radius) var(--op-radius) 0 0;
  background: var(--op-surface);
}

.compact-grid-toolbar p {
  margin: 0;
  color: var(--op-ink-muted);
  font-size: 0.78rem;
}

.compact-grid-toolbar p strong {
  color: var(--op-ink);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
}

.compact-grid-toolbar .column-picker > summary {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid var(--op-line-strong);
  border-radius: var(--op-radius-sm);
  color: var(--op-ink-muted);
  font-size: 0.75rem;
  font-weight: 650;
  list-style: none;
}

.compact-grid-toolbar .column-picker > summary::-webkit-details-marker {
  display: none;
}

.compact-grid-toolbar .column-picker > summary::after {
  margin-left: 7px;
  color: var(--op-ink-soft);
  content: "▾";
}

.compact-grid-toolbar .column-picker > summary:hover {
  border-color: #b4bfcf;
  color: var(--op-ink);
  background: var(--op-surface-muted);
}

.compact-grid-toolbar .column-picker__panel {
  border-radius: var(--op-radius);
  box-shadow: var(--op-shadow-pop);
}

/* Bez výsledků nemá lišta na co navazovat, takže se uzavře sama. */
.content-container--compact-grid:has(.empty-state) .compact-grid-toolbar {
  border-bottom: 1px solid var(--op-line-strong);
  border-radius: var(--op-radius);
}

/* --- Tabulka ------------------------------------------------------------- */
.compact-grid-shell {
  width: 100%;
  max-height: calc(100vh - 236px);
  overflow: auto;
  border: 1px solid var(--op-line-strong);
  border-radius: 0 0 var(--op-radius) var(--op-radius);
  background: var(--op-surface);
  box-shadow: var(--op-shadow);
  scrollbar-color: #c3ccd9 transparent;
  scrollbar-width: thin;
}

.compact-operational-grid {
  /* Bez roztahování na šířku okna. Sloupce mají navrženou šířku a měly by ji mít
     i na velkém monitoru — jinak se Zákazník roztáhne na dvojnásobek. Volné
     místo vpravo je menší zlo než sloupce, které nikdo nenavrhoval. */
  width: max-content;
  border-collapse: separate;
  border-spacing: 0;
  color: var(--op-ink);
  font-size: var(--op-font-cell);
  line-height: 1.3;
}

.compact-operational-grid caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.compact-operational-grid th,
.compact-operational-grid td {
  position: relative;
  height: var(--op-row-height);
  min-width: 120px;
  max-width: 120px;
  padding: 2px 5px;
  overflow: visible;
  vertical-align: middle;
  border-right: 1px solid var(--op-line);
  border-bottom: 1px solid var(--op-line);
  background: var(--op-surface);
  text-align: left;
}

.compact-operational-grid tbody tr:last-child > * {
  border-bottom: 0;
}

.compact-operational-grid thead th {
  position: sticky;
  z-index: 20;
  top: 0;
  /* Záhlaví smí zabrat dvě řádky. Delší názvy služeb pak nenutí sloupec být
     široký, takže se na užší obrazovku vejde víc sloupců. */
  height: 32px;
  padding: 3px 5px;
  overflow: hidden;
  border-bottom: 1px solid var(--op-line-strong);
  color: var(--op-ink-muted);
  background: var(--op-surface-head);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: normal;
  overflow-wrap: break-word;
}

.compact-column-flag {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 4px;
  border-radius: 3px;
  color: #92400e;
  background: #fef3c7;
  font-size: 0.56rem;
  letter-spacing: 0.02em;
}

.compact-job-row[data-row-href] {
  cursor: pointer;
}

.compact-job-row:hover > *,
.compact-job-row:focus-within > * {
  background: #f5f9ff;
}

.compact-job-row:target > * {
  background: var(--op-accent-soft);
}

.compact-job-row--attention > :first-child::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: #f59e0b;
  content: "";
}

/* --- Zamrzlé sloupce ----------------------------------------------------- */
.compact-operational-grid .compact-sticky {
  position: sticky;
  z-index: 12;
  background: var(--op-surface);
}

.compact-operational-grid thead .compact-sticky {
  z-index: 30;
  background: var(--op-surface-head);
}

.compact-sticky--id {
  left: 0;
  min-width: 46px !important;
  max-width: 46px !important;
  padding-left: 7px !important;
}

/* Značky patří pod číslo, ne vedle něj — vedle by rozšiřovaly sloupec. */
.compact-job-marks {
  display: flex;
  gap: 3px;
  align-items: center;
  margin-top: 1px;
}

.compact-sticky--folder {
  left: 46px;
  min-width: 32px !important;
  max-width: 32px !important;
  padding-inline: 2px !important;
  text-align: center !important;
}

/* Zhruba 25 znaků; delší jméno se ořízne třemi tečkami. */
.compact-sticky--customer {
  left: 78px;
  min-width: 150px !important;
  max-width: 150px !important;
}

.compact-sticky--project {
  left: 228px;
  min-width: 96px !important;
  max-width: 96px !important;
}

.compact-sticky--deadline {
  left: 324px;
  min-width: 78px !important;
  max-width: 78px !important;
  box-shadow: 6px 0 10px -9px rgb(15 23 42 / 70%);
}

.compact-operational-grid .compact-sticky-right {
  position: sticky;
  z-index: 13;
  background: var(--op-surface);
}

.compact-operational-grid thead .compact-sticky-right {
  z-index: 31;
  background: var(--op-surface-head);
}

.compact-sticky-right--note {
  right: 0;
  min-width: 118px !important;
  max-width: 118px !important;
  border-right: 0;
}

.compact-sticky-right--invoice {
  right: 118px;
  min-width: 86px !important;
  max-width: 86px !important;
  box-shadow: -6px 0 10px -9px rgb(15 23 42 / 70%);
}

/* --- Obsah buněk --------------------------------------------------------- */
.compact-job-id {
  display: inline-flex;
  align-items: center;
  color: var(--op-accent-ink);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-decoration: none;
}

.compact-job-id:hover {
  text-decoration: underline;
}

/* Jediné upozornění v přehledu. Vykřičníky u služby a u stavu zakázky říkaly
   totéž potřetí a braly místo. */
.attention-dot {
  display: inline-grid;
  width: 11px;
  height: 11px;
  place-items: center;
  vertical-align: -1px;
  border-radius: 50%;
  color: #fff;
  background: #f59e0b;
  font-size: 0.5rem;
  font-weight: 800;
  line-height: 1;
}

/* Buňka služby ukazuje jen datum. Že u některé služby patří k termínu i hodina,
   se pozná tady — jinak by ta informace z přehledu zmizela beze stopy. */
.time-dot {
  display: inline-block;
  width: 11px;
  height: 11px;
  vertical-align: -1px;
  background-color: var(--op-ink-muted);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M8 4.4v3.8l2.6 1.5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M8 4.4v3.8l2.6 1.5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}

.compact-folder-icon {
  display: inline-block;
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  background-color: var(--op-ink-muted);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.3 12.3V4.5a1 1 0 0 1 1-1h2.9l1.4 1.7h5.1a1 1 0 0 1 1 1v6.1a1 1 0 0 1-1 1H3.3a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.3 12.3V4.5a1 1 0 0 1 1-1h2.9l1.4 1.7h5.1a1 1 0 0 1 1 1v6.1a1 1 0 0 1-1 1H3.3a1 1 0 0 1-1-1Z'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
}

.compact-folder-cell {
  color: #16a34a;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}

.compact-customer-cell {
  vertical-align: middle;
}

.compact-customer-cell > .compact-customer-primary {
  display: block;
  overflow: hidden;
  color: var(--op-ink);
  font-size: 0.72rem;
  font-weight: 650;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-customer-cell > span {
  display: block;
  overflow: hidden;
  color: var(--op-ink-muted);
  font-size: var(--op-font-meta);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Barevné štítky projektů a stavů. */
.compact-project-pill,
.compact-state,
.compact-job-status,
.compact-invoice-cell strong {
  display: inline-block;
  max-width: 100%;
  padding: 1px 6px;
  overflow: hidden;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Projekty nesou barvu stejnými tokeny jako stavy. Paletu potvrdil vlastník. */
[data-project-code] {
  --chip-fg: #fff;
  --chip-bg: #64748b;
}

/* Barvy zadal vlastník. Písmo se řídí pozadím: na světlé zelené a oranžové je
   bílá nečitelná, proto tam jde tmavé. */
[data-project-code="PROFIFORMATOVANI"] { --chip-bg: #2563eb; }
[data-project-code="FORMATTING_BP"] { --chip-bg: #2c5699; }
[data-project-code="FORMATTING_DP"] { --chip-bg: #00826b; }
[data-project-code="FORMATTING_ZP"] { --chip-fg: #16270a; --chip-bg: #7ab317; }
[data-project-code="FORMATTING_DP_SK"] { --chip-bg: #2d2d2d; }
[data-project-code="DIPLOMKA24"] { --chip-bg: #2e286d; }
[data-project-code="VAZBICOV"] { --chip-fg: #3d1a05; --chip-bg: #ef7d46; }
[data-project-code="PLAGIARISM_CHECK"] { --chip-bg: #3797ff; }
[data-project-code="FORMATTING_BP_SK"] { --chip-bg: #2766ff; }
[data-project-code="OTHER"] { --chip-bg: #7c3aed; }
[data-project-code="PROOFREADING_BP"] { --chip-bg: #c83d37; }
[data-project-code="PROOFREADING_DP"] { --chip-bg: #1a7b68; }

.compact-project-pill {
  color: var(--chip-fg, #fff);
  background: var(--chip-bg, #64748b);
}

/* --- Termín -------------------------------------------------------------- */
.compact-deadline__value {
  display: block;
  overflow: hidden;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Barevné zvýraznění buňky podle termínu dodání. Scope `.compact-operational-grid`
   je nutný, aby barva přebila sticky pozadí i hover řádku. */
/* Naléhavost se čte z atributu, ne ze třídy: po uložení ji server pošle zpět
   a barva se přebarví hned, bez obnovení stránky. */
.compact-operational-grid .compact-deadline[data-deadline-severity="OVERDUE"] { background: #fde0e0; color: #8f1d16; }
.compact-operational-grid .compact-deadline[data-deadline-severity="TODAY"] { background: #ffe6cc; color: #8a3d06; }
.compact-operational-grid .compact-deadline[data-deadline-severity="TOMORROW"] { background: #fdf0c2; color: #7a5406; }
.compact-operational-grid .compact-deadline[data-deadline-severity="UPCOMING"] { background: #e2f7ea; color: #12603a; }
.compact-operational-grid .compact-deadline[data-deadline-severity="NONE"],
.compact-operational-grid .compact-deadline[data-deadline-severity="NEUTRAL"] { color: var(--op-ink-muted); }

.compact-operational-grid .compact-deadline .inline-editor--direct input {
  color: inherit;
  font-weight: 650;
}

.compact-operational-grid .compact-deadline .inline-editor--direct input:hover,
.compact-operational-grid .compact-deadline .inline-editor--direct input:focus {
  background-color: rgb(255 255 255 / 78%);
}

/* --- Sloupce služeb ------------------------------------------------------ */
/* Užší, než býval název služby v záhlaví. To se teď smí zalomit do dvou řádků,
   takže šířku sloupce určuje obsah buňky, ne délka nadpisu. Spodní hranicí je
   pole s datem termínu. */
.compact-service-heading,
.compact-service-cell {
  min-width: 110px !important;
  max-width: 110px !important;
}

.compact-service-cell__summary {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.compact-service-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  min-width: 0;
  color: var(--op-ink-muted);
  font-size: var(--op-font-meta);
}

.compact-service-meta > strong {
  display: block;
  min-width: 0;
  padding: 0 4px;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-service-meta time,
.compact-service-meta > span {
  display: block;
  padding: 0 4px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-service-empty {
  display: block;
  color: #c3ccd9;
  text-align: center;
}

/* Odebrání služby ze zakázky. Stojí v řádku vedle data, takže je s ním zarovnané;
   místo si drží i v klidu, aby najetí myší nic neposunulo. */
.compact-service-remove {
  flex: 0 0 auto;
  margin-left: 3px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.compact-service-cell:hover .compact-service-remove,
.compact-service-remove:focus-within {
  opacity: 1;
}

.compact-service-cell:hover .compact-warning {
  opacity: 0;
}

.compact-service-remove button {
  display: grid;
  width: 16px;
  /* Globální tlačítka mají min-height 44 px kvůli dotyku; tady je to značka
     v buňce, ne cíl prstu, takže se minimum musí přebít. */
  min-height: 16px;
  height: 16px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--op-line-strong);
  border-radius: 4px;
  color: var(--op-ink-muted);
  background: var(--op-surface);
  box-shadow: 0 1px 2px rgb(16 24 40 / 12%);
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    color var(--transition-fast),
    background-color var(--transition-fast),
    transform var(--transition-fast);
}

.compact-service-remove button:hover,
.compact-service-remove button:focus-visible {
  border-color: #dc2626;
  color: #fff;
  background: #dc2626;
  box-shadow: 0 2px 6px rgb(220 38 38 / 35%);
  outline: none;
  transform: scale(1.08);
}

.compact-service-remove button:active {
  transform: scale(0.96);
}

/* Datum a čas pod sebou. Na jednom řádku by se čas ořízl a sloupec by musel být
   širší, než na kolik je v přehledu místo. */
.compact-deadline-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
}

/* Termín se v klidu čte jako dva řádky — datum a pod ním čas, a to jen když
   nějaký je. Zadává se přitom jedním polem, které se objeví až při editaci
   a smí přetéct přes sousední sloupec, aby se do něj vešlo. */
.compact-deadline__shown {
  display: grid;
  gap: 0;
  min-width: 0;
  pointer-events: none;
}

.compact-deadline__shown > strong {
  overflow: hidden;
  color: inherit;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-deadline__shown > em {
  font-size: var(--op-font-meta);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
  opacity: 0.75;
}

.compact-deadline__shown > em:empty {
  display: none;
}

.compact-operational-grid .compact-deadline-edit {
  position: static;
}

/* Pole samo se nikdy nekreslí — termín se čte jako text a mění se výběrem, který
   otevře tlačítko v rohu buňky. Roztahující se pole jinak rozhodilo celý řádek. */
.compact-operational-grid
  .compact-deadline-edit.inline-editor--direct
  input[type="datetime-local"] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  clip-path: inset(50%);
  pointer-events: none;
}

.compact-deadline__pick {
  position: absolute;
  right: 2px;
  bottom: 2px;
  display: grid;
  width: 16px;
  min-height: 16px;
  height: 16px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--op-radius-sm);
  background: transparent;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity var(--transition-fast),
    border-color var(--transition-fast);
}

.compact-deadline__pick::after {
  width: 11px;
  height: 11px;
  background-color: var(--op-ink-muted);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='2.2' y='3.4' width='11.6' height='10.4' rx='1.6'/%3E%3Cpath d='M2.2 6.6h11.6M5.4 2.2v2.4M10.6 2.2v2.4'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
  content: "";
}

.compact-deadline:hover .compact-deadline__pick,
.compact-deadline__pick:focus-visible {
  opacity: 1;
}

.compact-deadline__pick:hover,
.compact-deadline__pick:focus-visible {
  border-color: var(--op-line-strong);
  background: var(--op-surface);
  outline: none;
}



/* Poslední řádek buňky: celé datum, tlačítko kalendáře a křížek v jedné linii
   s úzkou mezerou. Vestavěná ikona kalendáře uvnitř pole se skrývá — brala
   místo, které patří roku. */
.compact-service-meta {
  align-items: center;
}

.compact-service-cell input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
}

.compact-service-cell .compact-deadline-form {
  display: flex !important;
  gap: 3px;
  align-items: center;
  /* Bez vlastního odsazení, aby mezera mezi kalendářem a křížkem byla stejná
     jako mezi datem a kalendářem. */
  padding: 0 !important;
}

/* Prázdné místo pro chybovou hlášku je pořád položkou pružného řádku, takže za
   kalendářem přidávalo mezeru navíc. Ukáže se, až něco hlásí. */
.compact-service-cell .compact-deadline-form > .inline-editor__error:empty {
  display: none;
}

.compact-service-pick {
  flex: 0 0 auto;
  display: grid;
  width: 15px;
  min-height: 15px;
  height: 15px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--op-radius-sm);
  background: transparent;
  cursor: pointer;
}

.compact-service-pick::after {
  width: 11px;
  height: 11px;
  background-color: var(--op-ink-soft);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='2.2' y='3.4' width='11.6' height='10.4' rx='1.6'/%3E%3Cpath d='M2.2 6.6h11.6M5.4 2.2v2.4M10.6 2.2v2.4'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
  content: "";
}

.compact-service-cell:hover .compact-service-pick::after {
  background-color: var(--op-ink-muted);
}

.compact-service-pick:hover,
.compact-service-pick:focus-visible {
  border-color: var(--op-line-strong);
  background: var(--op-surface);
  outline: none;
}

/* Výběr musí přebít obecné `.compact-service-meta > span { display: block }`,
   jinak datum a křížek skončí pod sebou místo vedle sebe. */
.compact-service-meta > .compact-service-footer {
  display: flex;
  gap: 0;
  align-items: center;
  min-width: 0;
  /* Obecné odsazení pro `span` v metadatech tady bralo osm pixelů, které patří
     datu — bez nich by se nevešel rok. */
  padding: 0 !important;
  overflow: visible;
}

.compact-service-meta > .compact-service-footer > .compact-service-date {
  flex: 1;
  min-width: 0;
}

.compact-service-cell .compact-deadline-form input[type="date"] {
  /* Datum si bere zbylé místo v pruhu, aby se vešel i rok. */
  flex: 1;
  width: auto;
  min-width: 0;
  height: 18px;
  padding-inline: 3px !important;
  border-radius: var(--op-radius-sm);
  font-variant-numeric: tabular-nums;
  line-height: 18px;
}

/* Datum služby se musí dát vybrat z kalendáře, takže ikona zůstává — jen menší
   a světlejší, aby v buňce nekřičela. */
.compact-operational-grid input[type="date"]::-webkit-calendar-picker-indicator {
  width: 11px;
  height: 11px;
  padding: 0;
  margin: 0;
  opacity: 0.45;
  cursor: pointer;
}

.compact-operational-grid input[type="date"]:hover::-webkit-calendar-picker-indicator,
.compact-operational-grid input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity: 0.9;
}

.compact-operational-grid input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  width: 11px;
  height: 11px;
  padding: 0;
  margin: 0;
  opacity: 0.45;
}

/* Prázdná buňka služby, kterou smí vlastník doplnit. Nenápadná, dokud na ni
   uživatel nenajede; pak je vidět, že se sem dá služba přidat. */
.compact-service-add {
  display: block;
}

.compact-service-add button {
  display: block;
  width: 100%;
  min-height: 22px;
  padding: 0;
  border: 1px dashed transparent;
  border-radius: var(--op-radius-sm);
  color: #c3ccd9;
  background: transparent;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.compact-job-row:hover .compact-service-add button {
  border-color: #cbd5e1;
  color: #94a3b8;
}

.compact-service-add button:hover,
.compact-service-add button:focus-visible {
  border-color: var(--op-accent);
  color: var(--op-accent);
  background: var(--op-accent-soft);
  outline: none;
}

/* --- Stav zakázky, faktura, poznámka ------------------------------------- */
/* Zakázka je otevřená, nebo hotová; na jedno políčko stačí úzký sloupec. */
.compact-summary-heading,
.compact-summary-cell {
  min-width: 44px !important;
  max-width: 44px !important;
}

/* --- Otevřeno / hotovo ---------------------------------------------------- */
.job-done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
}

.job-done input[type="checkbox"] {
  margin: 0;
  flex: 0 0 15px;
  accent-color: var(--op-accent);
  cursor: pointer;
}

/* Sdílená pravidla roztahují pole na celou šířku buňky; políčko musí zůstat čtverec. */
.compact-operational-grid .inline-editor--direct .job-done input[type="checkbox"],
.compact-operational-grid .job-done input[type="checkbox"],
.job-v2-header__summary .inline-editor--direct .job-done input[type="checkbox"],
.job-v2-header__summary .job-done input[type="checkbox"] {
  width: 15px;
  min-height: 15px;
  height: 15px;
}

.job-done input[type="checkbox"]:disabled {
  cursor: default;
}

.compact-summary-cell .job-done {
  width: 100%;
}

.job-done--labelled {
  gap: 7px;
  color: var(--op-ink);
  font-size: 0.78rem;
  font-weight: 650;
}





.compact-invoice-cell strong,
.compact-invoice-cell span {
  display: block;
}

.compact-invoice-cell strong {
  color: var(--op-ink-muted);
  background: #eef1f6;
  font-size: 0.62rem;
  letter-spacing: 0.03em;
}

.compact-invoice-cell strong[data-invoice-state="UHRAZENO"] { color: #14532d; background: #dcfce7; }
.compact-invoice-cell strong[data-invoice-state="PO SPLATNOSTI"] { color: #7f1d1d; background: #fee2e2; }
.compact-invoice-cell strong[data-invoice-state="K ÚHRADĚ"] { color: #7c2d12; background: #ffedd5; }
.compact-invoice-cell strong[data-invoice-state="NÁVRH"] { color: #1e3a8a; background: #dbeafe; }
.compact-invoice-cell strong[data-invoice-state="STORNO"] { color: #475569; background: #e2e8f0; }

.compact-invoice-cell span {
  margin-top: 1px;
  color: var(--op-ink);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

/* --- Poznámka s lehkým formátováním --------------------------------------
   Ukládá se čitelný text se značkami; plocha nad polem ukazuje, co znamenají.
   Dokud se skript nespustí, zůstane vidět původní pole a poznámka jde uložit
   i tak. */
.note-editor {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.note-editor:not(.note-editor--rich) .note-editor__tools {
  display: none;
}

.note-editor--rich .note-editor__field {
  display: none;
}

.note-editor__tools {
  display: flex;
  gap: 3px;
}

.note-editor__tools button {
  display: inline-flex;
  width: 22px;
  height: 22px;
  /* Obecná tlačítka mají minimum 44 px kvůli prstu; tahle jsou u textu. */
  min-height: 22px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--op-line);
  border-radius: 5px;
  background: var(--op-surface);
  color: var(--op-ink-soft);
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast),
    background-color var(--transition-fast);
}

.note-editor__tools button:hover {
  border-color: var(--op-line-strong);
  background: var(--op-surface-head);
  color: var(--op-ink);
}

.note-editor__tools button:focus-visible {
  border-color: var(--op-accent);
  outline: 2px solid #bfdbfe;
  outline-offset: 0;
}

.note-editor__tools button.is-active {
  border-color: var(--op-accent);
  background: var(--op-accent-soft);
  color: var(--op-accent-ink);
}

.note-editor__surface {
  min-width: 0;
  padding: 3px 7px;
  border: 1px solid #aebacc;
  border-radius: 4px;
  background: #fff;
  color: #172033;
  font: inherit;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.note-editor__surface:hover {
  border-color: #718096;
}

.note-editor__surface:focus {
  border-color: #2563eb;
  outline: 2px solid #bfdbfe;
  outline-offset: 0;
}

.note-editor__surface.is-empty::before {
  color: #b3bccb;
  content: attr(data-placeholder);
}

.note-editor--single .note-editor__surface {
  overflow: hidden;
  white-space: nowrap;
}

.note-editor--single .note-editor__surface:focus {
  overflow-x: auto;
}

/* V přehledu se pole tváří jako čistý text, stejně jako ostatní buňky. */
.compact-note-cell .note-editor {
  gap: 0;
}

.compact-operational-grid .note-editor__surface {
  min-height: var(--op-control);
  padding: 1px 4px;
  border: 1px solid transparent;
  border-radius: var(--op-radius-sm);
  background-color: transparent;
  color: var(--op-ink);
  font-size: var(--op-font-meta);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.compact-operational-grid .note-editor__surface:hover {
  border-color: var(--op-line-strong);
  background-color: var(--op-surface);
}

.compact-operational-grid .note-editor__surface:focus {
  border-color: var(--op-accent);
  background-color: var(--op-surface);
  outline: none;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 16%);
}

.compact-note-cell p {
  display: -webkit-box;
  max-height: 2.5em;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: var(--op-ink-muted);
  font-size: var(--op-font-meta);
  line-height: 1.25;
}

/* --- Stránkování --------------------------------------------------------- */
.workspace-page--compact-grid .pagination {
  padding-top: 14px;
  color: var(--op-ink-muted);
  font-size: 0.78rem;
}

.workspace-page--compact-grid .pagination .button {
  min-height: 32px;
  padding: 6px 14px;
  border-radius: var(--op-radius-sm);
  font-size: 0.78rem;
}

@media (max-width: 1180px) {
  .compact-operational-grid .compact-sticky-right {
    position: relative;
    right: auto;
    box-shadow: none;
  }
}

@media (max-width: 760px) {
  .content-container--compact-grid {
    padding: 12px 10px 20px;
  }

  .compact-grid-header > p {
    padding-left: 0;
    border-left: 0;
  }

  .compact-filter,
  .compact-filter--search {
    flex: 1 1 100%;
  }

  .compact-operational-grid .compact-sticky--customer,
  .compact-operational-grid .compact-sticky--project,
  .compact-operational-grid .compact-sticky--deadline {
    position: relative;
    left: auto;
    box-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .compact-job-row,
  .compact-filter input,
  .compact-filter select {
    transition: none;
  }
}
/* Project workspaces and the Document Services operational grid. */
.content-container--projects {
  max-width: 1180px;
}

.workspace-hero {
  max-width: 720px;
  margin-bottom: 28px;
}

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

.workspace-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 18px;
  min-height: 250px;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.workspace-card .button {
  align-self: end;
  grid-column: 1 / -1;
  justify-self: start;
}

.workspace-card__mark {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: var(--color-primary);
  font-weight: 760;
  letter-spacing: 0.04em;
}

.workspace-card--planned .workspace-card__mark {
  color: #6b4a08;
  background: #fde3a6;
}

.workspace-placeholder {
  max-width: 720px;
  padding: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
}

.workspace-placeholder__status,
.nav-tag,
.column-note {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  color: var(--color-warning);
  background: var(--color-warning-soft);
  font-size: 0.72rem;
  font-weight: 720;
}

.workspace-placeholder__status {
  padding: 5px 10px;
}

.nav-tag {
  margin-left: auto;
  padding: 2px 6px;
}

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.content-container--operational {
  width: 100%;
  max-width: none;
  padding: 20px 24px 36px;
}

.operational-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.operational-header > div:first-child {
  max-width: 760px;
}

.operational-header__actions,
.grid-filter-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.grid-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(4, minmax(140px, 0.8fr));
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

.grid-filter {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.grid-filter > span {
  color: var(--color-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.grid-filter input,
.grid-filter select,
.cell-editor input,
.cell-editor select {
  width: 100%;
  min-height: 40px;
  padding: 7px 9px;
  border: 1px solid var(--color-border-strong);
  border-radius: 7px;
  color: var(--color-text);
  background: var(--color-surface);
}

.grid-filter--check {
  display: flex;
  align-items: center;
  grid-column: 1 / span 2;
  min-height: 44px;
}

.grid-filter--check input {
  width: 18px;
  min-height: 18px;
}

.grid-filter-actions {
  align-items: center;
  justify-content: flex-end;
  grid-column: 3 / -1;
}

.grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 50px;
  padding: 8px 2px;
}

.grid-toolbar p {
  margin: 0;
  color: var(--color-text-muted);
}

.column-picker {
  position: relative;
}

.column-picker > summary,
.cell-editor > summary {
  min-height: 40px;
  cursor: pointer;
  color: var(--color-primary);
  font-size: 0.78rem;
  font-weight: 700;
}

.column-picker > summary {
  display: flex;
  align-items: center;
}

.column-picker__panel {
  position: absolute;
  z-index: 20;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(340px, 86vw);
  max-height: 420px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: 0 18px 40px rgb(15 23 42 / 18%);
}

.column-picker fieldset {
  display: grid;
  gap: 7px;
  min-height: 0;
  margin: 0;
  padding: 16px;
  overflow-y: auto;
  border: 0;
}

.column-picker label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}

.column-picker__panel > .button {
  align-self: stretch;
  margin: 0 12px 12px;
}

.operational-grid-shell {
  width: 100%;
  max-height: calc(100vh - 290px);
  overflow: auto;
  border: 1px solid var(--color-border-strong);
  border-radius: 10px;
  background: var(--color-surface);
  box-shadow: var(--shadow-panel);
  scrollbar-color: var(--color-border-strong) transparent;
  scrollbar-width: thin;
}

.operational-row[data-row-href] {
  cursor: pointer;
}

.operational-grid {
  width: max-content;
  min-width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.78rem;
}

.operational-grid caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.operational-grid th,
.operational-grid td {
  min-width: 126px;
  max-width: 210px;
  padding: 8px 10px;
  vertical-align: top;
  border-right: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  text-align: left;
}

.operational-grid thead th {
  position: sticky;
  z-index: 7;
  top: 0;
  height: 48px;
  color: #334155;
  background: #f1f5f9;
  font-size: 0.7rem;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.operational-grid tbody tr:hover > * {
  background: #f8fbff;
}

.operational-grid tbody tr:target > * {
  background: var(--color-primary-soft);
}

.operational-grid .sticky-col {
  position: sticky;
  z-index: 5;
  background: var(--color-surface);
}

.operational-grid thead .sticky-col {
  z-index: 10;
  background: #e9eff7;
}

.operational-grid .sticky-col--id {
  left: 0;
  min-width: 88px;
  max-width: 88px;
}

.operational-grid .sticky-col--customer {
  left: 88px;
  min-width: 190px;
  max-width: 190px;
}

.operational-grid .sticky-col--work {
  left: 278px;
  min-width: 170px;
  max-width: 170px;
  box-shadow: 5px 0 8px -8px rgb(15 23 42 / 65%);
}

.operational-grid th[data-col],
.operational-grid td[data-col] {
  min-width: 170px;
  max-width: 190px;
}

.sticky-col strong,
.sticky-col span,
.service-cell-summary strong,
.service-cell-summary time,
.muted-value,
.cell-warning {
  display: block;
}

.sticky-col span,
.service-cell-summary time,
.muted-value {
  color: var(--color-text-muted);
  font-size: 0.72rem;
}

.job-reference {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  font-weight: 780;
}

.service-grid-cell--attention,
.deadline-cell--overdue {
  box-shadow: inset 3px 0 0 var(--color-warning);
}

.service-cell-summary {
  display: grid;
  gap: 4px;
}

.service-not-included {
  color: var(--color-text-soft);
  font-size: 0.72rem;
}

.cell-warning {
  color: var(--color-warning);
  font-weight: 680;
}

.cell-editor {
  margin-top: 5px;
  border-top: 1px dashed var(--color-border);
}

.cell-editor > summary {
  display: flex;
  min-height: 32px;
  align-items: center;
}

.cell-editor form {
  display: grid;
  gap: 6px;
  min-width: 190px;
  padding: 8px 0 4px;
}

.cell-editor form + form {
  margin-top: 8px;
  border-top: 1px solid var(--color-border);
}

.cell-editor label {
  color: var(--color-text-muted);
  font-size: 0.7rem;
  font-weight: 700;
}

.note-cell p {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.warning-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  color: var(--color-warning);
  font-size: 0.72rem;
  font-weight: 680;
  list-style: none;
}

.status-ok {
  color: var(--color-success);
  font-size: 0.72rem;
  font-weight: 680;
}

.column-note {
  margin-top: 3px;
  padding: 1px 5px;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding-top: 18px;
}

.detail-tabs {
  display: flex;
  gap: 4px;
  margin: 22px 0 16px;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
}

.detail-tabs a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  padding: 0 13px;
  border-bottom: 3px solid transparent;
  color: var(--color-text-muted);
  font-size: 0.86rem;
  font-weight: 680;
  text-decoration: none;
  white-space: nowrap;
}

.detail-tabs a[aria-current="page"] {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.inline-service-list {
  margin: 0;
  padding-left: 18px;
}

@media (max-width: 1100px) {
  .grid-filters {
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

  .grid-filter--check,
  .grid-filter-actions {
    grid-column: auto;
  }

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

@media (max-width: 760px) {
  .content-container--operational {
    padding: 16px 12px 28px;
  }

  .workspace-cards,
  .grid-filters {
    grid-template-columns: 1fr;
  }

  .grid-filter--check,
  .grid-filter-actions {
    grid-column: 1;
  }

  .grid-filter-actions {
    justify-content: flex-start;
  }

  .operational-grid-shell {
    max-height: calc(100vh - 220px);
  }

  .operational-grid .sticky-col--work {
    position: static;
  }

  .operational-grid .sticky-col--customer {
    width: 150px;
    min-width: 150px;
    left: 88px;
  }

  .operational-grid .sticky-col--id {
    box-shadow: 5px 0 8px -8px rgb(15 23 42 / 65%);
  }

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

  .column-picker__panel {
    right: auto;
    left: 0;
  }
}

.mobile-header__user {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mobile-header__user form {
  margin: 0;
}

.content-container.content-container--compact-grid {
  padding: 12px 12px 20px;
}

.content-container.content-container--job-v2 {
  padding: 16px 20px 28px;
}

/* Unified click-to-edit interaction shared by the operational grid and Job detail. */
.inline-editor {
  position: relative;
  min-width: 0;
}

.inline-editor__value {
  width: 100%;
  min-height: 24px;
  padding: 1px 3px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: text;
}

.inline-editor__value:hover,
.inline-editor__value:focus-visible {
  border-color: var(--color-border, #cbd5e1);
  background: #f8fafc;
  outline: 2px solid transparent;
}

.inline-editor--open .inline-editor__value {
  display: none;
}

.inline-editor [data-inline-form] {
  position: absolute;
  z-index: 80;
  top: 0;
  left: 0;
  min-width: 170px;
  padding: 5px;
  border: 1px solid #94a3b8;
  border-radius: 5px;
  background: #fff;
  color: #172033;
  color-scheme: light;
  box-shadow: 0 5px 18px rgb(15 23 42 / 18%);
}

.inline-editor--open [data-inline-form] {
  position: fixed;
  z-index: 1000;
}

.compact-customer-cell .compact-contact-summary {
  min-height: 17px;
  padding-block: 0;
}

.compact-customer-cell .compact-contact-summary small {
  margin-top: 1px;
  font-size: 0.57rem;
}

.inline-editor--right [data-inline-form] {
  right: 0;
  left: auto;
}

.inline-editor [data-inline-form] input:not([type="hidden"]),
.inline-editor [data-inline-form] select,
.inline-editor [data-inline-form] textarea {
  width: 100%;
  min-height: 30px;
  padding: 3px 6px;
  border: 1px solid #94a3b8;
  border-radius: 4px;
  background: #fff;
  color: #172033;
  font: inherit;
  opacity: 1;
  -webkit-text-fill-color: #172033;
}

.inline-editor [data-inline-form] select option:not([data-state-code]):not([data-project-code]) {
  background: #fff;
  color: #172033;
  -webkit-text-fill-color: #172033;
}

.inline-editor [data-inline-form] textarea {
  min-width: 280px;
  resize: vertical;
}

.inline-editor__error {
  display: block;
  max-width: 320px;
  margin-top: 3px;
  color: #b42318;
  font-size: 11px;
  line-height: 1.25;
}

.inline-editor--saving {
  opacity: 0.65;
  pointer-events: none;
}

.inline-editor__form--state {
  width: 190px;
  min-width: 190px !important;
  padding: 5px !important;
}

.state-picker {
  position: relative;
  display: grid;
  gap: 4px;
}

.state-picker__search input {
  min-height: 28px !important;
  padding-right: 24px !important;
  border-color: #cbd5e1 !important;
  background: #fff !important;
  color: #172033 !important;
}

.state-picker__options {
  display: grid;
  max-height: 190px;
  padding: 2px;
  overflow-y: auto;
  border: 1px solid #dbe2ea;
  border-radius: 4px;
  background: #fff;
}

.state-picker__option {
  min-height: 28px;
  padding: 3px 5px;
  border: 0;
  border-radius: 3px;
  background: #fff;
  text-align: left;
}

.state-picker__option:hover,
.state-picker__option:focus-visible {
  background: #eef4ff;
  outline: 2px solid #bfdbfe;
  outline-offset: -2px;
}

.state-picker__native {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
}

/* Jeden stav = jedna barva. Tokeny nese sám prvek, takže stejný štítek vypadá
   stejně v gridu, v detailu i v rozbalovací nabídce stavů. */
[data-state-code],
[data-status-code] {
  --chip-fg: #334155;
  --chip-bg: #e2e8f0;
}

[data-state-code="YES"] { --chip-fg: #fff; --chip-bg: #2563eb; }
[data-state-code="ASSIGNED"],
[data-status-code="ASSIGNED"] { --chip-fg: #452600; --chip-bg: #f59e0b; }
[data-state-code="ACCEPTED"] { --chip-fg: #fff; --chip-bg: #7cb0fb; }
[data-state-code="EVALUATED"] { --chip-fg: #fff; --chip-bg: #4f46e5; }
[data-state-code="WAITING"],
[data-status-code="WAITING"] { --chip-fg: #fff; --chip-bg: #f97316; }
[data-state-code="REVIEW"],
[data-status-code="REVIEW"] { --chip-fg: #fff; --chip-bg: #9333ea; }
[data-state-code="PAID"] { --chip-fg: #fff; --chip-bg: #db2777; }
[data-state-code="SEND"] { --chip-fg: #fff; --chip-bg: #ea580c; }
[data-state-code="NEW"],
[data-status-code="NEW"] { --chip-fg: #fff; --chip-bg: #0ea5e9; }
[data-state-code="TODO"],
[data-status-code="TODO"] { --chip-fg: #fff; --chip-bg: #64748b; }
[data-state-code="IN_PROGRESS"],
[data-status-code="IN_PROGRESS"] { --chip-fg: #fff; --chip-bg: #0f766e; }
[data-state-code="DONE"],
[data-state-code="COMPLETED"],
[data-status-code="DONE"],
[data-status-code="COMPLETED"] { --chip-fg: #fff; --chip-bg: #16a34a; }
[data-state-code="DECLINED"],
[data-state-code="CANCELLED"],
[data-status-code="DECLINED"],
[data-status-code="CANCELLED"] { --chip-fg: #fff; --chip-bg: #dc2626; }

.state-token,
.compact-state,
.compact-job-status,
.dense-service-status,
.state-picker__select {
  color: var(--chip-fg, #334155);
  background-color: var(--chip-bg, #e2e8f0);
}

.state-token {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.3;
}

.compact-service-meta .inline-editor {
  max-width: 100%;
}

.compact-service-meta .inline-editor__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-deadline__value > strong,
.compact-deadline__value > span {
  display: block;
}

.content-container--dense-detail {
  width: min(1360px, calc(100% - 28px));
  max-width: none;
  padding-block: 10px 28px;
}

.dense-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 7px 0 9px;
  border-bottom: 1px solid #cbd5e1;
}

.dense-detail-header__identity .eyebrow {
  margin: 0 0 2px;
  font-size: 10px;
}

.dense-detail-header h1 {
  margin: 0;
  color: #172033;
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 680;
  line-height: 1.15;
}

.dense-detail-header__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 20px;
  color: #475569;
  font-size: 12px;
}

.dense-header-stat {
  display: grid;
  grid-template-columns: auto auto;
  gap: 5px;
  white-space: nowrap;
}

.dense-header-stat > span {
  color: #64748b;
  font-size: 11px;
}

.dense-header-stat strong {
  color: #172033;
  font-weight: 650;
}

.dense-notice-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 14px;
  padding-top: 5px;
}

.dense-safety-note,
.dense-price-warning {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.35;
}

.dense-safety-note {
  color: #527064;
}

.dense-safety-note::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 5px 1px 0;
  border-radius: 50%;
  background: #16a34a;
}

.dense-price-warning {
  padding-left: 8px;
  border-left: 2px solid #d97706;
  color: #7c4700;
}

.dense-price-warning strong {
  font-weight: 700;
}

.dense-detail-workspace {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  font-size: 13px;
}

.dense-section {
  padding: 12px 14px;
  border: 1px solid #dbe2ea;
  border-radius: 7px;
  background: #fff;
}

.dense-section--customer,
.dense-section--files {
  background: #f8fafc;
}

.dense-section--job,
.dense-section--services {
  background: #f7faff;
}

.dense-section--billing,
.dense-section--communication {
  background: #fffcf5;
}

.dense-section--history {
  background: #fbfcfe;
}

.dense-section__heading {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 7px;
}

.dense-section__heading h2 {
  margin: 0;
  color: #172033;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

.dense-section__heading p {
  margin: 0;
  color: #64748b;
  font-size: 10.5px;
}

.dense-fields {
  display: grid;
  gap: 0 18px;
}

.dense-fields--customer {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 28px;
}

.dense-fields--stacked {
  grid-template-columns: 1fr;
}

.dense-job-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}

.dense-field-group {
  min-width: 0;
  padding-right: 24px;
}

.dense-field-group + .dense-field-group {
  padding-right: 24px;
  padding-left: 24px;
  border-left: 1px solid #edf1f5;
}

.dense-field-group:last-child {
  padding-right: 0;
}

.dense-field {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  min-width: 0;
  min-height: 31px;
  border-bottom: 1px solid #edf1f5;
  text-align: left;
}

.dense-field > span {
  color: #64748b;
  font-size: 11px;
  font-weight: 570;
  text-align: left;
}

.dense-field > strong,
.dense-field > .inline-editor,
.dense-field > .inline-editor__value,
.dense-field .inline-editor__value > span {
  min-width: 0;
  overflow: hidden;
  color: #172033;
  font-size: 13px;
  font-weight: 520;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dense-field > strong {
  display: block;
}

.dense-field--multiline {
  align-items: start;
  padding: 5px 0;
}

.dense-field--multiline strong {
  overflow: visible;
  line-height: 1.4;
  white-space: normal;
}

.dense-field--note {
  grid-template-columns: 118px minmax(0, 1fr);
  margin-top: 3px;
  padding-top: 2px;
}

.dense-field--note .inline-editor__value > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dense-detail-workspace .inline-editor__value {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 27px;
  padding: 2px 4px;
  border-radius: 3px;
  text-align: left;
}

.dense-detail-workspace .inline-editor__value:hover,
.dense-detail-workspace .inline-editor__value:focus-visible {
  border-color: #94a3b8;
  background: #f8fafc;
  outline: 2px solid #dbeafe;
  outline-offset: -1px;
}

.inline-editor--detail [data-inline-form] {
  top: calc(100% + 3px);
  min-width: min(260px, 82vw);
  padding: 7px;
}

.inline-editor--status [data-inline-form] {
  right: 0;
  left: auto;
  min-width: 190px;
}

.inline-editor__form--profile {
  display: grid;
  grid-template-columns: repeat(2, minmax(150px, 1fr));
  gap: 7px 10px;
  width: min(440px, 88vw);
}

.inline-editor__form--profile label {
  display: grid;
  gap: 2px;
  color: #475569;
  font-size: 10.5px;
  font-weight: 650;
}

.inline-editor__form--profile .inline-editor__error {
  grid-column: 1 / -1;
}

.inline-editor--wide [data-inline-form] {
  width: min(620px, 82vw);
}

.dense-service-table-wrap {
  overflow-x: auto;
  border-top: 1px solid #cbd5e1;
}

.dense-service-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  table-layout: fixed;
}

.dense-service-table th,
.dense-service-table td {
  padding: 4px 8px;
  border-bottom: 1px solid #e5eaf0;
  color: #172033;
  font-size: 12.5px;
  line-height: 1.25;
  text-align: left;
  vertical-align: middle;
}

.dense-service-table thead th {
  height: 26px;
  background: #f8fafc;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 680;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.dense-service-table th:first-child {
  width: 38%;
}

.dense-service-table th:nth-child(2) {
  width: 17%;
}

.dense-service-table th:nth-child(3) {
  width: 22%;
}

.dense-service-table th:nth-child(4) {
  width: 23%;
}

.dense-service-table tbody tr {
  height: 38px;
}

.dense-service-table tbody tr:hover {
  background: #fbfdff;
}

.dense-service-table tbody th {
  font-weight: 540;
}

.dense-service-name,
.dense-service-note {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dense-service-note {
  margin-top: 1px;
  color: #9a5700;
  font-size: 10px;
  font-weight: 550;
}

.dense-service-status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 730;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.dense-service-table .inline-editor__value {
  width: auto;
  max-width: 100%;
}

.dense-service-table .inline-editor__value > span:not(.dense-service-status) {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dense-service-table .inline-editor [data-inline-form] {
  border-color: #64748b;
  background: #eef4ff;
  color: #0f172a;
  box-shadow: 0 5px 16px rgb(15 23 42 / 20%);
}

.dense-service-table .inline-editor [data-inline-form] select,
.dense-service-table .inline-editor [data-inline-form] input,
.dense-service-table .inline-editor [data-inline-form] textarea {
  border-color: #64748b;
  background-color: #fff;
  color: #0f172a;
  -webkit-text-fill-color: #0f172a;
}

.dense-service-table .inline-editor [data-inline-form] select:focus,
.dense-service-table .inline-editor [data-inline-form] input:focus,
.dense-service-table .inline-editor [data-inline-form] textarea:focus {
  border-color: #1d4ed8;
  outline: 2px solid #bfdbfe;
  outline-offset: 1px;
}

.dense-secondary-action {
  margin-top: 6px;
  color: #475569;
  font-size: 11.5px;
}

.dense-secondary-action summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 28px;
  padding: 2px 7px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 620;
}

.dense-secondary-action summary:hover,
.dense-secondary-action summary:focus-visible {
  background: #eef2f7;
  color: #172033;
}

.dense-secondary-action[open] form {
  margin-top: 7px;
  padding: 9px;
  border: 1px solid #dbe2ea;
  background: #f8fafc;
}

.dense-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-block: 1px solid #e5eaf0;
}

.dense-summary-grid > div {
  display: grid;
  grid-template-columns: minmax(95px, 40%) minmax(0, 1fr);
  align-items: center;
  min-height: 38px;
  padding: 3px 10px;
  border-right: 1px solid #e5eaf0;
}

.dense-summary-grid > div:last-child {
  border-right: 0;
}

.dense-summary-grid span {
  color: #64748b;
  font-size: 11px;
}

.dense-summary-grid strong {
  color: #172033;
  font-size: 13.5px;
  font-weight: 660;
}

.dense-section-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.dense-history {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #e5eaf0;
}

.dense-history li {
  display: grid;
  grid-template-columns: 118px minmax(180px, 1.4fr) minmax(120px, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 29px;
  padding: 3px 4px;
  border-bottom: 1px solid #eef2f6;
  font-size: 12px;
}

.dense-history strong {
  font-weight: 570;
}

.dense-history time,
.dense-history span {
  color: #64748b;
  font-size: 10.5px;
}

.dense-history--prices {
  max-width: 700px;
}

.dense-history--audit li {
  grid-template-columns: 92px minmax(200px, 1fr) minmax(120px, 0.5fr);
}

.dense-technical-details {
  margin-top: 7px;
  font-size: 10.5px;
}

@media (max-width: 1100px) {
  .dense-fields--customer {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .dense-field-group:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 26px;
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .content-container--dense-detail {
    width: min(100% - 18px, 1360px);
  }

  .dense-detail-header,
  .dense-section__heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .dense-detail-header__meta {
    justify-content: flex-start;
  }

  .dense-fields--customer,
  .dense-job-groups,
  .dense-summary-grid,
  .dense-section-pair {
    grid-template-columns: 1fr;
  }

  .dense-field-group,
  .dense-field-group + .dense-field-group,
  .dense-field-group:last-child {
    padding-inline: 0;
    border-left: 0;
  }

  .dense-field-group:last-child {
    grid-column: auto;
  }

  .dense-field-group:last-child {
    display: block;
  }

  .dense-summary-grid > div {
    border-right: 0;
    border-bottom: 1px solid #e5eaf0;
  }

  .dense-summary-grid > div:last-child {
    border-bottom: 0;
  }

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

  .dense-history li,
  .dense-history--audit li {
    grid-template-columns: 88px minmax(150px, 1fr);
  }

  .dense-history li > span {
    grid-column: 2;
  }
}

.dense-field .compact-project-pill[data-project-code] {
  color: #fff;
  font-size: 0.68rem;
  font-weight: 760;
}

/* Direct operational editing: controls stay in place and never open a second panel. */
.inline-editor--direct {
  width: 100%;
}

.inline-editor [data-inline-form][data-inline-direct] {
  position: static !important;
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
}

.inline-editor--field-group,
.inline-editor--field-group > [data-inline-direct],
.direct-profile-fields {
  display: contents !important;
}

.inline-editor--direct input:not([type="hidden"]),
.inline-editor--direct select,
.inline-editor--direct textarea {
  width: 100%;
  min-width: 0;
  min-height: 28px;
  padding: 3px 7px;
  border: 1px solid #aebacc;
  border-radius: 4px;
  background: #fff;
  color: #172033;
  font: inherit;
  opacity: 1;
  -webkit-text-fill-color: currentColor;
}

.inline-editor--direct input:not([type="hidden"]):hover,
.inline-editor--direct select:hover,
.inline-editor--direct textarea:hover {
  border-color: #718096;
}

.inline-editor--direct input:not([type="hidden"]):focus,
.inline-editor--direct select:focus,
.inline-editor--direct textarea:focus {
  border-color: #2563eb;
  outline: 2px solid #bfdbfe;
  outline-offset: 0;
}

.inline-editor--saved input:not([type="hidden"]),
.inline-editor--saved select,
.inline-editor--saved textarea {
  border-color: #16a34a;
  box-shadow: 0 0 0 2px rgb(22 163 74 / 12%);
}

.direct-profile-fields__error {
  grid-column: 1 / -1;
}

.state-picker--direct {
  display: block;
}

.state-picker__select {
  min-height: 26px !important;
  padding: 2px 24px 2px 7px !important;
  border-color: transparent !important;
  font-size: 0.66rem !important;
  font-weight: 760 !important;
  line-height: 1.2;
  cursor: pointer;
}

/* Stavový výběr je barevný štítek, ne bílé formulářové pole. Obecná pravidla pro
   přímou editaci jsou specifičtější než .state-picker__select, takže by mu barvu
   stavu přebila na bílou. Proto je tady výslovně přebíjíme zpět. */
.inline-editor [data-inline-form] select.state-picker__select,
.inline-editor--direct select.state-picker__select {
  color: var(--chip-fg, #334155);
  background: var(--chip-bg, #e2e8f0);
  -webkit-text-fill-color: currentColor;
}

/* Rozbalená nabídka ukazuje stejné barvy jako zavřený štítek. Volba bez kódu
   (například „Neurčen“) si tokeny po rodiči nesmí vzít, jinak by vypadala jako
   ta právě vybraná. */
.state-picker__select option:not([data-state-code]),
[data-project-select] option:not([data-project-code]),
.inline-editor[data-project-code] select option:not([data-project-code]) {
  --chip-fg: #172033;
  --chip-bg: #fff;
}

.inline-editor [data-inline-form] select option[data-state-code],
.inline-editor [data-inline-form] select option[data-project-code],
.state-picker__select option,
[data-project-select] option,
.inline-editor[data-project-code] select option {
  color: var(--chip-fg, #172033);
  background: var(--chip-bg, #fff);
  -webkit-text-fill-color: var(--chip-fg, #172033);
}

.inline-editor [data-inline-form] select[data-project-select],
.inline-editor--direct select[data-project-select],
select[data-project-select],
.inline-editor[data-project-code] select {
  /* Štítek projektu je barevná pilulka, ne pole s rámečkem — stejně jako stav. */
  border-color: transparent !important;
  color: var(--chip-fg, #fff);
  background: var(--chip-bg, #64748b);
  font-size: 0.65rem;
  font-weight: 730;
}

.dense-field > .inline-editor--direct,
.dense-service-table .inline-editor--direct {
  overflow: visible;
}

.dense-field .inline-editor--direct textarea {
  min-height: 46px;
  resize: vertical;
}

.dense-service-table .inline-editor--direct [data-inline-form] {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.dense-service-table .inline-editor--direct input,
.dense-service-table .inline-editor--direct select {
  min-height: 27px;
  font-size: 11.5px;
}

/* --------------------------------------------------------------------------
   Přímá editace uvnitř provozního gridu.
   Pole vypadají jako čistý text a rámeček ukazují až při najetí nebo fokusu.
   -------------------------------------------------------------------------- */
.compact-operational-grid .inline-editor--direct input:not([type="hidden"]),
.compact-operational-grid .inline-editor--direct select:not([data-state-select]):not([data-project-select]),
.compact-operational-grid .inline-editor--direct textarea {
  min-height: var(--op-control);
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: var(--op-radius-sm);
  background-color: transparent;
  color: var(--op-ink);
  font-size: var(--op-font-meta);
  line-height: 1.4;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.compact-operational-grid .inline-editor--direct input::placeholder {
  color: #b3bccb;
}

.compact-operational-grid .inline-editor--direct input:not([type="hidden"]):hover,
.compact-operational-grid .inline-editor--direct select:not([data-state-select]):not([data-project-select]):hover,
.compact-operational-grid .inline-editor--direct textarea:hover {
  border-color: var(--op-line-strong);
  background-color: var(--op-surface);
}

.compact-operational-grid .inline-editor--direct input:not([type="hidden"]):focus,
.compact-operational-grid .inline-editor--direct select:not([data-state-select]):not([data-project-select]):focus,
.compact-operational-grid .inline-editor--direct textarea:focus {
  border-color: var(--op-accent);
  background-color: var(--op-surface);
  outline: none;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 16%);
}

.compact-operational-grid .inline-editor--saved input:not([type="hidden"]),
.compact-operational-grid .inline-editor--saved select:not([data-state-select]):not([data-project-select]) {
  border-color: #16a34a;
  box-shadow: 0 0 0 2px rgb(22 163 74 / 14%);
}

/* Výběry bez trvalé systémové šipky; ta se objeví až při interakci. */
.compact-operational-grid .inline-editor--direct select:not([data-state-select]):not([data-project-select]) {
  appearance: none;
  padding-right: 16px;
  background-image: none;
  background-position: right 4px center;
  background-repeat: no-repeat;
  background-size: 8px;
  cursor: pointer;
  text-overflow: ellipsis;
}

.compact-operational-grid .inline-editor--direct select:not([data-state-select]):not([data-project-select]):hover,
.compact-operational-grid .inline-editor--direct select:not([data-state-select]):not([data-project-select]):focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath fill='%235d6b80' d='M0 0h8L4 5z'/%3E%3C/svg%3E");
}

/* Ikona kalendáře jen při práci s buňkou. */
.compact-operational-grid input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.compact-operational-grid td:hover input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.compact-operational-grid input[type="datetime-local"]:focus::-webkit-calendar-picker-indicator {
  opacity: 0.55;
}

/* Přímý stavový formulář nesmí přetékat mimo buňku (zbytek po dřívějším
   vyskakovacím editoru). */
.compact-operational-grid [data-inline-direct].inline-editor__form--state,
.workspace-page--job-detail-v2 [data-inline-direct].inline-editor__form--state {
  width: 100%;
  min-width: 0 !important;
  padding: 0 !important;
}

/* Barevné štítky stavů uvnitř gridu. */
.compact-operational-grid .state-picker__select {
  width: 100%;
  min-height: 17px !important;
  /* Těsněji než jinde: v gridu rozhoduje každý pixel o tom, kolik sloupců se
     vejde. Vpravo zůstává jen tolik místa, kolik potřebuje šipka výběru. */
  padding: 0 12px 0 6px !important;
  border-radius: 999px !important;
  font-size: 0.62rem !important;
  font-weight: 700 !important;
  letter-spacing: 0;
  line-height: 1.4;
}

.compact-operational-grid .state-picker__select:focus-visible {
  outline: 2px solid var(--op-accent);
  outline-offset: 1px;
}

.compact-operational-grid select[data-project-select] {
  width: 100%;
  min-height: 17px;
  padding: 0 14px 0 7px;
  border-radius: 999px !important;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
}

.compact-operational-grid select[data-project-select]:focus-visible {
  outline: 2px solid var(--op-accent);
  outline-offset: 1px;
}

.compact-operational-grid .compact-service-cell .state-picker__select {
  text-transform: none;
}

.compact-service-meta .inline-editor--direct,
.compact-service-meta .inline-editor--direct input,
.compact-service-meta .inline-editor--direct select {
  width: 100%;
  max-width: 100%;
}

.compact-service-meta .inline-editor--direct input,
.compact-service-meta .inline-editor--direct select {
  min-height: 15px;
  font-size: 0.64rem;
}

.compact-service-meta .inline-editor--direct input[type="datetime-local"],
.compact-sticky--deadline .inline-editor--direct input[type="datetime-local"] {
  font-variant-numeric: tabular-nums;
}

.compact-sticky--deadline .inline-editor--direct input[type="datetime-local"] {
  font-size: 0.66rem;
}

.compact-note-cell .inline-editor--direct input {
  width: 100%;
}

.compact-operational-grid .inline-editor__error:not(:empty) {
  position: absolute;
  z-index: 70;
  top: calc(100% - 2px);
  left: 4px;
  width: max-content;
  max-width: 240px;
  padding: 4px 7px;
  border: 1px solid #fecaca;
  border-radius: var(--op-radius-sm);
  background: #fff5f5;
  box-shadow: var(--op-shadow-pop);
}

/* ==========================================================================
   Detail zakázky Dokumentových služeb.
   Stejné tokeny, stejná hustota a stejná logika štítků jako provozní grid.
   ========================================================================== */
.content-container--job-v2 {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
  padding: 16px 20px 28px;
}

.workspace-page--job-detail-v2 .app-workspace,
.workspace-page--job-detail-v2 #main-content,
.job-v2-section,
.job-v2-service,
.job-v2-service > *,
.job-v2-service form {
  min-width: 0;
}

/* --- Hlavička ------------------------------------------------------------ */
.job-v2-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 20px;
  margin: 0 0 10px;
  padding: 10px 14px;
  border: 1px solid var(--op-line);
  border-radius: var(--op-radius);
  background: var(--op-surface);
  box-shadow: var(--op-shadow);
}

.job-v2-header h1 {
  margin: 2px 0 0;
  color: var(--op-ink);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.job-v2-header .eyebrow {
  margin: 0;
  color: var(--op-ink-soft);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.job-v2-header__summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 6px;
}

.job-v2-header__summary > .inline-editor,
.job-v2-header__summary > .job-done {
  min-width: 120px;
  margin-right: 6px;
}

.job-v2-header__summary > span {
  display: grid;
  min-width: 92px;
  gap: 1px;
  padding: 2px 12px;
  border-left: 1px solid var(--op-line);
}

.job-v2-header__summary small {
  color: var(--op-ink-soft);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.job-v2-header__summary strong {
  color: var(--op-ink);
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

/* --- Karty a záložky ----------------------------------------------------- */
.job-v2-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
  padding: 0;
  border-bottom: 1px solid var(--op-line-strong);
}

.job-v2-tab {
  min-height: 34px;
  padding: 6px 12px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--op-ink-muted);
  font-size: 0.79rem;
  font-weight: 650;
}

.job-v2-tab:hover {
  border-bottom-color: #a9c4f5;
  background: transparent;
  color: var(--op-accent-ink);
}

.job-v2-tab.is-active {
  border-bottom-color: var(--op-accent);
  background: transparent;
  color: var(--op-accent-ink);
}

.job-v2-tab span {
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--op-ink-muted);
  background: #eef1f6;
  font-size: 0.68rem;
}

.job-v2-alert {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  padding: 8px 12px;
  border: 1px solid #f2d69a;
  border-left: 3px solid #d98a0b;
  border-radius: var(--op-radius-sm);
  background: #fffaf0;
  color: #7c4a03;
  font-size: 0.78rem;
}

/* Sekundární tlačítko detailu (odkazy i tlačítka vypadají stejně). */
.workspace-page--job-detail-v2 .button-secondary {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border: 1px solid var(--op-line-strong);
  border-radius: var(--op-radius-sm);
  color: var(--op-ink);
  background: var(--op-surface);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
}

.workspace-page--job-detail-v2 .button-secondary:hover {
  border-color: #b4bfcf;
  color: var(--op-ink);
  background: var(--op-surface-muted);
}

.job-v2-section {
  position: relative;
  margin-bottom: 10px;
  padding: 12px 14px 14px;
  overflow: visible;
  border: 1px solid var(--op-line);
  border-radius: var(--op-radius);
  background: var(--op-surface);
  box-shadow: var(--op-shadow);
}

.job-v2-section__heading {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: -12px -14px 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--op-line);
  background: var(--op-surface-muted);
  border-radius: var(--op-radius) var(--op-radius) 0 0;
}

.job-v2-section__heading h2 {
  margin: 0;
  color: var(--op-ink);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.job-v2-section__heading p {
  margin: 0;
  color: var(--op-ink-soft);
  font-size: 0.7rem;
}

/* --- Pole ---------------------------------------------------------------- */
.job-v2-customer-form,
.job-v2-metrics-form,
.job-v2-job-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(172px, 1fr));
  gap: 10px 12px;
}

.job-v2-customer-form [hidden] {
  display: none !important;
}

.job-v2-customer-form label,
.job-v2-metrics-form label,
.job-v2-invoice-config label,
.job-v2-service label {
  display: grid;
  align-content: start;
  gap: 3px;
}

.job-v2-customer-form label > span,
.job-v2-metrics-form label > span,
.job-v2-invoice-config label > span,
.job-v2-service label > span,
.job-v2-field > span,
.job-v2-read-grid small {
  color: var(--op-ink-soft);
  font-size: 0.69rem;
  font-weight: 650;
  line-height: 1.25;
}

.job-v2-customer-form label > span small,
.job-v2-metrics-form label > span small {
  color: #a9b3c1;
  font-weight: 500;
}

/* Jednotné ovládací prvky detailu. Prefix zvyšuje specificitu nad sdílené
   inline-editor pravidlo, takže vzhled polí je předvídatelný. */
.workspace-page--job-detail-v2 .job-v2-section input:not([type="hidden"]):not([type="checkbox"]):not([type="file"]),
.workspace-page--job-detail-v2 .job-v2-section select,
.workspace-page--job-detail-v2 .job-v2-section textarea,
.workspace-page--job-detail-v2 .job-v2-header input:not([type="hidden"]),
.workspace-page--job-detail-v2 .job-v2-header select {
  width: 100%;
  min-width: 0;
  min-height: 30px;
  box-sizing: border-box;
  padding: 5px 8px;
  border: 1px solid var(--op-line-strong);
  border-radius: var(--op-radius-sm);
  background-color: var(--op-surface);
  color: var(--op-ink);
  font: inherit;
  font-size: 0.79rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.workspace-page--job-detail-v2 .job-v2-section input:not([type="hidden"]):not([type="checkbox"]):not([type="file"]):hover,
.workspace-page--job-detail-v2 .job-v2-section select:not([data-state-select]):hover,
.workspace-page--job-detail-v2 .job-v2-section textarea:hover {
  border-color: #b4bfcf;
}

.workspace-page--job-detail-v2 .job-v2-section input:not([type="hidden"]):not([type="checkbox"]):not([type="file"]):focus,
.workspace-page--job-detail-v2 .job-v2-section select:not([data-state-select]):focus,
.workspace-page--job-detail-v2 .job-v2-section textarea:focus {
  border-color: var(--op-accent);
  outline: none;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 14%);
}

.workspace-page--job-detail-v2 .job-v2-section input::placeholder,
.workspace-page--job-detail-v2 .job-v2-section textarea::placeholder {
  color: #b3bccb;
}

.job-v2-field {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 3px;
}

.job-v2-field > strong {
  display: flex;
  min-height: 30px;
  align-items: center;
  overflow: hidden;
  color: var(--op-ink);
  font-size: 0.79rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-v2-field--static strong {
  font-variant-numeric: tabular-nums;
}

.job-v2-field .compact-project-pill {
  align-self: center;
  justify-self: start;
  font-size: 0.7rem;
}

/* Datum i čas jsou v jednom poli; druhý sloupec zbyl po odděleném čase a dělal
   ve výpisu prázdné místo, kvůli kterému se do prvního nevešel rok. */
.job-v2-deadline-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
}

.job-v2-read-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px 12px;
}

.job-v2-read-grid > span {
  display: grid;
  gap: 2px;
}

.job-v2-read-grid strong {
  color: var(--op-ink);
  font-size: 0.79rem;
  font-weight: 600;
}

/* --- Poznámky ------------------------------------------------------------ */
.job-v2-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--op-line);
}

.job-v2-notes > div {
  position: relative;
  min-width: 0;
}

.job-v2-notes .note-editor {
  position: relative;
}

.job-v2-notes .note-editor__tools {
  position: absolute;
  right: 0;
  bottom: 100%;
  margin-bottom: 3px;
}

.job-v2-notes .job-v2-note--private {
  padding-left: 10px;
  border-left: 2px solid #e0b357;
}

.job-v2-notes h3,
.job-v2-notes > div > p {
  padding-right: 80px;
}

.job-v2-notes h3 {
  margin: 0;
  color: var(--op-ink);
  font-size: 0.74rem;
  font-weight: 700;
}

.job-v2-notes p {
  margin: 2px 0 5px;
  color: var(--op-ink-soft);
  font-size: 0.68rem;
}

.workspace-page--job-detail-v2 .job-v2-notes textarea {
  min-width: 0;
  min-height: 52px;
  line-height: 1.4;
  resize: vertical;
}

.workspace-page--job-detail-v2 .job-v2-notes .note-editor__surface {
  min-height: 52px;
  font-size: 0.72rem;
}

/* --- Tabulka služeb ------------------------------------------------------ */
.job-v2-section--services {
  padding-bottom: 10px;
}

.job-v2-services-wrap {
  margin: 0 -14px;
  padding: 0 14px;
  overflow-x: auto;
  scrollbar-color: #c3ccd9 transparent;
  scrollbar-width: thin;
}

/* Sloupec „objednáno“ zmizel; zbylá šířka patří názvu, termínu a celkové ceně,
   aby se datum nekrátilo a vpravo nezůstávalo prázdno. */
.job-v2-services {
  display: grid;
  min-width: 1040px;
  grid-template-columns:
    minmax(180px, 1.9fr)
    124px
    minmax(120px, 1.1fr)
    136px
    82px
    88px
    148px
    minmax(104px, 0.9fr)
    30px;
  column-gap: 8px;
  align-items: center;
}

/* Prázdný seznam nemá co posouvat. */
.job-v2-services:not(:has(.job-v2-service)) {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}

.job-v2-services__head,
.job-v2-service {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
}

.job-v2-services__head {
  padding: 0 0 6px;
  border-bottom: 1px solid var(--op-line-strong);
}

.job-v2-services__head > span {
  overflow: hidden;
  color: var(--op-ink-soft);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.job-v2-services__head > span:first-child {
  padding-left: 8px;
}

.job-v2-services__head > span.is-num {
  text-align: right;
}

.job-v2-service {
  padding: 5px 0;
  border-bottom: 1px solid var(--op-line);
  row-gap: 4px;
}

.job-v2-service:hover {
  background: #f7faff;
}

.job-v2-service > .quiet-state,
.job-v2-services > .quiet-state {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  color: var(--op-ink-soft);
  font-size: 0.78rem;
}

.job-v2-service__name {
  display: grid;
  gap: 1px;
  min-width: 0;
  padding-left: 8px;
  border-right: 1px solid var(--op-line);
  margin-right: -4px;
}

.job-v2-service__name > strong {
  overflow: hidden;
  color: var(--op-ink);
  font-size: 0.79rem;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-v2-service__name > span {
  color: #9a5b0a;
  font-size: 0.66rem;
  font-weight: 600;
}

.job-v2-service__workflow {
  display: grid;
  grid-column: 2 / 5;
  grid-template-columns: subgrid;
  align-items: center;
  gap: 0 8px;
}

/* Popisky jsou v hlavičce tabulky; ve sloupci zůstávají jen pro čtečky. */
.job-v2-service label > span,
.job-v2-manual-price > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Needitovatelné hodnoty ve sloupci vypadají stejně jako editovatelné. */
.job-v2-service label {
  min-width: 0;
}

.job-v2-service label > strong {
  display: block;
  padding: 3px 6px;
  line-height: 20px;
  overflow: hidden;
  color: var(--op-ink);
  font-size: 0.76rem;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-v2-service label > .dense-service-status {
  padding: 2px 10px;
}

.job-v2-service__commercial {
  display: contents;
}

.job-v2-service__commercial form {
  display: grid !important;
  /* Od pátého sloupce po ten předposlední. Napevno zapsaná desítka počítala se
     sloupcem „objednáno“, který zmizel, a řádek se kvůli tomu lámal na dvě patra. */
  grid-column: 5 / -2;
  grid-template-columns: subgrid;
  align-items: center;
  gap: 0 8px;
}

.job-v2-service__commercial input[type="number"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.job-v2-price-lock {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.job-v2-price-lock > .job-v2-manual-price {
  flex: 0 0 auto;
}

.job-v2-price-lock > label:last-child {
  flex: 1 1 auto;
  min-width: 0;
}

.job-v2-manual-price input {
  width: 15px;
  min-width: 15px;
  height: 15px;
  min-height: 15px !important;
  margin: 0;
  padding: 0 !important;
  accent-color: var(--op-accent);
  cursor: pointer;
}

.job-v2-service-total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  color: #0f6b42;
  font-size: 0.79rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-v2-service .inline-editor__error:empty {
  display: none;
}

.job-v2-service .inline-editor__error:not(:empty) {
  grid-column: 1 / -1;
  max-width: none;
  margin-top: 3px;
}

.job-v2-service__hint {
  grid-column: 1 / -1;
  margin: 2px 0 0 8px;
  padding: 3px 8px;
  border-left: 2px solid #e8b45b;
  border-radius: 0 var(--op-radius-sm) var(--op-radius-sm) 0;
  background: #fffaf0;
  color: #7c4a03;
  font-size: 0.69rem;
}

/* Poslední sloupec, ať jich je kolikkoli. Napevno zapsaná desítka poslala
   tlačítko do neexistujícího sloupce a řádek se kvůli tomu zlomil. */
.job-v2-service__remove {
  display: flex;
  grid-column: -2 / -1;
  /* Bez určeného řádku si tlačítko založí vlastní a řádek se zlomí na dvě patra. */
  grid-row: 1;
  align-self: center;
  justify-content: flex-end;
  margin: 0;
}

.workspace-page--job-detail-v2 .job-v2-service__remove button {
  display: grid;
  width: 26px;
  min-width: 26px;
  height: 26px;
  min-height: 26px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--op-line-strong);
  border-radius: var(--op-radius-sm);
  color: var(--op-ink-muted);
  background: var(--op-surface);
  font-size: 0.72rem;
  font-weight: 700;
}

.workspace-page--job-detail-v2 .job-v2-service__remove button:hover {
  border-color: #e9b9b4;
  color: var(--color-danger);
  background: #fff5f4;
}

.workspace-page--job-detail-v2 .job-v2-service.is-removed .job-v2-service__remove button:hover {
  border-color: #9ad2ae;
  color: #15803d;
  background: #f0fdf4;
}

/* Pole uvnitř tabulky služeb zůstávají tiché, dokud s nimi uživatel nepracuje. */
.workspace-page--job-detail-v2 .job-v2-service input:not([type="hidden"]):not([type="checkbox"]),
.workspace-page--job-detail-v2 .job-v2-service select {
  width: 100%;
  min-width: 0;
  min-height: 26px;
  padding: 3px 6px;
  border: 1px solid transparent;
  border-radius: var(--op-radius-sm);
  background-color: transparent;
  color: var(--op-ink);
  font: inherit;
  font-size: 0.76rem;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.workspace-page--job-detail-v2 .job-v2-service input:not([type="hidden"]):not([type="checkbox"]):hover,
.workspace-page--job-detail-v2 .job-v2-service select:not([data-state-select]):hover {
  border-color: var(--op-line-strong);
  background-color: var(--op-surface);
}

.workspace-page--job-detail-v2 .job-v2-service input:not([type="hidden"]):not([type="checkbox"]):focus,
.workspace-page--job-detail-v2 .job-v2-service select:not([data-state-select]):focus {
  border-color: var(--op-accent);
  background-color: var(--op-surface);
  outline: none;
  box-shadow: 0 0 0 3px rgb(37 99 235 / 16%);
}

.workspace-page--job-detail-v2 .job-v2-service input:disabled {
  color: #b3bccb;
  background-color: transparent;
}

.job-v2-service .job-v2-deadline-form {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

.job-v2-add-service {
  margin-top: 10px;
  font-size: 0.78rem;
}

.job-v2-add-service > summary {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 0 12px;
  border: 1px dashed var(--op-line-strong);
  border-radius: var(--op-radius-sm);
  color: var(--op-accent-ink);
  cursor: pointer;
  font-weight: 650;
  list-style: none;
}

.job-v2-add-service > summary::-webkit-details-marker {
  display: none;
}

.job-v2-add-service > summary:hover {
  border-color: var(--op-accent);
  background: var(--op-accent-soft);
}

/* Na širokém monitoru by se pole roztáhla přes celou obrazovku a čtení by
   skákalo z kraje na kraj; formulář si vystačí s šířkou okna služby. */
.job-v2-add-service form {
  max-width: 640px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--op-line);
  border-radius: var(--op-radius-sm);
  background: var(--op-surface-muted);
}

/* --- Cena a faktura ------------------------------------------------------ */
.job-v2-invoice-config {
  display: grid !important;
  grid-template-columns: minmax(180px, 1.2fr) minmax(180px, 1fr) 150px auto;
  align-items: end;
  gap: 10px 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--op-line);
}

.job-v2-invoice-config button {
  min-height: 30px;
  padding: 6px 14px;
  border-radius: var(--op-radius-sm);
  font-size: 0.78rem;
}

.job-v2-invoice-layout {
  display: grid;
  grid-template-columns: minmax(320px, 1.6fr) minmax(240px, 0.8fr);
  gap: 12px;
}

.job-v2-invoice-lines {
  overflow: hidden;
  border: 1px solid var(--op-line);
  border-radius: var(--op-radius-sm);
  background: var(--op-surface);
}

.job-v2-invoice-lines > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 34px;
  padding: 5px 10px;
  border-bottom: 1px solid var(--op-line);
  font-size: 0.78rem;
}

.job-v2-invoice-lines > p {
  margin: 0;
  padding: 10px;
  color: var(--op-ink-soft);
  font-size: 0.78rem;
}

.job-v2-invoice-lines span {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.job-v2-invoice-lines small {
  color: var(--op-ink-soft);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
}

.job-v2-invoice-lines strong {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.job-v2-invoice-lines .job-v2-invoice-total {
  border-bottom: 0;
  background: var(--op-surface-muted);
  font-size: 0.86rem;
}

.job-v2-invoice-lines .job-v2-invoice-total strong {
  color: var(--op-ink);
  font-weight: 750;
}

.job-v2-invoice-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 8px;
}

.job-v2-invoice-status > span {
  display: grid;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid var(--op-line);
  border-radius: var(--op-radius-sm);
  background: var(--op-surface-muted);
}

.job-v2-invoice-status small {
  color: var(--op-ink-soft);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.job-v2-invoice-status strong {
  color: var(--op-ink);
  font-size: 0.78rem;
  font-weight: 650;
}

.job-v2-invoice-status button,
.job-v2-invoice-status p {
  grid-column: 1 / -1;
}

.job-v2-invoice-status button {
  min-height: 32px;
  border-radius: var(--op-radius-sm);
  font-size: 0.78rem;
}

.job-v2-invoice-status .warning-banner {
  margin: 0;
  padding: 6px 9px;
  border: 1px solid #f2d69a;
  border-radius: var(--op-radius-sm);
  background: #fffaf0;
  color: #7c4a03;
  font-size: 0.72rem;
}

/* --- Spodní karty a historie --------------------------------------------- */
.job-v2-lower-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  align-items: start;
}

.job-v2-lower-grid .job-v2-section {
  height: 100%;
  margin-bottom: 0;
}

.job-v2-lower-grid dl {
  margin: 0 0 10px;
}

.job-v2-lower-grid dl div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--op-line);
  font-size: 0.78rem;
}

.job-v2-lower-grid dt {
  color: var(--op-ink-soft);
}

.job-v2-lower-grid dd {
  margin: 0;
  color: var(--op-ink);
  font-weight: 600;
}

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

.workspace-page--job-detail-v2 button:disabled {
  border-color: var(--op-line-strong);
  color: var(--op-ink-soft);
  background: var(--op-surface-muted);
  cursor: not-allowed;
  opacity: 1;
}

.job-v2-lower-grid button,
.job-v2-lower-grid .button-secondary {
  min-height: 32px;
  padding: 6px 14px;
  border-radius: var(--op-radius-sm);
  font-size: 0.78rem;
}

.job-v2-section .quiet-state {
  margin: 8px 0 0;
  color: var(--op-ink-soft);
  font-size: 0.72rem;
}

.job-v2-section--history > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -12px -14px;
  padding: 9px 14px;
  border-radius: var(--op-radius);
  color: var(--op-ink);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  list-style: none;
  text-transform: uppercase;
}

.job-v2-section--history > summary::-webkit-details-marker {
  display: none;
}

.job-v2-section--history > summary::before {
  color: var(--op-ink-soft);
  content: "▸";
}

.job-v2-section--history[open] > summary {
  margin-bottom: 12px;
  border-bottom: 1px solid var(--op-line);
  border-radius: var(--op-radius) var(--op-radius) 0 0;
  background: var(--op-surface-muted);
}

.job-v2-section--history[open] > summary::before {
  content: "▾";
}

.job-v2-section--history > summary small {
  color: var(--op-ink-soft);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.job-v2-section--history .dense-history {
  margin: 0;
  border-top: 0;
}

.job-v2-section--history .dense-history li {
  grid-template-columns: 130px minmax(160px, 1fr) minmax(120px, 0.6fr);
  min-height: 30px;
  padding: 4px 2px;
  border-bottom: 1px solid var(--op-line);
  font-size: 0.76rem;
}

.job-v2-section--history .dense-history time,
.job-v2-section--history .dense-history span {
  color: var(--op-ink-soft);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
}

.job-v2-section--history .dense-history strong {
  color: var(--op-ink);
  font-weight: 600;
}

.job-v2-section--history details {
  margin-top: 8px;
}

.job-v2-section--history details > summary {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  color: var(--op-accent-ink);
  cursor: pointer;
  font-size: 0.74rem;
  font-weight: 650;
}

.job-v2-technical {
  margin: 4px 2px 0;
  color: var(--op-ink-soft);
  font-size: 0.72rem;
}

.job-v2-technical > summary {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
}

.job-v2-technical p {
  margin: 4px 0;
}

.job-v2-technical code {
  padding: 1px 5px;
  border-radius: 3px;
  background: #eef1f6;
  font-size: 0.7rem;
}

/* --- Přílohy ------------------------------------------------------------- */
.job-v2-upload {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px dashed var(--op-line-strong);
  border-radius: var(--op-radius-sm);
  background: var(--op-surface-muted);
}

.workspace-page--job-detail-v2 .job-v2-upload input[type="file"] {
  flex: 1 1 260px;
  min-height: 30px;
  padding: 4px 6px;
  border: 1px solid var(--op-line-strong);
  border-radius: var(--op-radius-sm);
  background: var(--op-surface);
  font-size: 0.76rem;
}

.job-v2-upload button {
  min-height: 32px;
  padding: 6px 14px;
  border-radius: var(--op-radius-sm);
  font-size: 0.78rem;
}

.job-v2-upload small {
  color: var(--op-ink-soft);
  font-size: 0.7rem;
}

.job-v2-attachment-list {
  display: grid;
  gap: 6px;
}

.job-v2-attachment-list article {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--op-line);
  border-radius: var(--op-radius-sm);
  background: var(--op-surface);
}

.job-v2-attachment-list article > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.job-v2-attachment-list article > div:last-child {
  display: flex;
  align-items: center;
  gap: 6px;
}

.job-v2-attachment-list article strong {
  overflow: hidden;
  color: var(--op-ink);
  font-size: 0.79rem;
  font-weight: 650;
  text-overflow: ellipsis;
}

.job-v2-attachment-list article span {
  color: var(--op-ink-soft);
  font-size: 0.7rem;
}

.job-v2-attachment-list article .button-secondary,
.job-v2-attachment-list article button {
  min-height: 30px;
  padding: 5px 12px;
  border-radius: var(--op-radius-sm);
  font-size: 0.75rem;
}

.job-v2-attachment-list article.is-archived {
  background: var(--op-surface-muted);
  opacity: 0.7;
}

/* --- Štítky stavů v detailu ---------------------------------------------- */
.workspace-page--job-detail-v2 .dense-service-status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border: 0;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
}

.job-v2-service .state-picker,
.job-v2-header .state-picker {
  width: 100%;
}

.job-v2-service .state-picker__select,
.job-v2-header .state-picker__select {
  min-height: 26px !important;
  padding: 2px 20px 2px 10px !important;
  border-radius: 999px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
}

.job-v2-header .state-picker__select {
  min-height: 30px !important;
}

/* --- Barevné zvýraznění termínu v detailu -------------------------------- */
/* Stejná logika jako v gridu: závažnost termínu nese barva pole s hodnotou. */
.job-v2-due[data-deadline-severity="OVERDUE"] { --due-bg: #fde0e0; --due-fg: #8f1d16; --due-line: #eda9a4; }
.job-v2-due[data-deadline-severity="TODAY"] { --due-bg: #ffe6cc; --due-fg: #8a3d06; --due-line: #f0bf8c; }
.job-v2-due[data-deadline-severity="TOMORROW"] { --due-bg: #fdf0c2; --due-fg: #7a5406; --due-line: #e8cf83; }
.job-v2-due[data-deadline-severity="UPCOMING"] { --due-bg: #e2f7ea; --due-fg: #12603a; --due-line: #a3ddbb; }

.workspace-page--job-detail-v2 .job-v2-due[data-deadline-severity] > strong,
.workspace-page--job-detail-v2 .job-v2-due[data-deadline-severity] input:not([type="hidden"]):not([type="checkbox"]) {
  border-color: var(--due-line, var(--op-line-strong));
  background-color: var(--due-bg, transparent);
  color: var(--due-fg, var(--op-ink));
}

.workspace-page--job-detail-v2 .job-v2-header__summary > .job-v2-due > strong {
  padding: 1px 8px;
  border-radius: 999px;
}

@media (max-width: 1180px) {
  .job-v2-invoice-layout,
  .job-v2-lower-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .job-v2-services-wrap {
    overflow-x: visible;
  }

  .job-v2-services {
    min-width: 0;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .job-v2-services__head {
    display: none;
  }

  .job-v2-service,
  .job-v2-services__head {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px 10px;
    padding: 10px;
    border: 1px solid var(--op-line);
    border-radius: var(--op-radius-sm);
  }

  .job-v2-service__name {
    grid-column: 1 / -1;
    padding-left: 0;
    border-right: 0;
    margin-right: 0;
  }

  .job-v2-service__workflow,
  .job-v2-service__commercial form {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px 10px;
  }

  .job-v2-service__remove {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .workspace-page--job-detail-v2 .job-v2-service__remove button {
    width: auto;
    min-width: 0;
    padding: 0 12px;
  }

  .job-v2-service label > span,
  .job-v2-manual-price > span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .workspace-page--job-detail-v2 .job-v2-service input:not([type="hidden"]):not([type="checkbox"]),
  .workspace-page--job-detail-v2 .job-v2-service select {
    min-height: 30px;
    border-color: var(--op-line-strong);
    background-color: var(--op-surface);
  }

  .job-v2-price-lock {
    flex-wrap: wrap;
  }

  .job-v2-service-total {
    justify-content: flex-start;
    align-items: flex-end;
  }
}

@media (max-width: 860px) {
  .content-container--job-v2 {
    width: 100%;
    padding: 12px 10px 24px;
  }

  .job-v2-header {
    align-items: stretch;
    flex-direction: column;
  }

  .job-v2-header__summary > span {
    min-width: 78px;
    padding: 2px 10px;
  }

  .job-v2-header__summary > span:first-of-type {
    padding-left: 0;
    border-left: 0;
  }

  .job-v2-notes,
  .job-v2-invoice-config {
    grid-template-columns: 1fr;
  }

  .job-v2-invoice-status {
    grid-template-columns: 1fr;
  }
}


/* --- Připravenost příjmu z webů ------------------------------------------ */
.intake-blockers,
.intake-unmapped,
.intake-steps {
  margin: 0;
  padding-left: 20px;
}

.intake-blockers li {
  color: var(--color-danger);
  font-size: 0.82rem;
  font-weight: 600;
}

.intake-unmapped-title {
  margin: 8px 0 4px;
  color: var(--op-ink-muted);
  font-size: 0.78rem;
  font-weight: 650;
}

.intake-unmapped li {
  color: var(--op-ink);
  font-size: 0.82rem;
}

.intake-unmapped li span {
  color: var(--op-ink-soft);
  font-variant-numeric: tabular-nums;
}

.intake-steps li {
  margin-bottom: 6px;
  color: var(--op-ink);
  font-size: 0.86rem;
  line-height: 1.5;
}

.intake-steps code {
  padding: 1px 5px;
  border-radius: 3px;
  background: #eef1f6;
  font-size: 0.8rem;
}

/* --- Omezený pohled řešitele --------------------------------------------- */
/* Řešitel mění stav a skutečné množství, ale sazbu ani cenu nevidí. */
.job-v2-services--restricted {
  min-width: 700px;
  grid-template-columns:
    minmax(180px, 1.9fr)
    124px
    minmax(120px, 1.1fr)
    136px
    minmax(96px, 0.6fr);
}

.job-v2-services--restricted .job-v2-service__commercial form {
  grid-column: 5 / 6;
}

.job-v2-contact-sharing {
  margin-left: auto;
}

.job-v2-contact-sharing label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--op-ink-muted);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 650;
}

.workspace-page--job-detail-v2 .job-v2-contact-sharing input[type="checkbox"] {
  width: 15px;
  min-width: 15px;
  height: 15px;
  min-height: 15px;
  margin: 0;
  padding: 0;
  accent-color: var(--op-accent);
  cursor: pointer;
}

.job-v2-contact-hidden strong {
  color: var(--op-ink-soft);
  font-style: italic;
}

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

.intake-forms li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  padding: 2px 0;
  font-size: 0.8rem;
}

.intake-forms li span {
  color: var(--op-ink-soft);
  font-size: 0.72rem;
}

/* --- Objednávka tisku a vazby -------------------------------------------- */
.print-binding {
  padding: 0;
  border: 0;
  background: transparent;
}

.panel + .print-binding,
.detail-list + .print-binding {
  margin-top: 10px;
}

.workspace-page:not(.workspace-page--job-detail-v2) .print-binding {
  padding: 14px 16px;
  border: 1px solid var(--op-line);
  border-radius: var(--op-radius);
  background: var(--op-surface);
  box-shadow: var(--op-shadow);
}

.print-binding__heading h2 {
  margin: 0;
  color: var(--op-ink);
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.print-binding__heading p {
  margin: 2px 0 12px;
  color: var(--op-ink-soft);
  font-size: 0.7rem;
}

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

.print-binding__summary > span {
  display: grid;
  gap: 1px;
  padding: 8px 10px;
  border: 1px solid var(--op-line);
  border-radius: var(--op-radius-sm);
  background: var(--op-surface-muted);
}

.print-binding__summary small {
  color: var(--op-ink-soft);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.print-binding__summary strong {
  color: var(--op-ink);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.print-binding__summary em {
  color: var(--op-ink-muted);
  font-size: 0.72rem;
  font-style: normal;
}

.print-binding__more {
  margin-top: 10px;
}

.print-binding__more > summary {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  gap: 6px;
  color: var(--op-accent-ink);
  cursor: pointer;
  font-size: 0.76rem;
  font-weight: 650;
}

.print-binding__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 10px;
}

.print-binding__grid h3 {
  margin: 0 0 4px;
  color: var(--op-ink-soft);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.print-binding__grid h3 + dl + h3,
.print-binding__grid dl + h3 {
  margin-top: 12px;
}

.print-binding__grid dl {
  margin: 0;
}

.print-binding__grid dl div {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid var(--op-line);
  font-size: 0.78rem;
}

.print-binding__grid dt {
  color: var(--op-ink-soft);
}

.print-binding__grid dd {
  margin: 0;
  color: var(--op-ink);
  font-weight: 600;
}

.print-binding__lines {
  margin: 0;
  padding-left: 22px;
}

.print-binding__lines li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
  border-bottom: 1px solid var(--op-line);
  font-size: 0.78rem;
}

.print-binding__lines em {
  color: var(--op-ink-soft);
  font-size: 0.7rem;
  font-style: normal;
  white-space: nowrap;
}

.job-v2-section--print {
  padding-top: 12px;
}

/* --------------------------------------------------------------------------
   Tisk a vazba ve výpisu zakázky.
   Záložka je vidět vždy, když je služba součástí zakázky. Prázdná pole jsou
   pozvánka k doplnění, ne chyba.
   -------------------------------------------------------------------------- */
.print-binding-form {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.print-binding-form fieldset {
  padding: 10px 12px 12px;
  border: 1px solid var(--op-line);
  border-radius: var(--op-radius);
  background: var(--op-surface-muted);
}

.print-binding-form legend {
  padding: 0 5px;
  color: var(--op-ink-muted);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.print-binding-form__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px 12px;
}

.print-binding-form__grid label {
  display: grid;
  gap: 3px;
  min-width: 0;
  color: var(--op-ink-muted);
  font-size: 0.72rem;
}

.print-binding-form__grid input,
.print-binding-form__grid select {
  min-width: 0;
  min-height: 30px;
  padding: 3px 7px;
  border: 1px solid #aebacc;
  border-radius: var(--op-radius-sm);
  color: var(--op-ink);
  background: var(--op-surface);
  font: inherit;
  font-size: 0.78rem;
}

.print-binding-form__grid input:focus,
.print-binding-form__grid select:focus {
  border-color: var(--op-accent);
  outline: 2px solid #bfdbfe;
  outline-offset: 0;
}

.print-binding-form__wide {
  grid-column: 1 / -1;
}

.print-binding-form__check {
  display: flex !important;
  gap: 6px;
  align-items: center;
}

.print-binding-form__check input {
  min-height: 0;
  width: auto;
}

.print-binding-form__note {
  margin: 10px 0 4px;
  color: var(--op-ink-muted);
  font-size: 0.72rem;
}

.print-binding-form__actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.print-binding-form__actions small {
  color: var(--op-ink-soft);
  font-size: 0.72rem;
}

/* --------------------------------------------------------------------------
   Výpis zakázky jako vyskakovací okno nad přehledem.
   Šířka je taková, aby se vešla tabulka služeb, ne aby zabrala celý monitor.
   -------------------------------------------------------------------------- */
.job-modal {
  width: min(1240px, 94vw);
  max-width: none;
  max-height: 92vh;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: var(--op-surface);
  box-shadow: 0 24px 60px -20px rgb(15 23 42 / 45%);
}

.job-modal::backdrop {
  background: rgb(15 23 42 / 42%);
}

.job-modal__bar {
  position: sticky;
  z-index: 5;
  top: 0;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  padding: 6px 10px;
  border-bottom: 1px solid var(--op-line);
  background: var(--op-surface-head);
}

.job-modal__link {
  color: var(--op-ink-muted);
  font-size: 0.74rem;
  text-decoration: none;
}

.job-modal__link:hover {
  color: var(--op-accent-ink);
  text-decoration: underline;
}

.job-modal__close {
  display: grid;
  width: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--op-ink-muted);
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.job-modal__close:hover,
.job-modal__close:focus-visible {
  border-color: var(--op-line-strong);
  color: var(--op-ink);
  background: var(--op-surface);
  outline: none;
}

.job-modal__body {
  max-height: calc(92vh - 37px);
  padding: 0 16px 16px;
  overflow: auto;
}

/* Obsah přichází ze stránky, kde si nese vlastní odsazení; v okně by bylo dvojí. */
.job-modal__body .content-container {
  width: 100%;
  max-width: none;
  padding: 4px 0 0;
}

.job-modal__body {
  position: relative;
}

.job-modal.is-loading .job-modal__body::before {
  position: absolute;
  z-index: 5;
  top: 8px;
  left: 50%;
  padding: 6px 14px;
  transform: translateX(-50%);
  border: 1px solid var(--op-line);
  border-radius: 999px;
  background: var(--op-surface);
  box-shadow: var(--op-shadow-pop);
  color: var(--op-ink-soft);
  content: "Načítám výpis zakázky…";
  font-size: 0.72rem;
}

/* --------------------------------------------------------------------------
   Hlášení jako plovoucí okno.
   Dřív se vkládalo do stránky a odsunulo tabulku o vlastní výšku — uživatel
   pak hledal řádek, na kterém před vteřinou pracoval.
   -------------------------------------------------------------------------- */
.toasts {
  position: fixed;
  z-index: 300;
  top: 16px;
  right: 20px;
  display: grid;
  gap: 8px;
  width: min(420px, calc(100vw - 40px));
}

.toast {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 11px 12px 11px 14px;
  border: 1px solid #cddcff;
  border-radius: 8px;
  color: var(--color-primary-hover);
  background: var(--color-primary-soft);
  box-shadow: 0 12px 28px -12px rgb(15 23 42 / 45%);
  font-size: 0.82rem;
  font-weight: 560;
  animation: toast-in 140ms ease-out;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.toast > p {
  flex: 1;
  margin: 0;
  line-height: 1.4;
}

.toast--success {
  color: var(--color-success);
  border-color: #bfdfc9;
  background: var(--color-success-soft);
}

.toast--error {
  color: var(--color-danger);
  border-color: #efc4bf;
  background: var(--color-danger-soft);
}

.toast__close {
  display: grid;
  width: 20px;
  min-height: 20px;
  height: 20px;
  padding: 0;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 5px;
  color: inherit;
  background: transparent;
  font-size: 1rem;
  line-height: 1;
  opacity: 0.65;
  cursor: pointer;
}

.toast__close:hover,
.toast__close:focus-visible {
  border-color: currentColor;
  outline: none;
  opacity: 1;
}


/* Barevný štítek se při najetí myší ani při kliknutí nesmí měnit. Rámeček
   a hranatý modrý obrys kolem oblého štítku čtete jako „něco se stalo“, ale
   nestalo se nic — jen jste přes buňku přejeli nebo do ní klikli.
   Platí to všude, kde štítek je: v přehledu i ve výpisu zakázky. */
.inline-editor--direct select[data-state-select]:hover,
.inline-editor--direct select[data-project-select]:hover,
.inline-editor--direct select[data-state-select]:focus,
.inline-editor--direct select[data-project-select]:focus,
.inline-editor [data-inline-form] select[data-state-select]:hover,
.inline-editor [data-inline-form] select[data-project-select]:hover,
.inline-editor [data-inline-form] select[data-state-select]:focus,
.inline-editor [data-inline-form] select[data-project-select]:focus,
.compact-operational-grid .inline-editor--direct select[data-state-select]:hover,
.compact-operational-grid .inline-editor--direct select[data-project-select]:hover,
.compact-operational-grid .inline-editor--direct select[data-state-select]:focus,
.compact-operational-grid .inline-editor--direct select[data-project-select]:focus {
  border-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Klávesnice se ale musí poznat, kde je. Prstenec kopíruje tvar štítku, takže
   kolem oblého štítku není hranatý rám. */
.compact-operational-grid .state-picker__select:focus-visible,
.compact-operational-grid select[data-project-select]:focus-visible,
select[data-state-select]:focus-visible,
select[data-project-select]:focus-visible {
  outline: none !important;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px rgb(37 99 235 / 55%) !important;
}

/* --------------------------------------------------------------------------
   Termíny služeb proti termínu zakázky.
   Nová služba dostane termín zakázky. Ruční posun termínu se do služeb sám
   nepromítá, aby nepřepsal to, co někdo nastavil schválně — od toho je
   tlačítko. Služba s jiným datem je proto vidět na první pohled.
   -------------------------------------------------------------------------- */
/* Termín a „Srovnat termíny“ vedle sebe; tlačítko pod polem vypadalo, že patří
   k dalšímu údaji. Pole si proto vezme dva sloupce mřížky. */
.job-v2-field--deadline {
  grid-column: span 2;
}

.job-v2-deadline-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}

/* Pole je dlouhé přesně na datum, čas a ikonu kalendáře; zbytek řádku nepotřebuje.
   Formulář kolem něj se musí zúžit taky, jinak by tlačítko odplulo doprava. */
.job-v2-deadline-row > .inline-editor {
  width: auto;
  flex: 0 0 auto;
  min-width: 0;
}

.job-v2-deadline-row .job-v2-deadline-form {
  grid-template-columns: max-content;
}

/* Stejná váha jako sdílené pravidlo pro pole výpisu, které je roztahuje na celou
   šířku; tohle jedno pole má být dlouhé přesně na svůj obsah. */
.workspace-page--job-detail-v2
  .job-v2-section
  .job-v2-deadline-row
  .inline-editor--direct
  input[type="datetime-local"] {
  width: max-content;
  justify-self: start;
}

/* Prázdné místo na hlášení o chybě dělalo formulář vyšší než pole, a tlačítko
   se pak táhlo až k jeho spodní hraně. */
.job-v2-deadline-row .inline-editor__error:empty {
  display: none;
}

.job-v2-align {
  display: inline-flex;
  flex: 0 0 auto;
}

.job-v2-align button {
  min-height: 0;
  padding: 3px 10px;
  border: 1px solid var(--op-line-strong);
  border-radius: var(--op-radius-sm);
  color: var(--op-ink-muted);
  background: var(--op-surface);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
}

.job-v2-align button:hover,
.job-v2-align button:focus-visible {
  border-color: var(--op-accent);
  color: var(--op-accent-ink);
  background: var(--op-accent-soft);
  outline: none;
}

/* Pozadí pole nese jedinou věc: jak je termín naléhavý (po termínu, dnes,
   zítra, později). Že se termín služby liší od termínu zakázky, je něco jiného
   a značí to odznak vedle popisku — dvě sdělení na jednom pozadí se pletla. */
.job-v2-due--differs > span > em {
  display: inline-grid;
  width: 14px;
  height: 14px;
  place-items: center;
  vertical-align: -2px;
  border-radius: 50%;
  color: #fff;
  background: #b45309;
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 800;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   Výpis služeb ve výpisu zakázky.
   Pole tady dědila velikost písma od formulářů na celé stránce (15 px), takže
   se do sloupce nevešel ani datum. Tabulka služeb je hustá, písmo tomu musí
   odpovídat.
   -------------------------------------------------------------------------- */
.job-v2-service input:not([type="hidden"]),
.job-v2-service select,
.job-v2-service textarea {
  min-height: 28px;
  padding: 2px 6px;
  font-size: 0.78rem;
  line-height: 1.3;
}

.job-v2-service input[type="date"],
.job-v2-service input[type="datetime-local"] {
  font-variant-numeric: tabular-nums;
}

/* Ikona kalendáře v původní velikosti brala tolik místa, že se datum tak tak
   vešlo. Zůstává, jen menší. */
.job-v2-service input[type="date"]::-webkit-calendar-picker-indicator {
  width: 13px;
  height: 13px;
  padding: 0;
  margin-left: 2px;
  opacity: 0.5;
}

.job-v2-service input[type="date"]:hover::-webkit-calendar-picker-indicator,
.job-v2-service input[type="date"]:focus::-webkit-calendar-picker-indicator {
  opacity: 0.9;
}

.job-v2-service .job-v2-service__name strong {
  font-size: 0.82rem;
}

/* Odebrání služby je značka v řádku, ne tlačítko přes půl sloupce. Výběr musí
   přebít .workspace-page--job-detail-v2 .button-secondary, jinak si tlačítko
   odnese odsazení pro plnohodnotné tlačítko. */
.workspace-page--job-detail-v2 .job-v2-service__remove button.button-secondary,
.job-v2-service__remove button {
  display: grid;
  width: 24px;
  min-height: 24px;
  height: 24px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--op-line-strong);
  border-radius: 5px;
  color: var(--op-ink-muted);
  background: var(--op-surface);
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.workspace-page--job-detail-v2 .job-v2-service__remove button.button-secondary:hover,
.workspace-page--job-detail-v2 .job-v2-service__remove button.button-secondary:focus-visible,
.job-v2-service__remove button:hover,
.job-v2-service__remove button:focus-visible {
  border-color: #dc2626;
  color: #fff;
  background: #dc2626;
  outline: none;
}

/* --------------------------------------------------------------------------
   Barevný výběr stavu a projektu.
   Systémová nabídka kreslí položku pod myší svou modrou a přebije tím barvu
   stavu. Vlastní nabídka drží barvy i pod myší a vypadá stejně v přehledu,
   ve stavu zakázky i ve výpisu služeb.
   -------------------------------------------------------------------------- */
.chip-select {
  position: relative;
  display: block;
  min-width: 0;
}

/* Původní pole nese hodnotu, ale nesmí být vidět. Grid mu velikost i barvu
   nastavuje s !important, takže se musí přebít stejně důrazně; clip-path je
   pojistka, aby se nevykreslilo ani kdyby nějaký rozměr prošel. */
.chip-select__native {
  position: absolute !important;
  width: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  clip-path: inset(50%);
  pointer-events: none !important;
}

.chip-select__trigger {
  display: flex;
  width: 100%;
  min-height: 0;
  padding: 0;
  align-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.chip-select__trigger .state-token {
  display: block;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Atribut hidden nastavuje display: none jen v prohlížečovém stylu, takže by ho
   display: grid níž přebil a nabídka by byla pořád vidět — prázdný bílý čtvereček
   nad tabulkou. */
.chip-select__menu[hidden] {
  display: none;
}

.chip-select__menu {
  position: fixed;
  z-index: 400;
  /* Vrchní vrstva prohlížeče si nabídku sama vystředí; polohu si počítáme sami. */
  inset: auto;
  margin: 0;
  display: grid;
  gap: 3px;
  max-width: 320px;
  max-height: 280px;
  padding: 6px;
  overflow: auto;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 34px -14px rgb(15 23 42 / 45%);
}

.chip-select__option {
  display: flex;
  padding: 2px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  min-height: 0;
  cursor: pointer;
}

.chip-select__option > .state-token {
  flex: 1;
  padding: 3px 10px;
  font-size: 0.72rem;
  text-align: center;
}

.chip-select__option:hover,
.chip-select__option:focus-visible {
  background: #eef2f7;
  outline: none;
}

.chip-select__option[aria-selected="true"] > .state-token {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px currentcolor;
}

/* --- Zasazení do provozního přehledu ------------------------------------- */
.compact-operational-grid .chip-select__trigger .state-token {
  padding: 0 7px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 17px;
}

/* Názvy projektů jsou dlouhé, takže je jejich štítek o něco drobnější než stav —
   při stejné velikosti se do sloupce vešlo ještě míň. */
.compact-operational-grid .chip-select__trigger .state-token[data-project-code],
.compact-operational-grid .chip-select__option > .state-token[data-project-code],
.compact-sticky--project .compact-project-pill {
  font-size: 0.58rem;
  font-weight: 700;
}

/* --- Zasazení do výpisu zakázky ------------------------------------------ */
.job-v2-section .chip-select__trigger .state-token,
.dense-service-table .chip-select__trigger .state-token {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Výpis služeb: název otevírá okno, odhad a odebraná služba.
   Řádek zůstává přehledem — upravuje se v okně, ne v buňkách.
   -------------------------------------------------------------------------- */
.job-v2-service__open {
  display: block;
  width: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: var(--op-radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.job-v2-service__open > strong {
  border-bottom: 1px dashed transparent;
}

.job-v2-service__open:hover > strong,
.job-v2-service__open:focus-visible > strong {
  border-bottom-color: var(--op-accent);
  color: var(--op-accent-ink);
}

.job-v2-service__open:hover,
.job-v2-service__open:focus-visible,
.job-v2-service__open:active {
  border-color: transparent;
  color: inherit;
  background: transparent;
}

.job-v2-service__open:focus-visible {
  outline: 2px solid var(--op-accent);
  outline-offset: 2px;
}

.job-v2-service__desc {
  display: block;
  overflow: hidden;
  color: var(--op-ink-soft);
  font-size: 0.68rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.job-v2-service-total > em {
  color: var(--op-ink-soft);
  font-style: normal;
  font-weight: 600;
}

/* --- Formulář služby ------------------------------------------------------
   Stejné rozvržení pro okno úpravy i pro přidání služby: co to je a komu to
   patří nahoře, popis přes celou šířku, čísla vedle sebe. Pole jsou nižší než
   obecný formulář — obě okna se prohlížejí za chodu, ne vyplňují jednou za den. */
.service-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px 12px;
}

.service-form > .form-field {
  grid-column: span 3;
}

.service-form > .form-field--title,
.service-form > .form-field--description {
  grid-column: 1 / -1;
}

/* Když se vybírá i služba, jde název vedle ní; jinak si vezme celý řádek. */
.service-form:has(.form-field--task_type) > .form-field--title {
  grid-column: span 3;
}

.service-form > .form-field--actual_quantity,
.service-form > .form-field--unit_price,
.service-form > .form-field--manual_total {
  grid-column: span 2;
}

.service-form .form-field label {
  margin-bottom: 3px;
  color: var(--op-ink-soft);
  font-size: 0.7rem;
  font-weight: 650;
}

/* Delší selektor je tu schválně: okno stojí uvnitř řádku služby, kde jsou pole
   schválně tiché a bez rámečku. V okně se ale vyplňuje, takže rámeček mít mají. */
.service-form .form-field input,
.service-form .form-field select,
.service-form .form-field textarea,
.workspace-page--job-detail-v2 .job-v2-section .service-form .form-field input:not([type="hidden"]),
.workspace-page--job-detail-v2 .job-v2-section .service-form .form-field select,
.workspace-page--job-detail-v2 .job-v2-section .service-form .form-field textarea {
  /* Pole s datem si u sebe nechává o dva pixely víc; ostatní se mu srovnají,
     jinak jsou dvě pole na jednom řádku různě vysoká. */
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid var(--op-line-strong);
  border-radius: var(--op-radius-sm);
  background: var(--op-surface);
  font-size: 0.8rem;
}

.workspace-page--job-detail-v2 .job-v2-section .service-form .form-field input:focus,
.workspace-page--job-detail-v2 .job-v2-section .service-form .form-field select:focus,
.workspace-page--job-detail-v2 .job-v2-section .service-form .form-field textarea:focus {
  border-color: var(--op-accent);
  outline: 2px solid #bfdbfe;
  outline-offset: 0;
}

.service-form .form-field textarea {
  min-height: 54px;
  line-height: 1.4;
  resize: vertical;
}

.service-form .field-help {
  margin: 3px 0 0;
  color: var(--op-ink-soft);
  font-size: 0.68rem;
}

@media (max-width: 620px) {
  .service-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-form > .form-field,
  .service-form > .form-field--actual_quantity,
  .service-form > .form-field--unit_price,
  .service-form > .form-field--manual_total {
    grid-column: span 2;
  }
}

/* --- Okno pro úpravu služby ---------------------------------------------- */
.service-dialog {
  width: min(600px, 94vw);
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--op-surface);
  box-shadow: 0 24px 60px -20px rgb(15 23 42 / 45%);
}

.service-dialog::backdrop {
  background: rgb(15 23 42 / 42%);
}

.service-dialog form {
  padding: 0 16px 16px;
}

.service-dialog__bar {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--op-line);
}

.service-dialog__bar h3 {
  margin: 0;
  font-size: 0.94rem;
}

.service-dialog__close {
  display: grid;
  width: 26px;
  min-height: 26px;
  height: 26px;
  padding: 0;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--op-ink-muted);
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.service-dialog__close:hover,
.service-dialog__close:focus-visible {
  border-color: var(--op-line-strong);
  color: var(--op-ink);
  outline: none;
}

.service-dialog__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--op-line);
}

.service-dialog__actions button {
  min-height: 32px;
  padding: 5px 14px;
  font-size: 0.8rem;
}

/* --- 14) Odebraná služba ------------------------------------------------- */
.job-v2-service.is-removed {
  opacity: 0.42;
}

.job-v2-service.is-removed .job-v2-service__name input,
.job-v2-service.is-removed .job-v2-service__name strong {
  text-decoration: line-through;
}

.job-v2-service.is-removed .job-v2-service__remove button {
  opacity: 1;
}

/* Odebraná služba se nedá měnit, takže se stav ukáže jen jako štítek. Musí ale
   vypadat stejně jako ten, který jde měnit — jinak to působí jako závada, ne
   jako odebraná služba. Obecné pravidlo pro `label > strong` mu jinak přebije
   barvu i zarovnání. */
.job-v2-service label > strong.dense-service-status {
  display: block;
  min-height: 0;
  padding: 3px 10px;
  color: var(--chip-fg, #334155);
  font-size: 0.72rem;
  line-height: 1.3;
  text-align: center;
}

/* --------------------------------------------------------------------------
   Barevná volba pod myší lehce zesvětlí.
   Není to rámeček ani stín — jen ta samá barva o kousek světlejší, takže je
   poznat, na čem myš stojí, a štítek přitom zůstane štítkem.
   -------------------------------------------------------------------------- */
.chip-select__trigger:hover .state-token,
.chip-select__option:hover > .state-token,
.chip-select__option:focus-visible > .state-token,
.compact-project-pill:hover {
  filter: brightness(1.14);
}

.chip-select__trigger:active .state-token {
  filter: brightness(1.05);
}

/* Hotová práce je zelená a zesvětlením by zbledla; u tmavých štítků stačí míň. */
.chip-select__option:hover > .state-token[data-project-code="FORMATTING_DP_SK"],
.chip-select__trigger:hover .state-token[data-project-code="FORMATTING_DP_SK"] {
  filter: brightness(1.6);
}