/*
============================================================
Club OS Studio
Datei: licenses.css
Zweck: Lizenzpakete und Vereinslizenzverwaltung
Phase: 13.5 - License Management Frontend
============================================================
*/

.license-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;

  margin-bottom: 22px;
}

.license-club-selector {
  display: grid;
  gap: 7px;

  width: min(100%, 520px);
}

.license-club-selector label {
  color: var(--studio-text-muted);

  font-size: 0.76rem;
  font-weight: 720;
}

.license-select {
  width: 100%;
  min-height: 48px;

  padding: 11px 42px 11px 14px;

  border: 1px solid var(--studio-border-strong);
  border-radius: var(--studio-radius-sm);
  outline: none;

  color: var(--studio-text);
  background: var(--studio-surface);

  cursor: pointer;

  transition:
    border-color var(--studio-transition),
    box-shadow var(--studio-transition),
    background var(--studio-transition);
}

.license-select:focus {
  border-color: var(--studio-primary);

  background: var(--studio-surface-soft);

  box-shadow: 0 0 0 4px rgba(124, 77, 255, 0.12);
}

.license-select option {
  color: var(--studio-text);
  background: var(--studio-surface);
}

.license-packages-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;

  margin-bottom: 24px;
}

.license-package-card {
  position: relative;
  overflow: hidden;

  display: flex;
  flex-direction: column;

  min-height: 285px;

  padding: 22px;

  transition:
    transform var(--studio-transition),
    border-color var(--studio-transition),
    background var(--studio-transition);
}

.license-package-card:hover {
  transform: translateY(-3px);

  border-color: rgba(124, 77, 255, 0.35);
}

.license-package-card.is-selected {
  border-color: rgba(124, 77, 255, 0.65);

  background:
    linear-gradient(
      145deg,
      rgba(124, 77, 255, 0.16),
      rgba(124, 77, 255, 0.035)
    ),
    var(--studio-surface);
}

.license-package-card.is-current::before {
  position: absolute;
  top: 14px;
  right: -34px;

  width: 125px;

  padding: 5px 0;

  color: white;
  background: var(--studio-primary);

  content: "Aktuell";

  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;

  transform: rotate(38deg);
}

.license-package-card__header {
  margin-bottom: 18px;
}

.license-package-card__category {
  display: inline-flex;

  margin-bottom: 10px;
  padding: 5px 9px;

  border-radius: 999px;

  color: var(--studio-primary-light);
  background: rgba(124, 77, 255, 0.12);

  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.license-package-card__name {
  margin-bottom: 6px;

  font-size: 1.16rem;
}

.license-package-card__description {
  min-height: 42px;
  margin-bottom: 0;

  color: var(--studio-text-muted);

  font-size: 0.76rem;
}

.license-package-card__details {
  display: grid;
  gap: 9px;

  margin-bottom: 22px;
}

.license-package-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding-bottom: 9px;

  border-bottom: 1px solid var(--studio-border);
}

.license-package-detail:last-child {
  padding-bottom: 0;

  border-bottom: none;
}

.license-package-detail__label {
  color: var(--studio-text-muted);

  font-size: 0.72rem;
}

.license-package-detail__value {
  font-size: 0.76rem;
  font-weight: 760;
  text-align: right;
}

.license-package-card__button {
  width: 100%;
  margin-top: auto;
}

.license-management-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 0.85fr)
    minmax(420px, 1.15fr);
  gap: 20px;
}

.license-current-panel,
.license-form-panel {
  padding: 24px;
}

.license-panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;

  margin-bottom: 21px;
}

.license-panel-title {
  margin-bottom: 4px;

  font-size: 1.02rem;
}

.license-panel-description {
  margin-bottom: 0;

  color: var(--studio-text-muted);

  font-size: 0.75rem;
}

.license-current-summary {
  display: grid;
  gap: 11px;
}

.license-summary-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;

  padding: 13px 14px;

  border: 1px solid var(--studio-border);
  border-radius: 10px;

  background: rgba(255, 255, 255, 0.018);
}

.license-summary-row__label {
  color: var(--studio-text-muted);

  font-size: 0.76rem;
}

.license-summary-row__value {
  max-width: 65%;

  font-size: 0.78rem;
  font-weight: 750;
  text-align: right;
  word-break: break-word;
}

.license-empty-current {
  display: grid;

  min-height: 230px;

  padding: 24px;

  color: var(--studio-text-muted);

  text-align: center;

  place-items: center;
}

.license-empty-current__icon {
  margin-bottom: 10px;

  color: var(--studio-primary-light);

  font-size: 2.3rem;
}

.license-form {
  display: grid;
  gap: 17px;
}

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

.license-field {
  display: grid;
  gap: 7px;
}

.license-field--full {
  grid-column: 1 / -1;
}

.license-field label {
  color: var(--studio-text-muted);

  font-size: 0.74rem;
  font-weight: 720;
}

.license-field input,
.license-field select {
  width: 100%;
  min-height: 46px;

  padding: 11px 13px;

  border: 1px solid var(--studio-border-strong);
  border-radius: var(--studio-radius-sm);
  outline: none;

  color: var(--studio-text);
  background: rgba(255, 255, 255, 0.025);

  transition:
    border-color var(--studio-transition),
    box-shadow var(--studio-transition);
}

.license-field input:focus,
.license-field select:focus {
  border-color: var(--studio-primary);

  box-shadow: 0 0 0 4px rgba(124, 77, 255, 0.11);
}

.license-field select option {
  color: var(--studio-text);
  background: var(--studio-surface);
}

.license-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 11px;

  padding-top: 5px;
}

.license-danger-button {
  border-color: rgba(251, 113, 133, 0.32);

  color: #fecdd3;
  background: rgba(251, 113, 133, 0.09);
}

.license-danger-button:hover {
  border-color: rgba(251, 113, 133, 0.55);

  background: rgba(251, 113, 133, 0.16);
}

.license-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-top: 17px;
}

.license-inline-button {
  min-height: 37px;

  padding: 7px 11px;

  border: 1px solid var(--studio-border);
  border-radius: 9px;

  color: var(--studio-text-muted);
  background: var(--studio-surface-soft);

  font-size: 0.72rem;
  font-weight: 720;

  transition:
    color var(--studio-transition),
    border-color var(--studio-transition),
    background var(--studio-transition);
}

.license-inline-button:hover {
  border-color: rgba(124, 77, 255, 0.4);

  color: white;
  background: rgba(124, 77, 255, 0.12);
}

.license-inline-button--danger {
  border-color: rgba(251, 113, 133, 0.25);

  color: #fecdd3;
}

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

  .license-management-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .license-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .license-packages-grid,
  .license-form-grid {
    grid-template-columns: 1fr;
  }

  .license-field--full {
    grid-column: auto;
  }

  .license-form-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .license-form-actions .studio-button {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .license-summary-row {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .license-summary-row__value {
    max-width: none;

    text-align: left;
  }

  .license-panel-header {
    flex-direction: column;
  }
}