/**
 * Calculator-specific interactive components.
 *
 * Shared form primitives belong to smk-components.css. This module owns only
 * calculator-scoped widgets and their responsive behaviour.
 */

/* Criminal limitation interruptions --------------------------------------- */
#smk-ceza-zamanasimi-wrap .smk-ceza-help {
  margin: var(--spacing-2) 0 var(--spacing-3);
  padding: var(--spacing-3);
  border-left: 3px solid var(--primary-light);
  border-radius: 0 8px 8px 0;
  background: rgba(0, 66, 71, 0.05);
  color: var(--muted);
  line-height: 1.55;
}

#smk-ceza-zamanasimi-wrap #interruptionList {
  display: grid;
  gap: var(--spacing-2);
}

#smk-ceza-zamanasimi-wrap .smk-ceza-interruption-empty {
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: var(--spacing-3);
}

#smk-ceza-zamanasimi-wrap .smk-ceza-interruption-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-3);
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: var(--spacing-3) var(--spacing-4);
  font-size: 0.9rem;
  min-width: 0;
}

#smk-ceza-zamanasimi-wrap .smk-ceza-interruption-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

#smk-ceza-zamanasimi-wrap .smk-ceza-interruption-remove {
  flex: 0 0 auto;
  padding: 0.4rem 0.65rem;
  font-size: 0.82rem;
}

#smk-ceza-zamanasimi-wrap .smk-pause-duration-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-3);
  margin-top: var(--spacing-2);
}

#smk-ceza-zamanasimi-wrap .smk-pause-duration-field {
  min-width: 0;
}

#smk-ceza-zamanasimi-wrap .smk-pause-duration-field label {
  margin-top: 0;
}

#smk-ceza-zamanasimi-wrap .cf-turnstile {
  max-width: 100%;
  overflow-x: auto;
}

:root.dark #smk-ceza-zamanasimi-wrap .smk-ceza-help,
:root[data-theme="dark"] #smk-ceza-zamanasimi-wrap .smk-ceza-help,
:root.dark #smk-ceza-zamanasimi-wrap .smk-ceza-interruption-item,
:root[data-theme="dark"] #smk-ceza-zamanasimi-wrap .smk-ceza-interruption-item,
body.dark #smk-ceza-zamanasimi-wrap .smk-ceza-help,
body.dark-mode #smk-ceza-zamanasimi-wrap .smk-ceza-help,
body.dark-theme #smk-ceza-zamanasimi-wrap .smk-ceza-help,
body[data-theme="dark"] #smk-ceza-zamanasimi-wrap .smk-ceza-help,
body.ast-dark-mode #smk-ceza-zamanasimi-wrap .smk-ceza-help,
body.ast-theme-dark #smk-ceza-zamanasimi-wrap .smk-ceza-help,
body.dark #smk-ceza-zamanasimi-wrap .smk-ceza-interruption-item,
body.dark-mode #smk-ceza-zamanasimi-wrap .smk-ceza-interruption-item,
body.dark-theme #smk-ceza-zamanasimi-wrap .smk-ceza-interruption-item,
body[data-theme="dark"] #smk-ceza-zamanasimi-wrap .smk-ceza-interruption-item,
body.ast-dark-mode #smk-ceza-zamanasimi-wrap .smk-ceza-interruption-item,
body.ast-theme-dark #smk-ceza-zamanasimi-wrap .smk-ceza-interruption-item {
  background: var(--soft) !important;
  color: var(--ink) !important;
  border-color: var(--border) !important;
}

/* Calculator-scoped validation states ------------------------------------ */
#smk-vekalet-ucreti-wrap input:invalid,
#smk-vekalet-ucreti-wrap select:invalid,
#smk-islah-harci-wrap input:invalid,
#smk-islah-harci-wrap select:invalid {
  border-color: var(--border) !important;
}

#smk-vekalet-ucreti-wrap input.error,
#smk-vekalet-ucreti-wrap select.error,
#smk-islah-harci-wrap input.error,
#smk-islah-harci-wrap select.error {
  border-color: var(--danger) !important;
}

/* Work accident manual wage entries -------------------------------------- */
#smk-is-kazasi-wrap .smk-manual-wage-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--spacing-3);
  align-items: end;
}

#smk-is-kazasi-wrap .smk-manual-wage-entry .form-group {
  margin: 0;
}

#smk-is-kazasi-wrap .smk-manual-wage-entry .button-group {
  margin-top: 0;
  align-items: stretch;
}

#smk-is-kazasi-wrap .smk-manual-wage-entry input {
  min-width: 0;
}

#smk-is-kazasi-wrap .smk-manual-wage-list {
  list-style: none;
  padding: 0;
  margin: var(--spacing-4) 0 0;
  display: grid;
  gap: var(--spacing-3);
}

#smk-is-kazasi-wrap .smk-manual-wage-empty {
  color: var(--muted);
  font-style: italic;
  text-align: center;
  padding: var(--spacing-3);
  border: 1px dashed var(--border);
  border-radius: 8px;
  background: var(--soft);
}

#smk-is-kazasi-wrap .smk-manual-wage-item {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-3);
  align-items: center;
  padding: var(--spacing-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

#smk-is-kazasi-wrap .smk-manual-wage-item__content {
  min-width: 0;
}

#smk-is-kazasi-wrap .smk-manual-wage-item__title {
  font-weight: 700;
  color: var(--ink);
}

#smk-is-kazasi-wrap .smk-manual-wage-item__value {
  color: var(--primary);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

#smk-is-kazasi-wrap .smk-manual-wage-item__warning {
  color: var(--warn);
  font-size: 0.85rem;
  margin-top: var(--spacing-1);
  overflow-wrap: anywhere;
}

#smk-is-kazasi-wrap .smk-manual-wage-item__actions {
  display: flex;
  gap: var(--spacing-2);
  flex-shrink: 0;
}

/* Multi-period labour claims --------------------------------------------- */
.hesaplama-wrapper .period-header {
  text-align: center;
}

#smk-iscilik-alacaklari-wrap #periods-container {
  display: grid;
  gap: var(--spacing-4);
}

#smk-iscilik-alacaklari-wrap .period-block {
  min-width: 0;
  padding: var(--spacing-4);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

#smk-iscilik-alacaklari-wrap .period-header {
  margin-bottom: var(--spacing-3);
  text-align: left;
}

#smk-iscilik-alacaklari-wrap .period-title {
  margin: 0;
  color: var(--primary);
  font-size: 1.05rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

#smk-iscilik-alacaklari-wrap .period-block .form-group,
#smk-iscilik-alacaklari-wrap .period-block input {
  min-width: 0;
}

#smk-iscilik-alacaklari-wrap .remove-period-btn {
  width: 100%;
  white-space: normal;
}

/* Final dynamic-entry and period-card refinements ------------------------- */
.hesaplama-wrapper .smk-dynamic-card,
.hesaplama-wrapper .period-block {
  min-width: 0;
  margin: 0 0 1rem;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.hesaplama-wrapper .remove-hak-sahibi {
  width: auto;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin-left: auto;
  padding: 0.55rem 0.8rem;
}

.hesaplama-wrapper .period-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.hesaplama-wrapper .period-title {
  margin: 0;
  color: var(--smk-text-strong, var(--ink));
  font-size: 1rem;
}

/* Unemployment calculator accordion and grid ----------------------------- */
#smk-issizlik-maasi-wrap .accordion-header {
  display: block;
  width: 100%;
  border: 0;
  text-align: left;
  font: inherit;
}

#smk-issizlik-maasi-wrap .accordion-header span {
  display: block;
  min-width: 0;
  padding-right: var(--spacing-4);
  overflow-wrap: anywhere;
}

#smk-issizlik-maasi-wrap .form-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-3);
}

#smk-issizlik-maasi-wrap .form-grid-4 .form-group,
#smk-issizlik-maasi-wrap .form-grid-4 input {
  min-width: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 680px) {
  .hesaplama-wrapper .period-header {
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  #smk-is-kazasi-wrap .smk-manual-wage-entry {
    grid-template-columns: 1fr;
    gap: var(--spacing-2);
  }

  #smk-is-kazasi-wrap .smk-manual-wage-entry .button-group,
  #smk-is-kazasi-wrap .smk-manual-wage-entry .button,
  #smk-is-kazasi-wrap .smk-manual-wage-item__actions,
  #smk-is-kazasi-wrap .smk-manual-wage-item__actions .button {
    width: 100% !important;
  }

  #smk-is-kazasi-wrap .smk-manual-wage-item {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  #smk-is-kazasi-wrap .smk-manual-wage-item__actions {
    flex-direction: column;
  }

  #smk-iscilik-alacaklari-wrap .period-block {
    padding: var(--spacing-3);
  }

  #smk-iscilik-alacaklari-wrap .button-group,
  #smk-iscilik-alacaklari-wrap .button-group .button,
  #smk-iscilik-alacaklari-wrap .remove-period-btn {
    width: 100% !important;
  }

  #smk-issizlik-maasi-wrap .form-grid-4 {
    grid-template-columns: 1fr;
  }

  #smk-issizlik-maasi-wrap .accordion-header {
    padding-right: 36px;
  }

  #smk-ceza-zamanasimi-wrap .button-group {
    flex-direction: column;
    align-items: stretch;
  }

  #smk-ceza-zamanasimi-wrap .smk-pause-duration-grid {
    grid-template-columns: 1fr;
  }

  #smk-ceza-zamanasimi-wrap .button-group input,
  #smk-ceza-zamanasimi-wrap .button-group select,
  #smk-ceza-zamanasimi-wrap .button-group button,
  #smk-ceza-zamanasimi-wrap .cf-turnstile {
    width: 100%;
    max-width: 100%;
  }

  #smk-ceza-zamanasimi-wrap .smk-ceza-interruption-item {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  #smk-ceza-zamanasimi-wrap .smk-ceza-interruption-remove {
    width: 100%;
  }

  #smk-islah-harci-wrap .pill-group {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  #smk-islah-harci-wrap .pill-group label,
  #smk-islah-harci-wrap .button-group button,
  #smk-islah-harci-wrap input {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 360px) {
  .hesaplama-wrapper .smk-dynamic-card,
  .hesaplama-wrapper .period-block {
    padding: 0.75rem;
  }
}