/* =============================================================================
   Mindexia Form — THE REFERENCE FORM DESIGN
   -----------------------------------------------------------------------------
   Every form generated by Phase C (MindexiaGenerator) will render inside the
   MindexiaForm component and inherit this look. Change styles here to change
   how every one of the 48 Zoaya forms (and every future app) looks.

   Class map (from MindexiaForm.razor):
     .mindexia-form         → the outer form container
     .mindexia-header       → title + subtitle at top
     .actions-bar           → button group (top toolbar + bottom Save/Cancel)
     .mindexia-row          → one row of fields (12-col grid inside)
     .mindexia-grid-block   → child grid section (header + table)
     .mindexia-grid-head    → child grid title + "+ Add row" button
     .mindexia-grid         → the actual <table>
     .fields                → the "list rows" table on the Records screen
     .records-scroll        → wraps tables for horizontal overflow

   Semantic states:
     .success / .banner     → green banner after Save
     .error                 → red banner on failure
     .hint / .muted         → secondary text
     .save-toast            → floating toast on save

   Legacy class shims (kept because Razor markup still uses them):
     .btn-primary / .btn-danger / .btn-cancel  — mapped to mx-btn-* look
   ============================================================================= */

/* ─── OUTER CONTAINER ────────────────────────────────────────────────────── */
.mindexia-form {
    background: var(--mx-surface);
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-lg);
    box-shadow: var(--mx-shadow-sm);
    padding: 0;
    margin-bottom: var(--mx-space-6);
    overflow: hidden;
}

/* ─── HEADER (title bar with brand-soft tint) ────────────────────────────── */
.mindexia-header {
    padding: var(--mx-space-4) var(--mx-space-6);
    background: linear-gradient(135deg, var(--mx-brand-soft), transparent);
    border-bottom: 1px solid var(--mx-border);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--mx-space-4);
    flex-wrap: wrap;
}
.mindexia-header h2,
.mindexia-header .form-title {
    color: var(--mx-brand);
    font-size: var(--mx-fs-2xl);
    font-weight: 700;
    margin: 0;
    line-height: var(--mx-lh-tight);
}
.mindexia-header .hint,
.mindexia-header p {
    color: var(--mx-text-muted);
    font-size: var(--mx-fs-sm);
    margin: 0;
}

/* ─── ACTIONS BAR (toolbar strip) ────────────────────────────────────────── */
.actions-bar {
    padding: var(--mx-space-3) var(--mx-space-6);
    background: var(--mx-surface-alt);
    border-bottom: 1px solid var(--mx-border);
    display: flex;
    align-items: center;
    gap: var(--mx-space-3);
    flex-wrap: wrap;
}

/* The very last actions-bar (Save/Cancel/Delete under form body) has no
   bottom border and softer background */
.mindexia-form > .actions-bar:last-child {
    border-top: 1px solid var(--mx-border);
    border-bottom: none;
    background: var(--mx-surface);
    justify-content: flex-start;
}

/* ─── BUTTON SHIMS (map legacy .btn-* to our mx-btn look) ────────────────── */
.mindexia-form .btn-primary,
.mindexia-form button.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mx-space-2);
    padding: 0 var(--mx-space-5);
    height: var(--mx-control-h);
    background: var(--mx-brand);
    color: var(--mx-text-inverse);
    border: none;
    border-radius: var(--mx-radius);
    font-size: var(--mx-fs-base);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--mx-t-fast);
}
.mindexia-form .btn-primary:hover:not(:disabled) { background: var(--mx-brand-hover); }
.mindexia-form .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.mindexia-form .btn-cancel,
.mindexia-form button.btn-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mx-space-2);
    padding: 0 var(--mx-space-5);
    height: var(--mx-control-h);
    background: var(--mx-surface);
    color: var(--mx-text);
    border: 1px solid var(--mx-border-strong);
    border-radius: var(--mx-radius);
    font-size: var(--mx-fs-base);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background var(--mx-t-fast), border-color var(--mx-t-fast);
}
.mindexia-form .btn-cancel:hover { background: var(--mx-surface-alt); border-color: var(--mx-gray-400); }

.mindexia-form .btn-danger,
.mindexia-form button.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--mx-space-2);
    padding: 0 var(--mx-space-5);
    height: var(--mx-control-h);
    background: var(--mx-surface);
    color: var(--mx-danger);
    border: 1px solid var(--mx-danger);
    border-radius: var(--mx-radius);
    font-size: var(--mx-fs-base);
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all var(--mx-t-fast);
}
.mindexia-form .btn-danger:hover:not(:disabled) { background: var(--mx-danger); color: var(--mx-text-inverse); }

/* ─── FORM BODY WRAPPING (rows go here) ──────────────────────────────────── */
.mindexia-form .actions-bar + * {  /* everything after the first toolbar */
    /* no-op — reserved for future padding overrides */
}

.mindexia-row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--mx-space-3) var(--mx-space-4);
    padding: var(--mx-space-4) var(--mx-space-6);
    align-items: center;
}
.mindexia-row + .mindexia-row { padding-top: 0; }

/* Field cell inside a row — labels stacked over inputs */
.mindexia-row .field-cell {
    display: flex;
    flex-direction: column;
    gap: var(--mx-space-1);
    min-width: 0;   /* fixes grid overflow with long option text */
}
.mindexia-row label {
    font-size: var(--mx-fs-sm);
    color: var(--mx-text-muted);
    font-weight: 500;
    line-height: 1.3;
}
.mindexia-row .required-mark {
    color: var(--mx-danger);
    margin-inline-start: 2px;
}
/* Field-label "*" for IsNeed / ControlData.IsRequired fields — was rendering
   in the label's default color (unreadable as a "required" cue). */
.mindexia-required {
    color: var(--mx-danger);
    font-weight: 700;
    margin-inline-start: 2px;
}
.mindexia-row .field-error {
    font-size: var(--mx-fs-xs);
    color: var(--mx-danger);
    margin-top: 2px;
    line-height: 1.3;
}

/* ─── CHILD GRID (records-inside-a-record) ───────────────────────────────── */
.mindexia-grid-block {
    padding: var(--mx-space-5) var(--mx-space-6);
    border-top: 1px dashed var(--mx-border);
    background: var(--mx-surface-alt);
}

.mindexia-grid-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--mx-space-3);
    gap: var(--mx-space-3);
}
.mindexia-grid-head h4,
.mindexia-grid-head .grid-title {
    color: var(--mx-text-strong);
    font-size: var(--mx-fs-md);
    font-weight: 700;
    margin: 0;
}

.records-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(var(--mx-row-h) * 21);  /* header + ~20 data rows before scrolling */
    border: 1px solid var(--mx-border);
    border-radius: var(--mx-radius-md);
    background: var(--mx-surface);
    box-shadow: var(--mx-shadow-xs);
}

table.mindexia-grid,
table.fields {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mx-fs-base);
}

table.mindexia-grid th,
table.fields th {
    background: var(--mx-brand);
    color: var(--mx-text-inverse);
    text-align: right;
    padding: var(--mx-space-3) var(--mx-space-4);
    font-weight: 600;
    font-size: var(--mx-fs-sm);
    letter-spacing: 0.02em;
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

table.mindexia-grid td,
table.fields td {
    padding: var(--mx-space-2) var(--mx-space-4);
    border-bottom: 1px solid var(--mx-border);
    color: var(--mx-text);
    vertical-align: middle;
    height: var(--mx-row-h);
}

table.mindexia-grid tbody tr:last-child td,
table.fields tbody tr:last-child td { border-bottom: none; }

table.mindexia-grid tbody tr:nth-child(even) td,
table.fields    tbody tr:nth-child(even) td { background: var(--mx-surface-alt); }

table.mindexia-grid tbody tr:hover td,
table.fields    tbody tr:hover td { background: var(--mx-surface-hover); }

/* Inputs inside the child grid — compact, no border, only underline on focus */
table.mindexia-grid td input,
table.mindexia-grid td select,
table.mindexia-grid td textarea {
    height: 28px;
    padding: 0 var(--mx-space-2);
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--mx-radius-sm);
    font-size: var(--mx-fs-sm);
}
table.mindexia-grid td input:hover,
table.mindexia-grid td select:hover {
    background: var(--mx-surface);
    border-color: var(--mx-border);
}
table.mindexia-grid td input:focus,
table.mindexia-grid td select:focus {
    background: var(--mx-surface);
    border-color: var(--mx-border-focus);
    box-shadow: none;
}

/* Row-edit icon button in the list view */
.row-edit {
    background: transparent;
    border: none;
    color: var(--mx-brand);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--mx-radius-sm);
    font-size: var(--mx-fs-md);
    transition: background var(--mx-t-fast);
}
.row-edit:hover { background: var(--mx-brand-soft); }

/* ─── STATE MESSAGES ─────────────────────────────────────────────────────── */
.mindexia-form .success,
.mindexia-form .banner {
    background: var(--mx-success-50);
    color: var(--mx-success-800);
    border-inline-start: 3px solid var(--mx-success);
    padding: var(--mx-space-3) var(--mx-space-4);
    margin: var(--mx-space-3) var(--mx-space-6);
    border-radius: var(--mx-radius-md);
    font-size: var(--mx-fs-base);
    line-height: var(--mx-lh-normal);
    white-space: pre-wrap;
}

.mindexia-form .error {
    background: var(--mx-danger-50);
    color: var(--mx-danger-800);
    border-inline-start: 3px solid var(--mx-danger);
    padding: var(--mx-space-3) var(--mx-space-4);
    margin: var(--mx-space-3) var(--mx-space-6);
    border-radius: var(--mx-radius-md);
    font-size: var(--mx-fs-base);
    line-height: var(--mx-lh-normal);
    white-space: pre-wrap;
}

.mindexia-form .hint,
.mindexia-form .muted { color: var(--mx-text-muted); font-size: var(--mx-fs-sm); }

.mindexia-form .hint { margin: 0 var(--mx-space-6) var(--mx-space-3); }

/* ─── SAVE TOAST (floating success confirmation) ─────────────────────────── */
.save-toast {
    position: fixed;
    top: var(--mx-space-6);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    background: var(--mx-surface);
    color: var(--mx-success-800);
    padding: var(--mx-space-3) var(--mx-space-5);
    border-radius: var(--mx-radius-md);
    box-shadow: var(--mx-shadow-lg);
    border-inline-start: 3px solid var(--mx-success);
    font-size: var(--mx-fs-base);
    font-weight: 500;
    z-index: var(--mx-z-toast);
    animation: mx-toast-in 240ms cubic-bezier(0.4, 0, 0.2, 1);
}
[dir="rtl"] .save-toast { transform: translateX(50%); }

/* ─── DEBUG PANEL (dev-only, shown behind toggle) ────────────────────────── */
.debug-panel {
    margin: var(--mx-space-3) var(--mx-space-6);
    padding: var(--mx-space-3) var(--mx-space-4);
    background: var(--mx-surface-alt);
    border: 1px dashed var(--mx-border-strong);
    border-radius: var(--mx-radius);
    font-family: var(--mx-font-mono);
    font-size: var(--mx-fs-xs);
    color: var(--mx-text-muted);
    max-height: 320px;
    overflow: auto;
}
.debug-panel h4 {
    color: var(--mx-text-brand);
    font-size: var(--mx-fs-sm);
    margin-bottom: var(--mx-space-2);
    font-family: var(--mx-font-ar);
}
.debug-table { width: 100%; border-collapse: collapse; }
.debug-table td, .debug-table th {
    padding: 3px var(--mx-space-2);
    border-bottom: 1px solid var(--mx-border);
    text-align: right;
}
.debug-table th { color: var(--mx-text); font-weight: 600; }

/* ─── EMPTY STATE ────────────────────────────────────────────────────────── */
.mindexia-form .muted {
    padding: var(--mx-space-6);
    text-align: center;
    color: var(--mx-text-muted);
    font-size: var(--mx-fs-base);
}

/* ─── RESPONSIVE (narrow screens: 12-col becomes stack) ──────────────────── */
@media (max-width: 720px) {
    .mindexia-row { grid-template-columns: 1fr; padding: var(--mx-space-3); }
    .mindexia-header,
    .actions-bar,
    .mindexia-grid-block { padding-left: var(--mx-space-4); padding-right: var(--mx-space-4); }
}