dees-catalog/ts_web/elements/dees-table/styles.ts

import { cssManager, css, type CSSResult } from '@design.estate/dees-element';
import { cssGeistFontFamily } from '../00fonts.js';

export const tableStyles: CSSResult[] = [
  cssManager.defaultStyles,
  css`
      :host {
        display: block;
        width: 100%;
      }

      .mainbox {
        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
        font-family: ${cssGeistFontFamily};
        font-weight: 400;
        font-size: 14px;
        display: block;
        width: 100%;
        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        border-radius: 8px;
        overflow: hidden;
        cursor: default;
      }

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 24px;
        min-height: 64px;
        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
      }

      .headingContainer {
        flex: 1;
      }

      .heading {
        line-height: 1.5;
      }

      .heading1 {
        font-size: 18px;
        font-weight: 600;
        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
        letter-spacing: -0.025em;
      }
      
      .heading2 {
        font-size: 14px;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
        margin-top: 2px;
      }

      .headingSeparation {
        display: none;
      }

      .headerActions {
        user-select: none;
        display: flex;
        flex-direction: row;
        gap: 8px;
      }
      
      .headerAction {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        font-size: 14px;
        font-weight: 500;
        color: ${cssManager.bdTheme('hsl(0 0% 45.1%)', 'hsl(0 0% 63.9%)')};
        background: transparent;
        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        border-radius: 6px;
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .headerAction:hover {
        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
        border-color: ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
      }

      .headerAction dees-icon {
        width: 14px;
        height: 14px;
      }

      .searchGrid {
        display: grid;
        grid-gap: 16px;
        grid-template-columns: 1fr max-content;
        padding: 16px 24px;
        background: ${cssManager.bdTheme('hsl(210 40% 98%)', 'hsl(0 0% 3.9%)')};
        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        transition: all 0.2s ease;
      }

      @media (max-width: 900px) {
        .searchGrid {
          grid-template-columns: 1fr;
        }
      }

      /* let search mode size to content (no forced width) */

      .searchGrid.hidden {
        height: 0px;
        opacity: 0;
        overflow: hidden;
        padding: 0px 24px;
        border-bottom-width: 0px;
      }

      .tableScroll {
        /* enable horizontal scroll only when content exceeds width */
        overflow-x: auto;
        /* prevent vertical scroll inside the table container */
        overflow-y: hidden;
        /* avoid reserving extra space for classic scrollbars where possible */
        scrollbar-gutter: stable both-edges;
      }
      /* Hide horizontal scrollbar entirely when not using sticky header */
      :host(:not([sticky-header])) .tableScroll {
        -ms-overflow-style: none; /* IE/Edge */
        scrollbar-width: none;   /* Firefox (hides both axes) */
      }
      :host(:not([sticky-header])) .tableScroll::-webkit-scrollbar {
        display: none; /* Chrome/Safari */
      }
      /* In sticky-header mode, hide only the horizontal scrollbar in WebKit/Blink */
      :host([sticky-header]) .tableScroll::-webkit-scrollbar:horizontal {
        height: 0px;
      }
      :host([sticky-header]) .tableScroll {
        max-height: var(--table-max-height, 360px);
        overflow: auto;
      }

      table {
        /* allow table to grow wider than container so actions column can stick */
        width: max-content;
        min-width: 100%;
        caption-side: bottom;
        font-size: 14px;
        border-collapse: separate;
        border-spacing: 0;
      }
      
      .noDataSet {
        padding: 48px 24px;
        text-align: center;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 56.9%)', 'hsl(215 20.2% 55.1%)')};
      }
      
      thead {
        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 79.8%)', 'hsl(0 0% 20.9%)')};
      }
      :host([sticky-header]) thead th {
        position: sticky;
        top: 0;
        z-index: 2;
      }
      
      tbody tr {
        transition: background-color 0.15s ease;
        position: relative;
      }
      
      /* Default horizontal lines (bottom border only) */
      tbody tr {
        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
      }
      
      tbody tr:last-child {
        border-bottom: none;
      }
      
      /* Full horizontal lines when enabled */
      :host([show-horizontal-lines]) tbody tr {
        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
      }
      
      :host([show-horizontal-lines]) tbody tr:first-child {
        border-top: none;
      }
      
      :host([show-horizontal-lines]) tbody tr:last-child {
        border-bottom: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
      }
      
      tbody tr:hover {
        background: ${cssManager.bdTheme('hsl(210 40% 96.1% / 0.5)', 'hsl(0 0% 14.9% / 0.5)')};
      }
      
      /* Column hover effect for better traceability */
      td {
        position: relative;
      }
      
      td::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: ${cssManager.bdTheme('hsl(210 40% 96.1% / 0.3)', 'hsl(0 0% 14.9% / 0.3)')};
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.15s ease;
        z-index: -1;
      }
      
      td:hover::after {
        opacity: 1;
      }
      
      /* Grid mode - shows both vertical and horizontal lines */
      :host([show-grid]) th {
        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        border-left: none;
        border-top: none;
      }
      
      :host([show-grid]) td {
        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        border-left: none;
        border-top: none;
      }
      
      :host([show-grid]) th:first-child,
      :host([show-grid]) td:first-child {
        border-left: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
      }
      
      :host([show-grid]) tbody tr:first-child td {
        border-top: none;
      }

      /* Sticky Actions column (right pinned) */
      thead th.actionsCol,
      tbody td.actionsCol {
        position: sticky;
        right: 0;
        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 3.9%)')};
      }
      thead th.actionsCol { z-index: 3; }
      tbody td.actionsCol {
        z-index: 1;
        box-shadow: -1px 0 0 0 ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
      }
      
      tbody tr.selected {
        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
      }

      tbody tr.hasAttachment {
        background: ${cssManager.bdTheme('hsl(142.1 76.2% 36.3% / 0.1)', 'hsl(142.1 76.2% 36.3% / 0.1)')};
      }

      th {
        height: 48px;
        padding: 12px 24px;
        text-align: left;
        font-weight: 500;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
        letter-spacing: -0.01em;
      }
      
      :host([show-vertical-lines]) th {
        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
      }
      
      td {
        padding: 12px 24px;
        vertical-align: middle;
        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
      }
      
      :host([show-vertical-lines]) td {
        border-right: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
      }
      
      th:first-child,
      td:first-child {
        padding-left: 24px;
      }
      
      th:last-child,
      td:last-child {
        padding-right: 24px;
      }
      
      :host([show-vertical-lines]) th:last-child,
      :host([show-vertical-lines]) td:last-child {
        border-right: none;
      }
      
      .innerCellContainer {
        position: relative;
        min-height: 24px;
        line-height: 24px;
      }
      td input {
        position: absolute;
        top: 4px;
        bottom: 4px;
        left: 20px;
        right: 20px;
        width: calc(100% - 40px);
        height: calc(100% - 8px);
        padding: 0 12px;
        outline: none;
        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        border-radius: 6px;
        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
        font-family: inherit;
        font-size: inherit;
        font-weight: inherit;
        transition: all 0.15s ease;
        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
      }
      
      td input:focus {
        border-color: ${cssManager.bdTheme('hsl(222.2 47.4% 51.2%)', 'hsl(217.2 91.2% 59.8%)')};
        outline: 2px solid transparent;
        outline-offset: 2px;
        box-shadow: 0 0 0 2px ${cssManager.bdTheme('hsl(222.2 47.4% 51.2% / 0.2)', 'hsl(217.2 91.2% 59.8% / 0.2)')};
      }

      /* filter row */
      thead tr.filtersRow th {
        padding: 8px 12px 12px 12px;
      }
      thead tr.filtersRow th input[type='text'] {
        width: 100%;
        box-sizing: border-box;
        padding: 6px 8px;
        font-size: 13px;
        border-radius: 6px;
        border: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
        background: ${cssManager.bdTheme('hsl(0 0% 100%)', 'hsl(0 0% 9%)')};
        color: ${cssManager.bdTheme('hsl(0 0% 3.9%)', 'hsl(0 0% 98%)')};
      }
      .actionsContainer {
        display: flex;
        flex-direction: row;
        gap: 4px;
      }
      
      .action {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
        cursor: pointer;
        transition: all 0.15s ease;
      }

      .action:hover {
        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 14.9%)')};
        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
      }

      .action:active {
        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 11.8%)')};
      }
      
      .action dees-icon {
        width: 16px;
        height: 16px;
      }

      .footer {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 52px;
        padding: 0 24px;
        font-size: 14px;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
        background: ${cssManager.bdTheme('hsl(210 40% 96.1%)', 'hsl(0 0% 9%)')};
        border-top: 1px solid ${cssManager.bdTheme('hsl(0 0% 89.8%)', 'hsl(0 0% 14.9%)')};
      }

      .tableStatistics {
        font-weight: 500;
      }

      .footerActions {
        display: flex;
        gap: 8px;
      }

      .footerActions .footerAction {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        font-weight: 500;
        color: ${cssManager.bdTheme('hsl(215.4 16.3% 46.9%)', 'hsl(215 20.2% 65.1%)')};
        border-radius: 6px;
        cursor: pointer;
        user-select: none;
        transition: all 0.15s ease;
      }

      .footerActions .footerAction:hover {
        background: ${cssManager.bdTheme('hsl(0 0% 95.1%)', 'hsl(0 0% 14.9%)')};
        color: ${cssManager.bdTheme('hsl(0 0% 9%)', 'hsl(0 0% 95%)')};
      }

      .footerActions .footerAction dees-icon {
        width: 14px;
        height: 14px;
      }
  `,
];