/*
    FoosFit Progressive Web App
	Developed by Aptus Engineering, Inc. for WeFoos LLC
	Author(s): Narendran Muraleedharan <narendran.m@aptus.aero>
			   Rakshith Subramanyam <rakshith.s@aptus.aero>
			   James Guerra <james.g@aptus.aero>

	__DISCLAIMER__
	THIS SOFTWARE IS PROVIDED "AS IS" AND ANY EXPRESSED OR IMPLIED WARRANTIES,
	INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY
	AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
	REGENTS OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
	SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
	PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
	OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
	WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
	OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF
	ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/



/* General Messages */
#foosfit-message {
	display:none;
	position:fixed;
	font-size:15px;
	top:50%;
	margin-left:30%;
	color:black;
	max-width:70%;
	border-style:solid;
	border-width:1px;
	border-color:grey;
	border-radius:10px;
	background-color:white;
	z-index:100;
}

#foosfit-message i {
	font-size:20px;
	margin-left:2px;
	margin-top:2px;
}

#foosfit-message p {
	margin:0;
	padding:0;
	margin-left:30px;
	margin-right:30px;
}


/* Feature Update Messages to User */
#foosfit-update-message {
	display:none;
	position:fixed;
	font-size:15px;
	top:50%;
	margin-left:30%;
	color:black;
	max-width:70%;
	border-style:solid;
	border-width:1px;
	border-color:grey;
	border-radius:10px;
	background-color:white;
	z-index:100;
}

#foosfit-update-message i {
	font-size:20px;
	margin-left:2px;
	margin-top:2px;
}

#foosfit-update-message p {
	margin:0;
	padding:0;
	margin-left:30px;
	margin-right:30px;
}




#panel-controls {
    width: 100%;
    height: calc(100% - 53px);
    position: absolute;
    top: 50pt;
}





.slider {
    height: 100%;
    margin: auto;
	width: 10px;
}

.noUi-handle {
	box-sizing: border-box;
	width: 25px !important;
	height: 25px !important;
	border-radius: 20%;
	background: #007BFF;
	border: 1px solid #ffffff;
	right:  -8px !important;   /* horizontal centering fix */
	margin: 0 !important;
	padding: 0 !important;
}

.noUi-connect {
    background: #007BFF;
}

.noUi-vertical .noUi-handle {
    cursor: grab;
}

.noUi-tooltip {
	font-size: 12px;
	margin-right:-13px;
	margin-top:-22px;
	padding: 2px 4px;
	border-radius: 4px;
	background: #333;
	color: #fff;
  }


.panel-button {
	height: 40px;
	position: absolute;
	bottom: 10px;
	color: white;
	text-align: center;
	line-height: 40px;
	width: calc(50% - 15px);
	opacity: 0.7;
    transition: all 0.2s;
}

.panel-button:hover {
    opacity: 1;
}

.panel-back  {
    height: 30px;
    z-index: 2;
    position: absolute;
    left: 7px;
    top: 6px;
}

#panel-disconnect {
	height: 30px;
    z-index: 2;
    position: absolute;
    right: 7px;
    top: 6px;
}

#panel-test1 {
    height: 20px;
    z-index: 2;
    position: absolute;
    left: 5px;
    top: 24px;
}

#panel-test2 {
    height: 20px;
    z-index: 2;
    position: absolute;
    left: 30px;
    top: 24px;
}

#customclass-buildtemplate-input-id {
    height: 20px;
    z-index: 2;
    position: absolute;
    left: 80px;
    top: 6px;
}

.sp-pos-rge-heading {
    font-size:12px;
    padding:0;
    margin:0;
    width:auto;
}

#panel-finetune {
    /*width: calc(100% - 20px);*/
    width:25px;
    height: auto;
}

#panel-ft-up {
    width:50px;
}

#panel-ft-down {
    width:50px;
}

table {
    width: calc(100% - 120px);
    height: calc(100% - 20px);
    margin-top: 10px;
    margin-bottom: 10px;
}

td {
	text-align: center;
}


/*This is the Side bar that reflects the position and Range the device can move*/
/*Below is what we call the advanced indicator to go along with the old indicator.*/
/*both are modified in the code to give the user a more pleasant viewing experience*/

#indicator {
	width: 14px;
	height: 13.78%;
	right: 1px;
	position: absolute;
	top: 43.1%;
	background-color: rgba(15, 16, 17, 0.5);  /*rgba(60,60,60,0.5);*/
}

#indicator-range {
	width: 14px;
	height: 50%;
	right: 0px;
	top: 0;
	position: absolute;
    background-color: #1e90ff   /* Gold #feb300 */;
	box-shadow: 0 0 5px rgba(0, 123, 255, 0.7);
}

#startpos-indicator {
    width: 14px;
    height: 13.78%;
    right:0px;
    position: absolute;
    top: 43.1%;
    background-color:none
}

#startpos-indicator-range {
    width: 14px;
    height: 4%;
    right: 1px;
    top: 0;
    position: absolute;
    background-color: #FFD700;   /* black;*/
    z-index: 3;
}


/*Coding the Goal Indicator for better Visualization*/
#table-surface-wrapper {
	position: absolute;
	right: 15px;
	top: 0px;         /* or wherever you want it to start vertically */
	width: 120px;        /* width of the visual slice */
	height: 95%;        /* or however tall you want the container */
	background: none;   /* no need for background here */
	overflow:visible;
}

#table-surface-indicator-id {
	position: relative;
	width: 60px;
	height:50%;
	top:140px;
	float:right;
	background-color: transparent;
}

#table-surface-visual-layer {
	width: 192%; /* Extend visual layer to left */
	height: 100%;
	position: relative;
	background-color: rgba(23, 214, 103, 0.5);

	border-top: 4px solid white;
	border-bottom: 4px solid white;
	border-radius: 6px;

	/* Shift left so it still ends on the right as before */
	margin-left: -92%;  

	/* Make sure it's underneath rods, goals, etc */
	z-index: 0;

	transform-origin: center;
}


:root {
    --spotlight-strength: 0.75; /* 0 (no darkening) to 1 (full black) */
    --spotlight-mode: goalie;   /* 'goalie' or 'non-goalie' */
}

#table-surface-visual-layer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;

    /* Default fallback: highlight goalie (right), darken left */
    background: linear-gradient(to right,
        rgba(0, 0, 0, var(--spotlight-strength)) 0%,
        rgba(0, 0, 0, 0) 35%,
        rgba(0, 0, 0, 0) 100%);
}

/* When spotlight mode is non-goalie, highlight left (non-goalie), darken right */
body[data-spotlight='non-goalie'] #table-surface-visual-layer::after {
    background: linear-gradient(to left,
        rgba(0, 0, 0, var(--spotlight-strength)) 0%,
        rgba(0, 0, 0, 0) 35%,
        rgba(0, 0, 0, 0) 100%);
}



.vertical-table-dot {
    position: absolute;
    width: 6px;
    height: 6px;
    background-color: white;
    border-radius: 50%;
    opacity: 0.9;
    left: 42px; /* place just right of 3-rod */
    transform: translateX(-50%);
    pointer-events: none;
}

.vertical-table-dot.center {
    width: 10px;
    height: 10px;
}



/* Inner Goal Field Lines*/
.innergoal-field-line {
	position: absolute;
	background-color: white;
}
  
  .innergoal-field-line.horizontal {
	height: 2px;
}
  
  .innergoal-field-line.vertical {
	width: 2px;
}
  

/* Outer Goal Field Lines*/
.outergoal-field-line {
	position: absolute;
	background-color: white;
}
  
  .outergoal-field-line.horizontal {
	height: 2px;
}
  
  .outergoal-field-line.vertical {
	width: 2px;
}


/* Foosmen styling */
.foosman {
	position:absolute;
	width:10px;
	height:28px;
	background:#FFCD00;                 /* Tornado yellow */
	border-right:3px solid #FFCD00;     /* foot projection */
	border-radius:1px;
}

.snapon-foosman {
	position: absolute;
	width: 9px;
	border-radius: 2px;
	z-index: 5;
	display: none;
}

.snapon-toggle-label-class {
    font-size:11px;
	color:rgb(65, 63, 71);
	margin-top:3px;
	margin-left:10px;

}

.snapon-adjust-label-class {
	display:block;
	font-size:10px;
	margin-left:20px;

}

#snapon-slider-container {
	display: flex;
	position:absolute;
	flex-direction: column;
	align-items: center;
	height: 150px;
	margin-top: 10px;
}
  
#snapon-slider {
	display: block;
	writing-mode: bt-lr;                 /* Makes slider vertical in most browsers */
	-webkit-appearance: slider-vertical; /* For Chrome/WebKit vertical rendering */
	width: 8px;
	height: 100% !important;             /* FORCE it to stretch */
	min-height: 250px;                   /* fallback minimum */
	margin-left:30px;
  }


.bumper { position:absolute; background:#000; width:7px; }

.goal-area-offset {
	transform: translateX(35px);  /* pushes goal lines to the right */
	/*opacity: 0.25;*/                /* optional: makes them subtle */
	transition: transform 0.3s ease, opacity 0.3s ease;
  }



@media screen and (min-width: 200px) {
 	#config-name {
		font-size:14px;
	}

	.panel-back  {
		height: 20px;
	    width: 20px;
	}

	#panel-disconnect {
		height:20px;
		width: 20px;
	}
}

@media screen and (min-width: 350px) {
 	#config-name {
		font-size:16px;
	}

	.panel-back  {
		height: 25px;
	    width: 25px;
	}

	#panel-disconnect {
		height:25px;
		width: 25px;
	}
}

@media screen and (min-width: 500px) {
 	#config-name {
		font-size:18px;
	}

	.panel-back  {
		height: 30px;
	    width: 30px;
	}

	#panel-disconnect {
		height:30px;
		width: 30px;
	}
}