/* ==========================================================================
   Y5App Global UI Layer (CRM + ERP)
   - Minimal overrides on AdminLTE / Bootstrap
   - View/Edit mode visual states
   - List page (DataTable) standard styling
   ========================================================================== */

:root {
  --y5-gap-1: 0.25rem;
  --y5-gap-2: 0.5rem;
  --y5-gap-3: 0.75rem;
  --y5-gap-4: 1rem;
  --y5-gap-5: 1.25rem;

  --y5-radius: 0.75rem;

  --y5-border: #e5e7eb;
  --y5-muted: #6b7280;
  --y5-bg-soft: #f8fafc;

  --y5-edit-border: #0d6efd;
  --y5-view-bg: transparent;
}

body.dark-mode {
  --y5-border: rgba(255, 255, 255, 0.14);
  --y5-muted: rgba(255, 255, 255, 0.65);
  --y5-bg-soft: rgba(255, 255, 255, 0.05);
  --y5-view-bg: rgba(255, 255, 255, 0.04);
}

/* --------------------------------------------------------------------------
   Consistent spacing + form widths
   -------------------------------------------------------------------------- */
.y5-gap-2 { gap: var(--y5-gap-2); }
.y5-gap-3 { gap: var(--y5-gap-3); }
.y5-gap-4 { gap: var(--y5-gap-4); }

.y5-field-short { max-width: 180px; }
.y5-field-medium { max-width: 360px; }
.y5-field-long { max-width: 640px; }

@media (max-width: 768px) {
  .y5-field-short,
  .y5-field-medium,
  .y5-field-long { max-width: 100%; }
}

/* --------------------------------------------------------------------------
   View mode vs Edit mode (Form Behavior Standard)
   -------------------------------------------------------------------------- */
[data-y5-form] [data-y5-controls="edit"] { display: none; }
[data-y5-form].y5-is-editing [data-y5-controls="view"] { display: none; }
[data-y5-form].y5-is-editing [data-y5-controls="edit"] { display: inline-flex; }

/* Integrate with LTE_FORM_FIELD partial (.view-mode / .edit-mode) */
[data-y5-form] .edit-mode { display: none; }
[data-y5-form].y5-is-editing .edit-mode { display: block; }
[data-y5-form].y5-is-editing .view-mode { display: none; }

/* When in view mode, inputs look like text and are non-interactive. */
[data-y5-form]:not(.y5-is-editing) .form-control,
[data-y5-form]:not(.y5-is-editing) .form-select,
[data-y5-form]:not(.y5-is-editing) textarea.form-control {
  background: var(--y5-view-bg);
  border-color: transparent;
  box-shadow: none !important;
  padding-left: 0;
  padding-right: 0;
}

[data-y5-form].y5-is-editing .form-control,
[data-y5-form].y5-is-editing .form-select,
[data-y5-form].y5-is-editing textarea.form-control {
  border-color: var(--y5-edit-border);
}

[data-y5-form] .y5-required::after {
  content: " *";
  color: #dc3545;
}

/* --------------------------------------------------------------------------
   List page shell (Search filter + DataTable)
   -------------------------------------------------------------------------- */
.y5-filter-card {
  border: 1px solid var(--y5-border);
  border-radius: var(--y5-radius);
  background: var(--y5-bg-soft);
}

.y5-filter-card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--y5-border);
}

.y5-dt-actions {
  white-space: nowrap;
}

.y5-dt-actions .btn {
  padding: 0.25rem 0.5rem;
}

/* Make DataTables controls feel consistent */
div.dataTables_wrapper .dataTables_filter input {
  border-radius: 999px;
}

body.dark-mode div.dataTables_wrapper .dataTables_filter input {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}