/* ════════════════════════════════════════════════════════════════════
   WindowForm — WinForms-parity screen layout.
   Toolbar on top (like ToolStrip), grid in the main area (DataGridView),
   editor docked as a side/bottom panel inside the SAME screen — no modal.
   ════════════════════════════════════════════════════════════════════ */

.wf-screen { padding: var(--content-padding); }

/* The whole screen is ONE card — like a WinForms Form surface. */
.wf-card {
  display: flex; flex-direction: column;
  min-height: calc(100vh - var(--topbar-h) - var(--content-padding) * 2 - 120px);
}

/* When PageCrud/AppShell wraps a list page in .page-card-fused and injects
   a docked editor pane, the card-body must become a flex container so the
   .wf-body split layout fills it edge-to-edge. */
.page-card-fused > .card-body > .wf-body { min-height: 480px; }
.page-card-fused > .card-body { padding: 0; display: flex; flex-direction: column; }
.page-card-fused .wf-editor-pane { border-radius: 0; }

/* ── Header: title (start) + toolbar (end) on one strip ─────────── */
.wf-header {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-primary) 24%, var(--border-strong));
  background: linear-gradient(90deg, rgba(var(--brand-primary-rgb), .10), transparent 55%);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}
.wf-title { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.wf-title h1 { margin: 0; font-size: var(--font-size-xl); color: var(--text-primary); }
.wf-title .breadcrumbs { margin-bottom: 2px; }
.wf-title-icon {
  display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px;
  border: 1px solid var(--border-gold); border-radius: var(--radius-md);
  color: var(--text-gold); background: linear-gradient(135deg, rgba(var(--brand-primary-rgb), .18), rgba(var(--diamond-rgb), .08));
}
.wf-title-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ── Toolbar — the WinForms ToolStrip. Buttons above the grid. ──── */
.wf-toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2);
}
.wf-toolbar .btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--btn-h); padding: 0 var(--space-3);
  font-size: var(--text-sm); white-space: nowrap;
}
.wf-btn-icon { width: 15px; height: 15px; flex: none; }
.wf-toolbar .btn:disabled { opacity: .45; cursor: not-allowed; }

/* ── Body: split pane ───────────────────────────────────────────── */
.wf-body {
  flex: 1; display: flex; min-height: 0;
}
.wf-grid-pane {
  flex: 1 1 auto; min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
}
.wf-grid-pane > .datagrid,
.wf-grid-pane > .data-table-wrap { flex: 1; }
.wf-grid-pane .datagrid-toolbar { padding: var(--space-3) var(--space-4); }

/* Selected row — WinForms DataGridView highlight. */
.wf-grid-pane tbody tr { cursor: default; }
.wf-grid-pane tbody tr.is-selected td {
  background: var(--grid-row-selected) !important;
  box-shadow: inset 3px 0 0 var(--brand-primary);
}
[dir="ltr"] .wf-grid-pane tbody tr.is-selected td { box-shadow: inset -3px 0 0 var(--brand-primary); }
.wf-grid-pane tbody tr.is-selected:hover td { background: rgba(var(--brand-primary-rgb), .14) !important; }

/* ── Editor pane — docked panel inside the same screen ──────────── */
.wf-editor-pane {
  flex: 0 0 var(--wf-editor-w, 420px); width: var(--wf-editor-w, 420px);
  display: flex; flex-direction: column; min-height: 0;
  border-inline-start: 1px solid var(--border-strong);
  background: color-mix(in srgb, var(--bg-elevated) 78%, var(--brand-primary) 4%);
  animation: wf-editor-in var(--duration-base) var(--ease);
}
.wf-split-left  { flex-direction: row-reverse; }
.wf-split-left  .wf-editor-pane { border-inline-start: none; border-inline-end: 1px solid var(--border-strong); }
.wf-split-bottom { flex-direction: column; }
.wf-split-bottom .wf-editor-pane {
  flex: 0 0 auto; width: 100%; max-height: 55%;
  border-inline-start: none; border-top: 1px solid var(--border-strong);
}
.wf-split-bottom .wf-grid-pane { min-height: 45%; }

/* Editor ON TOP, grid BELOW — exact FrmAccounts/frmCustomerReceive layout
   (groupBox fields at top, DataGridView filling the rest). This is the
   default WinForms parity: النموذج فوق والقريد تحته في نفس النافذة. */
.wf-split-top { flex-direction: column; }
.wf-split-top .wf-editor-pane {
  flex: 0 0 auto; width: 100%; max-height: 62%;
  order: -1; /* editor before grid */
  border-inline-start: none; border-bottom: 1px solid var(--border-strong);
  border-inline-end: none;
}
.wf-split-top .wf-grid-pane { flex: 1 1 auto; min-height: 38%; }
/* In split-top the footer buttons dock to the bottom of the editor strip. */
.wf-split-top .wf-editor-pane .wf-editor-foot { border-top: 1px solid var(--border); }

@keyframes wf-editor-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: none; }
}
[dir="ltr"] .wf-editor-pane { animation-name: wf-editor-in-ltr; }
@keyframes wf-editor-in-ltr {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}

.wf-editor-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(90deg, rgba(var(--brand-primary-rgb), .10), transparent 60%);
  flex: none;
}
.wf-editor-head h2 { margin: 0; font-size: var(--font-size-lg); color: var(--text-primary); }
.wf-editor-close {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: var(--radius-md); border: 1px solid transparent;
  background: transparent; color: var(--text-muted);
  font-size: 20px; line-height: 1; cursor: pointer;
  transition: all var(--transition-fast);
}
.wf-editor-close:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border); }

.wf-editor-body {
  flex: 1; overflow-y: auto; padding: var(--space-3);
}
.wf-editor-foot {
  flex: none; display: flex; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-top: 1px solid var(--border);
  background: var(--bg-surface);
}

/* Forms inside the editor pane — compact but readable, WinForms density. */
.wf-form .form-row { grid-template-columns: repeat(auto-fit, minmax(min(calc(var(--label-w) + var(--field-w)), 100%), 1fr)); gap: 6px var(--space-4); }
.wf-form-compact .form-input { height: var(--input-h-sm); font-size: var(--text-xs); }
.wf-form-compact .form-label { font-size: var(--text-xs); margin-bottom: 4px; }
.wf-editor-body .form-group { margin-bottom: var(--space-2); }
.wf-editor-body .card { margin-top: var(--space-2); }
.wf-editor-body .card > .card-header { padding: 6px var(--space-3); }
.wf-editor-body .card-title { font-size: var(--text-sm); }
/* Save buttons stay visible at the bottom of the editor strip even when
   the form scrolls (WinForms bottom button panel). */
.wf-editor-body .form-actions {
  position: sticky; bottom: calc(-1 * var(--space-3)); z-index: 2;
  margin: var(--space-2) calc(-1 * var(--space-3)) calc(-1 * var(--space-3));
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
}

/* Wide editor content (invoice lines, journal legs) can take more room. */
.wf-editor-pane[data-wide] { --wf-editor-w: min(620px, 55vw); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .wf-body, .wf-split-left { flex-direction: column; }
  .wf-editor-pane, .wf-split-left .wf-editor-pane {
    flex: 0 0 auto; width: 100%; max-height: 55vh;
    border-inline: none; border-top: 1px solid var(--border-strong);
  }
}
@media (max-width: 640px) {
  .wf-header { flex-direction: column; align-items: stretch; }
  .wf-toolbar .btn { flex: 1 1 auto; justify-content: center; }
  .wf-editor-pane { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wf-editor-pane { animation: none; }
}