/* ============================================================================
   JAT shared form theme + label-on-top grid.  Loaded on every JATDev page.
   - Buttons use the logo green (#AFBC21) system-wide.
   - Smooth inputs, centered 95% card and the label-on-top 3-up grid apply to
     .mainForm forms.  The grid itself is switched on per-row by js/jat-forms.js,
     which leaves tables, the survey tree, and non-field rows untouched.
   ========================================================================== */

/* ---- Buttons: logo green across the system ---- */
.redBtn, input.redBtn, button.redBtn,
.blueBtn, input.blueBtn, button.blueBtn,
.greyishBtn, input.greyishBtn, .kLimeBtn, .greenBtn, .blackBtn, .btn_p, .button,
input[type="submit"], input[type="button"] {
    background:#AFBC21 !important; border:1px solid #AFBC21 !important; color:#ffffff !important;
    border-radius:7px !important; transition:background .15s ease;
}
.redBtn:hover, input.redBtn:hover, button.redBtn:hover,
.blueBtn:hover, .greyishBtn:hover, .kLimeBtn:hover, .greenBtn:hover, .blackBtn:hover, .btn_p:hover, .button:hover,
input[type="submit"]:hover, input[type="button"]:hover { background:#9aa71d !important; border-color:#9aa71d !important; }

/* ---- Form card / tabs ---- */
.mainForm { width:100%; }
.mainForm .TabHeading { border:0; padding:0; width:95%; margin:0 auto -1px; display:flex; align-items:center; gap:6px; overflow:visible; }
.mainForm .TabHeading .Heading { background:#AFBC21; color:#494949 !important; border:1px solid #AFBC21; border-bottom:none; border-radius:8px 8px 0 0; padding:9px 18px; font-weight:600; font-size:13px; text-decoration:none; line-height:1.2; }
.mainForm .TabHeading .Heading.current_tab { background:#AFBC21; color:#1f2937; border-color:#AFBC21; }
.mainForm .TabHeading .help { margin-left:auto; color:#6d7a12; font-weight:600; font-size:12px; border:1px solid #d9e29a; background:#f7fae7; padding:6px 12px; border-radius:6px; text-decoration:none; }
.mainForm .fluid .widget { background:#fff; border:1px solid #e6e8eb; border-radius:0 10px 10px 10px; box-shadow:0 1px 3px rgba(16,24,40,.06); padding:0; width:95%; margin:0 auto; }

/* ---- Controls: same width, soft borders, gentle green focus ---- */
.mainForm .rowElem [class*="span"] { box-sizing:border-box; max-width:100%; }
.mainForm input[type=text], .mainForm input[type=email], .mainForm input[type=number],
.mainForm input[type=password], .mainForm textarea, .mainForm select {
    width:100%; box-sizing:border-box; border:1px solid #dadfe5; border-radius:7px; padding:9px 12px;
    font-size:13px; color:#232b38; background:#fff; line-height:1.35; transition:border-color .15s ease, box-shadow .15s ease;
}
.mainForm input[type=text]:hover, .mainForm select:hover, .mainForm textarea:hover { border-color:#c3cad3; }
.mainForm input[type=text]:focus, .mainForm input[type=email]:focus, .mainForm input[type=number]:focus,
.mainForm textarea:focus, .mainForm select:focus { border-color:#AFBC21; box-shadow:0 0 0 3px rgba(175,188,33,.18); outline:none; }
.mainForm input[disabled], .mainForm select[disabled] { background:#f5f6f8; color:#8a919c; cursor:not-allowed; }
.mainForm input[type=radio], .mainForm input[type=checkbox] { width:auto; vertical-align:middle; }
.mainForm .req { color:#d92d20; margin-left:2px; }
.mainForm .select2-container { width:100% !important; box-sizing:border-box; }
.mainForm .selector, .mainForm .uniform, .mainForm .selector select { width:100% !important; box-sizing:border-box; }
.mainForm .selector span { width:auto !important; right:26px; }

/* Secondary buttons inside forms: green-outlined */
.mainForm .greenBtn, .mainForm .greyishBtn { background:#fff !important; border:1px solid #AFBC21 !important; color:#6d7a12 !important; border-radius:7px !important; }
.mainForm .greenBtn:hover, .mainForm .greyishBtn:hover { background:#f4f7e1 !important; }

/* ---- Label-on-top 3-up grid (rows tagged by js/jat-forms.js) ---- */
.mainForm .widget > .rowElem.jat-grid { display:flex; flex-wrap:wrap; gap:10px 30px; align-items:flex-start; padding:15px 24px 0; }
.mainForm .widget > .rowElem.jat-row-empty { display:none !important; }
.mainForm .widget > .rowElem.jat-actions { display:block; padding:0 24px 8px; }
.mainForm .jat-field { flex:1 1 220px; max-width:calc(33.333% - 15px); min-width:0; }
.mainForm .jat-field > label { display:block !important; float:none !important; width:auto !important; margin:0 0 6px !important; padding:0 !important; text-align:left !important; color:#495057; font-weight:600; font-size:13px; line-height:1.3; }
.mainForm .jat-field > [class*="span"] { display:block !important; float:none !important; width:100% !important; margin:0 !important; }
.mainForm .jat-field input[type=text], .mainForm .jat-field input[type=email], .mainForm .jat-field select, .mainForm .jat-field textarea, .mainForm .jat-field .select2-container { width:100% !important; }
.mainForm .jat-field.jat-nolabel > label { display:none !important; }
.mainForm .jat-field.jat-empty { display:none !important; }
.mainForm .jat-break { flex:0 0 100%; width:100%; height:0; margin:0; padding:0; border:0; }
.mainForm .img_upload { height:auto; object-fit: contain; }

/* ===== Tabler card + search-form layout for tbl-converted list pages (body.tbl only) =====
   Promoted from manage_reviewer.php so every converted management page (Reviewer, Question
   Bank, Employee Type, …) shares ONE uniform card + search layout. Every rule is
   body.tbl-scoped, so legacy (non-converted) pages are untouched. */
body.tbl .fluid > .widget{
    background:#fff;
    border:1px solid var(--tblr-border-color,#e6e7e9);
    border-radius:10px;
    box-shadow:0 1px 2px 0 rgba(0,0,0,.04);
    margin-bottom:1.5rem;
    overflow:hidden;
    width:100% !important;
}
body.tbl .fluid > .widget .head{
    background:#fff; border:0;
    border-bottom:1px solid var(--tblr-border-color,#e6e7e9);
    padding:.7rem 1.25rem; min-height:0;
}
body.tbl .fluid > .widget .head h5.iList{
    margin:0; background:none; padding:0;
    font-size:.85rem; font-weight:600; color:var(--tblr-body-color,#1f2937);
}
/* neutralize the legacy 98% bordered search box; use card padding instead */
body.tbl .search{ border:0; width:auto; margin:0; }
body.tbl .search .rowElem{
    border:0; padding:.75rem 1.25rem;
    display:flex; flex-wrap:wrap; align-items:center; gap:.5rem 1.25rem;
}
body.tbl .search .rowElem > label{
    width:60px; min-width:60px; float:none; text-align:left; margin:0; padding:0;
    font-size:.8rem; font-weight:500; color:var(--tblr-body-color,#1f2937);
}
body.tbl .search .rowElem .span3,
body.tbl .search .rowElem .span4,
body.tbl .search .rowElem .span5,
body.tbl .search .rowElem .span6,
body.tbl .search .rowElem .span7{
    width:auto; min-width:0; margin:0; float:none;
}
body.tbl .search .rowElem input[type=text]{ width:240px; max-width:100%; }
body.tbl .search .rowElem select,
body.tbl .search .rowElem .select2-container,
body.tbl .search .rowElem .selector{ width:240px !important; min-width:240px; max-width:100%; }
body.tbl .search .rowElem .three-radio{
    display:flex; align-items:center; gap:.25rem;
}
/* legacy CSS zeroes native input width; restore a visible size for the un-skinned radios */
body.tbl .search .rowElem .three-radio input[type=radio]{
    width:1.1em; min-width:1.1em; height:1.1em; margin:0; flex:0 0 auto;
}
body.tbl .search .rowElem .three-radio .radioLable{
    margin:0 1rem 0 .15rem; width:auto; line-height:1;
}