.timing-app,
.training-app {
  display: grid;
  gap: 16px;
}

.timing-layout {
  display: grid;
  grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.timing-layout > *,
.timing-sidebar,
.timing-main,
.timing-editor,
.timing-editor .panel,
.timing-editor .section-title > *,
.timing-profile-list {
  min-width: 0;
}

.timing-sidebar {
  position: sticky;
  top: 16px;
}

.timing-profile-list,
.timing-main,
.timing-editor,
.timing-phases,
.timing-preview {
  display: grid;
  gap: 12px;
}

.timing-profile-card {
  appearance: none;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--border, #dbe3eb);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface, #fff);
  color: inherit;
  text-align: left;
  display: grid;
  gap: 8px;
  cursor: pointer;
  white-space: normal;
}

.timing-profile-card:hover,
.timing-profile-card.active {
  border-color: var(--blue, #2457d6);
  box-shadow: 0 0 0 2px rgb(36 87 214 / 10%);
}

.timing-profile-card > span {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.timing-profile-card strong,
.timing-profile-card small {
  display: block;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.timing-profile-card > span:first-child strong {
  flex: 1 1 100%;
}

.timing-profile-card > span:first-child small {
  flex: 1 1 100%;
}

.timing-new {
  width: 100%;
  margin-top: 12px;
}

.timing-phase-card {
  border: 1px solid var(--border, #dbe3eb);
  border-left: 4px solid var(--blue, #2457d6);
  border-radius: 14px;
  padding: 16px;
  background: var(--surface, #fff);
}

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

.timing-profile-grid > label,
.timing-phase-grid > label {
  min-width: 0;
}

.timing-profile-grid > label {
  grid-column: span 1;
}

.timing-profile-grid > .timing-profile-service,
.timing-profile-grid > .timing-profile-name,
.timing-profile-grid > .timing-profile-reason {
  grid-column: 1 / -1;
}

.timing-profile-grid input,
.timing-profile-grid select,
.timing-phase-grid input,
.timing-phase-grid select {
  min-width: 0;
  max-width: 100%;
}

.timing-editor .section-title h2,
.timing-editor .section-title p {
  overflow-wrap: anywhere;
}

.timing-phase-grid {
  grid-template-columns: repeat(8, minmax(0, 1fr));
}

.timing-phase-grid > label {
  grid-column: span 2;
}

.timing-phase-grid > .span-4 {
  grid-column: span 4;
}

.timing-phase-grid > .span-8 {
  grid-column: 1 / -1;
}

.timing-actions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.timing-preview article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border-top: 1px solid var(--border, #dbe3eb);
  padding-top: 12px;
}

.timing-preview article:first-child {
  border-top: 0;
}

.timing-preview strong,
.timing-preview small {
  display: block;
}

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

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

.training-tabs button {
  border-radius: 999px;
}

.training-tabs button.active {
  background: var(--blue, #2457d6);
  color: #fff;
}

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

.training-kpi {
  min-height: 116px;
  display: grid;
  align-content: space-between;
  gap: 8px;
}

.training-kpi strong {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
}

.training-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.training-span-4 {
  grid-column: span 4;
}

.training-span-5 {
  grid-column: span 5;
}

.training-span-6 {
  grid-column: span 6;
}

.training-span-7 {
  grid-column: span 7;
}

.training-span-8 {
  grid-column: span 8;
}

.training-span-12 {
  grid-column: 1 / -1;
}

.training-calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap: 8px;
  overflow-x: auto;
}

.training-calendar-day {
  min-height: 150px;
  border: 1px solid var(--border, #dbe3eb);
  border-radius: 12px;
  padding: 10px;
  background: var(--surface, #fff);
}

.training-calendar-day > strong {
  display: block;
  margin-bottom: 8px;
}

.training-calendar-event {
  display: grid;
  gap: 3px;
  width: 100%;
  margin-top: 6px;
  border: 0;
  border-left: 4px solid var(--blue, #2457d6);
  border-radius: 8px;
  padding: 8px;
  text-align: left;
  background: rgb(36 87 214 / 8%);
  color: inherit;
}

.training-calendar-event.is-full {
  border-left-color: #b42318;
  background: rgb(180 35 24 / 8%);
}

.training-capacity {
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8edf3;
}

.training-capacity > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--blue, #2457d6);
}

.training-capacity.is-warning > span {
  background: #d97706;
}

.training-capacity.is-full > span {
  background: #b42318;
}

.training-list {
  display: grid;
  gap: 10px;
}

.training-list-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border, #dbe3eb);
  border-radius: 12px;
  padding: 12px;
  background: var(--surface, #fff);
}

.training-list-row strong,
.training-list-row small {
  display: block;
}

.training-list-row .chips {
  justify-content: flex-end;
}

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

.training-form-grid > label {
  grid-column: span 3;
}

.training-form-grid > .span-4 {
  grid-column: span 4;
}

.training-form-grid > .span-6 {
  grid-column: span 6;
}

.training-form-grid > .span-8 {
  grid-column: span 8;
}

.training-form-grid > .span-12,
.training-form-grid > .actions {
  grid-column: 1 / -1;
}

.training-economics-table td:first-child {
  min-width: 160px;
}

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

  .timing-sidebar {
    position: static;
  }

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

  .training-span-4,
  .training-span-5,
  .training-span-6,
  .training-span-7,
  .training-span-8 {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .timing-profile-grid,
  .timing-phase-grid,
  .training-form-grid {
    grid-template-columns: 1fr;
  }

  .timing-profile-grid > label,
  .timing-profile-grid > .timing-profile-service,
  .timing-profile-grid > .timing-profile-name,
  .timing-profile-grid > .timing-profile-reason,
  .timing-phase-grid > label,
  .timing-phase-grid > .span-4,
  .timing-phase-grid > .span-8,
  .training-form-grid > label,
  .training-form-grid > .span-4,
  .training-form-grid > .span-6,
  .training-form-grid > .span-8,
  .training-form-grid > .span-12,
  .training-form-grid > .actions {
    grid-column: 1;
  }

  .training-kpis {
    grid-template-columns: 1fr;
  }
}

/* Eight overview numbers form balanced rows without a long single-card stack. */
@media (min-width: 1101px) {
  .training-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .training-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .training-toolbar { align-items: stretch; }
  .training-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .training-tabs button { min-width: 0; min-height: 44px; white-space: normal; border-radius: 9px; }
  .training-toolbar > button { width: 100%; }
}

@media (max-width: 360px) {
  .training-kpis { grid-template-columns: 1fr; }
}