/* =====================================================
   MASTER CARD (INDEX / FORM WRAPPER)
   ===================================================== */

.master-card {
    background: #ffffff;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden; /* REQUIRED for header strip */
}

/* =====================================================
   MASTER CARD HEADER STRIP
   ===================================================== */

.master-card-header {
    background: linear-gradient( to right, #1f4fd8, #2563eb, #0ea5e9 );
    color: #ffffff;
    padding: 6px 14px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

/* =====================================================
   MASTER CARD BODY
   ===================================================== */

.master-card-body {
    padding: 16px;
}

/* =====================================================
   INDEX ACTION ROW
   ===================================================== */

.index-actions {
    display: flex;
    align-items: center;
    gap: 12px; /* only required space */
    margin-bottom: 8px;
}

/* =====================================================
   INDEX FILTER ROW
   ===================================================== */

.index-filters {
    display: grid;
    grid-template-columns: 300px 300px 300px;
    gap: 12px;
    margin-top: 12px;
    align-items: end;
    margin-bottom: 12px;
}
.filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .filter-row label {
        width: 110px;
        font-weight: 500;
    }

.filter-item {
    display: flex;
    flex-direction: column;
}

.filter-action {
    padding-bottom: 2px;
    margin-left:12px;
}

/* Keep search button compact in index filters */
.btn-search {
    width: auto;
    margin-left:40px;
    max-width: 120px; /* adjust: 80–100px */
    padding: 6px 14px;
    white-space: nowrap;
}


/* =====================================================
   FORM LABEL STANDARD
   ===================================================== */

.form-label {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #374151;
}

/* =====================================================
   ERP OUTLINE ACTION BUTTON
   ===================================================== */

.btn.btn-erp-outline {
    background-color: #ffffff;
    color: #1f4fd8;
    border: 2px solid #1f4fd8;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

    .btn.btn-erp-outline:hover {
        background-color: #1f4fd8;
        color: #ffffff;
    }
/* Common spacing between Create button and filter row */
.master-card-body > .btn-erp-outline {
    margin-bottom: 10px;
}
/* ================= ERP FORM ROW ================= */
.form-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
/* ===== ERP FORM CONTROLS – SOFT ROUNDED ===== */
.form-control,
select.form-control,
textarea.form-control {
    height: 32px; /* compact height */
    padding: 4px 8px;
    font-size: 13px;
    border-radius: 6px; /* rounded corners */
    border: 1px solid #cfd8dc;
    box-shadow: none;
}


/* Buttons */
.btn {
    border-radius: 6px;
}

    /* 🔒 LABEL COLUMN – DO NOT SHRINK */
    .form-row label {
        flex: 0 0 220px; /* ✅ THIS IS THE REAL FIX */
        font-weight: 500;
        font-size: 13px;
        color: #333;
        white-space: nowrap;
    }

    /* INPUT COLUMN */
    .form-row input[type="text"],
    .form-row input[type="number"],
    .form-row textarea,
    .form-row select {
        flex: 0 0 300px; /* fixed input column */
        max-width: 300px;
        padding: 6px 8px;
        font-size: 13px;
    }

    /* CHECKBOX */
    .form-row input[type="checkbox"] {
        width: 18px;
        height: 18px;
        max-width:300px;
        align-items:flex-start;
    }

/* ACTION BUTTON ALIGNMENT */
.form-actions {
    margin-left: 220px;
    margin-top: 15px;
}

/* Textarea should grow naturally */
textarea.form-control {
    height: auto;
    min-height: 60px;
    resize: vertical;
}

/* Checkbox alignment */
.form-row input[type="checkbox"] {
    margin-top: 6px;
}

/* Label column – fixed width */
.form-label-fixed {
    width: 160px;
    font-weight: 500;
    padding-top: 6px;
}

/* Form row alignment */
.form-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

/* Action buttons spacing */
.form-actions {
    margin-left: 160px;
    margin-top: 10px;
}
/* ================================
   FINAL FORM ALIGNMENT TUNING
   ================================ */

/* Force all inputs to same width */
.form-control {
    width: 260px;
}

/* Description textarea same width as textbox */
textarea.form-control {
    width: 260px;
}

/* Perfect label alignment */
.form-row label {
    width: 160px;
    text-align: left;
    font-weight: 500;
    margin-left: 10px;
    padding-top: 6px;
}

/* Checkbox row alignment */
.form-row input[type="checkbox"] {
    margin-left: 0;
}

/* Buttons aligned with inputs */
.form-actions {
    margin-left: 160px;
}
/* Narrow inputs for contacts */
.erp-input-sm {
    max-width: 100px;
}

/* Medium text fields (name / occupation) */
.erp-input-md {
    max-width: 200px;
}

/* Category / Gender small selects */
.erp-select-sm {
    max-width: 120px;
}
/* ===== ERP INLINE FIELD ALIGNMENT ===== */
.erp-field-inline {
    display: grid;
    grid-template-columns: 160px 120px 140px;
    column-gap: 10px;
    align-items: center;
}

/* Input size helpers */
.input-sm {
    max-width: 120px;
}

.input-md {
    max-width: 160px;
}

.input-lg {
    width: 160px;
    max-width: none;
}
.erp-input,
.erp-select,
.erp-textarea {
    height: 28px;
    padding: 6px 8px;
    border: 1px solid #b5b5b5;
    border-radius: 4px;
    font-size: 12px;
    outline: none;
    box-shadow: none;
}

/* ===== PHOTO MODAL ===== */
.erp-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 1000;
}

.erp-modal-content {
    background: #fff;
    width: 360px;
    margin: 10% auto;
    border-radius: 6px;
    padding: 15px;
}

.erp-modal-header {
    font-weight: 600;
    margin-bottom: 10px;
}

.erp-modal-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.erp-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
}

/* ===== PHOTO PREVIEW ===== */
.student-photo-preview {
    width: 90px;
    height: 110px;
    object-fit: cover;
    border: 1px solid #cfcfcf;
    border-radius: 4px;
    margin-left: 12px;
}

.modal-preview {
    margin: auto;
}
/* ===== ERP TWO-COLUMN FIELD GROUP ===== */
.erp-field-group {
    display: grid;
    grid-template-columns: 1fr 1fr; /* EXACT 50% + 50% */
    gap: 12px;
    width: 200px;
}

    .erp-field-group .erp-input,
    .erp-field-group select {
        width: 200px;
    }

.erp-form-row .erp-input {
    flex: 1;
    min-width: 250px;
}
.erp-form-row select.erp-input {
    max-width: 200px;
}
/* 1️⃣ Base ERP form row */
.erp-form-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

    /* 2️⃣ Labels fixed width (already you have something similar) */
    .erp-form-row .erp-label {
        width: 180px;
        flex-shrink: 0;
    }

    /* 3️⃣ ALL inputs should stretch */
    .erp-form-row input.erp-input,
    .erp-form-row textarea.erp-input {
        flex: 1;
        width: 100%;
    }

    /* 4️⃣ BUT selects should be limited */
    .erp-form-row select.erp-input {
        flex: 0;
        max-width: 200px;
    }

    /* 5️⃣ Checkbox stays natural */
    .erp-form-row .erp-checkbox {
        flex: 0;
    }