/*
 * This file is part of TREB.
 *
 * TREB is free software: you can redistribute it and/or modify it under the 
 * terms of the GNU General Public License as published by the Free Software 
 * Foundation, either version 3 of the License, or (at your option) any 
 * later version.
 *
 * TREB is distributed in the hope that it will be useful, but WITHOUT ANY 
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS 
 * FOR A PARTICULAR PURPOSE. See the GNU General Public License for more 
 * details.
 *
 * You should have received a copy of the GNU General Public License along 
 * with TREB. If not, see <https://www.gnu.org/licenses/>. 
 *
 * Copyright 2022-2026 trebco, llc. 
 * info@treb.app
 * 
 */

// sass vars only

@use 'z-index.scss' as *;
@use 'defaults.scss' as *;

// clean, no imports (but use sass vars)

@use 'mouse-mask.scss';
@use 'note.scss';
@use 'table.scss';
@use 'tooltip.scss';
@use 'dropdown-select.scss';
@use 'autocomplete.scss';
@use 'formula-bar.scss';
@use 'tab-bar.scss';
@use 'overlay-editor.scss';

.treb-main.treb-main {

  .treb-spill-border {

    position: absolute;
    pointer-events: none;

    // patch for ios safari bug
    transform: translateZ(0);

    rect {
      stroke: var(--treb-spill-border-color, rgb(92, 92, 224));
      stroke-dasharray: var(--treb-spill-border-dasharray, 0);
      fill: none;
      stroke-width: var(--treb-spill-border-width, 1px);
      z-index: $z-index-spill-border;
      filter: var(--treb-spill-border-filter, drop-shadow( 3px 3px 2px rgba(0, 0, 0, .5)));
    }
  }


  /* 
    * new: we need the rendering buffer to inherit font size. so 
    * we add it as a child of contents, but it's not displayed.
    * still seems to paint OK.
    */
  .treb-buffer-canvas {
    position: absolute;
    display: none;
  }

  .treb-spreadsheet-body {
    grid-area: 2/1/3/2;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
    display: flex;
    position: relative;
    z-index: 1;
  }

  .treb-grid {

    flex-grow: 1;
    order: 2;
    position: relative;
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    outline: none;

    overscroll-behavior: none;

    // --- merging from old (split) layout ---

    display: grid;
    grid-template-columns: 100px auto;
    grid-template-rows: 20px auto;


    .tile-cover {

      /** specific layout for main grid cover */
      &.grid-cover {
        grid-area: 2/2/3/3;
      }

      /** specific layout for column header cover */
      &.column-header-cover {
        grid-area: 1/2/2/3;
        position: -webkit-sticky;
        position: sticky;
        top: 0px;
      }

      /** specific layout for row header cover */
      &.row-header-cover {
        grid-area: 2/1/3/2;
        position: -webkit-sticky;
        position: sticky;
        left: 0px;
      }
    }

    /** selection stacks over the grid but under the cover */
    .treb-grid-selection {
      grid-area: 1/1/2/2;
    }

    /** corner node to cover headers as they scroll across/down */
    .treb-corner {
      grid-area: 1/1/2/2;
      position: -webkit-sticky;
      position: sticky;
    }

    /** contains row header tiles */
    .treb-left-header {
      grid-area: 2/1/3/2;
      position: -webkit-sticky;
      position: sticky;
      display: grid;
      grid-template-columns: auto;
      grid-template-rows: auto;
    }

    /** contains column header tiles */
    .treb-top-header {
      grid-area: 1/2/2/3;
      position: -webkit-sticky;
      position: sticky;
      display: grid;
      grid-template-columns: auto;
      grid-template-rows: auto;
    }

    /** contains main grid tiles */
    .treb-contents {
      grid-area: 2/2/3/3;
      display: grid;
      grid-template-columns: auto;
      grid-template-rows: auto;
    }


    // ---

    &.safari {

      // WTF is this stuff?

      &::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 7px;
        height: 7px;
      }

      &::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: rgba(0, 0, 0, .25);
        -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
      }

    }

    canvas {
      border: 0;
      margin: 0;
      padding: 0;
      background: transparent;
    }

    .nub-select {
      cursor: crosshair;
    }

    .link-pointer {
      cursor: pointer;
    }

    .mock-selection-node {
      background: red;
      position: fixed;
      left: -100px;
      top: -100px;
    }

    /** covers for canvas nodes to intercept events */
    .tile-cover {
      background: transparent;
      position: relative;
      z-index: $z-index-tile-cover;

      /** specific layout for column header cover */
      &.column-header-cover {

        z-index: $z-index-header-tile-cover;

        /** style is attached when mousing over a column boundary */
        &.resize {
          cursor: col-resize;
        }

      }

      /** specific layout for row header cover */
      &.row-header-cover {

        z-index: $z-index-header-tile-cover;

        /** style is attached when mousing over a row boundary */
        &.resize {
          cursor: row-resize;
        }

      }

    }

    .treb-annotation-container,
    .frozen-annotation-container {
      position: absolute;
      top: 0px;
      left: 0px;

      z-index: $z-index-annotations;
      pointer-events: none;

      .annotation {
        position: absolute;
        overflow: hidden;
        pointer-events: auto;
        background: rgba(255, 255, 255, .5);
        border: 1px solid #999;
        z-index: 1;

        .annotation-content {
          position: absolute;
          top: 0px;
          left: 0px;
          height: 100%;
          width: 100%;
          font-family: inherit;
          font-size: inherit;
          z-index: 1;
        }

        .annotation-move-target {
          position: absolute;
          z-index: 2;
          cursor: move;
          top: 0px;
          left: 0px;
          height: 10%;
          min-height: 14px;
          width: 100%;
        }

        .annotation-resize-target {
          position: absolute;
          z-index: 3;
          cursor: nwse-resize;
          bottom: 0px;
          right: 0px;
          width: 10%;
          height: 10%;
          min-height: 14px;
          min-width: 14px;
        }

        &:focus,
        &.retain-focus,
        &.clone-focus {
          // outline: 2px solid lightblue;
          // box-shadow: 0 0 0 3px #0ea5e954;
          box-shadow: 0px 0px 0px 3px rgba(14, 165, 233, 0.33); // IE can't handle RGBA hex
        }

      }

      /** what is this? */
      .move-buffer {
        position: absolute;
        border: 1px solid red;
        height: 10%;
        top: 0px;
        width: 100%;
        left: 0px;
        cursor: move;
      }

    }

    /** selection stacks over the grid but under the cover */
    .treb-grid-selection {
      background: transparent;
      position: absolute;
      z-index: $z-index-grid-selection;
      transform: translateZ(0); // patch for ios safari bug
      -moz-transform: scale(1); // firefox anti-blur
    }

    /** separate selection node for frozen rows/columns (needs different stacking) */
    .frozen-selection {

      /* background: transparent; */
      transition: background .33s;

      position: absolute;
      z-index: $z-index-frozen-selection;
      overflow: hidden; // needed for IE11 (put in legacy?) 
      transform: translateZ(0); // patch for ios safari bug
      -moz-transform: scale(1); // firefox anti-blur
      pointer-events: none;

      &.frozen-selection-rows {
        border-bottom: 1px solid transparent;
      }

      &.frozen-selection-columns {
        border-right: 1px solid transparent;
      }

    }

    /** separate annotation node for frozen row/column/corner */
    .frozen-annotation-container {

      position: absolute;
      top: 0px;
      left: 0px;
      overflow: hidden;
      width: 100%;
      height: 100%;

    }

    /**
     * corner node to cover headers as they scroll across/down. this is now
     * used for freeze panes; row/column headers are rendered in the corner
     * and in the case of both frozen rows and columns, the fixed bit is
     * rendered to the corner.
     */
    .treb-corner {

      top: 0px;
      left: 0px;
      z-index: $z-index-corner;

      canvas {
        position: absolute;
        top: 0px;
        left: 0px;
        pointer-events: none;
      }

    }

    /** contains row header tiles */
    .treb-left-header {
      left: 0px;
      z-index: $z-index-headers;
      pointer-events: none;
    }

    /** contains column header tiles */
    .treb-top-header {
      top: 0px;
      z-index: $z-index-headers;
      pointer-events: none;
    }

    /** contains main grid tiles */
    .treb-contents {
      height: 2000px;
      width: 2000px;
    }

  }

}