/* Tabler coexistence shim for JATDev.
   Tabler's CSS (incl. Bootstrap Reboot) is loaded on every page so the shared
   navbar is styled everywhere. This file keeps pages that are NOT yet converted
   (body:not(.tbl)) looking like the legacy app; converted pages (body.tbl) get
   the full Tabler treatment. Loaded AFTER tabler.min.css, BEFORE tabler-brand.css.
   Add targeted fixes here as visual leaks surface during rollout. */

/* 1. Restore legacy base typography + background on unconverted bodies
      (Reboot would otherwise bump font-size to ~14px and replace the bg). */
body:not(.tbl) {
    background: url(../images/bodyBg.jpg) repeat;
    font-size: 12px;
    color: #424242;
    font-family: "Inter", sans-serif;
    line-height: 20px;
}

/* 2. Legacy headings/anchors reset by Reboot on unconverted pages — keep neutral. */
body:not(.tbl) a { color: inherit; }
body:not(.tbl) h1, body:not(.tbl) h2, body:not(.tbl) h3,
body:not(.tbl) h4, body:not(.tbl) h5, body:not(.tbl) h6 { margin: 0; font-weight: normal; }

/* 3. The shared Tabler navbar (rendered in header.php) sits flush at the top. */
.navbar.jat-navbar { margin-bottom: 0; }
body:not(.tbl) .content { padding-top: 12px; }

/* 4. Converted pages: give the Tabler page-body a little breathing room under the navbar. */
body.tbl .page-body { padding-top: 1rem; }

/* 5. #footer is now position:relative globally (main.css), so it stays in flow.
      On converted pages trim its top margin so it sits flush under the content. */
body.tbl #footer { margin-top: 0; }

/* ============================================================================
   Converted-page (body.tbl) styling — makes legacy .mainForm/.widget/.tableStatic
   structures read as Tabler without heavy per-page markup surgery.
   ============================================================================ */

/* Legacy .widget acting as a card (fallback for widgets not wrapped as .card). */
body.tbl .mainForm .widget {
    background: #fff;
    border: 1px solid var(--tblr-border-color, #e6e8eb);
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
    margin: 0 0 1rem;
    padding: 0;
}
body.tbl .mainForm .widget .head { padding: .75rem 1rem; border-bottom: 1px solid var(--tblr-border-color, #e6e8eb); }
body.tbl .mainForm .widget .head h5,
body.tbl .mainForm .widget .head .iList { margin: 0; font-size: .875rem; font-weight: 600; }
body.tbl .mainForm .widget .rowElem,
body.tbl .mainForm .widget .jat-grid { padding-left: 1rem; padding-right: 1rem; border-top: 0; }

/* Form controls (classes added by jat-forms.js under body.tbl). */
body.tbl .form-control,
body.tbl .form-select { padding: .4375rem .75rem; font-size: .875rem; line-height: 1.4285714; border-radius: 4px; }
body.tbl .mainForm .radioLable { margin-right: 1rem; font-size: .875rem; font-weight: 400; }
body.tbl .mainForm label { font-size: .8125rem; font-weight: 600; color: #495057; }
body.tbl .req { color: var(--tblr-danger, #d63939); }

/* Buttons: legacy classes already lime via jat-forms.css; give them Tabler sizing. */
body.tbl .mainForm .redBtn,
body.tbl .mainForm .greyishBtn,
body.tbl .mainForm .greenBtn,
body.tbl .mainForm .blueBtn,
body.tbl .mainForm .button,
body.tbl .mainForm input[type=submit] {
    display: inline-block; padding: .4375rem 1rem; font-size: .875rem; font-weight: 500;
    border-radius: 4px; cursor: pointer; margin-right: .5rem;
}

/* Legacy table -> Tabler look. */
body.tbl table.tableStatic { width: 100%; margin: 0; color: var(--tblr-body-color); border-collapse: collapse; }
body.tbl table.tableStatic thead th {
    padding: .5rem .75rem; font-size: .625rem; text-transform: uppercase; letter-spacing: .04em;
    color: #667382; border-bottom: 1px solid var(--tblr-border-color, #e6e8eb); text-align: left; background: transparent;
}
body.tbl table.tableStatic tbody td { padding: .5rem .75rem; border-top: 1px solid var(--tblr-border-color, #e6e8eb); vertical-align: middle; }
body.tbl table.tableStatic tbody tr:hover { background: rgba(0, 0, 0, .02); }

/* Row action icons -> compact Tabler icon buttons. */
body.tbl .btn14 { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 4px; border: 1px solid var(--tblr-border-color, #e6e8eb); margin-right: .25rem; }
body.tbl .btn14:hover { background: rgba(0, 0, 0, .04); }
body.tbl .btn14 img { width: 16px; height: 16px; }

/* Pagination shim — PS_Pagination emits bare <li class="active|disabled|enable"><a>. */
body.tbl .datatable-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-top: .75rem; }
body.tbl .dataTables_info { font-size: .8125rem; color: #667382; }
body.tbl .dataTables_paginate { display: inline-flex; align-items: center; gap: .25rem; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
body.tbl .dataTables_paginate li { list-style: none; display: inline-flex; }
body.tbl .dataTables_paginate li a {
    display: inline-flex; min-width: 2rem; height: 2rem; align-items: center; justify-content: center;
    padding: 0 .5rem; border: 1px solid var(--tblr-border-color, #e6e8eb); border-radius: 4px;
    color: var(--tblr-body-color); text-decoration: none; font-size: .8125rem; background: #fff;
}
body.tbl .dataTables_paginate li.active a { background: var(--tblr-primary); border-color: var(--tblr-primary); color: #1f2937; }
body.tbl .dataTables_paginate li.disabled a { opacity: .45; pointer-events: none; }
body.tbl .dataTables_paginate .per_page,
body.tbl .dataTables_paginate .go_text { padding: .3rem .5rem; border: 1px solid var(--tblr-border-color, #e6e8eb); border-radius: 4px; font-size: .8125rem; height: 2rem; }

/* Legacy tab heading -> Tabler nav-tabs (for pages still using .TabHeading .Heading). */
body.tbl .TabHeading { display: flex; gap: .25rem; border-bottom: 1px solid var(--tblr-border-color, #e6e8eb); margin-bottom: 1rem; padding: 0; }
body.tbl .TabHeading .Heading {
    padding: .5rem .9rem; border: 1px solid transparent; border-bottom: 0; border-radius: 6px 6px 0 0;
    background: transparent !important; color: #667382 !important; font-weight: 600; font-size: .8125rem; text-decoration: none;
}
body.tbl .TabHeading .Heading.current_tab { background: #fff !important; color: #1f2937 !important; border-color: var(--tblr-border-color, #e6e8eb) !important; margin-bottom: -1px; }