/* grid-modular-skeleton.v3.2.css
 * Split head/body tables with perfect column alignment. No-jump resizer.
 */
.grid-shell{ display: grid; grid-template-rows: auto 1fr; height: 100%; }
.grid-head{ overflow: hidden; background: #fafafa; border: 1px solid #e5e7eb; border-bottom: 0; }

.grid-body {
     overflow: auto; 
    border: 1px solid #e5e7eb; 
    border-top: 0; 

    /*overflow: auto;    
    position: relative;*/
}

.grid-head {
    position: relative;
    overflow: hidden;
    /*position: sticky;
    top: 0;
    z-index: 10;*/
}

.grid-table-head {
    will-change: transform;
    transform: translateX(0);
}

.grid-table{ width: 100%; border-collapse: collapse; table-layout: fixed; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; font-size: 14px; }

.grid-table-head thead th{ text-align: left; font-weight: 600; padding: 8px; border-bottom: 1px solid #e5e7eb; white-space: nowrap; position: relative; }
.grid-table-head thead .filter-row td,
.grid-table-head thead .batch-edit-row td{ background: #fcfcfc; padding: 6px 8px; border-bottom: 1px solid #eee; }

.grid-table-head thead .filter-row input.grid-filter,
.grid-table-head thead .batch-edit-row input,
.grid-table-head thead .batch-edit-row select{
  width: 100%; box-sizing: border-box; padding: 4px 6px; border: 1px solid #e5e7eb; border-radius: 4px; outline: none;
}

.grid-table-body tbody td{ padding: 4px 8px; border-bottom: 1px solid #f1f1f1; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 0; }
/*.grid-table-body tbody tr:hover{ background: #fafcff; }*/
.grid-table-body tbody tr.selected{ background: #e9f2ff; font-weight: bold; }
.grid-table-body tbody tr.row-local-edited{ background-image: linear-gradient(to right, rgba(255, 229, 153, .35), rgba(255,255,255,0)); }

/* db-pending marker */
.grid-table-body tbody td.db-pending { 
  position: relative; 
  background: #fff8e1; 
}
.grid-table-body tbody td.cell-invalid {
  position: relative;
  background: #f7eeee;
}
  /* ensam default: båda ligger på 4px */
  .grid-table-body tbody td.cell-invalid::after {
    content: "●";
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: .6em;
    color: #ca1010;
    line-height: 1;
    pointer-events: none;
  }

.grid-table-body tbody td.db-pending::before {
  content: "●";
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: .6em;
  color: #f39c12;
  line-height: 1;
  pointer-events: none;
}

.cell-not-in-options {
  color: #ee7712
}

/* endast när båda finns: flytta pending-pricken */
.grid-table-body tbody td.cell-invalid.db-pending::before {
  right: 12px;
}

.db-pending input, .db-pending select, .cell-invalid input, .cell-invalid select {
  background-color: #00000011 !important;
}

/* resizer */
.grid-table-head th .resizer{
  position: absolute; top: 0; right: 0; width: 10px; height: 100%;
  cursor: col-resize; user-select: none; -webkit-user-drag: none; z-index: 20; background: transparent;
}
.grid-resizing, .grid-resizing *{ cursor: col-resize !important; }

/* sorting arrows */
.grid-table-head th .sort-arrow::after{ content: ''; display: inline-block; margin-left: 6px; transform: translateY(-1px); opacity: .6; }
.grid-table-head th[data-asc="1"] .sort-arrow::after{ content: '▲'; }
.grid-table-head th[data-asc="-1"] .sort-arrow::after{ content: '▼'; }