/*
 * --------------------------------------------------------------------------
 * CRUD Views: Enterprise Edition
 * --------------------------------------------------------------------------
 * Styles for Yii2 standard CRUD views: GridView, DetailView, forms.
 * Elevates default Bootstrap styling to "Clean Enterprise" pattern.
 * 
 * Design Philosophy:
 * - Explicit structure (hard borders) over implied whitespace
 * - Zebra striping for row tracking on wide data sets
 * - Monospace for quantitative columns (IDs, dates, currency)
 * - High-contrast headers for metadata/data separation
 * - Tighter padding for data density
 */

/* ==========================================================================
   GridView: Enterprise Table Styling
   ========================================================================== */

.grid-view {
  margin-bottom: var(--ph-space-lg);
}

.grid-view table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ph-font-size-t4); /* T4 — Body text */
  background: var(--ph-color-surface);
  border: 1px solid var(--ph-border-grid);
  border-radius: var(--ph-radius-sm);
  overflow: hidden;
}

/* High-contrast headers */
.grid-view thead th {
  background: var(--ph-stripe-even);
  border-bottom: 2px solid var(--ph-border-grid-strong);
  padding: 0.5rem 0.75rem;
  font-size: var(--ph-font-size-t5); /* T5 — Table headers */
  font-weight: var(--ph-font-weight-label);
  letter-spacing: var(--ph-letter-spacing-caps);
  text-transform: uppercase;
  color: var(--ph-color-text-muted);
  text-align: left;
  white-space: nowrap;
}

/* Sort indicators */
.grid-view thead th a {
  color: inherit;
  text-decoration: none;
}

.grid-view thead th a:hover {
  color: var(--ph-color-primary);
}

/* Data rows with zebra striping */
.grid-view tbody tr {
  transition: background var(--ph-transition-quick);
}

.grid-view tbody tr:nth-child(even) {
  background: var(--ph-stripe-even);
}

.grid-view tbody tr:hover {
  background: var(--ph-stripe-hover);
}

/* Data cells with hard borders */
.grid-view tbody td {
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--ph-border-grid);
  color: var(--ph-color-text-primary);
  vertical-align: middle;
}

/* Remove bottom border on last row */
.grid-view tbody tr:last-child td {
  border-bottom: none;
}

/* ==========================================================================
   Monospace Columns: IDs, Dates, Numbers, Currency
   ========================================================================== */

/* Auto-apply monospace to common data column classes */
.grid-view td[data-col-type='number'],
.grid-view td[data-col-type='date'],
.grid-view td[data-col-type='datetime'],
.grid-view td[data-col-type='currency'],
.grid-view td[data-col-type='id'],
.grid-view .col-id,
.grid-view .col-date,
.grid-view .col-datetime,
.grid-view .col-number,
.grid-view .col-currency,
.grid-view .col-amount {
  font-family: var(--ph-font-mono);
  letter-spacing: var(--ph-letter-spacing-tight);
}

/* Right-align numeric columns for vertical scanning */
.grid-view .col-number,
.grid-view .col-currency,
.grid-view .col-amount {
  text-align: right;
}

/* Date formatting */
.grid-view .col-date,
.grid-view .col-datetime {
  white-space: nowrap;
}

/* ==========================================================================
   Action Buttons: Clean Enterprise Style
   ========================================================================== */

.grid-view .action-column {
  white-space: nowrap;
  text-align: center;
  width: 1%; /* Shrink to fit content */
}

.grid-view .action-column a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 0 0.15rem;
  border-radius: var(--ph-radius-xs);
  color: var(--ph-color-text-muted);
  text-decoration: none;
  transition: background var(--ph-transition-quick), color var(--ph-transition-quick);
}

.grid-view .action-column a:hover {
  background: var(--ph-color-surface-accent);
  color: var(--ph-color-primary);
}

/* Danger actions (delete) */
.grid-view .action-column a[data-method='post'],
.grid-view .action-column a.delete-link {
  color: var(--ph-color-text-soft);
}

.grid-view .action-column a[data-method='post']:hover,
.grid-view .action-column a.delete-link:hover {
  background: var(--ph-color-danger-soft);
  color: var(--ph-color-danger);
}

/* ==========================================================================
   Summary Bar & Pagination
   ========================================================================== */

.grid-view .summary {
  font-size: var(--ph-font-size-t5); /* T5 — Meta */
  color: var(--ph-color-text-muted);
  margin-bottom: var(--ph-space-xs);
}

.grid-view .pagination {
  margin: var(--ph-space-sm) 0 0;
}

.grid-view .pagination .page-link {
  font-size: var(--ph-font-size-t5);
  padding: 0.35rem 0.65rem;
  border-color: var(--ph-border-grid);
  color: var(--ph-color-text-muted);
}

.grid-view .pagination .page-item.active .page-link {
  background: var(--ph-color-primary);
  border-color: var(--ph-color-primary);
}

.grid-view .pagination .page-link:hover {
  background: var(--ph-stripe-hover);
  color: var(--ph-color-text-primary);
}

/* ==========================================================================
   DetailView: Key-Value Display
   ========================================================================== */

.detail-view {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ph-font-size-t4); /* T4 — Body text */
  background: var(--ph-color-surface);
  border: 1px solid var(--ph-border-grid);
  border-radius: var(--ph-radius-sm);
  overflow: hidden;
  margin-bottom: var(--ph-space-md);
}

.detail-view tr {
  transition: background var(--ph-transition-quick);
}

.detail-view tr:nth-child(even) {
  background: var(--ph-stripe-even);
}

.detail-view tr:hover {
  background: var(--ph-stripe-hover);
}

.detail-view th {
  width: 180px;
  padding: 0.4rem 0.75rem;
  font-size: var(--ph-font-size-t5); /* T5 — Labels */
  font-weight: var(--ph-font-weight-label);
  letter-spacing: var(--ph-letter-spacing-caps);
  text-transform: uppercase;
  color: var(--ph-color-text-muted);
  text-align: left;
  vertical-align: top;
  border-right: 1px solid var(--ph-border-grid);
  border-bottom: 1px solid var(--ph-border-grid);
  background: var(--ph-stripe-even);
}

.detail-view td {
  padding: 0.4rem 0.75rem;
  color: var(--ph-color-text-primary);
  border-bottom: 1px solid var(--ph-border-grid);
  vertical-align: top;
}

.detail-view tr:last-child th,
.detail-view tr:last-child td {
  border-bottom: none;
}

/* ==========================================================================
   Form Panels: CRUD Create/Update Views
   ========================================================================== */

.form-group {
  margin-bottom: var(--ph-space-sm);
}

.form-group label {
  font-size: var(--ph-font-size-t5); /* T5 — Labels */
  font-weight: var(--ph-font-weight-label);
  letter-spacing: var(--ph-letter-spacing-caps);
  text-transform: uppercase;
  color: var(--ph-color-text-muted);
  margin-bottom: 0.25rem;
  display: block;
}

.form-control {
  font-size: var(--ph-font-size-t4); /* T4 — Body text */
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--ph-border-grid);
  border-radius: var(--ph-radius-xs);
  color: var(--ph-color-text-primary);
  background: var(--ph-color-surface);
  transition: border-color var(--ph-transition-quick), box-shadow var(--ph-transition-quick);
}

.form-control:focus {
  border-color: var(--ph-color-primary);
  box-shadow: 0 0 0 3px var(--ph-color-primary-soft);
  outline: none;
}

.form-control:disabled,
.form-control[readonly] {
  background: var(--ph-stripe-even);
  color: var(--ph-color-text-soft);
}

/* Help text */
.help-block {
  font-size: var(--ph-font-size-t5); /* T5 — Meta */
  color: var(--ph-color-text-soft);
  margin-top: 0.25rem;
}

/* Validation states */
.has-error .form-control {
  border-color: var(--ph-color-danger);
}

.has-error .help-block {
  color: var(--ph-color-danger);
}

.has-success .form-control {
  border-color: var(--ph-color-success);
}

/* ==========================================================================
   Button Styles: Enterprise Actions
   ========================================================================== */

.btn-primary {
  background: var(--ph-color-primary);
  border-color: var(--ph-color-primary);
  font-size: var(--ph-font-size-t4); /* T4 */
  font-weight: var(--ph-font-weight-label);
  padding: 0.45rem 1rem;
  border-radius: var(--ph-radius-xs);
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--ph-color-primary-strong);
  border-color: var(--ph-color-primary-strong);
}

.btn-default,
.btn-secondary {
  background: var(--ph-color-surface);
  border-color: var(--ph-border-grid);
  color: var(--ph-color-text-muted);
  font-size: var(--ph-font-size-t4); /* T4 */
  font-weight: var(--ph-font-weight-label);
  padding: 0.45rem 1rem;
  border-radius: var(--ph-radius-xs);
}

.btn-default:hover,
.btn-secondary:hover {
  background: var(--ph-stripe-hover);
  border-color: var(--ph-border-grid-strong);
  color: var(--ph-color-text-primary);
}

.btn-danger {
  background: var(--ph-color-danger);
  border-color: var(--ph-color-danger);
  font-size: var(--ph-font-size-t4); /* T4 */
  font-weight: var(--ph-font-weight-label);
  padding: 0.45rem 1rem;
  border-radius: var(--ph-radius-xs);
}

.btn-danger:hover,
.btn-danger:focus {
  background: #b91c1c;
  border-color: #b91c1c;
}

/* ==========================================================================
   Filter/Search Form Above Grid
   ========================================================================== */

.grid-view-filter {
  background: var(--ph-stripe-even);
  border: 1px solid var(--ph-border-grid);
  border-radius: var(--ph-radius-sm);
  padding: var(--ph-space-sm);
  margin-bottom: var(--ph-space-sm);
}

.grid-view table input[type='text'],
.grid-view table select {
  font-size: var(--ph-font-size-t5); /* T5 — Compact */
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--ph-border-grid);
  border-radius: var(--ph-radius-xs);
  background: var(--ph-color-surface);
  width: 100%;
}

.grid-view table input[type='text']:focus,
.grid-view table select:focus {
  border-color: var(--ph-color-primary);
  outline: none;
}

/* ==========================================================================
   Edit Panel: CRUD Update Form Container
   ========================================================================== */

/*
 * Design Philosophy:
 * - Identity header (cyan bar) immediately identifies WHO/WHAT is being edited
 * - Warning banners draw attention to important cautions
 * - Form body uses grid layout for paired fields
 * - Read-only fields visually distinct from editable
 * - Focus states optimized for keyboard navigation
 */

.edit-panel {
  background: var(--ph-color-surface);
  border: 1px solid var(--ph-border-grid);
  border-radius: var(--ph-radius-md);
  overflow: hidden;
  margin-bottom: var(--ph-space-lg);
}

/* ==========================================================================
   Transaction Edit Form — Currency-Focused Layout
   ========================================================================== */

/*
 * Design Philosophy:
 * Transaction forms deal with monetary amounts that can be in the HUNDREDS.
 * Inputs must be wide enough to show full amounts with cents (e.g., 999.99).
 * Labels should have consistent width for vertical alignment.
 * Two-column layouts: Primary field | Related field (MONTH/YEAR, DUES/HOURS, etc.)
 */

/* Override DetailView table for transaction forms */
/* Override DetailView table for transaction forms */
#trans-update-form .kv-detail-view > table,
#trans-update-form .kv-detail-view table.kv-child-table,
#trans-update-form .kv-detail-view table,
.trans-update .kv-detail-view > table {
  table-layout: fixed !important;
  width: 100%; /* Ensure fixed layout has a basis */
}

/* Wider label columns for transaction form */
#trans-update-form .dv-label,
.trans-update .dv-label {
  width: 110px;
  min-width: 110px;
  font-weight: var(--ph-font-weight-label);
  text-transform: uppercase;
  font-size: var(--ph-font-size-t5);
  letter-spacing: var(--ph-letter-spacing-caps);
  color: var(--ph-color-text-muted);
  vertical-align: middle;
}

/* Currency/Amount inputs need more width */
#trans-update-form .dv-input input,
.trans-update .dv-input input,
.field-currency input {
  min-width: 120px;
  width: 140px;
  max-width: 180px;
  text-align: right;
  font-family: var(--ph-font-mono);
  padding: var(--ph-space-xs);
}

/* Value cells should accommodate the wider inputs */
#trans-update-form .dv-input,
.trans-update .dv-input {
  min-width: 150px;
}

/* Hide DetailView action buttons (redundant with toolbar) */
#trans-update-form .kv-view-mode,
#trans-update-form .detail-view tfoot,
#trans-update-form .kv-detail-view > table > thead > tr:first-child,
.trans-update .detail-view tfoot {
  display: none !important;
}

/* Select2 widgets should fill their container cell */
#trans-update-form .select2-container,
#trans-update-form .select2-container--krajee-bs5 {
  width: 100% !important;
  min-width: 120px !important;
  max-width: none !important;
}

#trans-update-form .select2-container .select2-selection--single,
#trans-update-form .select2-container--krajee-bs5 .select2-selection--single {
  width: 100% !important;
}

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

/* Ensure all table rows have consistent minimum height (fixes MISC AMT/DESC) */
#trans-update-form tr,
#trans-update-form .kv-detail-view tr {
  min-height: 44px;
}

#trans-update-form td {
  padding: var(--ph-space-xs) var(--ph-space-2xs);
  vertical-align: middle;
}

/* ==========================================================================
   Transaction Form: Static Column Widths for Guaranteed Alignment
   ========================================================================== */

/*
 * Design Philosophy:
 * - Column 1 (labels): Fixed 110px width (MONTH, BASE, DUES, etc.)
 * - Column 2 (first input): Fixed 160px width + 12px right padding
 * - Column 3 (second label): Fixed 80px width + 24px left padding
 * - Column 4 (second input): Remaining width
 * This ensures perfect vertical alignment for quick data entry scanning.
 */

/* First column: Labels (MONTH, BASE, DUES, etc.) */
#trans-update-form td:nth-child(1) {
  width: 110px;
  min-width: 110px;
  padding-right: 12px;
}

/* Second column: First inputs (values for first column) */
#trans-update-form td:nth-child(2) {
  width: 160px;
  min-width: 160px;
  padding-right: 24px;
}

/* Third column: Second labels (YEAR, HOURS, EXEMPT, REMARK) */
#trans-update-form td:nth-child(3) {
  width: 80px;
  min-width: 80px;
  padding-left: 24px;
  padding-right: 12px;
}

/* Fourth column: Second inputs (Year, Hours, etc.) */
#trans-update-form td:nth-child(4) {
  padding-left: 8px;
}

/* Fifth column: Third labels (Receipt #) */
#trans-update-form td:nth-child(5) {
  width: 80px;
  min-width: 80px;
  padding-left: 24px;
  padding-right: 12px;
}

/* Sixth column: Third inputs (Receipt # value) */
#trans-update-form td:nth-child(6) {
  padding-left: 8px;
}

/* Allow long text fields (Comments, Remarks) to expand */
#trans-update-form td:nth-child(4) input,
#trans-update-form .dv-input-lg input {
  width: 100%;
  max-width: none; /* Override standard input max-width */
  min-width: 300px; /* Ensure sufficient space for comments */
}

/* Identity Header (Cyan Bar) */
.edit-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--ph-edit-header-bg);
  color: var(--ph-edit-header-text);
  padding: var(--ph-space-xs) var(--ph-space-sm);
  border-bottom: 2px solid var(--ph-edit-header-border);
}

.edit-panel__title {
  font-size: var(--ph-font-size-t2); /* T2 — Panel title */
  font-weight: var(--ph-font-weight-label);
  letter-spacing: var(--ph-letter-spacing-normal);
  margin: 0;
}

.edit-panel__actions {
  display: flex;
  gap: var(--ph-space-xs);
}

.edit-panel__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--ph-radius-xs);
  color: var(--ph-edit-header-text);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background var(--ph-transition-quick);
  text-decoration: none; /* Links don't get underlines */
}

.edit-panel__action:hover {
  background: var(--ph-edit-header-bg-hover);
  text-decoration: none;
}

/* Icon alignment within action buttons */
.edit-panel__action i,
.edit-panel__action .fa {
  line-height: 1;
  vertical-align: middle;
}

/* ==========================================================================
   Warning/Info Banners
   ========================================================================== */

.edit-panel__warning,
.form-warning-banner {
  background: var(--ph-banner-warning-bg);
  border: 1px solid var(--ph-banner-warning-border);
  border-left: 4px solid var(--ph-color-warning);
  color: var(--ph-banner-warning-text);
  padding: var(--ph-space-sm) var(--ph-space-md);
  font-size: var(--ph-font-size-t5); /* T5 — Alert text */
  font-weight: var(--ph-font-weight-body);
  border-radius: var(--ph-radius-sm);
  margin: 0 0 var(--ph-space-xs) 0; /* Add bottom margin for spacing between banners */
}

.edit-panel__info,
.form-info-banner {
  background: var(--ph-banner-info-bg);
  border: 1px solid var(--ph-banner-info-border);
  border-left: 4px solid var(--ph-color-primary);
  color: var(--ph-banner-info-text);
  padding: var(--ph-space-sm) var(--ph-space-md);
  font-size: var(--ph-font-size-t5); /* T5 — Info text */
  font-weight: var(--ph-font-weight-body);
  margin: 0; /* Reset margin */
}

/* Critical Warning Banner (FUCK REVIEW level — demands attention) */
.edit-panel__warning--critical,
.form-warning-banner--critical {
  background: var(--ph-banner-warning-critical-bg);
  border: 1px solid var(--ph-banner-warning-critical-border);
  border-left: 4px solid var(--ph-color-warning);
  color: var(--ph-banner-warning-critical-text);
  padding: var(--ph-space-xs) var(--ph-space-sm);
  font-size: var(--ph-font-size-t5); /* T5 — Alert text */
  font-weight: var(--ph-font-weight-label); /* Bolder than default */
  border-radius: var(--ph-radius-sm);
  margin: 0;
}

/* ==========================================================================
   Form Body
   ========================================================================== */

.edit-panel__body {
  padding: var(--ph-space-sm);
}

/* ==========================================================================
   Field Grouping: Paired Fields Layout
   ========================================================================== */

/*
 * Responsive horizontal layout for paired fields:
 * - Desktop: Side-by-side
 * - Narrow screens: Stack vertically
 */

.field-group {
  margin-bottom: var(--ph-space-sm);
}

.field-group--pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ph-space-sm);
}

.field-group--triple {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--ph-space-sm);
}

.field-group--quad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ph-space-sm);
}

/* Responsive: Stack on narrow screens */
@media (max-width: 600px) {
  .field-group--pair,
  .field-group--triple,
  .field-group--quad {
    grid-template-columns: 1fr;
  }
}

.field-group__item {
  display: flex;
  flex-direction: column;
}

.field-group__item label {
  font-size: var(--ph-font-size-t5); /* T5 — Labels */
  font-weight: var(--ph-font-weight-label);
  letter-spacing: var(--ph-letter-spacing-caps);
  text-transform: uppercase;
  color: var(--ph-color-text-muted);
  margin-bottom: 0.25rem;
}

/* ==========================================================================
   Input States: Read-only vs Editable
   ========================================================================== */

/* Read-only inputs (locked, not meant for editing) */
.form-control.is-readonly,
.form-control[readonly]:not(.is-editable) {
  background: var(--ph-input-readonly-bg);
  color: var(--ph-input-readonly-text);
  border: var(--ph-input-readonly-border);
  cursor: not-allowed;
}

.form-control.is-readonly:focus,
.form-control[readonly]:not(.is-editable):focus {
  box-shadow: none;
  border-color: var(--ph-border-grid);
}

/* Computed/calculated fields (informational, system-generated) */
.form-control.is-computed {
  background: var(--ph-input-computed-bg);
  color: var(--ph-input-computed-text);
  font-style: italic;
  border: 1px solid var(--ph-border-grid);
}

.form-control.is-computed::before {
  content: '=';
  margin-right: 0.25rem;
  opacity: 0.6;
}

/* Enhanced focus states for editable inputs */
.form-control:not(.is-readonly):not(.is-computed):focus {
  border-color: var(--ph-input-active-border);
  box-shadow: var(--ph-input-focus-ring);
  outline: none;
}

/* Dirty (unsaved) visual state */
.form-control.is-dirty {
  border-color: var(--ph-color-warning) !important;
  background-color: var(--ph-variant-row-bg) !important;
  box-shadow: 0 0 0 2px var(--ph-variant-badge-bg) !important;
}

/* Dirty indicator badge (for Select2 dropdowns that resist CSS styling) */
.dirty-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: 0.5rem;
  font-size: 0.9rem;
  cursor: help;
}

/* Override existing validation success checks if currently dirty (dirty state wins until save/cancel) */
.has-success .form-control.is-dirty {
  border-color: var(--ph-color-warning) !important;
}

/* ==========================================================================
   Action Footer (for long forms)
   ========================================================================== */

.edit-panel__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--ph-space-sm);
  padding: var(--ph-space-sm);
  background: var(--ph-stripe-even);
  border-top: 1px solid var(--ph-border-grid);
}

/* Sticky footer for very long forms */
.edit-panel__footer--sticky {
  position: sticky;
  bottom: 0;
  z-index: 10;
}

/* ==========================================================================
   Legacy Compatibility: Existing Form Patterns
   ========================================================================== */

/*
 * For backward compatibility with existing Yii forms that use
 * table-based layouts or custom structures
 */

/* Table-based form layout (legacy pattern) */
.edit-form-table {
  width: 100%;
  border-collapse: collapse;
}

.edit-form-table th {
  width: 120px;
  padding: 0.4rem 0.75rem;
  font-size: var(--ph-font-size-t5); /* T5 — Labels */
  font-weight: var(--ph-font-weight-label);
  letter-spacing: var(--ph-letter-spacing-caps);
  text-transform: uppercase;
  color: var(--ph-color-text-muted);
  text-align: left;
  vertical-align: middle;
  background: var(--ph-stripe-even);
  border-bottom: 1px solid var(--ph-border-grid);
}

.edit-form-table td {
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--ph-border-grid);
  vertical-align: middle;
}

.edit-form-table tr:last-child th,
.edit-form-table tr:last-child td {
  border-bottom: none;
}

/* Inline field pairs within table cells */
.edit-form-table .inline-pair {
  display: flex;
  gap: var(--ph-space-sm);
  align-items: center;
}

.edit-form-table .inline-pair > * {
  flex: 1;
}

.edit-form-table .inline-pair label {
  flex: 0 0 auto;
  margin: 0 var(--ph-space-xs);
  font-size: var(--ph-font-size-t5);
  font-weight: var(--ph-font-weight-label);
  text-transform: uppercase;
  color: var(--ph-color-text-muted);
}

/* ==========================================================================
   Numeric Inputs: Monospace + Right-Align (L0 Invariant 4)
   ========================================================================== */

/*
 * Design Philosophy:
 * L0 requires "Monospace for quantitative data. Digits align vertically for scanning."
 * This applies to INPUT fields, not just display cells.
 * Enterprise pattern: money/quantities right-align for columnar scanning.
 */

input[type='number'],
.field-currency input,
.field-amount input,
.field-hours input,
.field-dues input,
.col-currency input,
.col-amount input,
.form-control.is-currency,
.form-control.is-numeric {
  font-family: var(--ph-font-mono);
  text-align: right;
  letter-spacing: var(--ph-letter-spacing-tight);
}

/* Computed/calculated fields also get monospace */
.form-control.is-computed {
  font-family: var(--ph-font-mono);
  text-align: right;
}

/* ==========================================================================
   Table-Context Inputs: Feel Flush with Cells
   ========================================================================== */

/*
 * In "Excel-like" enterprise grids, inputs should feel integrated with the cell,
 * not floating inside with distinct borders and padding.
 */

.edit-form-table .form-control,
.field-group .form-control {
  /* Tighter height to match cell density */
  padding: 0.35rem 0.5rem;
  /* Subtle border that integrates with grid */
  border-color: var(--ph-border-grid);
}

/* Remove extra whitespace around labels in field groups */
.field-group__item label {
  margin-bottom: 0.15rem;
}

/* ==========================================================================
   Edit Status Bar — "Checkout Vibes"
   ========================================================================== */

/*
 * Design Philosophy:
 * Replaces the old edit-panel__header with a live status indicator.
 * Think "cashier display" — shows what's happening, changes color on dirty state.
 * Provides at-a-glance feedback: clean vs. dirty, saved vs. unsaved.
 */

.edit-status-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ph-space-2xs) var(--ph-space-sm);
  background: var(--ph-stripe-even);
  border: 1px solid var(--ph-border-grid);
  border-radius: var(--ph-radius-sm);
  margin-bottom: var(--ph-space-sm);
  font-size: var(--ph-font-size-t5);
  font-family: var(--ph-font-mono);
  color: var(--ph-color-text-muted);
  transition: background var(--ph-transition-quick), border-color var(--ph-transition-quick),
    color var(--ph-transition-quick);
}

/* Clean state: neutral, unobtrusive */
.edit-status-bar--clean {
  background: var(--ph-stripe-even);
  border-color: var(--ph-border-grid);
  color: var(--ph-color-text-soft);
}

.edit-status-bar--clean::before {
  content: '✓';
  margin-right: var(--ph-space-xs);
  color: var(--ph-color-success);
}

/* Dirty state: attention, unsaved changes */
.edit-status-bar--dirty {
  background: var(--ph-banner-warning-bg);
  border-color: var(--ph-banner-warning-border);
  color: var(--ph-banner-warning-text);
}

.edit-status-bar--dirty::before {
  content: '●';
  margin-right: var(--ph-space-xs);
  color: var(--ph-color-warning);
  animation: status-pulse 1.5s ease-in-out infinite;
}

/* Invalid state: validation errors — blocks save */
.edit-status-bar--invalid {
  background: var(--ph-color-danger-soft, #fef2f2);
  border-color: var(--ph-color-status-negative-border, #fca5a5);
  color: var(--ph-color-danger, #dc2626);
}

.edit-status-bar--invalid::before {
  content: '✕';
  margin-right: var(--ph-space-xs);
  color: var(--ph-color-danger);
  font-weight: var(--ph-font-weight-heading);
}

/* Invalid state disables save button */
.edit-toolbar--invalid .edit-toolbar__btn--save {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Saving state: in-progress feedback */
.edit-status-bar--saving {
  background: var(--ph-banner-info-bg);
  border-color: var(--ph-banner-info-border);
  color: var(--ph-banner-info-text);
}

.edit-status-bar--saving::before {
  content: '↻';
  margin-right: var(--ph-space-xs);
  color: var(--ph-color-primary);
  animation: status-spin 0.8s linear infinite;
}

/* Saved state: success flash */
.edit-status-bar--saved {
  background: #dcfce7; /* Green-100 */
  border-color: #86efac; /* Green-300 */
  color: #166534; /* Green-800 */
}

.edit-status-bar--saved::before {
  content: '✓';
  margin-right: var(--ph-space-xs);
  color: var(--ph-color-success);
}

/* Error state: something went wrong */
.edit-status-bar--error {
  background: var(--ph-color-danger-soft);
  border-color: var(--ph-color-status-negative-border);
  color: var(--ph-color-danger);
}

.edit-status-bar--error::before {
  content: '✕';
  margin-right: var(--ph-space-xs);
}

/* Status message text */
.edit-status-bar__message {
  flex: 1;
}

/* Change counter badge */
.edit-status-bar__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.5rem;
  height: 1.25rem;
  padding: 0 var(--ph-space-2xs);
  font-size: var(--ph-font-size-t5);
  font-weight: var(--ph-font-weight-label);
  border-radius: var(--ph-radius-pill);
  background: var(--ph-color-primary);
  color: var(--ph-color-text-inverse);
}

.edit-status-bar--clean .edit-status-bar__count {
  background: var(--ph-color-text-soft);
}

/* Timestamp or last change info */
.edit-status-bar__meta {
  font-size: var(--ph-font-size-t5);
  color: var(--ph-color-text-soft);
  margin-left: var(--ph-space-sm);
}

/* Animations */
@keyframes status-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes status-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ==========================================================================
   Edit Panel: Header Removed (Title is Now Page Header)
   ========================================================================== */

/*
 * Per user request: Remove redundant panel header.
 * The page now uses "Edit <member_name>" as the H1.
 * The edit-status-bar replaces the old cyan header visual.
 */

/* Keep panel container but simplify header-less variant */
.edit-panel--headerless {
  border-top: 3px solid var(--ph-color-primary);
}

.edit-panel--headerless .edit-panel__body {
  padding-top: var(--ph-space-sm);
}

/* ==========================================================================
   CRUD Edit Toolbar — Transaction/Record Header Pattern
   ========================================================================== */

/*
 * Design Philosophy:
 * Professional, cohesive header for CRUD edit pages.
 * Pattern: "Transaction #[ID] — [LAST NAME, First Name]"
 * Integrates status bar and action buttons into unified toolbar.
 * Slate color palette = confidence, not casual or lullabying.
 */

.edit-toolbar {
  background: var(--ph-edit-header-bg);
  border: 1px solid var(--ph-edit-header-border);
  border-radius: var(--ph-radius-md);
  margin-bottom: var(--ph-space-sm);
  overflow: hidden;
}

/* Main header row: Title + Actions */
.edit-toolbar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--ph-space-xs) var(--ph-space-sm);
}

.edit-toolbar__title {
  font-size: var(--ph-font-size-t2); /* T2 — Bumped up for prominence */
  font-weight: var(--ph-font-weight-label);
  color: var(--ph-edit-header-text);
  margin: 0;
  letter-spacing: var(--ph-letter-spacing-normal);
}

.edit-toolbar__title-id {
  font-family: var(--ph-font-mono);
  font-weight: var(--ph-font-weight-heading);
  color: var(--ph-color-primary); /* Blue accent for emphasis */
}

.edit-toolbar__title-name {
  font-weight: var(--ph-font-weight-body);
  color: var(--ph-color-text-muted);
}

/* Action buttons container */
.edit-toolbar__actions {
  display: flex;
  gap: var(--ph-space-xs);
  align-items: center;
}

/* First-class action buttons — LIGHT MODE + BIGGER */
.edit-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ph-space-xs);
  padding: var(--ph-space-xs) var(--ph-space-md); /* Bigger padding */
  font-size: var(--ph-font-size-t4); /* T4 — Bumped up from T5 */
  font-weight: var(--ph-font-weight-label);
  border-radius: var(--ph-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ph-transition-quick), opacity var(--ph-transition-quick),
    border-color var(--ph-transition-quick);
}

/* View button — neutral, always active */
.edit-toolbar__btn--view {
  background: var(--ph-color-surface);
  color: var(--ph-color-text-primary);
  border-color: var(--ph-border-grid);
}

.edit-toolbar__btn--view:hover {
  background: var(--ph-stripe-hover);
  color: var(--ph-color-text-primary);
  border-color: var(--ph-border-grid-strong);
  text-decoration: none;
}

/* Cancel button — danger-ish, disabled until dirty */
.edit-toolbar__btn--cancel {
  background: var(--ph-color-surface);
  color: var(--ph-color-text-soft);
  border-color: var(--ph-border-grid);
  opacity: 0.5;
}

.edit-toolbar__btn--cancel:not(:disabled) {
  opacity: 1;
  color: var(--ph-color-text-muted);
}

.edit-toolbar__btn--cancel:not(:disabled):hover {
  background: var(--ph-color-danger-soft);
  color: var(--ph-color-danger);
  border-color: var(--ph-color-danger);
}

.edit-toolbar__btn--cancel:disabled {
  cursor: not-allowed;
}

/* Save button — primary action, disabled until dirty */
.edit-toolbar__btn--save {
  background: var(--ph-color-primary);
  color: var(--ph-color-text-inverse);
  border-color: var(--ph-color-primary);
  opacity: 0.5;
}

.edit-toolbar__btn--save:not(:disabled) {
  opacity: 1;
}

.edit-toolbar__btn--save:not(:disabled):hover {
  background: var(--ph-color-primary-strong);
  border-color: var(--ph-color-primary-strong);
}

.edit-toolbar__btn--save:disabled {
  cursor: not-allowed;
}

/* Dirty state: enable the buttons */
.edit-toolbar--dirty .edit-toolbar__btn--cancel,
.edit-toolbar--dirty .edit-toolbar__btn--save {
  opacity: 1;
}

/* Warning button — Destructive actions (e.g., Redo Initiation) */
.edit-toolbar__btn--warning {
  background: transparent;
  color: var(--ph-color-warning);
  border-color: var(--ph-color-warning);
}

.edit-toolbar__btn--warning:hover {
  background: var(--ph-banner-warning-bg);
  border-color: var(--ph-color-warning);
}

/* Danger button — Delete actions */
.edit-toolbar__btn--danger {
  background: transparent;
  color: var(--ph-color-danger);
  border-color: var(--ph-color-danger);
}

.edit-toolbar__btn--danger:hover {
  background: var(--ph-color-danger);
  color: var(--ph-color-text-inverse);
  border-color: var(--ph-color-danger);
}

/* Subheader: Status bar slot + warning banner — LIGHT MODE */
.edit-toolbar__subheader {
  background: var(--ph-color-surface);
  border-top: 1px solid var(--ph-edit-header-border);
  padding: var(--ph-space-xs) var(--ph-space-sm);
}

/* Status bar when embedded in toolbar — LIGHT MODE */
.edit-toolbar__subheader .edit-status-bar {
  margin-bottom: 0;
  border: 1px solid var(--ph-border-grid);
  border-radius: var(--ph-radius-xs);
  background: var(--ph-stripe-even);
}

.edit-toolbar__subheader .edit-status-bar--clean {
  background: var(--ph-stripe-even);
  color: var(--ph-color-text-soft);
}

.edit-toolbar__subheader .edit-status-bar--clean::before {
  color: var(--ph-color-success);
}

.edit-toolbar__subheader .edit-status-bar--dirty {
  background: var(--ph-banner-warning-bg);
  color: var(--ph-banner-warning-text);
}

/* Invalid state in toolbar — ERROR TAKES PRIORITY over dirty */
.edit-toolbar__subheader .edit-status-bar--invalid {
  background: var(--ph-color-danger-soft, #fef2f2) !important;
  border-color: var(--ph-color-status-negative-border, #fca5a5) !important;
  color: var(--ph-color-danger, #dc2626) !important;
}

.edit-toolbar__subheader .edit-status-bar--invalid::before {
  color: var(--ph-color-danger);
}

/* Warning banner in toolbar context */
.edit-toolbar__warning {
  margin-top: var(--ph-space-xs);
}

/* ==========================================================================
   View Toolbar: Utility Actions for CRUD View Pages
   ========================================================================== */

/*
 * Design Philosophy:
 * View pages have utility actions (Print, Export, Column Select) that are
 * secondary to the data itself. These buttons should be visually grouped
 * but understated — they assist scanning, not command attention.
 */

.view-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--ph-space-xs);
  padding: var(--ph-space-xs) 0;
  margin-bottom: var(--ph-space-sm);
}

/* Secondary action button (default for view utilities) */
.view-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  font-size: var(--ph-font-size-t5); /* T5 — Compact buttons */
  font-weight: var(--ph-font-weight-label);
  color: var(--ph-color-text-muted);
  background: var(--ph-color-surface);
  border: 1px solid var(--ph-border-grid);
  border-radius: var(--ph-radius-xs);
  cursor: pointer;
  transition: background var(--ph-transition-quick), border-color var(--ph-transition-quick),
    color var(--ph-transition-quick);
  text-decoration: none;
}

.view-toolbar__btn:hover {
  background: var(--ph-stripe-hover);
  border-color: var(--ph-border-grid-strong);
  color: var(--ph-color-text-primary);
  text-decoration: none;
}

/* Primary utility (e.g., Print — most common action) */
.view-toolbar__btn--primary {
  color: var(--ph-color-primary);
  border-color: var(--ph-color-primary);
  background: var(--ph-color-surface);
}

.view-toolbar__btn--primary:hover {
  background: var(--ph-color-primary-soft);
  border-color: var(--ph-color-primary-strong);
  color: var(--ph-color-primary-strong);
}

/* Danger utility (e.g., Delete) */
.view-toolbar__btn--danger {
  color: var(--ph-color-danger);
  border-color: var(--ph-color-danger);
  background: var(--ph-color-surface);
}

.view-toolbar__btn--danger:hover {
  background: var(--ph-color-danger-soft);
  border-color: var(--ph-color-danger);
  color: #b91c1c;
}

/* Success utility (e.g., Create) */
.view-toolbar__btn--success {
  color: var(--ph-color-success);
  border-color: var(--ph-color-success);
  background: var(--ph-color-surface);
}

.view-toolbar__btn--success:hover {
  background: var(--ph-color-status-balanced-bg);
  border-color: var(--ph-color-success);
  color: #15803d;
}

/* Inline checkbox toggle (e.g., ZIP mode checkbox next to Create Tax Documents) */
.view-toolbar__checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--ph-space-2xs);
  font-size: var(--ph-font-size-t5);
  font-weight: var(--ph-font-weight-label);
  color: var(--ph-color-text-secondary);
  cursor: pointer;
  padding: var(--ph-space-2xs) var(--ph-space-xs);
  border: 1px solid var(--ph-border-grid);
  border-radius: var(--ph-radius-sm);
  background: var(--ph-color-surface);
  user-select: none;
}

.view-toolbar__checkbox:hover {
  background: var(--ph-stripe-hover);
  border-color: var(--ph-border-grid-strong);
}

.view-toolbar__checkbox input[type="checkbox"] {
  margin: 0;
  accent-color: var(--ph-color-primary);
}

/* Icon sizing within buttons */
.view-toolbar__btn i,
.view-toolbar__btn .fa,
.view-toolbar__btn svg {
  font-size: 0.85em;
  opacity: 0.85;
}

/* Override Kartik ExportMenu to match */
.view-toolbar .btn-group .btn,
.view-toolbar .dropdown-toggle {
  font-size: var(--ph-font-size-t5);
  font-weight: var(--ph-font-weight-label);
  padding: 0.4rem 0.85rem;
  border-radius: var(--ph-radius-xs);
  border-color: var(--ph-border-grid);
  color: var(--ph-color-text-muted);
  background: var(--ph-color-surface);
}

.view-toolbar .btn-group .btn:hover,
.view-toolbar .dropdown-toggle:hover {
  background: var(--ph-stripe-hover);
  border-color: var(--ph-border-grid-strong);
  color: var(--ph-color-text-primary);
}

/* Dropdown menu alignment */
.view-toolbar .dropdown-menu {
  font-size: var(--ph-font-size-t5);
  border: 1px solid var(--ph-border-grid);
  border-radius: var(--ph-radius-sm);
  box-shadow: var(--ph-shadow-float);
}

.view-toolbar .dropdown-menu .dropdown-item {
  padding: var(--ph-space-xs) var(--ph-space-sm);
  font-size: var(--ph-font-size-t5);
  color: var(--ph-color-text-primary);
}

.view-toolbar .dropdown-menu .dropdown-item:hover {
  background: var(--ph-stripe-hover);
}

/* Kartik column selector checkbox list */
.view-toolbar .kv-checkbox-list li {
  padding: var(--ph-space-2xs) var(--ph-space-sm);
}

.view-toolbar .kv-checkbox-list .form-check {
  padding-left: var(--ph-space-sm);
}