/*
 * Subscription admin panels.
 *
 * Preserves the existing Page::FullBoxComponent shell around
 * app/components/subscriptions/* content.
 */

.subscription-panel {
  max-inline-size: 42rem;
  margin-inline: auto;
}

.subscription-panel--wide {
  max-inline-size: 80rem;
}

.subscription-panel__header > * + * {
  margin-block-start: 0.25rem;
}

.subscription-panel__title {
  font-size: 1rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: var(--color-ink);
}

.subscription-panel__description {
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: var(--color-ink-lighter);
}

.subscription-panel__hint {
  margin-block-end: 1rem;
  font-size: 0.75rem;
  color: var(--color-ink-lighter);
}

.subscription-panel__empty {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--color-ink-lighter);
}

.subscription-panel__summary {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}

.subscription-panel__summary--wide-gap {
  gap: 5rem;
}

.subscription-panel__summary-action {
  flex-shrink: 0;
}

.subscription-panel__actions {
  margin-block-start: 1.5rem;
  padding-block-start: 1rem;
  border-block-start: 1px solid var(--color-border);
  text-align: end;
}

.subscription-details {
  margin-block-start: 1.5rem;
  border-block-start: 1px solid var(--color-border);
  font-size: 0.875rem;
  line-height: 1.5rem; /* leading-6 */
}

.subscription-details__row {
  padding-block-start: 1.5rem;
}

.subscription-details__row + .subscription-details__row {
  margin-block-start: 1.5rem; /* space-y-6 */
  border-block-start: 1px solid var(--color-border-muted);
}

.subscription-details__term {
  font-weight: 500;
  color: var(--color-ink);
}

.subscription-details__description {
  margin-block-start: 0.25rem;
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
}

.subscription-details__value {
  color: var(--color-ink);
}

.subscription-address-section {
  margin-block-start: 1rem;
}

@media (min-width: 640px) {
  .subscription-details__row {
    display: flex;
  }

  .subscription-details__term {
    flex: none;
    inline-size: 16rem;
    padding-inline-end: 1.5rem;
  }

  .subscription-details__description {
    flex: auto;
    margin-block-start: 0;
  }
}

@media (min-width: 1024px) {
  .subscription-panel {
    max-inline-size: none;
    margin-inline: 0;
  }

  .subscription-panel--wide {
    margin-inline: auto;
  }
}

@media (max-width: 639px) {
  .subscription-panel__summary {
    flex-direction: column;
    gap: 0.75rem;
  }
}

/* Module accent palette (OKLCH; scoped to this feature) */
:root {
  --module-schedules:       oklch(0.72 0.13 230);
  --module-talent:          oklch(0.70 0.16 320);
  --module-trainings:       oklch(0.74 0.14 150);
  --module-job-offers:      oklch(0.74 0.14 40);
  --module-projects:        oklch(0.70 0.14 260);
  --module-invoices:        oklch(0.72 0.14 90);
  --module-signatures:      oklch(0.72 0.10 180);
  --module-ai:              oklch(0.74 0.14 300);
  --module-risk:            oklch(0.70 0.16 25);
  --module-complaints:      oklch(0.70 0.14 200);
}

.subscription-modules__header {
  margin-block-end: 2rem;
}

.subscription-modules__title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-ink);
}

.subscription-modules__description {
  margin-block-start: 0.25rem;
  font-size: 0.875rem;
  color: var(--color-ink-lighter);
}

.subscription-modules__count {
  margin-block-start: 0.5rem;
  font-size: 0.75rem;
  color: var(--color-ink-lighter);
}

.subscription-modules__group + .subscription-modules__group {
  margin-block-start: 2.5rem;
}

.subscription-modules__group-title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-ink-lighter);
  margin-block-end: 1rem;
}

.subscription-modules__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 640px) {
  .subscription-modules__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .subscription-modules__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.module-card-frame { display: block; }

.module-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface, var(--color-paper, white));
  cursor: pointer;
  transition: border-color 200ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out;
  min-block-size: 11rem;
}

.module-card:hover,
.module-card:focus-visible {
  border-color: var(--module-accent);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px -8px var(--module-accent);
  outline: none;
}

.module-card--active { border-color: var(--module-accent); }

.module-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.module-card__icon {
  display: inline-flex;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--module-accent) 20%, transparent);
  color: var(--module-accent);
}

.module-card__icon svg { width: 1.25rem; height: 1.25rem; }

.module-card__badge {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.module-card__badge--active   { background: color-mix(in oklch, var(--module-accent) 18%, transparent); color: var(--module-accent); }
.module-card__badge--inactive { background: var(--color-surface-muted, var(--color-bg-muted, oklch(0.96 0 0))); color: var(--color-ink-lighter); }

.module-card__title { font-size: 1rem; font-weight: 600; color: var(--color-ink); }
.module-card__tagline { font-size: 0.8125rem; color: var(--color-ink-lighter); line-height: 1.35; }

.module-card__footer { margin-block-start: auto; padding-block-start: 0.5rem; }
.module-card__cta { font-size: 0.75rem; font-weight: 600; color: var(--module-accent); }

.module-card--pulse { animation: module-card-pulse 600ms ease-out; }

@keyframes module-card-pulse {
  0%   { box-shadow: 0 0 0 0 var(--module-accent); }
  60%  { box-shadow: 0 0 0 6px color-mix(in oklch, var(--module-accent) 30%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .module-card--pulse { animation: none; }
}

/* Detail */
.module-detail__header { display: flex; align-items: center; gap: 0.75rem; margin-block-end: 1.25rem; }
.module-detail__icon {
  inline-size: 2.75rem; block-size: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: color-mix(in oklch, var(--module-accent) 18%, transparent);
  color: var(--module-accent);
}
.module-detail__icon svg { width: 1.5rem; height: 1.5rem; }
.module-detail__heading { display: flex; flex-direction: column; gap: 0.25rem; }
.module-detail__title { font-size: 1.125rem; font-weight: 600; color: var(--color-ink); }

.module-detail__description { color: var(--color-ink); font-size: 0.9375rem; line-height: 1.55; margin-block-end: 1.5rem; }

.module-detail__section + .module-detail__section { margin-block-start: 1.5rem; }
.module-detail__section-title {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--color-ink-lighter); margin-block-end: 0.75rem;
}

.module-detail__features { list-style: none; padding: 0; margin: 0; }
.module-detail__features > li + li { margin-block-start: 0.875rem; }
.module-detail__feature-title { font-weight: 600; color: var(--color-ink); font-size: 0.875rem; }
.module-detail__feature-description { color: var(--color-ink-lighter); font-size: 0.8125rem; line-height: 1.45; }

.module-detail__resources { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.module-detail__resource {
  font-size: 0.75rem; padding: 0.25rem 0.625rem; border-radius: 999px;
  background: var(--color-surface-muted, var(--color-bg-muted, oklch(0.96 0 0))); color: var(--color-ink);
}

.module-detail__footer {
  margin-block-start: 2rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--color-border);
  display: flex; justify-content: flex-end;
}

.module-detail__action { flex: 1; display: flex; flex-direction: column; gap: 0.75rem; align-items: flex-end; }
.module-detail__action-message { font-size: 0.8125rem; color: var(--color-ink-lighter); line-height: 1.5; align-self: stretch; }
.module-detail__cta { align-self: flex-end; }