/* =====================================================
   LEDGER GRID – LEGACY (kept for other forms)
===================================================== */

.ledger-grid {
    display: grid;
    grid-template-columns: repeat(3, 180px);
    row-gap: 16px;
    column-gap: 100px;          /* space between columns */
    align-items: end;

    /* ✅ TAB BORDER */
    border: 1px solid var(--erp-border, #dce6f2);
    border-radius: var(--erp-radius-md, 6px);
    padding: 16px;
    background-color: var(--erp-surface, #ffffff);
}

/* Each grid cell */
.ledger-grid .grid-item {
    width: 180px;
    min-width: 180px;
    max-width: 180px;
}

/* =====================================================
   FORCE ALL FLUENT FORM CONTROLS TO 180px (LEGACY)
===================================================== */

.ledger-grid fluent-text-field,
.ledger-grid fluent-select,
.ledger-grid fluent-number-field,
.ledger-grid fluent-radio-group,
.ledger-grid .generic-popup {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    box-sizing: border-box;
}

/* Internal Fluent control width (Shadow DOM safe) */
.ledger-grid fluent-text-field::part(control),
.ledger-grid fluent-select::part(control),
.ledger-grid fluent-number-field::part(control) {
    width: 180px !important;
    box-sizing: border-box;
}

/* GenericPopup inner input */
.ledger-grid .generic-popup fluent-text-field::part(control) {
    width: 180px !important;
}

/* =====================================================
   REMOVE BLUE LINE / INDICATOR FROM FLUENT TABS
===================================================== */

/* Main animated underline */
fluent-tabs::part(active-indicator),
fluent-tabs::part(indicator) {
    display: none !important;
}

/* Bottom border under tab row */
fluent-tabs::part(tablist) {
    border-bottom: none !important;
}

/* Focus ring / outline on tab buttons */
fluent-tabs fluent-tab::part(control) {
    outline: none !important;
    box-shadow: none !important;
}

/* Extra safety (some versions add ::after underline) */
fluent-tabs fluent-tab::part(control)::after {
    display: none !important;
}

/* =====================================================
   OPTIONAL: REMOVE BUTTON FOCUS STYLE IN TAB BAR
===================================================== */

.erp-tab-bar fluent-button::part(control),
.erp-tab-bar fluent-button:focus-visible::part(control) {
    outline: none !important;
    box-shadow: none !important;
}

/* =====================================================
   LEDGER MASTER — ERP STANDARD LAYOUT
   General Info (always) + group-dependent tabs below.
   NO overflow / max-height here: lookup dropdowns must
   overlay freely and the dialog sizes to its content.
===================================================== */

.lm-form {
    color: var(--erp-text, #0f172a);
    font-family: var(--erp-font, 'Segoe UI', sans-serif);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Fieldset "group box" like classic ERP screens */
.lm-fieldset {
    border: 1px solid var(--erp-border, #dce6f2);
    border-radius: var(--erp-radius-md, 6px);
    padding: 6px 14px 14px;
    background-color: var(--erp-surface, #ffffff);
    margin: 0;
    min-inline-size: 0;
}

    .lm-fieldset legend {
        font-size: 13px;
        font-weight: 600;
        color: var(--erp-text-secondary, #344054);
        padding: 0 6px;
    }

/* Tab bar under General Info */
.lm-tabs {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}

/* Tab content panel — fixed min height so the dialog
   does not jump when switching tabs */
.lm-tab-panel {
    border: 1px solid var(--erp-border, #dce6f2);
    border-radius: var(--erp-radius-md, 6px);
    padding: 14px;
    background-color: var(--erp-surface, #ffffff);
    min-height: 150px;
}

/* Field grid: 3 fluid columns, rows stay aligned */
.lm-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    column-gap: 24px;
    row-gap: 12px;
    align-items: start;
}

    .lm-grid .grid-item {
        width: 100%;
        min-width: 0;
    }

    /* Wide cells (Ledger Name, Mail To, Branch Address) */
    .lm-grid .grid-item.lm-span-2 {
        grid-column: span 2;
    }

    /* Force Fluent controls to fill their cell */
    .lm-grid fluent-text-field,
    .lm-grid fluent-select,
    .lm-grid fluent-number-field,
    .lm-grid fluent-radio-group {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    .lm-grid fluent-text-field::part(control),
    .lm-grid fluent-select::part(control),
    .lm-grid fluent-number-field::part(control) {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* GenericPopup (lookup) fills its cell */
    .lm-grid .fluent-popup-root {
        width: 100%;
    }

    .lm-grid .fluent-input-wrapper {
        width: 100% !important;
        box-sizing: border-box;
    }

/* Opening Balance amount + Dr/Cr on one line */
.lm-inline {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

    .lm-inline .lm-amount {
        flex: 1 1 auto;
        min-width: 0;
    }

    .lm-inline .lm-drcr {
        flex: 0 0 76px;
    }

        .lm-inline .lm-drcr fluent-select {
            width: 76px !important;
            min-width: 76px !important;
        }

/* Small screens: two columns */
@media (max-width: 900px) {
    .lm-grid {
        grid-template-columns: repeat(2, minmax(160px, 1fr));
    }
}