/*
 * Path: /databass/css/100-table.css
 * ------------------------------------------------------------
 * Core table UI: layout, header, rows, hover effects, editing.
 * Caret-related styles removed. All other table styling preserved.
 */

/* ------------------------------------------------------------
   TABLE VIEW + CONTAINER
------------------------------------------------------------ */

.databass-table-view {
    width: 100% !important;
}

.databass-table-container {
    width: 100% !important;
    max-height: 90vh;
    padding: 0.6rem;
    margin: 0;
    overflow-x: hidden;
    box-sizing: border-box;
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.2s ease;
}

/* ------------------------------------------------------------
   TABLE
------------------------------------------------------------ */

.databass-table {
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--databass-color-secondary);
    border: none !important;
    border-collapse: collapse;
    border-spacing: 0;
    box-shadow: var(--databass-shadow-table);
}

/* ------------------------------------------------------------
   BODY CELLS + ROW HOVER
------------------------------------------------------------ */

.databass-table td,
.databass-table th {
    border: none !important;
    align-items: center !important;
    vertical-align: middle !important;
    text-align: center !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.databass-table tbody td {
    background: var(--databass-color-white) !important;
    white-space: normal;
    word-break: break-word;
    height: 2rem;
    padding: 0;
}

.databass-table tbody tr:hover td {
    background: var(--databass-color-grey1) !important;
    color: var(--databass-color-primary);

    /* Faux-bold without width change */
    font-weight: inherit;
    text-shadow:
        0.25px 0   0 currentColor,
       -0.25px 0   0 currentColor,
        0    0.25px 0 currentColor,
        0   -0.25px 0 currentColor;
}

.databass-table tr:not(:last-child) td {
    border-bottom: 1px solid var(--databass-color-grey2) !important;
}

/* ------------------------------------------------------------
   Column Drag — Remove row dividers inside landing pad
------------------------------------------------------------ */

body.databass-dragging
.databass-table
tbody
td[style*="visibility: hidden"] {
    border-bottom: none !important;
}

/* ------------------------------------------------------------
   HEADER (Caret UI removed)
------------------------------------------------------------ */

.databass-table thead th {
    position: sticky;
    top: 0;
    z-index: var(--databass-z-base);
    white-space: nowrap;
    text-transform: uppercase;
    background: var(--databass-color-primary);
    color: var(--databass-color-white);
    padding: 0 !important;
    border: none !important;
    box-shadow: 0 1px 0 var(--databass-color-grey1);
    height: 2rem;
}

/* ------------------------------------------------------------
   INLINE EDITING INPUT
------------------------------------------------------------ */

/* Remove padding for the entire row when a TD is being edited */
.databass-table tbody tr:has(td.databass-editing) td {
    padding: 0 !important;
}

/* Keep input padding independent */
.databass-inline-input,
.databass-inline-textarea {
    width: 100%;
    height: 100%;
    margin: 0;
    height: 1.8rem !important;

    border: none !important;
    border-radius: 0 !important;

    background: var(--databass-color-white);
    box-shadow: var(--databass-shadow-inset-field) !important;
    outline: none;

    text-align: center;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: inherit;
    color: var(--databass-color-primary);

    box-sizing: border-box;
    resize: none; /* for textarea */
}

/* ------------------------------------------------------------
   Column Drag — Reveal landing gap ONLY in hidden column
------------------------------------------------------------ */

body.databass-dragging .databass-table tbody td[style*="visibility: hidden"] {
    background: transparent !important;
}

.databass-table tbody td {
    transition: background-color 120ms ease;
}


/* ------------------------------------------------------------
   Dragging / Reordering columns
------------------------------------------------------------ */

body.databass-dragging {
  user-select: none;
  -webkit-user-select: none;
  cursor: grabbing;
}

/* ------------------------------------------------------------
   Dragging — HARD disable row/header hover + faux-bold
   (covers body OR html drag-state variants)
------------------------------------------------------------ */

body.databass-dragging .databass-table tbody tr:hover td,
body.databass-dragging .databass-table tbody td:hover,
html.databass-dragging .databass-table tbody tr:hover td,
html.databass-dragging .databass-table tbody td:hover,
html.databass-is-dragging .databass-table tbody tr:hover td,
html.databass-is-dragging .databass-table tbody td:hover {
    background: var(--databass-color-white) !important;
    color: inherit !important;
    text-shadow: none !important;
}

/* ------------------------------------------------------------
   Column Drag — Landing pad styling (opacity-based)
------------------------------------------------------------ */

/* Target ONLY the hidden (opacity:0) column cells */
body.databass-dragging
.databass-table
tbody
td[style*="opacity: 0"] {
    /* reveal table background */
    background: transparent !important;

    /* remove row separators inside the pad */
    border-bottom: none !important;

    /* solid primary-pink outline (full rectangle) */
    box-shadow:
        inset 2px 0 0 var(--databass-color-primary),
        inset -2px 0 0 var(--databass-color-primary),
        inset 0 2px 0 var(--databass-color-primary),
        inset 0 -2px 0 var(--databass-color-primary);
}

body.databass-dragging .databass-table tbody td.databass-gap-cell:hover {
  background: transparent !important;
  text-shadow: none !important;
}

/* ------------------------------------------------------------
   Column Drag — Column-hole outline (single, continuous)
------------------------------------------------------------ */

body.databass-dragging .databass-table {
  position: relative;
}

body.databass-dragging .databass-table::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  /* these are set from JS */
  left: var(--drag-hole-left);
  width: var(--drag-hole-width);

  border: 2px solid var(--databass-color-primary);
  pointer-events: none;
  z-index: 3;
}

/* ------------------------------------------------------------
   Column Drag — Clean gap appearance
------------------------------------------------------------ */

body.databass-dragging
.databass-table
tbody
td {
    /* normal rows untouched */
}

/* ONLY the gap column cells */
body.databass-dragging
.databass-table
tbody
td[style*="color: transparent"] {
    background: transparent !important;      /* reveal table pink */
    border-bottom: none !important;           /* remove grey lines */
}


/* ------------------------------------------------------------
   Column Drag — Lock gap cells (no hover reveal)
------------------------------------------------------------ */

body.databass-dragging
.databass-table
tbody
td[style*="color: transparent"],
body.databass-dragging
.databass-table
tbody
td[style*="color: transparent"]:hover {
    /* keep gap visually empty */
    color: transparent !important;
    text-shadow: none !important;

    /* prevent any hover-driven background/text repaint */
    background: transparent !important;
}

/* ------------------------------------------------------------
   Column Drag — Never reveal content in the gap on hover
------------------------------------------------------------ */

body.databass-dragging .databass-table tbody td.databass-gap-cell,
body.databass-dragging .databass-table tbody tr:hover td.databass-gap-cell,
body.databass-dragging .databass-table tbody td.databass-gap-cell:hover {
    color: transparent !important;
    text-shadow: none !important;
    background: transparent !important;
}

/* ------------------------------------------------------------
   Column Drag — Suppress sort caret / priority badge in gap
------------------------------------------------------------ */

/* Kill any pseudo-elements (caret, sort index, badges) */
body.databass-dragging
.databass-table
thead
th.databass-gap-cell::before,
body.databass-dragging
.databass-table
thead
th.databass-gap-cell::after,
body.databass-dragging
.databass-table
tbody
td.databass-gap-cell::before,
body.databass-dragging
.databass-table
tbody
td.databass-gap-cell::after {
    content: none !important;
    display: none !important;
}

/* ------------------------------------------------------------
   Column Drag — Suppress any sort badges/carets inside the gap
------------------------------------------------------------ */

/* Hide any real DOM badge elements inside the gap cells */
body.databass-dragging .databass-table th.databass-gap-cell *,
body.databass-dragging .databass-table td.databass-gap-cell * {
    opacity: 0 !important;
}

/* Kill pseudo-element badges anywhere inside the gap cells */
body.databass-dragging .databass-table th.databass-gap-cell *::before,
body.databass-dragging .databass-table th.databass-gap-cell *::after,
body.databass-dragging .databass-table td.databass-gap-cell *::before,
body.databass-dragging .databass-table td.databass-gap-cell *::after,
body.databass-dragging .databass-table th.databass-gap-cell::before,
body.databass-dragging .databass-table th.databass-gap-cell::after,
body.databass-dragging .databass-table td.databass-gap-cell::before,
body.databass-dragging .databass-table td.databass-gap-cell::after {
    content: none !important;
    display: none !important;
}

/* ------------------------------------------------------------
   Column Drop — Pink border flash (500ms fade)
------------------------------------------------------------ */

.databass-table td.databass-drop-flash,
.databass-table th.databass-drop-flash {
    box-shadow:
        inset 2px 0 0 var(--databass-color-primary),
        inset -2px 0 0 var(--databass-color-primary),
        inset 0 2px 0 var(--databass-color-primary),
        inset 0 -2px 0 var(--databass-color-primary);

    transition: box-shadow 500ms ease;
}

/* ------------------------------------------------------------
   Column Drop — Column-level flash (500ms fade)
------------------------------------------------------------ */

.databass-table {
  position: relative;
}

/* draw once, not per-cell */
.databass-table.databass-drop-flash::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;

  left: var(--drop-flash-left);
  width: var(--drop-flash-width);

  border: 2px solid var(--databass-color-primary);
  pointer-events: none;
  z-index: 6;

  opacity: 1;
  transition: opacity 500ms ease;
}

/* fade out */
.databass-table:not(.databass-drop-flash)::after {
  opacity: 0;
}



/* ------------------------------------------------------------
   DataBass Column Edges — DOM-Driven Only
------------------------------------------------------------ */

.databass-table thead th.is-first-col {
  border-top-left-radius: 0.5rem;
}

.databass-table thead th.is-last-col {
  border-top-right-radius: 0.5rem;
}

/* footer row only */
.databass-table tbody tr:last-child td.is-first-col {
  border-bottom-left-radius: 0.5rem;
}

.databass-table tbody tr:last-child td.is-last-col {
  border-bottom-right-radius: 0.5rem;
}