/* THIS IS FROM CHAT GPT: */
/* ========================================================================================= */
:root
	{
	--header-h: 36px;
	--dock-h: 70px;   /* visual reserve inside MAIN */
	--footer-h: 90px;
	}

html, body
	{
	height: 100%;
	overflow: hidden;
	background: #dea193;
	}

/* HEADER SECTION */
header#site-header
	{
	position: fixed;
	inset: 0 0 auto 0;
	height: var(--header-h);
	z-index: 1030;
	display: flex;
	align-items: center;
	border-bottom: 2px solid #f00;
	}

#menu-bar .btn, #user-menu .btn
	{
	border: 0px;
	font-size:.8rem;
	font-variant: small-caps;
	}

#menu-bar .btn:hover, #user-menu .btn:hover
	{
	background: rgba(255,255,255,.15);
	color:#60d;
	}

/* MAIN CONTENT */
main#content
	{
	position: fixed;
	top: var(--header-h);
	left: 0;
	right: 0;
	bottom: var(--footer-h);
	padding-top: 10px;
	padding-bottom: 10px;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	background:#fff;
	}
/* Reserve space inside main so content doesn't hide behind the floating dock */
.content-wrap
	{
/*	padding: 1rem;
	padding-bottom: calc(var(--dock-h) + 1rem); */
	}

/* DOCK */
.dock-float
	{
	position: fixed;
	left: 30%;
	right: 30%;
	bottom: 5px;
	z-index: 1040;
	display: flex;
	justify-content: center;
	transition: all .25s ease;
	}

.dock-bar
	{
	display: flex; gap: 14px;
	padding: 6px 10px;
	background: rgba(255,255,255,.92);
	border: 1px solid rgba(0,0,0,.25);
	border-radius: 10px;
	box-shadow: 0 6px 18px rgba(0,0,0,.12);
	backdrop-filter: blur(6px);
	transition: all .25s ease;
	}

.dock-item
	{
	width: 75px; 
	height: 60px;
	display: flex; 
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
	}

.dock-item i
	{
	font-size: 1.5rem;
	}

.dock-label
	{
	font-size:.65rem;
	font-variant: small-caps;
	margin-top:2px; color:#333;
	}

.dock-item:hover
	{
	transform: scale(1.12);
	box-shadow: 0 6px 16px rgba(0,0,0,.12);
	background: rgba(0,0,0,.35);
	}

.dock-float.shrunk .dock-bar
	{
	padding: 2px 8px;
	border-radius: 6px;
	}

.dock-float.shrunk .dock-item
	{
	width: 28px; height: 28px;
	flex-direction: row;
	}

.dock-float.shrunk .dock-item i
	{
	font-size: 1rem;
	}

.dock-float.shrunk .dock-label
	{
	display: none;
	}

/* HOVER BEHAVIOURS */
#site-header:hover + .dock-float,
#site-header:focus-within + .dock-float,
.dock-float:hover,
.dock-float:focus-within
	{
	height: 75px;
	}

/* FOOTER (40px) */
footer#site-footer
	{
	position: fixed;
	inset: auto 0 0 0;
	height: var(--footer-h);
	z-index: 1020;
	display: flex;
	align-items: center;
	/* background-image: linear-gradient(to right, #90F, #609); */
	background-image: linear-gradient(to right, #333, #000);
	border-top: 2px solid #0ce;
	padding: 0 .75rem;
	}

.footer-inner
	{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: .75rem;
	position: relative;
	}

.footer-center
	{
	font-size:.75rem; 
	font-weight: bold;
	font-family: "Courier New", Courier, mono;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: top;
	color: #FFF;
	justify-content: center;
	height: 100%;
	}

/* Dock hint bar */
.dock-hint
	{
	width: 150px;
	height: 12px;
	background: #000;
	border-radius: 5px;
	opacity: 0.25;
	}

.footer-left
	{
	white-space:nowrap; 
	font-size:.6rem; 
	color:#FFF; 
	font-variant: small-caps;
	}

.footer-right
	{
	margin-left:auto; 
	max-width:360px; 
	width:100%; 
	color:#000; 
	}

#shrink-image
	{
	position: absolute;
	bottom: 66px;  /* Position it at the very top of the screen */
	right: 10px; /* Offset from the left by 5px */
	width: 500px;      /* Half viewport width */
	height: 300px;     /* Half viewport height */
	object-fit: contain; /* Ensure the entire image is visible */
	transition: all 2s ease-in-out;
	z-index: 1060;
	}
/* END CHAT GPT */

/* SCORPIO COLOUR SCHEME */
/* ========================================================================================= */

.doz-grad-black-bg
	{
	background-image: linear-gradient(to right, #333, #000);
	}
.doz-gold
	{
	color: #C7961A;
	}
.doz-dark-green
	{
	color: #060;
	}
.doz-grad-purple-bg
	{
	background-image: linear-gradient(to right, #90F, #609);
	}
.doz-grad-red-bg
	{
	background-image: linear-gradient(to right, #500, #300);
	}
.doz-grad-magenta-bg
	{
	background-image: linear-gradient(to right, #FCF, #CAC);
	}

.doz-dd
	{
	border: 2px solid #000;
	}
.doz-ddi
	{
	padding: 3px 6px;
	font-size:.8rem;
	}
.doz-ddi:hover
	{
	color: #FFF;
	background: #0F004B;
	}

#content-dim
	{
	position: fixed;
	top: var(--header-h);
	left: 0; right: 0;
	bottom: var(--footer-h);
	background-image: linear-gradient(to bottom, rgba(181, 211, 52, 0.3), rgba(10, 177, 77, 0.3));
/*	background: rgba(0,0,0,0.5);   /* shading */
	backdrop-filter: blur(4px);     /* blur on top of shade */
	-webkit-backdrop-filter: blur(4px); 
	opacity: 0;
	pointer-events: none;           /* not clickable when hidden */
	transition: opacity .15s ease;
	z-index: 1022;                  /* above main, below header (1030) and dock (1040) */
	}

#content-dim.active
	{
	opacity: 1;
	pointer-events: auto;           /* captures clicks to close menus */
	}

div#loginSpace
	{
	position: fixed;
	top: var(--header-h);
	left: 0;
	right: 0;
	bottom: var(--footer-h);
	padding-bottom: 10px;
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	justify-content: center; /* horizontal centering */
	align-items: center;
	}
#faderow
	{
	transition: opacity 1s ease;
	opacity: 1;
	}

#faderow.fade
	{
	opacity: 0;
	}
/* FOR MENU BAR */
/* ========================================================================================= */

.lil-line
	{
	border-bottom: 1px solid #FFF;
	}
.bold-red
	{
	color: #F00;
	font-weight: bold;
	}

#inReport
	{
	transition: opacity 1s ease;
	opacity: 1;
	}

#inReport.fade-out
	{
    opacity: 0;
    }

/* GREG CUSTOMS */
/* ========================================================================================= */

/* Padding and margins */
.pad2 
	{
	padding: 2px !important;
	}

.pad5 
	{
	padding: 5px !important;
	}

.menupad 
	{
	padding: 2px 10px 0 !important;
	}

.unpad 
	{
	padding: 0 !important;
	}

.unmargin 
	{
	margin: 0 !important;
	}

.majorblock 
	{
	padding: 10px !important;
	overflow: auto;
	position: relative;
	height: 50vh;
	}

/* ----------------------------------------------------------------------------------------- */

/* SOFT TRANSPARENT BACKGROUNDS */
.soft-blue 
	{
	background-color: rgba(31, 145, 243, 0.1) !important;
	}

.soft-red 
	{
	background-color: rgba(251, 72, 58, 0.1) !important;
	}

.soft-green 
	{
	background-color: rgba(43, 152, 43, 0.1) !important;
	}

.soft-orange 
	{
	background-color: rgba(255, 150, 0, 0.1) !important;
	}

.soft-yellow 
	{
	background-color: rgba(255, 232, 33, 0.1) !important;
	}

.soft-dark 
	{
	background-color: rgba(153, 153, 153, 0.1) !important;
	}
/* ----------------------------------------------------------------------------------------- */

/* LITE OPAQUE BACKGROUNDS */
.lite-red-bg 
	{
	background-color: #fcc !important;
	}

.lite-green-bg 
	{
	background-color: #cfc !important;
	}

.lite-blue-bg 
	{
	background-color: #cff !important;
	}

.lite-yellow-bg 
	{
	background-color: #ffc !important;
	}

.lite-orange-bg 
	{
	background-color: #fc9 !important;
	}
/* ----------------------------------------------------------------------------------------- */

/* BREAKS AND TOP / BOTTOM LINES */
div.littlebreak
	{
	height: 5px;
	}
.bar-danger 
	{
	border-bottom: 3px solid rgba(251, 72, 58, 0.5) !important;
	}

.bar-primary 
	{
	border-bottom: 3px solid #1f91f3 !important;
	}

.bar-info 
	{
	border-bottom: 3px solid #5bc0de !important;
	}

.bar-warning 
	{
	border-bottom: 3px solid #ff9600 !important;
	}

.bar-success 
	{
	border-bottom: 3px solid #2ea22e !important;
	}

.doublerule
	{
	border-top: 3px double black;
	}

.hardrule
	{
	border-bottom: 2px solid black;
	}

.softrule
	{
	border-bottom: 1px solid #aaaaaa;
	}

.divline 
	{
	border-top: 3px double black;
	margin-top: 3px;
	margin-bottom: 3px;
	}

.softtop
	{
	border-top: 1px solid #aaaaaa;
	}

.bottom-gap
	{
	margin-bottom: 3px;
	}

div.mainbreak
	{
	height: 10px;
	}
/* ----------------------------------------------------------------------------------------- */

/* TABLES */

.table-xs td 
	{
	padding: .2rem .2rem;
	font-size: 10pt;
	}
.txs
	{
  	padding: .2rem .2rem !important;
	font-size: 10pt !important;
	}

.txm
	{
	padding: .4rem .4rem !important;
	}
/* ----------------------------------------------------------------------------------------- */

/* BOLD TEXTS */
.bold-white 
	{
	color: white !important;
	font-weight: bold !important;
	}

.bold-black 
	{
	color: black !important;
	font-weight: bold !important;
	}

.bigger-bolder 
	{
	font-weight: bold;
	font-size: 100%;
	}

.darkbold
	{
	background-color: #201;
	color: white;
	font-weight: bold;
	}
/* ----------------------------------------------------------------------------------------- */

/* BORDERS */
.outlined
	{
	border: 1px solid black !important;
	}

.redlined
	{
	border: 1px solid red !important;
	}

.greenlined
	{
	border: 1px solid green !important;
	}

.orangelined
	{
	border: 1px solid orange !important;
	}

.bluelined
	{
	border: 1px solid blue !important;
	}
/* ----------------------------------------------------------------------------------------- */

/* FLOW HOLDERS */
.contentblocks
	{
	padding: 0px 25px;
	overflow: auto;
	}

.tabflows 
	{
	position: relative;
	overflow-x: hidden;
	overflow-y: auto;
	width: auto;
	}
/* ----------------------------------------------------------------------------------------- */

/* PRE / CODE BOLDS */
.code-red
	{
	color: red;
	font-weight: bold;
	font-family: "Courier New", Courier, mono;
	}

.code-green
	{
	color: green;
	font-weight: bold;
	font-family: "Courier New", Courier, mono;
	}

.code-blue
	{
	color: blue;
	font-weight: bold;
	font-family: "Courier New", Courier, mono;
	}

.code-black
	{
	color: black;
	font-weight: bold;
	font-family: "Courier New", Courier, mono;
	}

.code-lite
	{
	color: black;
	font-family: "Courier New", Courier, mono;
	}

.code-white
	{
	color: white;
	font-weight: bold;
	font-family: "Courier New", Courier, mono;
	}
/* ----------------------------------------------------------------------------------------- */

/* TEXT CHANGES */
.text-yellow
	{
	color: yellow !important;
	}

.hard-no
	{
	color: red !important;
	text-decoration: line-through !important;
	}
/* ----------------------------------------------------------------------------------------- */

/* WIDGETS */
.widget-red
	{
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 0px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	background-color: #f66;
	}

.widget-orange
	{
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 0px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	background-color: rgba(255, 193, 7, 1);
	}

.widget-green
	{
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 0px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	background-color: #6f6;
	}

.widget-blue
	{
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 0px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	background-color: #3cf;
	}

.widget-dark
	{
	border: 1px solid #ddd;
	border-radius: 10px;
	padding: 0px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	background-color: #aaa;
	}

.widget-header
	{
	font-size: 1rem;
	font-weight: 600;
	text-align: center;
	padding: 5px;
	border-bottom: 1px solid #aaaaaa;
	}

.widget-body
	{
	padding-top: 10px;
	background-color: #fff;
	}

.widget-footer
	{
	border-top: 1px solid #aaaaaa;
	padding: 5px;
	font-size: 0.8rem;
	text-align: center;
	color: #333;
	}

#updateArea
	{
	height: calc(100vh - 146px); /* Full viewport minus header and footer */
	}