[v-cloak] {
      display: none !important;
    }

    ::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    ::-webkit-scrollbar-track {
      background: transparent;
    }

    ::-webkit-scrollbar-thumb {
      background: #d1d5db;
      border-radius: 0;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #9ca3af;
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background-color: #f9fafb;
    }

    table {
      border-collapse: separate;
      border-spacing: 0;
      width: 100%;
    }

    th,
    td {
      border-bottom: 1px solid #e5e7eb;
      border-right: 1px solid #e5e7eb;
      padding: 0;
      margin: 0;
    }

    th:first-child,
    td:first-child {
      border-left: 1px solid #e5e7eb;
    }

    th {
      border-top: 1px solid #e5e7eb;
      background: #f9fafb;
      position: sticky;
      top: 0;
      z-index: 40;
      /* Ensure it stays above scrolling data */
      font-weight: 600;
      color: #6b7280;
      text-align: left;
      padding: 0 12px;
      font-size: 0.75rem;
      letter-spacing: 0.05em;
      user-select: none;
      border-bottom: 1px solid #e5e7eb;
      border-right: 1px solid #e5e7eb;
      height: 40px;
    }

    th.sticky-col {
      z-index: 50;
      /* Corner cell must be highest */
      left: 0;
    }

    td input {
      display: block;
      width: 100%;
      height: 100%;
      padding: 8px 12px;
      border: none;
      background: transparent;
      outline: none;
      font-size: 0.875rem;
      color: #1f2937;
      box-sizing: border-box;
    }

    td input::placeholder {
      color: #9ca3af;
      opacity: 0.5;
    }

    td input:focus {
      background: #fff;
      box-shadow: inset 0 0 0 2px #3b82f6;
      z-index: 20;
    }

    .table-container {
      max-width: 100%;
      border-right: 1px solid #e5e7eb;
      scrollbar-gutter: stable;
    }

    table {
      table-layout: fixed;
      width: auto;
      border-collapse: separate;
      border-spacing: 0;
      border-top: 1px solid #e5e7eb;
    }

    th,
    td {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      border-bottom: 1px solid #e5e7eb;
      border-right: 1px solid #e5e7eb;
      height: 40px !important;
      max-height: 40px !important;
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    /* Ensure all direct children of td are constrained */
    td>* {
      max-height: 40px !important;
      overflow: hidden !important;
    }

    td:hover {
      z-index: 5;
    }

    th:hover {
      z-index: 45;
    }

    tfoot td {
      background: #f9fafb;
      font-weight: 600;
      font-size: 0.75rem;
      padding: 8px 12px;
      color: #374151;
      border-top: 2px solid #e5e7eb;
      height: auto !important;
      max-height: none !important;
      overflow: visible !important;
    }

    td {
      background: white;
    }

    .virtual-spacer td {
      border: none !important;
      padding: 0 !important;
      height: auto !important;
      max-height: none !important;
    }

    .row-selected td {
      background-color: #dbeafe !important;
    }

    .sticky-col {
      position: sticky;
      left: 0;
      z-index: 20;
      background: #f9fafb;
      border-right: 2px solid #e5e7eb;
    }

    /* Popover Animation */
    .popover-enter-active,
    .popover-leave-active {
      transition: opacity 0.15s ease, transform 0.15s ease;
    }

    .popover-enter-from,
    .popover-leave-to {
      opacity: 0;
      transform: translateY(-8px);
    }

    /* Insertion Styles */
    .insertion-trigger-v {
      position: absolute;
      top: 0;
      right: -6px;
      bottom: 0;
      width: 12px;
      z-index: 30;
    }

    /* Full height for resizing */
    .resizer-zone {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      cursor: col-resize;
      z-index: 50;
    }

    .insertion-line-v {
      position: absolute;
      left: 5px;
      top: 0;
      bottom: -100vh;
      height: 200vh;
      width: 2px;
      background: #3b82f6;
      opacity: 0;
      transition: opacity 0.1s;
      pointer-events: none;
      z-index: 100;
    }

    .insertion-trigger-v:hover .insertion-line-v,
    .resizer-active-line {
      opacity: 1 !important;
    }

    .resizer-active-line {
      background: #3b82f6 !important;
      width: 3px !important;
    }

    .resizer-zone:hover~.insertion-line-v {
      opacity: 1;
      background: #9ca3af;
    }

    /* Drag and Drop Indicators */
    .drag-target-indicator {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 4px;
      background: #3b82f6;
      z-index: 100;
      pointer-events: none;
    }

    .drag-target-indicator.side-left {
      left: 0;
    }

    .drag-target-indicator.side-right {
      right: 0;
    }

    th[draggable="true"] {
      cursor: grab;
    }

    th[draggable="true"]:active {
      cursor: grabbing;
    }

    .drag-handle {
      padding: 2px;
      border-radius: 2px;
      opacity: 0.6;
      transition: all 0.2s ease;
      color: #9ca3af;
    }

    .group:hover .drag-handle {
      opacity: 1;
      color: #4b5563;
    }

    .drag-handle:hover {
      background: #f3f4f6;
      color: #2563eb !important;
    }

    .dragging-th {
      opacity: 0.4;
    }

    .insertion-trigger-h {
      position: absolute;
      left: 0;
      right: 0;
      bottom: -6px;
      height: 12px;
      z-index: 30;
      cursor: pointer;
    }

    .insertion-line-h {
      position: absolute;
      top: 5px;
      left: 0;
      right: 0;
      height: 2px;
      background: #3b82f6;
      opacity: 0;
      transition: opacity 0.2s;
      pointer-events: none;
    }

    .insertion-btn-h {
      position: absolute;
      left: -11px;
      top: 50%;
      transform: translateY(-50%);
      width: 22px;
      height: 22px;
      background: #3b82f6;
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      opacity: 0;
      transition: all 0.2s;
      border: 2px solid white;
      box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
      pointer-events: auto;
      z-index: 60;
    }

    .insertion-btn-h:hover {
      transform: translateY(-50%) scale(1.1);
      background: #2563eb;
    }

    .insertion-trigger-h:hover .insertion-line-h,
    .insertion-trigger-h:hover .insertion-btn-h {
      opacity: 1;
    }