.jdgridbox {
    /* border: solid 2px #3498db; */
    border: solid 1px rgba(0, 0, 0, 0.06);
    padding: 5px;
    position: relative;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.35);
}

.jdgridwait {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: rgba(255, 255, 255, 0.6);
    text-align: center;
    z-index: 200;
    padding-top: 150px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 14px;
}

.jdgridwait > div {
    font-size: 26px;
}

.jdgridwait > div i {
    color:#3b82f6;
}

.jdgridtoolbar {
    background: rgba(0, 0, 0, 0.02);
    padding: 10px 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-family: "Inter", "Nunito", sans-serif;
}

.jdgridtoolbar > div{
    display: flex;
    flex-direction: row;
    align-items: center;
    flex:1;    
}

.jdgridbtns{
    justify-content: flex-start;
}
.jdgridbtns > a, .jdgridbtns > div{
    margin-right: 5px;
}

.jdgridpager{
    justify-content: center;
}

.jdgridnumpage {
    width:30px;
    text-align: center;
}

.jdgridnbpage {
    width: 50px;
    font-size: 10px;
    height: 25px;
    border: 0;
    background-color: rgba(0, 0, 0, 0.03);
    color: #1e293b;
    border-radius: 6px;
  }

.jdgridrecords{
    justify-content: flex-end;
    font-size: 12px;
    color: #64748b;
}

.jdgridnbbypage {
    font-size: 12px;
}


.jdgridpager > div > a {
    border: solid 1px rgba(0, 0, 0, 0.08);
    padding: 3px 10px;
    margin: 0 3px;
    border-radius: 6px;
    color: #64748b;
    transition: all 0.2s ease;
}

.jdgridpager > div > a:not(.disabled):hover {
    background-color: rgba(59, 130, 246, 0.08);
    color: #1d4ed8;
    border-color: rgba(59, 130, 246, 0.2);
}

.jdgridpager > div > a.disabled {
    color: rgba(0, 0, 0, 0.15);
}

.jdgridtbbox {
    width: 100%;
    overflow: auto;
    /* min-height: 600px;
    height: calc(100vh - 300px); */
    /* height: calc(100vh - 300px); */  /* RULE TO REVIEW TO AUTOMAT CORRECT HEIGHT */  
}
.jdgridtb {    
    min-width: 100%;
    border-collapse: collapse;
    margin-top:10px;
    table-layout: fixed;
    background-color: transparent;
    font-family: "Inter", "Nunito", sans-serif;
}

.jdgridtberror {
    text-align: center;
    padding: 30px;
    color: #ef4444;
    font-size: 12px;
}

.jdfixed {
  position: fixed !important;
  top: 0;
  width: 100% !important;
  z-index: 999;
  pointer-events: auto;
}

.jdgridtb thead{
  position: sticky;
  top: 0px;
}

.jdgridtb thead th,
.jdgridtb thead td {
  position: relative;
  z-index: 1;
}

.jdgridtb th, .jdgridtb td {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
    padding: 10px 8px;
    text-align: center;
    font-size: 12px;
    overflow: hidden;
    background-color: transparent;
    color: #1e293b;
}
.jdgridtb tr.filterrow td {
    overflow: visible;
}

.jdgridtb tbody tr:nth-child(2n+1) > td {
    background-color: rgba(0, 0, 0, 0.015);
}

.jdgridtb th {
    cursor: pointer;
    position:relative;
    user-select: none; 
    -moz-user-select: none;
    -webkit-text-select: none;
    -webkit-user-select: none;
    box-shadow: none;
    background: rgba(240, 243, 250, 0.97);
    color: #475569;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.02em;
    text-transform: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.10);
}

.jdgridtb th:active {
    cursor: grabbing;
}

.jdgridtb thead li {
    text-align: left;
}

.jdgridtb tbody tr:hover td {
    background-color: rgba(59, 130, 246, 0.08);
}

.jdgridtb th:hover .separator {
    display: block;
}

.jdgridtb .separator {
    display: none;
    width: 4px;
    background-color: #3b82f6;
    cursor: col-resize;    
    height: 100%;
    position: absolute;
    top: 0;
    right: 0px;
    z-index: 1;
    opacity: 0.6;
    border-radius: 2px;
}

.jdgridsort {
    position: absolute;
    right: 5px;
    top: 10px;
    color: #3b82f6;
  }

.jdthover {
    box-shadow: -1px 3px 8px rgba(0, 0, 0, 0.06);
    background-color: rgba(59, 130, 246, 0.06) !important;
}

.jdgridbox .jdmodaltbchk .modal-dialog{
    width:400px;
}

.jdgridbox .jdmodaltbchk .modal-body, .jdgridbox .modal-jdgrid-updaterec .modal-body {
    max-height: 70vh;
    overflow-y: scroll;
}

.jdpadinp{padding:5px 20px}

.jdmodaltbchk tr, .jdmodaltbchk tr {
    cursor: pointer;
}

.jdmodaltbchk tr > td:nth-child(1) {
    width: 40px;
}

.jdgridbox .jdinpselmul {
    background-color: transparent;
    font-size: 11px;
    color: #3b82f6;
    cursor: pointer;
}

.jdgridtb thead td {
    position:relative;
    box-shadow: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(240, 243, 250, 0.97);
}

.jdgridtb thead > td > input {
    cursor: pointer;
}

.jdgridtb thead .jdgdtrange {
    white-space: nowrap;
    cursor: pointer;
}
.jdgridtb thead .jdgdtrange span {
    font-size: 10px;
}

.jdgridtb .jdclearfilter {
    position: absolute;
    top:16px;
    right:12px;
    z-index: 95;
    opacity: 0.6;
    
}

.jdgridtb thead td > i {
    position: absolute;
    right: 14px;
    top: 19px;
    font-size: 12px;
    color: #3b82f6;
    cursor: pointer;
}

.jdgridtb td .label {
    display: block;
    overflow: hidden;
}

.jdgridtb thead .chosen-container-single .chosen-single div b {
    background:none;
}

.jdgridtb thead select {
    appearance: none;
    -webkit-appearance: none;
}

.daterangepicker.dropdown-menu {
    z-index: 9999;
}

.jdstrfilterbar, .jdstrorderbar {font-size:11px;padding:5px;line-height: 30px;color:#64748b;}
.jdstrorderbar{padding-right: 20px;}
.jdgridfilterbar, .jdgridorderbar {font-size:90%;color:#3b82f6;display: inline-block; vertical-align: middle;}
.jdgridfilterbar .fltrline {border: dotted 1px rgba(0,0,0,0.1);padding: 4px 4px;border-radius: 6px;}
.jdgridfilterbar .fltrfld {background-color: rgba(34,197,94,0.10);padding: 2px 4px;border-radius: 3px;color:#16a34a;}
.jdgridfilterbar .fltrval, .jdgridorderbar .fltrval {background-color: rgba(234,179,8,0.10);padding: 2px 4px;box-shadow: none;color:#a16207;border-radius: 4px;}
.jdgridfilterbar .fltrandor, .jdgridorderbar .fltrandor {margin: 0 9px;padding: 2px 4px;border-radius: 50%;background-color: rgba(239,68,68,0.10);color: #dc2626;font-size: 10px;}
.jdgridfilterbar .fltropegrp {margin: 0 9px;padding: 2px;border-radius: 50%;background-color: rgba(139,92,246,0.10);color: #7c3aed;font-size: 10px;}

/* .jdgridtbbox thead tr > th:nth-child(1), .jdgridtbbox thead tr > td:nth-child(1), .jdgridtbbox tbody tr > td:nth-child(1) { */
.jdgridfreez {    
    position: sticky !important;
    left: 0px;
    z-index: 3;    
}
.jdshadowleft {
    box-shadow: 3px 0px 8px rgba(0, 0, 0, 0.06);
}

.jdgridtb thead th:hover a.jdgridfreezbt, .jdgridtb thead th.jdgridfreez a.jdgridfreezbt {
    display: block;
}
.jdgridfreezbt {
    display: none;
    font-size: 10px;
    position:absolute;
    left:5px;
    bottom:0px;
    color:#ddd;
}

.jdviewsbar {
    padding: 5px;
    border-bottom: solid 1px rgba(0, 0, 0, 0.05);
    /* background-color: #f5f5f5; */
}

.jdviewsbar .jdgtoprightbtns {
    float: right;
}

.jdviewsbar > a, .jdviewsbar > div {
    margin-right: 5px;
    display: inline-block;
}
.jdviewsbar > div.jdviewsbtns{
    display: block;
    padding: 5px 0;
}

.jdgloadcat:hover > i, .jdgloadview:hover > i {
    display: inline-block;
}

.jdgridbox textarea {
    min-height:100px;
}


.form-control.jdgliveinp {
    font-size: 12px;
}

.jdglivezone.display-none {
    display: none !important;
}

.jdgliveinp {
    background: transparent;
    border: none;
    text-align: center;
    padding: 5px;
    max-height: 100px;
    overflow: auto;
    color: #1e293b;
}

.jdgliveinp > * {
    margin: auto;
}

.jdgliveinp > img {
    width: 98%;
}

.jdgliveinp:hover {
    border: solid 1px rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.02);
}

.jdgliveinp:focus {
    text-align: left;
    background: rgba(255, 255, 255, 0.5);
    border: solid 1px rgba(59, 130, 246, 0.3);
    color: #1e293b;
}

.jdgicosubgrid {
    font-size: 16px;
    color: #3b82f6;
    cursor: pointer;
}

.jdgsubgridtd {
    height: 500px;
    background: rgba(59, 130, 246, 0.05) !important;
    overflow: auto !important;
    padding: 10px;
}

.jdgsubgridtd > iframe {
    width: 100%;
    height: 100%;
}

.jdgfixfull {
    position: fixed;
    top: 0;
    background: rgba(255, 255, 255, 0.95);
    left: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 1050;
    right: 0;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

.jdgfixfull .jdgridtbbox {
    height: calc(100vh - 165px) !important;
}

.jdstatfixfull{
    position: fixed;
    top: 0;
    z-index: 1000;
    width: 100%;
    left: 0;
    height: 100vh;
}

.jdgblcimg {
    position:relative;
}
.jdgblcimg > a {
    position: absolute;
    right:20px;
}
.jdgblcimg > img {
    max-width: 60%;
    max-width: 120px;
}

#nbchk_grid {font-weight: 600;background-color: rgba(234,179,8,0.10);padding: 2px 4px;box-shadow: none;padding: 5px;border-radius: 10px;display: none;margin: -5px;color:#a16207;}

/* REPONSIVE */
@media screen and (max-width: 1000px) {
    .jdgridtoolbar {
        display: block;
    }
    .jdgridtoolbar > div{
        justify-content: center;
    }
    .jdgridpager{
        margin:10px;
    }
    .jdgridbox.table-responsive{
        width:auto !important;
    }
    .jdgridfreez{
        position:inherit !important;
    }
}

@media screen and (max-height: 500px) {
    .jdgridtbbox {
        height: auto !important;
    }
}



/* THEME COMPACT */
.jdgridbox.compact .jdgridtb th, 
.jdgridbox.compact .jdgridtb td {
    font-size: 11px;
    padding:3px 5px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.jdgridbox.compact .jdgridtb th {    
    padding:5px !important;
}

.jdgridbox.compact .form-control{
    font-size: 11px;
    height: 28px;
}

.jdgridbox.compact .jdgridtb .jdclearfilter {
    top:11px;
}

/* THE OLDSCHOOL */
.jdgridbox.oldschool .jdgridtb {
    font-size: 11px;
    font-family: "Inter", "Nunito", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.jdgridbox.oldschool .jdgridtb th {
    background: rgba(0, 0, 0, 0.02);
    color: #64748b;
    padding: 8px 4px;
    border: none;
    border-bottom: 2px solid rgba(0, 0, 0, 0.06);
}

.jdgridbox.oldschool .jdgridtb th:hover {
    background: rgba(59, 130, 246, 0.08);
    color: #1d4ed8;
}

.jdgridbox.oldschool .jdgridtb .separator {
    background-color: rgba(0, 0, 0, 0.15);
}

.jdgridbox.oldschool .jdgridtb td {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.jdgridbox.oldschool .jdgridfreez {
    box-shadow: 3px 0px 8px rgba(0, 0, 0, 0.06);
}

.jdgridbox.oldschool .jdshadowleft {
    box-shadow: 3px 0px 8px rgba(0, 0, 0, 0.06);
}

.jdgridbox.oldschool .jdgridtb .filterrow td {
    background: rgba(0, 0, 0, 0.015);
}

.jdgridbox.oldschool .form-control{
    font-size: 11px;
    height: 28px;
}

.jdgridbox.oldschool .jdgridtb .jdclearfilter {
    top:11px;
}

/* =================================================================
   Grid Form Controls — full bordered grey inputs (not bottom-only)
   ================================================================= */

.jdgridtb .form-control,
.jdgridtb input[type="text"],
.jdgridtb input[type="number"],
.jdgridtb select.form-control,
.jdgridtb textarea.form-control {
    border: 1px solid #cbd5e1 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    color: #1e293b;
    font-size: 12px;
    padding: 4px 8px;
    min-height: 28px;
    height: 28px;
}

.jdgridtb .form-control:focus,
.jdgridtb input[type="text"]:focus,
.jdgridtb input[type="number"]:focus,
.jdgridtb select.form-control:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15) !important;
    background-color: #fff !important;
}

/* Grid modals — opaque white, not transparent glass */
/* Grid modals — near-opaque white (modals are appended to body) */
.modal-jdgrid-columns .modal-content,
.modal-jdgrid-multiselect .modal-content,
.modal-jdgrid-filter .modal-content,
.modal-jdgrid-updaterec .modal-content,
.modal-jdgrid-category .modal-content,
.modal-jdgrid-views .modal-content {
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Fix z-index for grid modals (appended to body) */
.modal-jdgrid-columns,
.modal-jdgrid-multiselect,
.modal-jdgrid-filter,
.modal-jdgrid-updaterec,
.modal-jdgrid-category,
.modal-jdgrid-views {
    z-index: 1050 !important;
}

/* =================================================================
   DARK MODE — activated via body.v2-dark
   ================================================================= */

body.v2-dark .jdgridbox {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
}

body.v2-dark .jdgridwait {
    background: rgba(15, 23, 42, 0.6);
}

body.v2-dark .jdgridwait > div i { color: #60a5fa; }

body.v2-dark .jdgridtoolbar {
    background: rgba(255, 255, 255, 0.04);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

body.v2-dark .jdgridnbpage {
    background-color: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
}

body.v2-dark .jdgridrecords { color: #94a3b8; }

body.v2-dark .jdgridpager > div > a {
    border-color: rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}

body.v2-dark .jdgridpager > div > a:not(.disabled):hover {
    background-color: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}

body.v2-dark .jdgridpager > div > a.disabled { color: rgba(255, 255, 255, 0.2); }

body.v2-dark .jdgridtb th,
body.v2-dark .jdgridtb td {
    border-bottom-color: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
}

body.v2-dark .jdgridtb tbody tr:nth-child(2n+1) > td {
    background-color: rgba(255, 255, 255, 0.02);
}

body.v2-dark .jdgridtb th {
    background: rgba(255, 255, 255, 0.04);
    color: #94a3b8;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.v2-dark .jdgridtb tbody tr:hover td {
    background-color: rgba(59, 130, 246, 0.08);
}

body.v2-dark .jdgliveinp { color: #e2e8f0; }
body.v2-dark .jdgliveinp:hover {
    border-color: rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.03);
}
body.v2-dark .jdgliveinp:focus {
    background: rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
}

body.v2-dark .jdgicosubgrid { color: #60a5fa; }

body.v2-dark .jdgfixfull {
    background: rgba(15, 23, 42, 0.95);
}

body.v2-dark .jdshadowleft { box-shadow: 3px 0px 8px rgba(0, 0, 0, 0.3); }
body.v2-dark .jdthover { box-shadow: -1px 3px 8px rgba(0, 0, 0, 0.3); }

body.v2-dark .jdstrfilterbar,
body.v2-dark .jdstrorderbar { color: #94a3b8; }
body.v2-dark .jdgridfilterbar,
body.v2-dark .jdgridorderbar { color: #60a5fa; }
body.v2-dark .jdgridfilterbar .fltrfld { background-color: rgba(34,197,94,0.12); color: #86efac; }
body.v2-dark .jdgridfilterbar .fltrval,
body.v2-dark .jdgridorderbar .fltrval { background-color: rgba(234,179,8,0.12); color: #fde047; }
body.v2-dark .jdgridfilterbar .fltrandor,
body.v2-dark .jdgridorderbar .fltrandor { background-color: rgba(239,68,68,0.2); color: #fca5a5; }
body.v2-dark .jdgridfilterbar .fltropegrp { background-color: rgba(139,92,246,0.2); color: #c4b5fd; }

body.v2-dark .jdviewsbar { border-bottom-color: rgba(255, 255, 255, 0.06); }
body.v2-dark #nbchk_grid { background-color: rgba(234,179,8,0.15); color: #fde047; }

body.v2-dark .jdgridbox.compact .jdgridtb th,
body.v2-dark .jdgridbox.compact .jdgridtb td { border-bottom-color: rgba(255, 255, 255, 0.04); }

body.v2-dark .jdgridbox.oldschool .jdgridtb th {
    background: rgba(255, 255, 255, 0.06);
    color: #94a3b8;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.v2-dark .jdgridbox.oldschool .jdgridtb th:hover { background: rgba(59, 130, 246, 0.12); color: #93c5fd; }
body.v2-dark .jdgridbox.oldschool .jdgridtb .separator { background-color: rgba(255, 255, 255, 0.3); }
body.v2-dark .jdgridbox.oldschool .jdgridtb td { border-bottom-color: rgba(255, 255, 255, 0.06); }
body.v2-dark .jdgridbox.oldschool .jdgridfreez { box-shadow: 3px 0px 8px rgba(0, 0, 0, 0.3); }
body.v2-dark .jdgridbox.oldschool .jdshadowleft { box-shadow: 3px 0px 8px rgba(0, 0, 0, 0.3); }
body.v2-dark .jdgridbox.oldschool .jdgridtb .filterrow td { background: rgba(255, 255, 255, 0.03); }

/* Dark mode: opaque dark thead */
body.v2-dark .jdgridtb th {
    background: rgba(15, 23, 42, 0.95);
}

body.v2-dark .jdgridtb thead td {
    background: rgba(15, 23, 42, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* Dark mode: grid inputs */
body.v2-dark .jdgridtb .form-control,
body.v2-dark .jdgridtb input[type="text"],
body.v2-dark .jdgridtb input[type="number"],
body.v2-dark .jdgridtb select.form-control {
    border-color: rgba(255, 255, 255, 0.15) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0;
}

body.v2-dark .jdgridtb .form-control:focus,
body.v2-dark .jdgridtb input[type="text"]:focus {
    border-color: #3b82f6 !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

/* Dark mode: grid modals opaque */
body.v2-dark .modal-jdgrid-columns .modal-content,
body.v2-dark .modal-jdgrid-multiselect .modal-content,
body.v2-dark .modal-jdgrid-filter .modal-content,
body.v2-dark .modal-jdgrid-updaterec .modal-content,
body.v2-dark .modal-jdgrid-category .modal-content,
body.v2-dark .modal-jdgrid-views .modal-content {
    background: rgba(15, 23, 42, 0.97) !important;
}