/* sipv-styles.css */

/* #region Top-level ------------------------------------------------------- */

#WhiteboardWrapper {
  background-color: whitesmoke;
}

.sipv-svg {
  background: white;
  --cursor-default:default;
  --cursor-product:var(--cursor-default);
  --cursor-location:var(--cursor-default);
}

svg#sipv-svg {
  background: white; /*#e8e8e8;*/
  cursor: var(--cursor-default);
}

/* This prevents text from being selected in SVG, 
   even on loooong taps with touch.
   Discussion: https://gist.github.com/23maverick23/64b3b587c88697558fac
*/

/* Apply font-family 'gilroy-regular' for normal text and for bold use
  'gilroy-bold' font family. It will work fine when integrated with dtools as in
   dtools we have these fonts. */
svg text {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-family: gilroy-regular; /* as per spec */
  fill: #01162F; /* as per spec */
}

/* :: is the 'after' selector - not sure if this is intended: */
svg text::selection {
  background: none;
}

/* #endregion Top-level ---------------------------------------------------- */

/* Page._createGridBackground applies a drop-shadow to the background
   grid that effectively creates a border.
*/
/*.sipv-bkgnd-grid {
  stroke: lightgray;
  stroke-width: 1px;
} */
/* LOCATION/ROOM SHAPES */
.sipv-loc {
    /* 2023.02.21 */
    cursor: var(--cursor-location);
    /*cursor: move;*/
    /*cursor: move;*/ /* 2020.11. 20 */
    /*cursor: pointer;*/
    /*stroke: #2C3539;*/ /* Gun metal gray */
    /*stroke-width: 10px;*/
    fill: transparent; /* 2021.04.21 - none makes loc interiors not-selectable! */
    /*fill: none;*/
    text-anchor: start;
}
.sipv-loc text {
  stroke: none;
  /*fill: #2C3539;*/ /* Gun metal gray */  /*#b8b894;*/
  user-select: none;
  pointer-events: none; /* 2021.01.15 */
}
/* https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events */

/* What we really want here is for the whole area of a location to register
  mouse:hover, but not accept clicks. I don't know if this is possible.
*/

/*.sipv-loc:hover > path {
  pointer-events: stroke;
}*/

/* "The location border is black (#01162F) and is 4px thick." */
.sipv-loc > path.outline {    
    /* Since we've implemented class="quick-drag" and the associated
       drag filter, we don't need this any more:
    pointer-events: stroke; */
    stroke: #01162F; /* as per spec */
    stroke-width: 4px; /* as per spec */
    stroke-linejoin: round;
  }

  /* Test: 2020.12.15 */
  .sipv-loc.show-all > path.outline {
    stroke-opacity: 0.2;
    fill: #1998D9; /*#1998D9;  dodgerblue*/
    fill-opacity: 0.2;
    /*stroke: red;*/
  }
/* Test: 2020.12.15 */

/* 2020.11.12
   Experiment/Hack to show (non-rectangular) outlines on 
   mouse-over-location to show invisible paths. The "highlight
   rectangle" seems innacurate when paths are non-rectangular,
   and users are often hiding paths.
*/
    g.sipv-loc:hover > path.outline {
      stroke-opacity: 1.0;
    }

/*    g.sipv-loc.drag-over .outline {
      stroke-opacity: 1.0;
    }*/

  /* So now, we want to see if we can turn on the outlines of ALL 
     locations any time a product shape is selected (including while
     being dragged). Since we set the class value in code, we could
     ultimately use code to show/hide the location outlines anyway.
  */
  
  /*section:has(> div[data-status~=finished]) + section > div:matches(.blink, .spin)*/

  /*.sipv-page*/
  svg:matches( g[class~="sipv-selected"] ) svg .sipv-background {
    fill: red;
    /*stroke-opacity: 1.0;*/
  }

/* This works, by the way:
  .sipv-page g[class~="sipv-selected"] > circle {*/
  /* Ok, the ~= works for 'partially equals', I guess */
  /*fill: red;
}*/

/* ...experiment */

.sipv-loc.sipv-mark-deleted > path.outline {
  stroke-opacity: 0.6;
}
.sipv-loc > path.bkgnd-outline {
  cursor: move;
  /* The background outline normally has no fill anyway,
     however, we set the fill temporarily on drag-over, 
     so we want the full mouse interaction. */
  /* pointer-events: stroke; */ /*all;*/
  stroke: #FFFFFF;
  stroke-width: 20px;
  stroke-opacity: 0.0;
  stroke-linejoin: round;
  fill: none;
}

.sipv-rgn {
  fill: none;
  cursor: pointer;
}
.sipv-rgn > path.outline {
  pointer-events: stroke;
  /*stroke: #01162F;*/ /* as per spec */
  stroke-width: 6px; /* as per spec */
  stroke-opacity: 0.33;
  stroke-linecap: butt; /* butt, round, square */
  stroke-dasharray:  18 3 6 3;
  /*vector-effect: non-scaling-stroke;*/
}
.sipv-rgn > path.bkgnd-outline {
  pointer-events: stroke;
  stroke: #FFFFFF;
  stroke-width: 20px;
  stroke-opacity: 0.0;
}

/*stroke; visiblePainted*/

/*.sipv-loc > path:active {
  pointer-events: none;
}*/


.sipv-hand-cursor {
  /*cursor: url('cursors/hand-cursor.cur'), auto;*/
  cursor: url('/cursors/hand-cursor.cur'), auto;
}

/* I don't think this is used: */
/*.sipv-rotate-cursor {
  cursor: url('/cursors/rotate-cursor.cur'), auto;
}*/


.sipv-algn-rect-bkgnd {
  stroke: white;
  stroke-opacity: 0; 
  stroke-width: 6px;
  fill: none;
}
.sipv-algn-rect {
  stroke: #1998D9; /*dodgerblue*/
  stroke-opacity: 0; /* eventually clear! */
  /*stroke-dasharray: 4 8;*/
  /*stroke-dasharray: 5;*/
  stroke-width: 4px;
  /*stroke-linecap: square;*/ /*round;*/
  fill: none;  
}
.sipv-selected > .sipv-algn-rect,
.sipv-selected > .sipv-algn-rect-bkgnd {
  stroke-opacity: 0.9;
  /* 2022.10.06 CR
     Removed blue fill for selected shapes.
     TODO: there are probably a few overrides of this (e.g. Location shapes)
     that no longer need to override!
  */
  /*fill: #1998D9;*/
  /*fill-opacity: 0.2;*/
 
  /* Animated selection rectangle... */
  /*stroke-dashoffset: 10;*/
  /*animation: selectedAnimation 0.5s linear infinite;*/
}
/* 2022.10.04 CR
  No blue fill when selecting paths
*/
.sipv-path.sipv-selected .sipv-algn-rect,
.sipv-path.sipv-selected .sipv-algn-rect-bkgnd {
  fill: none;
  stroke-opacity: 0.1; /* This doesn't really matter because the alignment box has a strong outline. */
}

.sipv-selected.sipv-locked > .sipv-algn-rect {
  stroke: #FF0000;
}



.sipv-product {
    /* 2023.02.21 */
    cursor: var(--cursor-product);
    /*cursor: move;*/ /* 2020.11.24 */
}
.sipv-path {
  cursor: move;
}
.sipv-cvg {
  cursor: move;
}

/*.sipv-selected > .sipv-algn-rect-bkgnd,
.sipv-selected:hover .sipv-algn-rect,
.sipv-product.sipv-selected:hover .sipv-algn-rect,
.sipv-product.sipv-selected:hover .sipv-algn-rect-bkgnd {
  stroke-opacity: 0.9;
}*/

/* 2022.10.04 CR
  Made mouse-over on paths similar to locations: highlight
  the outline of the selection rectangle, but don't fill
  the whole thing.
*/
.sipv-path:hover rect[class*="sipv-algn-rect"] {
  stroke-opacity: 0.2;
}


.sipv-loc:hover rect[class*="sipv-algn-rect"],
.sipv-loc:hover path[class*="sipv-algn-rect"], /* 2020.11.17 Experiment */
.sipv-ink:hover rect[class*="sipv-algn-rect"],
.sipv-product:hover rect[class*="sipv-algn-rect"],
.sipv-to-marker:hover rect[class*="sipv-algn-rect"],
.sipv-text:hover rect[class*="sipv-algn-rect"] {
    stroke-opacity: 0.2;
    fill: #1998D9;
    fill-opacity: 0.2;
    /* 2020.11.24
    Removed for experimentation
  stroke-opacity: 0.2;
  fill: #1998D9;
  fill-opacity: 0.2;
      */
}

  /* 2022.09.30 
     It would be nice to put the translucent blue on the 'background
     path', but it has local styles set in the <svg> code, so this won't work: */
  /*
  .sipv-path:hover path[class*="bkgnd-outline"] {
      stroke: red;
  }
  */

/* ========================================================================= */
/* PathShape text-label, and special dimension line visibility               */
/* PathShape text bubble is hidden by default... */
.sipv-path .text-label {
  visibility: hidden;
}

/*...but shows on hover or selection, or if the shape
  is the special dimension line: */
.sipv-path:hover .text-label,
.sipv-path.sipv-selected .text-label,
.sipv-path.page-scale-dimension-line .text-label,
.sipv-path.dimension-line .text-label {
  visibility: visible;
}

/* If the layer is hidden--we can check if attribute 'style' contains 
   the word 'hidden' somewhere using *= --then we need to turn off the
   text label for the dimension line: */
.sipv-layer[style*="hidden"] .sipv-path .text-label {
  visibility: hidden;
}
/*                                                                           */
/* ========================================================================= */



g.sipv-loc.drag-over .outline {
  stroke-opacity: 0.2;
  fill: #1998D9;
  fill-opacity: 0.2;
}

/*2021.01.15*/
g.sipv-loc.drag-over .bkgnd-outline {
  fill: #1998D9;
  fill-opacity: 0.01;
}


/*.sipv-product*/
/* Not sure this makes any sense: selected and hover? */
g .sipv-selected:hover rect[class*="sipv-algn-rect"] {
  stroke-opacity: 0.9;
  fill-opacity: 0.2;
}

/* 2020.11.20 START */
g.sipv-loc.sipv-selected .outline { /* path[class*="outline"] */
  stroke-opacity: 0.2;
  fill: #1998D9;
  fill-opacity: 0.2;
}
/*g.sipv-loc.drag-over .outline*/
g.sipv-loc:hover .outline {
  fill: #1998D9;
  fill-opacity: 0.2;
  stroke-width: 6px;
}
g.sipv-loc:hover .sipv-algn-rect,
g.sipv-loc:hover .sipv-algn-rect-bkgnd {
  fill: none;
}

g.sipv-loc.sipv-selected .sipv-algn-rect,
g.sipv-loc.sipv-selected .sipv-algn-rect-bkgnd { /* rect[class*="sipv-algn-rect"] */
  fill: none;
}
g.sipv-loc.sipv-selected .bkgnd-outline { /* path[class="bkgnd-outline"] */
  stroke-opacity: 0;
}
/* 2020.11.20 END */

.sipv-bkgnd-ink {
/*.sipv-loc > path.bkgnd-outline { */
  pointer-events: stroke;
  stroke: #FFFFFF;
  stroke-width: 20px;
  stroke-opacity: 0.0;
}
/*.sipv-algn-rect-bkgnd*/
/*g.sipv-selected .sipv-algn-rect,
g.sipv-selected .sipv-algn-rect-bkgnd,
g.sipv-selected:hover .sipv-algn-rect,
g.sipv-selected:hover .sipv-algn-rect-bkgnd {
  stroke-opacity: 0.9;
}*/
/*g:hover .sipv-algn-rect,
g:hover .sipv-algn-rect-bkgnd {
  stroke-opacity: 0.3;
}*/
/*.sipv-ink:hover .sipv-algn-rect,
.sipv-ink:hover .sipv-algn-rect-bkgnd,
.sipv-loc:hover .sipv-algn-rect,
.sipv-loc:hover .sipv-algn-rect-bkgnd,
.sipv-product:hover .sipv-algn-rect,
.sipv-product:hover .sipv-algn-rect-bkgnd,
.sipv-text:hover .sipv-algn-rect,
.sipv-text:hover .sipv-algn-rect-bkgnd {
  stroke-opacity: 0.3;
}*/
/*.sipv-loc:hover .sipv-algn-rect {
  fill: #1998D9;
  fill-opacity: 0.2;
}*/
@keyframes selectedAnimation {
  from {
    /* stroke-dashoffset doesn't work in Edge *?
 /* Make the animation length twice as long as the dash array */
    stroke-dashoffset: 10;
    /* stroke: cornflowerblue; */
  }

  to {
    /* stroke-dasharray: 1 4; */
    stroke-dashoffset: 0;
    /* stroke: blue; */
  }
}

/* #region Selection Handle Styles ----------------------------------------- */

.sipv-handles {
  cursor: move;
}

.sipv-handle {
  stroke: black;
  stroke-width: 1;
  stroke-dasharray: 0;
  animation: none;
  fill-opacity: 1;
}
.sipv-rotate-path-circle {
  visibility: hidden;
}
.sipv-rotate-handle:hover {
  cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAScgAAEnIBXmVb4wAAABl0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC4yMfEgaZUAAACySURBVEhLtZCBDoQgDEP9/5/mIMdk1K7D3M7kaelalni11kL60z98dgo1jbHg1yXUHNjlbAnzIp7GLCMq42fIfoCS1wyby8x2gLAqGthBlkiCiOWRR+4WQUBhHdVdQoQUWY+alVCzEmpWskSX6l9GZL3va4ayMCPr3AEEgxFZfonDi33mpLPEDKuCn5u2c8R+cCUs4szwGQY3Sdk8NlNQM+Lt5QNqKv6+4C3UrISadbTrA9Hc8lRZl/SiAAAAAElFTkSuQmCC) 12 12, auto;
}
.sipv-rotate-handle:hover > .sipv-rotate-path-circle {
  visibility: visible;
}

/* #endregion Selection Handle Styles -------------------------------------- */

/* CONTROLS.JS GENERATED ELEMENTS */



.sictrls-div {
  width: 130px;
  height: 320px;
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.sictrls-div.hidden {
  height: 0;
  width: 0;
}

.sictrls-svg {
  width: 100%;
  height: 320px;
  background: none;
  /*background: rgba(0,0,0,0.01);*/
  /*pointer-events: none; */ /* this turns off ALL events for the whole controls svg */
}
.sictrls-ctrl-grp path {
  fill: lightgray;
}
.sictrls-ctrl-grp:hover path {
  fill: rgba(0,0,0, 0.3);
}
.sictrls-ctrl-rect {
  /*fill: dodgerblue;*/
  /*fill: rgba(30, 144, 255, 0.1);*/
  fill: floralwhite;
  stroke: gray;
  stroke-width: 0.5px;
}
/*.sictrls-ctrl-rect:hover {
  fill: rgba(30, 144, 255, 0.4);
}*/

.sictrls-ctrl-path {
  stroke: black;
  fill: none;
}