/* PRO_TIME_LAYER_001A — compact responsive Time Layer authority. */
body[data-workspace-mode="pro_system_builder"] .pro-time-legacy-hidden,
body[data-workspace-mode="pro_system_builder"] .pro-time-legacy-strip {
  display: none !important;
}

#proTimeLayerShell[hidden] {
  display: none !important;
}

.pro-time-layer-shell {
  margin: 0;
  padding: 14px 16px 15px;
  border: 1px solid rgba(99, 125, 255, .20);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255,255,255,.91), rgba(245,249,255,.80));
  box-shadow: 0 13px 30px rgba(17,24,39,.075), inset 0 1px 0 rgba(255,255,255,.74);
}

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

.pro-time-layer-copy {
  min-width: 0;
}

.pro-time-layer-head > .pro-time-layer-copy > span,
.pro-time-latest span {
  display: block;
  color: #62748d;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.pro-time-layer-head > .pro-time-layer-copy > strong {
  display: block;
  margin-top: 4px;
  color: #10213d;
  font-size: 16px;
  line-height: 1.22;
}

.pro-time-layer-head p {
  margin: 4px 0 0;
  color: #536a84;
  font-size: 11px;
  line-height: 1.35;
}

.pro-time-latest {
  min-width: 184px;
  padding: 9px 12px;
  border-radius: 13px;
  background: rgba(232,241,255,.78);
  text-align: right;
}

.pro-time-latest strong {
  display: block;
  margin-top: 3px;
  color: #1d3f86;
  font-size: 12px;
}

.pro-time-layer-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(560px, .66fr);
  gap: 14px;
  align-items: start;
  margin-top: 10px;
}

.pro-time-primary-controls,
.pro-time-mode-body {
  min-width: 0;
}

.pro-time-primary-controls {
  display: grid;
  gap: 8px;
  align-content: start;
}

.pro-time-mode-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0;
}

.pro-time-mode-tabs button {
  min-height: 36px;
  padding: 7px 14px;
  border: 1px solid rgba(78,105,220,.22);
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  color: #435b78;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.pro-time-mode-tabs button.is-active {
  border-color: transparent;
  background: linear-gradient(135deg,#1f4ca8,#307be8);
  color: #fff;
  box-shadow: 0 7px 17px rgba(42,93,190,.20);
}

.pro-time-mode-tabs button:focus-visible,
.pro-time-season-chip:focus-visible,
.pro-time-quick-chip:focus-visible,
.pro-time-apply-custom:focus-visible {
  outline: 3px solid rgba(37,99,235,.24);
  outline-offset: 2px;
}

.pro-time-season-panel {
  display: grid;
  gap: 8px;
}

.pro-time-season-row {
  min-width: 0;
  padding: 9px 10px 10px;
  border: 1px solid rgba(97,125,205,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.70);
}

.pro-time-season-row-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 7px;
}

.pro-time-season-row-head strong {
  color: #17325b;
  font-size: 12px;
}

.pro-time-season-row-head span {
  color: #6b7f99;
  font-size: 9.5px;
}

.pro-time-season-chips {
  display: flex;
  gap: 7px;
  min-width: 0;
  overflow-x: auto;
  padding: 0 2px 2px 0;
  scrollbar-width: thin;
}

.pro-time-season-chip {
  flex: 0 0 auto;
  min-width: 116px;
  padding: 7px 9px;
  border: 1px solid rgba(83,111,205,.20);
  border-radius: 11px;
  background: rgba(247,250,255,.92);
  color: #27405f;
  text-align: left;
  cursor: pointer;
}

.pro-time-season-chip strong,
.pro-time-season-chip small {
  display: block;
}

.pro-time-season-chip strong {
  font-size: 11px;
}

.pro-time-season-chip small {
  margin-top: 2px;
  color: #6b7f99;
  font-size: 8.5px;
}

.pro-time-season-chip.is-selected {
  border-color: transparent;
  background: linear-gradient(135deg,rgba(35,89,192,.97),rgba(52,132,235,.92));
  color: #fff;
  box-shadow: 0 7px 17px rgba(43,92,187,.21);
}

.pro-time-season-chip.is-selected small {
  color: rgba(235,244,255,.92);
}

.pro-time-quick-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

.pro-time-quick-chip {
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid rgba(83,111,205,.20);
  border-radius: 12px;
  background: rgba(247,250,255,.92);
  color: #27405f;
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}

.pro-time-quick-chip.is-selected {
  border-color: transparent;
  background: linear-gradient(135deg,#1f4ca8,#307be8);
  color: #fff;
}

.pro-time-period-summary {
  margin-left: auto;
  padding: 7px 11px;
  border-radius: 12px;
  background: rgba(232,241,255,.78);
  text-align: right;
}

.pro-time-period-summary span,
.pro-time-period-summary strong {
  display: block;
}

.pro-time-period-summary span {
  color: #6b7f99;
  font-size: 8.5px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.pro-time-period-summary strong {
  margin-top: 2px;
  color: #1d3f86;
  font-size: 11px;
}

.pro-time-custom-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.pro-time-custom-panel label span {
  display: block;
  margin-bottom: 4px;
  color: #536a84;
  font-size: 9px;
  font-weight: 850;
  text-transform: uppercase;
}

.pro-time-custom-panel input {
  min-height: 38px;
  padding: 7px 9px;
  border: 1px solid rgba(83,111,205,.24);
  border-radius: 10px;
  background: #fff;
  color: #17325b;
}

.pro-time-apply-custom {
  min-height: 38px;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: #1f5fc9;
  color: #fff;
  font-weight: 850;
  cursor: pointer;
}

.pro-time-calendar-controls {
  display: grid;
  grid-template-columns: minmax(238px, .82fr) minmax(304px, 1.18fr);
  gap: 10px;
  min-width: 0;
  align-items: stretch;
  margin: 0;
  padding: 0;
  border: 0;
}

.pro-time-calendar-controls .time-block {
  min-width: 0;
  margin: 0 !important;
  padding: 9px 10px !important;
  border: 1px solid rgba(83,111,205,.16);
  border-radius: 14px;
  background: rgba(255,255,255,.70);
}

.pro-time-calendar-controls .card-title {
  margin-bottom: 6px !important;
  color: #233f68 !important;
  font-size: 9px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
}

.pro-time-calendar-controls .is-month-range .inline-inputs {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  max-width: none;
  margin: 0;
}

.pro-time-calendar-controls .is-month-range label {
  margin-bottom: 3px;
  color: #657891;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}

.pro-time-calendar-controls .is-month-range select {
  width: 100%;
  min-height: 34px;
  padding: 5px 8px;
  border-color: rgba(83,111,205,.24);
  border-radius: 9px;
  background: rgba(255,255,255,.95);
  color: #17325b;
  font-size: 9.5px;
  font-weight: 800;
}

.pro-time-calendar-controls .is-day-week .day-row {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(52px, 1fr)) !important;
  gap: 5px !important;
}

.pro-time-calendar-controls .is-day-week .chip {
  min-width: 0 !important;
  min-height: 32px !important;
  padding: 5px 6px !important;
  font-size: 9px !important;
}

.pro-time-validation {
  display: grid;
  gap: 3px;
  margin-top: 2px;
  padding: 10px 12px;
  border: 1px solid rgba(221,145,31,.34);
  border-radius: 12px;
  background: rgba(255,244,216,.83);
  color: #744510;
}

.pro-time-validation strong {
  font-size: 11px;
}

.pro-time-validation span {
  font-size: 10px;
}

.pro-time-validation small {
  color: #8a6129;
}

.pro-time-empty {
  margin-top: 2px;
  padding: 9px 11px;
  border-radius: 11px;
  background: rgba(255,239,239,.86);
  color: #9b2f3d;
  font-size: 10px;
  font-weight: 800;
}

.pro-time-loading {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: #536a84;
  font-size: 10px;
}

.pro-time-loading span {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(44,104,203,.25);
  border-top-color: #2b6fd2;
  border-radius: 50%;
  animation: pro-time-spin .8s linear infinite;
}

@keyframes pro-time-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 1500px) {
  .pro-time-layer-content {
    grid-template-columns: minmax(0, 1.48fr) minmax(330px, .52fr);
  }

  .pro-time-calendar-controls {
    grid-template-columns: 1fr;
  }

  .pro-time-calendar-controls .is-month-range .inline-inputs {
    max-width: 300px;
    margin: 0 auto;
  }
}

@media (max-width: 1080px) {
  .pro-time-layer-content {
    grid-template-columns: 1fr;
  }

  .pro-time-calendar-controls {
    grid-template-columns: minmax(260px, .72fr) minmax(420px, 1.28fr);
    padding-top: 10px;
    border-top: 1px solid rgba(99,125,255,.14);
  }

  .pro-time-calendar-controls .is-month-range .inline-inputs {
    max-width: none;
  }

  .pro-time-calendar-controls .is-day-week .day-row {
    grid-template-columns: repeat(7, minmax(48px, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .pro-time-layer-shell {
    padding-inline: 13px;
  }

  .pro-time-layer-head {
    grid-template-columns: 1fr;
  }

  .pro-time-latest {
    width: 100%;
    min-width: 0;
    text-align: left;
  }

  .pro-time-calendar-controls {
    grid-template-columns: 1fr;
  }

  .pro-time-calendar-controls .is-day-week .day-row {
    grid-template-columns: repeat(4, minmax(58px, 1fr)) !important;
  }

  .pro-time-season-row-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .pro-time-period-summary {
    width: 100%;
    margin-left: 0;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pro-time-loading span {
    animation-duration: 1.6s;
  }
}