/**
 * ==========================================================================
 * CRUD Form Template — Reusable Grid Form Pattern
 * ==========================================================================
 * 
 * Generic CSS Grid form layout for Yii2 CRUD edit views.
 * Mimics DetailView table aesthetic using modern CSS Grid.
 * 
 * This is the BASELINE TEMPLATE for all entity edit forms.
 * Entity-specific customizations should be in separate files
 * (e.g., trans-form.css for Transaction-specific input widths).
 * 
 * Naming Convention:
 *   .crud-detail-*   — Generic class names (preferred for new entities)
 *   .trans-detail-*  — Legacy alias (backwards compatible with Trans views)
 *   .[entity]-detail-* — Entity-specific (add your own alias pattern)
 * 
 * Usage:
 *   1. Use .crud-detail-grid as the form container
 *   2. Use .crud-detail-row for each row (CSS Grid with 6 columns)
 *   3. Use .crud-detail-label for labels
 *   4. Use .crud-detail-value for input containers
 * 
 * Existing Trans views continue to work with .trans-detail-* classes.
 * 
 * Structure:
 *   ┌─────────────────────────────────────────────────────────────────┐
 *   │ .crud-detail-grid / .trans-detail-grid                          │
 *   │   .crud-detail-row / .trans-detail-row                          │
 *   │     .crud-detail-label | .crud-detail-value | ...               │
 *   └─────────────────────────────────────────────────────────────────┘
 * 
 * Last Updated: December 13, 2025
 */

/* ==========================================================================
   Grid Container — Table-like appearance
   ========================================================================== */

.crud-detail-grid,
.trans-detail-grid,
.assign-detail-grid {
  display: flex;
  flex-direction: column;
  background: var(--ph-color-surface);
  border: 1px solid var(--ph-border-grid);
  border-radius: var(--ph-radius-md);
  overflow: hidden;
}

/* ==========================================================================
   Row — Each row is a 6-column grid (3 label/value pairs)
   ========================================================================== */

/*
 * Default column widths (can be overridden per-entity):
 *   Col 1: Label  (110px)
 *   Col 2: Value  (190px) — Fixed for tight packing
 *   Col 3: Label  (80px)
 *   Col 4: Value  (190px)
 *   Col 5: Label  (90px)
 *   Col 6: Value  (1fr) — Expands to fill
 */
.crud-detail-row,
.trans-detail-row,
.assign-detail-row {
  display: grid;
  grid-template-columns: 110px 190px 80px 190px 90px 1fr;
  border-bottom: 1px solid var(--ph-border-grid);
  min-height: 48px;
}

.crud-detail-row:last-child,
.trans-detail-row:last-child,
.assign-detail-row:last-child {
  border-bottom: none;
}

/* 4-column variant (2 label/value pairs) */
.crud-detail-row--4col,
.trans-detail-row--4col,
.assign-detail-row--4col {
  grid-template-columns: 110px 1fr 110px 1fr;
}

/* 2-column variant (1 label/value pair) */
.crud-detail-row--2col,
.trans-detail-row--2col,
.assign-detail-row--2col {
  grid-template-columns: 110px 1fr;
}

/* ==========================================================================
   Label Cells — Left-aligned uppercase labels
   ========================================================================== */

.crud-detail-label,
.trans-detail-label,
.assign-detail-label {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  font-size: var(--ph-font-size-t5); /* T5 — Labels */
  font-weight: var(--ph-font-weight-label);
  text-transform: uppercase;
  letter-spacing: var(--ph-letter-spacing-caps);
  color: var(--ph-color-text-muted);
  background: var(--ph-stripe-even);
  border-right: 1px solid var(--ph-border-grid);
}

/* Empty labels still occupy space but have transparent bg */
.crud-detail-label:empty,
.trans-detail-label:empty,
.assign-detail-label:empty {
  background: transparent;
  border-right: 1px solid var(--ph-border-grid);
}

/* ==========================================================================
   Value Cells — Input containers
   ========================================================================== */

.crud-detail-value,
.trans-detail-value,
.assign-detail-value {
  display: flex;
  align-items: center;
  padding: 6px 24px;
  border-right: 1px solid var(--ph-border-grid);
  min-width: 0; /* Allow flex items to shrink */
}

/* Last value in row doesn't need right border */
.crud-detail-value:last-child,
.trans-detail-value:last-child,
.assign-detail-value:last-child {
  border-right: none;
}

/* Empty value cells maintain border */
.crud-detail-value:empty,
.trans-detail-value:empty,
.assign-detail-value:empty {
  border-right: 1px solid var(--ph-border-grid);
}

/* ==========================================================================
   Yii ActiveForm Wrapper Transparency
   ========================================================================== */

/*
 * Yii's ActiveForm::field() generates wrapper divs (.form-group) that can
 * interfere with grid layout. Make these wrappers transparent to prevent
 * input bleeding and width constraints.
 */
.crud-detail-value .form-group,
.trans-detail-value .form-group,
.assign-detail-value .form-group {
  width: 100%;
  margin-bottom: 0;
}

.crud-detail-value .help-block,
.trans-detail-value .help-block,
.assign-detail-value .help-block {
  display: none; /* Errors shown via border color */
}

.crud-detail-value:last-child:empty,
.trans-detail-value:last-child:empty,
.assign-detail-value:last-child:empty {
  border-right: none;
}

/* Wide value that spans remaining columns (for Remarks, Descriptions) */
.crud-detail-value--wide,
.trans-detail-value--wide,
.assign-detail-value--wide {
  grid-column: span 3;
  border-right: none;
}

/* Full-width value (spans all value columns in row) */
.crud-detail-value--full,
.trans-detail-value--full,
.assign-detail-value--full {
  grid-column: 2 / -1;
  border-right: none;
}

/*
 * Stacked value — vertically packs multiple inputs (or read-only lines) into a
 * single value cell. Used for multi-line address blocks where 3 separate rows
 * waste vertical space (SPEC #204 employer view). Pairs with --wide or --full.
 */
.crud-detail-value--stacked,
.trans-detail-value--stacked,
.assign-detail-value--stacked {
  flex-direction: column;
  align-items: stretch;
  gap: var(--ph-space-2xs);
  padding-top: var(--ph-space-xs);
  padding-bottom: var(--ph-space-xs);
}

.crud-detail-value--stacked > .form-group,
.trans-detail-value--stacked > .form-group,
.assign-detail-value--stacked > .form-group {
  margin-bottom: 0;
}

/* Computed/Total field styling */
.crud-detail-value--computed input,
.crud-detail-value--total input,
.trans-detail-value--computed input,
.trans-detail-value--total input,
.assign-detail-value--computed input,
.assign-detail-value--total input {
  background: linear-gradient(to bottom, #f3f4f6 0%, #e5e7eb 100%);
  font-weight: var(--ph-font-weight-semibold);
}

/* ==========================================================================
   Section Headers — Group dividers (e.g., "Dues in Arrears")
   ========================================================================== */

.crud-detail-section,
.trans-detail-section,
.assign-detail-section {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  background: var(--ph-color-surface-accent);
  border-top: 2px solid var(--ph-color-primary);
  border-bottom: 1px solid var(--ph-border-grid);
}

.crud-detail-section__label,
.trans-detail-section__label,
.assign-detail-section__label {
  font-size: var(--ph-font-size-t5); /* T5 — Section header */
  font-weight: var(--ph-font-weight-heading);
  text-transform: uppercase;
  letter-spacing: var(--ph-letter-spacing-caps);
  color: var(--ph-color-primary);
}

/* ==========================================================================
   Input Styling — Match DetailView appearance
   ========================================================================== */

.crud-detail-value input.form-control,
.trans-detail-value input.form-control,
.assign-detail-value input.form-control {
  width: 100%;
  max-width: 140px;
  height: 34px;
  padding: 6px 10px;
  font-size: var(--ph-font-size-t4); /* T4 — Body text */
  text-align: right;
  font-family: var(--ph-font-mono);
  border: 1px solid var(--ph-border-grid);
  border-radius: var(--ph-radius-xs);
  background: var(--ph-color-surface);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Text inputs (non-numeric) should be left-aligned with no max-width */
.crud-detail-value input.form-control[type='text']:not(.is-numeric):not(.is-currency),
.crud-detail-value input.form-control.is-text,
.trans-detail-value input.form-control[type='text']:not(.is-numeric):not(.is-currency),
.trans-detail-value input.form-control.is-text {
  text-align: left;
  max-width: none;
}

/* Shorter inputs (month, year, short codes) */
.crud-detail-value input.form-control.is-short,
.trans-detail-value input.form-control.is-short,
.assign-detail-value input.form-control.is-short {
  max-width: 80px;
}

/* Medium inputs (receipt #, codes) */
.crud-detail-value input.form-control.is-medium,
.trans-detail-value input.form-control.is-medium,
.assign-detail-value input.form-control.is-medium {
  max-width: 100px;
  text-align: left;
}

/* Focus state */
.crud-detail-value input.form-control:focus,
.trans-detail-value input.form-control:focus,
.assign-detail-value input.form-control:focus {
  border-color: var(--ph-color-primary);
  box-shadow: var(--ph-input-focus-ring);
  outline: none;
}

/* Disabled state */
.crud-detail-value input.form-control:disabled,
.trans-detail-value input.form-control:disabled,
.assign-detail-value input.form-control:disabled {
  background: linear-gradient(to bottom, #f3f4f6 0%, #e5e7eb 100%);
  color: var(--ph-color-text-muted);
  cursor: not-allowed;
}

/* Readonly state */
.crud-detail-value input.form-control[readonly],
.trans-detail-value input.form-control[readonly],
.assign-detail-value input.form-control[readonly] {
  background: var(--ph-input-readonly-bg);
  color: var(--ph-input-readonly-text);
  border-style: dashed;
}

/* ==========================================================================
   Textarea Styling — Multi-line text fields
   ========================================================================== */

.crud-detail-value textarea.form-control,
.trans-detail-value textarea.form-control,
.assign-detail-value textarea.form-control {
  width: 100%;
  max-width: none; /* Override narrow input default */
  min-height: 80px;
  resize: vertical;
  padding: 8px 10px;
  font-size: var(--ph-font-size-t4); /* T4 — Body text */
  font-family: inherit; /* NOT monospace */
  text-align: left;
  line-height: 1.5;
  border: 1px solid var(--ph-border-grid);
  border-radius: var(--ph-radius-xs);
  background: var(--ph-color-surface);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.crud-detail-value textarea.form-control:focus,
.trans-detail-value textarea.form-control:focus,
.assign-detail-value textarea.form-control:focus {
  border-color: var(--ph-color-primary);
  box-shadow: var(--ph-input-focus-ring);
  outline: none;
}

.crud-detail-value textarea.form-control:disabled,
.trans-detail-value textarea.form-control:disabled,
.assign-detail-value textarea.form-control:disabled {
  background: linear-gradient(to bottom, #f3f4f6 0%, #e5e7eb 100%);
  color: var(--ph-color-text-muted);
  cursor: not-allowed;
  resize: none;
}

.crud-detail-value textarea.form-control[readonly],
.trans-detail-value textarea.form-control[readonly],
.assign-detail-value textarea.form-control[readonly] {
  background: var(--ph-input-readonly-bg);
  color: var(--ph-input-readonly-text);
  border-style: dashed;
  resize: none;
}

/* ==========================================================================
   Static Link — Read-only clickable values (e.g., Member ID link)
   ========================================================================== */

.form-control-static-link {
  display: flex;
  align-items: center;
  height: 34px;
  padding: 6px 10px;
  font-size: var(--ph-font-size-t4);
  font-family: var(--ph-font-mono);
  color: var(--ph-color-primary);
  text-decoration: none;
}

.form-control-static-link:hover {
  color: var(--ph-color-primary-strong);
  text-decoration: underline;
}

/* ==========================================================================
   Select2 Widget Styling
   ========================================================================== */

.crud-detail-value .select2-container,
.trans-detail-value .select2-container,
.assign-detail-value .select2-container {
  width: 100% !important;
  max-width: 140px;
}

.crud-detail-value .select2-container .select2-selection--single,
.trans-detail-value .select2-container .select2-selection--single,
.assign-detail-value .select2-container .select2-selection--single {
  height: 34px;
  border: 1px solid var(--ph-border-grid);
  border-radius: var(--ph-radius-xs);
}

.crud-detail-value .select2-container .select2-selection__rendered,
.trans-detail-value .select2-container .select2-selection__rendered,
.assign-detail-value .select2-container .select2-selection__rendered {
  line-height: 32px;
  padding-left: 10px;
  font-size: var(--ph-font-size-t4);
}

.crud-detail-value .select2-container .select2-selection__arrow,
.trans-detail-value .select2-container .select2-selection__arrow,
.assign-detail-value .select2-container .select2-selection__arrow {
  height: 32px;
}

.crud-detail-value .select2-container--focus .select2-selection--single,
.trans-detail-value .select2-container--focus .select2-selection--single,
.assign-detail-value .select2-container--focus .select2-selection--single {
  border-color: var(--ph-color-primary);
  box-shadow: var(--ph-input-focus-ring);
}

/* Wider select for full-width usage */
.crud-detail-value .select2-container.select2--wide,
.crud-detail-value--wide .select2-container,
.trans-detail-value .select2-container.select2--wide,
.trans-detail-value--wide .select2-container,
.assign-detail-value .select2-container.select2--wide,
.assign-detail-value--wide .select2-container {
  max-width: none;
}

/* ==========================================================================
   Native Dropdown Styling (non-Select2)
   ========================================================================== */

/*
 * Standard <select> elements (Yii dropDownList without Select2 widget)
 */
.crud-detail-value select.form-control,
.trans-detail-value select.form-control,
.assign-detail-value select.form-control {
  width: 100%;
  max-width: 140px; /* Match input default */
  height: 34px;
  padding: 6px 10px;
  font-size: var(--ph-font-size-t4); /* T4 — Body text */
  border: 1px solid var(--ph-border-grid);
  border-radius: var(--ph-radius-xs);
  background: var(--ph-color-surface);
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Full-width dropdowns in --wide values */
.crud-detail-value--wide select.form-control,
.trans-detail-value--wide select.form-control,
.assign-detail-value--wide select.form-control {
  max-width: none;
}

.crud-detail-value select.form-control:focus,
.trans-detail-value select.form-control:focus,
.assign-detail-value select.form-control:focus {
  border-color: var(--ph-color-primary);
  box-shadow: var(--ph-input-focus-ring);
  outline: none;
}

.crud-detail-value select.form-control:disabled,
.trans-detail-value select.form-control:disabled,
.assign-detail-value select.form-control:disabled {
  background: linear-gradient(to bottom, #f3f4f6 0%, #e5e7eb 100%);
  color: var(--ph-color-text-muted);
  cursor: not-allowed;
}

/* ==========================================================================
   Validation States — Inline Error Display
   ========================================================================== */

/*
 * Invalid field state — red border with inline error message
 * Triggered by Yii ActiveForm client validation
 */
.crud-detail-form .has-error .form-control,
.trans-detail-form .has-error .form-control,
.assign-detail-form .has-error .form-control,
.crud-detail-value .form-control.is-invalid,
.trans-detail-value .form-control.is-invalid,
.assign-detail-value .form-control.is-invalid {
  border-color: var(--ph-color-danger) !important;
  background-color: rgba(239, 68, 68, 0.05) !important;
}

.crud-detail-form .has-error .form-control:focus,
.trans-detail-form .has-error .form-control:focus,
.assign-detail-form .has-error .form-control:focus {
  border-color: var(--ph-color-danger) !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* Inline error messages — show below input */
.crud-detail-value .help-block,
.trans-detail-value .help-block,
.assign-detail-value .help-block {
  display: block;
  font-size: var(--ph-font-size-t5);
  color: var(--ph-color-text-soft);
  margin-top: 4px;
  margin-bottom: 0;
}

.crud-detail-form .has-error .help-block,
.trans-detail-form .has-error .help-block,
.assign-detail-form .has-error .help-block,
.crud-detail-value .help-block.help-block-error,
.trans-detail-value .help-block.help-block-error,
.assign-detail-value .help-block.help-block-error {
  display: block !important;
  color: var(--ph-color-danger);
  font-weight: var(--ph-font-weight-label);
}

/* Success state — DISABLED to prevent false visual feedback
   Fields should only highlight orange when changed (.is-dirty), not green when valid.
   Green is reserved for the saved status bar state only. */
.crud-detail-form .has-success .form-control,
.trans-detail-form .has-success .form-control,
.assign-detail-form .has-success .form-control {
  /* border-color: var(--ph-color-success); — COMMENTED OUT */
}

/* Hide Bootstrap validation feedback icons (they overlap input text) */
.crud-detail-form .form-control-feedback,
.crud-detail-form .glyphicon-ok,
.crud-detail-form .glyphicon-remove,
.trans-detail-form .form-control-feedback,
.trans-detail-form .glyphicon-ok,
.trans-detail-form .glyphicon-remove,
.assign-detail-form .form-control-feedback,
.assign-detail-form .glyphicon-ok,
.assign-detail-form .glyphicon-remove {
  display: none !important;
}

/* ==========================================================================
   Dirty State Indicators (per-field tracking)
   ========================================================================== */

.crud-detail-value .form-control.is-dirty,
.crud-detail-value .select2-selection.is-dirty,
.trans-detail-value .form-control.is-dirty,
.trans-detail-value .select2-selection.is-dirty,
.assign-detail-value .form-control.is-dirty,
.assign-detail-value .select2-selection.is-dirty {
  border-color: var(--ph-color-warning) !important;
  background-color: var(--ph-variant-row-bg) !important;
}

/* Override validation success if dirty (dirty state wins) */
.crud-detail-form .has-success .form-control.is-dirty,
.trans-detail-form .has-success .form-control.is-dirty,
.assign-detail-form .has-success .form-control.is-dirty {
  border-color: var(--ph-color-warning) !important;
}

/* ERROR STATE ALWAYS WINS over dirty state
   If a field has both .is-dirty and is inside .has-error, show red (error) not orange (dirty)
   Also covers when .has-error or .is-invalid is on the input itself (not just container) */
.crud-detail-form .has-error .form-control.is-dirty,
.trans-detail-form .has-error .form-control.is-dirty,
.assign-detail-form .has-error .form-control.is-dirty,
.crud-detail-value .form-control.is-dirty.is-invalid,
.trans-detail-value .form-control.is-dirty.is-invalid,
.assign-detail-value .form-control.is-dirty.is-invalid,
.crud-detail-value .form-control.is-dirty.has-error,
.trans-detail-value .form-control.is-dirty.has-error,
.assign-detail-value .form-control.is-dirty.has-error,
/* Also handle case when .has-error is on the input element itself (not container) */
.form-control.is-dirty.has-error,
.form-control.is-dirty.is-invalid {
  border-color: var(--ph-color-danger) !important;
  background-color: rgba(239, 68, 68, 0.05) !important;
}

/* ==========================================================================
   Reset Animation Prevention
   ========================================================================== */

.crud-detail-form--resetting,
.crud-detail-form--resetting *,
.trans-detail-form--resetting,
.trans-detail-form--resetting *,
.assign-detail-form--resetting,
.assign-detail-form--resetting * {
  transition: none !important;
}

/* ==========================================================================
   Responsive — Stack on smaller screens
   ========================================================================== */

@media (max-width: 768px) {
  .crud-detail-row,
  .trans-detail-row,
  .assign-detail-row {
    grid-template-columns: 100px 1fr;
  }

  /* Hide columns 3-6 on mobile (show only first label/value pair) */
  .crud-detail-label:nth-child(3),
  .crud-detail-label:nth-child(5),
  .crud-detail-value:nth-child(4),
  .crud-detail-value:nth-child(6),
  .trans-detail-label:nth-child(3),
  .trans-detail-label:nth-child(5),
  .trans-detail-value:nth-child(4),
  .trans-detail-value:nth-child(6),
  .assign-detail-label:nth-child(3),
  .assign-detail-label:nth-child(5),
  .assign-detail-value:nth-child(4),
  .assign-detail-value:nth-child(6) {
    display: none;
  }

  .crud-detail-value--wide,
  .trans-detail-value--wide,
  .assign-detail-value--wide {
    grid-column: 2;
  }

  .crud-detail-value--full,
  .trans-detail-value--full,
  .assign-detail-value--full {
    grid-column: 2;
  }
}

/* ==========================================================================
   Section Dividers (for grouping related fields)
   ========================================================================== */

.crud-detail-section,
.trans-detail-section {
  background: var(--ph-stripe-even);
  padding: var(--ph-space-xs) var(--ph-space-sm);
  font-size: var(--ph-font-size-t5);
  font-weight: var(--ph-font-weight-label);
  text-transform: uppercase;
  letter-spacing: var(--ph-letter-spacing-caps-wide);
  color: var(--ph-color-primary);
  border-bottom: 1px solid var(--ph-border-grid);
}

/* ==========================================================================
   Inline Help Text
   ========================================================================== */

.crud-detail-value .help-block,
.trans-detail-value .help-block,
.assign-detail-value .help-block {
  font-size: var(--ph-font-size-t5);
  color: var(--ph-color-text-soft);
  margin-top: 4px;
  margin-bottom: 0;
}

.crud-detail-value .help-block--error,
.trans-detail-value .help-block--error,
.assign-detail-value .help-block--error {
  color: var(--ph-color-danger);
}

/* ==========================================================================
   Currency/Amount Input Variant
   ========================================================================== */

/*
 * For forms dealing with monetary amounts (transactions, payments, dues).
 * Wider inputs to accommodate values like "999.99".
 */

.crud-detail-grid--currency .crud-detail-value input.form-control,
.trans-detail-grid--currency .trans-detail-value input.form-control {
  max-width: 140px;
  min-width: 120px;
}

.crud-detail-grid--currency .crud-detail-value .select2-container,
.trans-detail-grid--currency .trans-detail-value .select2-container {
  max-width: 140px;
  min-width: 120px;
}

/* ==========================================================================
   Compact Variant (for dense data entry)
   ========================================================================== */

.crud-detail-grid--compact .crud-detail-row,
.trans-detail-grid--compact .trans-detail-row {
  min-height: 40px;
}

.crud-detail-grid--compact .crud-detail-label,
.trans-detail-grid--compact .trans-detail-label {
  padding: 6px 10px;
  font-size: 11px;
}

.crud-detail-grid--compact .crud-detail-value,
.trans-detail-grid--compact .trans-detail-value {
  padding: 4px 16px;
}

.crud-detail-grid--compact .crud-detail-value input.form-control,
.trans-detail-grid--compact .trans-detail-value input.form-control {
  height: 30px;
  padding: 4px 8px;
  font-size: 13px;
}