/* Shift detail, modal sheets and invoices */

.modal-root.open {
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  animation: tt-overlay-in var(--tt-duration-base) var(--tt-ease-enter) both;
}

.sheet {
  width: min(100%, 820px);
  max-height: 92vh;
  padding: 8px var(--tt-space-4) calc(var(--tt-space-6) + env(safe-area-inset-bottom));
  border: var(--tt-border-width) solid var(--tt-border-strong);
  border-bottom: 0;
  border-radius: var(--tt-radius-xl) var(--tt-radius-xl) 0 0;
  background: var(--tt-surface-elevated);
  box-shadow: var(--tt-shadow-overlay);
  animation: tt-sheet-in var(--tt-duration-slow) var(--tt-ease-enter) both;
}

.sheet-handle {
  width: 46px;
  height: 4px;
  margin-bottom: var(--tt-space-4);
  border-radius: var(--tt-radius-pill);
  background: var(--tt-border-strong);
}

.sheet h2 {
  font-size: 1.45rem;
  font-weight: 760;
  letter-spacing: -0.04em;
}

.sheet .subtitle {
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-caption);
}

.turnus-hero {
  padding: var(--tt-space-4);
  border: var(--tt-border-width) solid var(--tt-border);
  border-left: 3px solid var(--tt-action);
  background: var(--tt-surface-elevated);
  color: var(--tt-text-primary);
}

.turnus-hero .card-topline {
  position: relative;
  z-index: 1;
  color: var(--tt-text-secondary);
}

.turnus-hero-route {
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-micro);
  font-weight: 800;
  letter-spacing: var(--tt-tracking-label);
  text-transform: uppercase;
}

.turnus-hero-route .ui-icon {
  color: var(--tt-text-primary);
}

.turnus-hero .pill {
  border-color: var(--tt-border);
  background: var(--tt-surface);
  color: var(--tt-text-secondary);
}

.turnus-hero .pill.active {
  border-color: var(--tt-action-hover);
  background: var(--tt-action-soft);
  color: var(--tt-action);
}

.turnus-hero > strong {
  position: relative;
  z-index: 1;
  margin-top: var(--tt-space-4);
  font-size: clamp(2.6rem, 12vw, 3.8rem);
  font-weight: 760;
  letter-spacing: -0.065em;
}

.turnus-hero > p {
  position: relative;
  z-index: 1;
  color: var(--tt-text-secondary);
}

.turnus-finance-grid {
  position: relative;
  z-index: 1;
  gap: 0;
  margin-top: var(--tt-space-4);
  border-top: var(--tt-border-width) solid var(--tt-border);
  border-bottom: var(--tt-border-width) solid var(--tt-border);
}

.turnus-finance-grid > div {
  min-height: 78px;
  padding: var(--tt-space-3) var(--tt-space-2);
  border-right: var(--tt-border-width) solid var(--tt-border);
  border-radius: 0;
  background: transparent;
}

.turnus-finance-grid > div:last-child {
  border-right: 0;
}

.turnus-finance-grid span,
.turnus-hero-grid span {
  color: var(--tt-text-secondary);
  font-size: 0.54rem;
  letter-spacing: 0.04em;
}

.turnus-finance-grid strong,
.turnus-hero-grid strong {
  color: var(--tt-text-primary);
  font-size: 1.15rem;
}

.turnus-finance-grid small,
.turnus-hero-grid small {
  color: var(--tt-text-secondary);
  font-size: 0.58rem;
}

.turnus-finance-status {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 6px;
  margin-top: var(--tt-space-3);
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-micro);
}

.turnus-finance-status strong {
  color: var(--tt-text-primary);
}

.turnus-finance-actions {
  position: relative;
  z-index: 1;
}

.turnus-finance-actions button {
  border-radius: var(--tt-radius-sm);
  background: var(--tt-action);
  color: var(--tt-text-on-action);
}

.turnus-hero-grid {
  position: relative;
  z-index: 1;
  gap: 0;
  margin-top: var(--tt-space-4);
  overflow: hidden;
  border: var(--tt-border-width) solid var(--tt-border);
  border-radius: var(--tt-radius-sm);
}

.turnus-hero-grid div {
  min-width: 0;
  min-height: 84px;
  padding: var(--tt-space-3);
  border-right: var(--tt-border-width) solid var(--tt-border);
  background: var(--tt-surface);
}

.turnus-hero-grid div:last-child {
  border-right: 0;
}

.turnus-countdown {
  padding-top: var(--tt-space-3);
  border-top: var(--tt-border-width) solid var(--tt-border);
  font-weight: 700;
}

.turnus-countdown .ui-icon {
  color: var(--tt-text-primary);
}

.turnus-mini-calendar {
  margin: var(--tt-space-4) 0;
  padding: var(--tt-space-4);
  border: var(--tt-border-width) solid var(--tt-border-strong);
  border-radius: var(--tt-radius-lg);
  background: var(--tt-surface);
}

.turnus-mini-calendar h3 {
  margin-bottom: var(--tt-space-4);
  padding-bottom: var(--tt-space-3);
  border-bottom: var(--tt-border-width) solid var(--tt-border);
  font-size: var(--tt-type-body);
}

.turnus-mini-calendar h3 .ui-icon,
.finance-history h3 .ui-icon,
.turnus-detail-title .ui-icon,
.finance-modal-title .ui-icon {
  color: var(--tt-text-primary);
}

.turnus-detail-title {
  margin-top: var(--tt-space-4) !important;
}

.finance-modal-title {
  align-items: flex-start;
}

.turnus-month-title,
.finance-month-title {
  color: var(--tt-text-primary);
  font-size: var(--tt-type-micro);
  letter-spacing: var(--tt-tracking-label);
}

.turnus-weekdays,
.finance-weekdays {
  color: var(--tt-text-muted);
}

.turnus-day-chip {
  min-height: 48px;
  padding: 5px 2px;
  border: var(--tt-border-width) solid var(--tt-border);
  border-radius: var(--tt-radius-sm);
  background: var(--tt-surface-elevated);
  box-shadow: none;
}

.turnus-day-number {
  position: relative;
  z-index: 3;
  color: var(--tt-text-primary) !important;
  font-size: 0.82rem;
  font-weight: 820;
  line-height: 1;
  opacity: 1 !important;
  visibility: visible !important;
}

.turnus-day-type {
  position: relative;
  z-index: 3;
  margin-top: 4px;
  font-size: 0.48rem;
  opacity: 0.9 !important;
  visibility: visible !important;
}

.turnus-day-chip[class*="turnus-type-"] .turnus-day-number,
.turnus-day-chip[class*="turnus-type-"] .turnus-day-type {
  color: inherit !important;
}

.turnus-day-chip.today {
  outline: 3px solid var(--tt-action);
  outline-offset: 2px;
}

.form-section,
.detail-block {
  margin-top: var(--tt-space-4);
  padding: var(--tt-space-4);
  border: var(--tt-border-width) solid var(--tt-border);
  border-left: 3px solid var(--tt-border-strong);
  background: var(--tt-surface);
}

.turnus-edit-section {
  border-color: var(--tt-border);
  border-left-color: var(--tt-action);
  background: var(--tt-surface);
}

.form-field {
  gap: 7px;
  margin: var(--tt-space-3) 0;
}

.form-field label {
  color: var(--tt-text-primary);
  font-size: var(--tt-type-caption);
  font-weight: 720;
}

.field-help,
.confirmation-copy {
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-micro);
  line-height: var(--tt-leading-body);
}

.detail-row {
  min-height: 44px;
  border-bottom-color: var(--tt-border);
  font-size: var(--tt-type-caption);
}

.detail-row span {
  color: var(--tt-text-secondary);
}

.detail-row strong {
  font-weight: 720;
}

.finance-history {
  gap: var(--tt-space-2);
  margin: var(--tt-space-4) 0;
  padding: var(--tt-space-3);
  border: var(--tt-border-width) solid var(--tt-border-strong);
  border-radius: var(--tt-radius-lg);
  background: var(--tt-surface);
}

.finance-history h3 {
  padding-bottom: var(--tt-space-2);
  border-bottom: var(--tt-border-width) solid var(--tt-border);
  font-size: var(--tt-type-body);
}

.finance-record-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--tt-space-2);
  padding: var(--tt-space-3);
  border: var(--tt-border-width) solid var(--tt-border);
  border-radius: var(--tt-radius-md);
  background: var(--tt-surface-elevated);
}

.finance-record-row.is-paid {
  border-color: color-mix(in srgb, var(--tt-success) 34%, var(--tt-border));
  box-shadow: none;
  background: color-mix(in srgb, var(--tt-success) 6%, var(--tt-surface-elevated));
}

.finance-kind,
.invoice-payment-status {
  display: inline-flex;
  min-width: 0;
  min-height: 24px;
  padding: 4px 7px;
  border: var(--tt-border-width) solid color-mix(in srgb, var(--tt-info) 34%, var(--tt-border));
  border-radius: var(--tt-radius-sm);
  align-items: center;
  gap: 5px;
  background: var(--tt-info-soft);
  color: var(--tt-info);
  font-size: 0.53rem;
  letter-spacing: 0.04em;
}

.finance-kind.payment,
.invoice-payment-status.paid {
  border-color: color-mix(in srgb, var(--tt-success) 34%, var(--tt-border));
  background: var(--tt-success-soft);
  color: var(--tt-success);
}

.invoice-payment-status:not(.paid) {
  border-color: color-mix(in srgb, var(--tt-warning) 34%, var(--tt-border));
  background: var(--tt-warning-soft);
  color: var(--tt-warning);
}

.invoice-payment-button {
  border: var(--tt-border-width) solid var(--tt-success);
  background: var(--tt-success);
  color: #fff;
}

.invoice-payment-button.undo {
  border-color: var(--tt-border-strong);
  background: var(--tt-surface-elevated);
  color: var(--tt-text-secondary);
}

.finance-delete-button {
  width: 34px;
  height: 34px;
  border: var(--tt-border-width) solid color-mix(in srgb, var(--tt-error) 35%, transparent);
  border-radius: var(--tt-radius-sm);
  background: var(--tt-error-soft);
  color: var(--tt-error);
  font-size: 0;
}

.finance-delete-button .ui-icon {
  width: 16px;
  height: 16px;
}

.finance-calendar-card {
  margin: var(--tt-space-3) 0 var(--tt-space-4);
  padding: var(--tt-space-3);
  border: var(--tt-border-width) solid var(--tt-border-strong);
  border-radius: var(--tt-radius-lg);
  background: var(--tt-surface);
}

.finance-calendar-heading strong {
  font-size: var(--tt-type-body);
}

.finance-calendar-heading small {
  color: var(--tt-text-secondary);
  font-size: var(--tt-type-micro);
}

.finance-period-state:not(:empty) {
  border-radius: var(--tt-radius-sm);
  background: var(--tt-success-soft);
  color: var(--tt-success);
}

.finance-range-actions button,
.finance-turnus-select-row button {
  border: var(--tt-border-width) solid var(--tt-border-strong);
  border-radius: var(--tt-radius-sm);
  background: var(--tt-surface-elevated);
  color: var(--tt-text-secondary);
}

.finance-range-actions button.active,
.finance-turnus-select-row button.selected {
  border-color: var(--tt-action);
  background: var(--tt-action-soft);
  color: var(--tt-action);
}

.finance-period-summary {
  border: var(--tt-border-width) solid color-mix(in srgb, var(--tt-info) 34%, var(--tt-border));
  border-radius: var(--tt-radius-sm);
  background: var(--tt-info-soft);
  color: var(--tt-info);
}

.finance-period-summary span {
  color: var(--tt-info);
}

.finance-turnus-calendar {
  border-color: var(--tt-border);
  border-radius: var(--tt-radius-md);
  background: var(--tt-surface-elevated);
}

.finance-turnus-calendar.origin {
  border-color: color-mix(in srgb, var(--tt-success) 38%, var(--tt-border));
  box-shadow: inset 3px 0 0 var(--tt-success);
  background: color-mix(in srgb, var(--tt-success) 5%, var(--tt-surface-elevated));
}

.finance-day {
  min-height: 42px;
  border: var(--tt-border-width) solid var(--tt-border);
  border-radius: var(--tt-radius-sm);
  background: var(--tt-surface-sunken);
  color: var(--tt-text-secondary);
  box-shadow: none;
}

.finance-day.turnus-type-roadOut,
.finance-day.turnus-type-roadBack {
  border-color: var(--tt-state-road);
  background: var(--tt-state-road);
  color: var(--tt-text-inverse);
}

.finance-day.turnus-type-workDE {
  border-color: var(--tt-state-work);
  background: var(--tt-state-work);
  color: var(--tt-text-on-action);
}

.finance-day.turnus-type-sun {
  border-color: var(--tt-state-holiday);
  background: var(--tt-state-holiday);
  color: var(--tt-text-on-action);
}

.finance-day.turnus-type-home {
  border-color: var(--tt-state-home);
  background: var(--tt-state-home);
  color: var(--tt-text-on-action);
}

.finance-day.turnus-type-workSK {
  border-color: var(--tt-state-work-sk);
  background: var(--tt-state-work-sk);
  color: var(--tt-text-inverse);
}

.finance-day.turnus-type-holiday {
  border-color: var(--tt-state-free);
  background: var(--tt-state-free);
  color: var(--tt-text-inverse);
}

.finance-day.already-invoiced,
.finance-day.already-invoiced:disabled {
  border-color: color-mix(in srgb, var(--tt-success) 40%, var(--tt-border));
  background: var(--tt-success-soft);
  color: var(--tt-success);
  box-shadow: none;
}

.finance-day.not-worked-yet,
.finance-day.not-worked-yet:disabled {
  border-color: var(--tt-border-soft);
  background: var(--tt-surface-sunken);
  color: var(--tt-text-muted);
}

.finance-day.selected {
  border-color: var(--tt-action);
  background: var(--tt-action);
  color: var(--tt-text-on-action);
  box-shadow: none;
}

.finance-calendar-legend i {
  border-color: var(--tt-border-strong);
  background: var(--tt-surface-sunken);
}

.finance-calendar-legend i.already-invoiced {
  border-color: var(--tt-success);
  background: var(--tt-success-soft);
}

.finance-calendar-legend i.selected-day {
  border-color: var(--tt-action);
  background: var(--tt-action);
}

.finance-calendar-legend i.not-worked-yet {
  background: var(--tt-surface-sunken);
}

.finance-day.range-start,
.finance-day.range-end {
  outline-color: var(--tt-surface-inverse);
}

.finance-day.today:not(.selected) {
  box-shadow: inset 0 0 0 2px var(--tt-action);
}

.finance-calculation,
.finance-allocation-preview {
  border: var(--tt-border-width) solid color-mix(in srgb, var(--tt-success) 34%, var(--tt-border));
  border-radius: var(--tt-radius-md);
  background: var(--tt-success-soft);
  color: var(--tt-success);
}

.finance-more {
  border-color: var(--tt-border);
  border-radius: var(--tt-radius-md);
  background: var(--tt-surface);
}

.confirmation-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--tt-radius-md);
  font-size: 0;
}

.confirmation-icon .ui-icon {
  width: 25px;
  height: 25px;
}

.danger-confirmation-icon {
  background: var(--tt-error-soft);
  color: var(--tt-error);
}

.payment-confirmation-icon {
  background: var(--tt-success-soft);
  color: var(--tt-success);
}

.road-confirmation-icon {
  background: color-mix(in srgb, var(--tt-state-road) 16%, var(--tt-surface));
  color: var(--tt-state-road);
}

.toast {
  bottom: calc(88px + env(safe-area-inset-bottom));
  padding: var(--tt-space-3) var(--tt-space-4);
  border: var(--tt-border-width) solid rgba(255, 255, 255, 0.14);
  border-radius: var(--tt-radius-md);
  background: var(--tt-surface-inverse);
  box-shadow: var(--tt-shadow-2);
  font-size: var(--tt-type-caption);
  transform: translateY(10px);
  transition:
    opacity var(--tt-duration-base) var(--tt-ease-standard),
    transform var(--tt-duration-base) var(--tt-ease-standard);
}

.toast-action {
  border-radius: var(--tt-radius-sm);
  color: var(--tt-action);
}

.empty-state {
  padding: var(--tt-space-8) var(--tt-space-5);
  border-style: dashed;
  background: color-mix(in srgb, var(--tt-surface) 72%, transparent);
}