/* Container Component */

/* Component-specific custom properties */
.c-container {
  /* Base properties */
  --c-container-width: 100%;
  --c-container-min-width: 380px;
  --c-container-max-width: none;
  --c-container-margin: 0 auto;
  --c-container-padding: 0;
  --c-container-position: relative;
  
  /* Breakpoint-specific max widths */
  --c-container-max-width-xxs: 400px;
  --c-container-max-width-xs: 500px;
  --c-container-max-width-s: 620px;
  --c-container-max-width-m: 840px;
  --c-container-max-width-l: 1000px;
  --c-container-max-width-xl: 2400px;
  
  /* Content */
  --c-container-content-padding: var(--ds-space-l);
  --c-container-content-gap: var(--ds-space-l);
  
  /* Sections */
  --c-container-section-margin-bottom: var(--ds-space-l);
  --c-container-section-padding: 0;
  --c-container-section-border: none;
  --c-container-section-border-radius: 0;
  --c-container-section-background: transparent;
  
  /* Grid */
  --c-container-grid-gap: var(--ds-space-m);
  --c-container-grid-gap-small: var(--ds-space-s);
  --c-container-grid-gap-large: var(--ds-space-l);
  
  /* Form specific */
  --c-container-form-section-padding: var(--ds-space-l);
  --c-container-form-section-background: var(--ds-color-surface);
  --c-container-form-section-border: 1px solid var(--ds-color-border);
  --c-container-form-section-border-radius: var(--ds-radius-m);
  --c-container-form-section-margin-bottom: var(--ds-space-l);
  
  /* Actions */
  --c-container-actions-padding: var(--ds-space-l);
  --c-container-actions-gap: var(--ds-space-s);
  --c-container-actions-justify: flex-end;
  --c-container-actions-border-top: 1px solid var(--ds-color-border);
  --c-container-actions-background: var(--ds-color-surface-raised);
  
  /* Fields (readonly) */
  --c-container-field-gap: var(--ds-space-xs);
  --c-container-field-label-font-size: var(--ds-font-size-s);
  --c-container-field-label-font-weight: var(--ds-font-weight-medium);
  --c-container-field-label-color: var(--ds-color-text-weak);
  --c-container-field-value-font-size: var(--ds-font-size-m);
  --c-container-field-value-font-weight: var(--ds-font-weight-normal);
  --c-container-field-value-color: var(--ds-color-text);
  
  /* Inline fluid */
  --c-container-inline-fluid-gap: var(--ds-space-m);
  --c-container-inline-fluid-align: stretch;
  
  /* Input groups */
  --c-container-input-group-gap: var(--ds-space-xs);
}

/* Base container styles */
.c-container {
  width: var(--c-container-width);
  min-width: var(--c-container-min-width);
  max-width: var(--c-container-max-width);
  margin: var(--c-container-margin);
  padding: var(--c-container-padding);
  position: var(--c-container-position);
}

/* Container size variants */
.c-container--xxs {
  max-width: var(--c-container-max-width-xxs);
}

.c-container--xs {
  max-width: var(--c-container-max-width-xs);
}

.c-container--s {
  max-width: var(--c-container-max-width-s);
}

.c-container--m {
  max-width: var(--c-container-max-width-m);
}

.c-container--l {
  max-width: var(--c-container-max-width-l);
}

.c-container--xl {
  max-width: var(--c-container-max-width-xl);
}

/* Content */
.c-container__content {
  padding: var(--c-container-content-padding);
  display: flex;
  flex-direction: column;
  gap: var(--c-container-content-gap);
}

/* Sections */
.c-container__section {
  margin-bottom: var(--c-container-section-margin-bottom);
  padding: var(--c-container-section-padding);
  border: var(--c-container-section-border);
  border-radius: var(--c-container-section-border-radius);
  background: var(--c-container-section-background);
}

.c-container__section:last-child {
  margin-bottom: 0;
}

.c-container__section h3 {
  margin: 0 0 var(--ds-space-m) 0;
  font-size: var(--ds-font-size-l);
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-color-text);
}

/* Grid layouts */
.c-container__grid {
  display: grid;
  gap: var(--c-container-grid-gap);
  align-items: start;
}

.c-container__grid--1 {
  grid-template-columns: 1fr;
}

.c-container__grid--2 {
  grid-template-columns: repeat(2, 1fr);
}

.c-container__grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.c-container__grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

.c-container__grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Responsive grid behavior */
@media (max-width: 840px) {
  .c-container__grid--3 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .c-container__grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 620px) {
  .c-container__grid--2,
  .c-container__grid--3,
  .c-container__grid--4 {
    grid-template-columns: 1fr;
  }
}

/* Inline fluid layout */
.c-container__inline-fluid {
  display: flex;
  gap: var(--c-container-inline-fluid-gap);
  align-items: var(--c-container-inline-fluid-align);
  flex-wrap: wrap;
}

.c-container__inline-fluid > * {
  min-width: 0;
}

/* Responsive inline fluid */
@media (max-width: 620px) {
  .c-container__inline-fluid {
    flex-direction: column;
  }
}

/* Form mode */
.c-container--form .c-container__section {
  padding: var(--c-container-form-section-padding);
  background: var(--c-container-form-section-background);
  border: var(--c-container-form-section-border);
  border-radius: var(--c-container-form-section-border-radius);
  margin-bottom: var(--c-container-form-section-margin-bottom);
}

.c-container__form {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-l);
}

/* Input groups */
.c-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--c-container-input-group-gap);
}

.c-input-group label {
  font-size: var(--ds-font-size-s);
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-color-text);
}

.c-input-group--fixed {
  flex-shrink: 0;
  width: var(--input-width, auto);
}

.c-input-group--fluid {
  flex: 1;
  min-width: 0;
}

/* Actions */
.c-container__actions {
  display: flex;
  gap: var(--c-container-actions-gap);
  justify-content: var(--c-container-actions-justify);
  padding: var(--c-container-actions-padding);
  border-top: var(--c-container-actions-border-top);
  background: var(--c-container-actions-background);
  margin-top: auto;
}

/* Readonly mode */
.c-container--readonly .c-container__section {
  background: var(--ds-color-surface-raised);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-m);
  padding: var(--ds-space-l);
}

/* Fields (for readonly content) */
.c-container__field {
  display: flex;
  flex-direction: column;
  gap: var(--c-container-field-gap);
}

.c-container__field-label {
  font-size: var(--c-container-field-label-font-size);
  font-weight: var(--c-container-field-label-font-weight);
  color: var(--c-container-field-label-color);
  margin: 0;
}

.c-container__field-value {
  font-size: var(--c-container-field-value-font-size);
  font-weight: var(--c-container-field-value-font-weight);
  color: var(--c-container-field-value-color);
  margin: 0;
  word-break: break-word;
}

/* Compact mode */
.c-container--compact {
  --c-container-content-padding: var(--ds-space-m);
  --c-container-content-gap: var(--ds-space-m);
  --c-container-section-margin-bottom: var(--ds-space-m);
  --c-container-grid-gap: var(--ds-space-s);
  --c-container-form-section-padding: var(--ds-space-m);
}

/* Spacious mode */
.c-container--spacious {
  --c-container-content-padding: var(--ds-space-xl);
  --c-container-content-gap: var(--ds-space-xl);
  --c-container-section-margin-bottom: var(--ds-space-xl);
  --c-container-grid-gap: var(--ds-space-l);
  --c-container-form-section-padding: var(--ds-space-xl);
}

/* Fluid container (no max-width) */
.c-container--fluid {
  max-width: none;
}

/* Centered content */
.c-container--centered {
  text-align: center;
}

.c-container--centered .c-container__grid {
  justify-items: center;
}

/* No padding variant */
.c-container--no-padding {
  --c-container-content-padding: 0;
}

/* Responsive behavior */
@media (max-width: 500px) {
  .c-container {
    --c-container-min-width: 320px;
    --c-container-content-padding: var(--ds-space-m);
    --c-container-grid-gap: var(--ds-space-s);
  }
  
  .c-container__section h3 {
    font-size: var(--ds-font-size-m);
  }
}

/* Print styles */
@media print {
  .c-container {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
  }
  
  .c-container__content {
    padding: 0 !important;
  }
  
  .c-container__section {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  
  .c-container__actions {
    display: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .c-container--form .c-container__section,
  .c-container--readonly .c-container__section {
    border: 2px solid ButtonText;
  }
  
  .c-container__actions {
    border-top: 2px solid ButtonText;
  }
}

/* Dark mode support (if implemented) */
@media (prefers-color-scheme: dark) {
  .c-container {
    --c-container-form-section-background: var(--ds-color-surface-dark, var(--ds-color-surface));
    --c-container-form-section-border: 1px solid var(--ds-color-border-dark, var(--ds-color-border));
    --c-container-actions-background: var(--ds-color-surface-raised-dark, var(--ds-color-surface-raised));
    --c-container-actions-border-top: 1px solid var(--ds-color-border-dark, var(--ds-color-border));
  }
}

/* Animation for dynamic changes */
.c-container {
  transition: max-width var(--ds-duration-normal) var(--ds-ease-out);
}

.c-container__grid {
  transition: grid-template-columns var(--ds-duration-normal) var(--ds-ease-out);
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .c-container,
  .c-container__grid {
    transition: none;
  }
}

/* Focus management */
.c-container:focus-within {
  outline: none;
}

/* Ensure proper stacking context */
.c-container {
  isolation: isolate;
}