:root {
  --background-color: #f7f9fc;
  --main-font-color: #333;
  --muted-font-color: #888;
  --text-dark: #333;
  --main-paper-color: #eeeeee;
  --light-paper-color: #ffffff;
  --border-color: #ccc;
  --background-color-shade: #f7f9fc;
  --background-color-transmit: #ffebe6;
  --background-color-receive: #e6ffe6;
  
  --controls-color: #4da6ff;
  --dark-paper-color: #dddddd;
  --font-size-xsm: 0.6rem;
  --font-size-sm: 0.8rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.2rem;
  --font-size-xlg: 1.4rem;
  
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing: 1rem;
  --spacing-lg: 2rem;

  --border-radius: 8px;
  --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  
  --error-color: #e66;
  --error-bg: #fee;
}

/* Apply border-box sizing to all elements */
*, *::before, *::after {
  box-sizing: border-box;
}
html {height:100vh;}

body {
  background: var(--background-color);
  color: var(--main-font-color);
  font-family: system-ui, "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", sans-serif;
  font-weight: 400;
  margin: 0;
  padding: var(--spacing);
  height:100svh;
}

h1 {margin-top: var(--spacing-xsm); margin-bottom: var(--spacing-sm);}
h2 {margin-top: var(--spacing-xsm); margin-bottom: var(--spacing-sm);}
h3 {margin-top: var(--spacing-xsm); margin-bottom: var(--spacing-sm);}

p {
  margin: 0 0 var(--spacing) 0;
}

.paper-light {
  background: var(--light-paper-color);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  padding: var(--spacing);
  box-shadow: var(--box-shadow);
  margin-bottom: var(--spacing);
}
.paper-main {
  background: var(--main-paper-color);
  border-radius: var(--border-radius);
  padding: var(--spacing);
  margin-bottom: var(--spacing);
  box-shadow: var(--box-shadow);
}

#app {
  max-width: 1600px;
  margin: 0px;
  padding-top: 0;
}

#clock 				{font-size: var(--font-size-xlg); font-weight:600;}

button 				{font-size: var(--font-size-base); color: var(--text-dark); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--border-radius); 
					 background-color: var(--light-paper-color); border: 2px solid var(--border-color); cursor: pointer; transition: border-color 0.3s, color 0.3s;	}
button.active 		{border-width: 1px; font-weight: 600; color: var(--controls-color);}
button:hover:not(.active) 
					{border-color: var(--main-paper-color);color: var(--controls-color);}
					
label 				{font-size: var(--font-size-base); font-weight: 600; color: var(--main-font-color); padding-right:3px; }
input				{font-size: var(--font-size-base); border: 1px solid var(--border-color); border-radius:6px; padding-top:1px; margin-top:2px; }
input:invalid 		{border-color: #e66;background-color: #fee;}


#mainView 			{display: grid; grid-template-columns: 100px 1fr; grid-template-rows: max-content auto; }
#mainViewTray		{display:block;}
.control:hover:not(.inactive) 	{border-color: var(--main-paper-color); background: var(--dark-paper-color);  cursor: pointer;}		
.control.inactive 	{color: var(--muted-font-color); opacity:0.4;}			
.legendItem 		{display:inline-block; margin-right:3px; vertical-align:bottom; margin-bottom:-3px;}
.legendMarker 		{display:inline-block; width:var(--font-size-base); height:var(--font-size-base); margin-left:5px; margin-right:3px; border: 1px solid grey;}
#tilesGridScrollContainer	{display:table-cell; overflow-y:scroll;}					 
#tilesGrid	 		{display:grid; grid-template-columns: 1fr 1fr 1fr; width:100%; gap:5px;}
.windowBar			{display:inline-block; width:100%; font-size: var(--font-size-base); background:var(--main-paper-color); height:max-content; padding:5px; font-weight: 600; margin:2px; margin-bottom:3px;} 
.tile	 			{padding:0px; padding-bottom:0px; min-width:0; height:max-content; overflow:clip;}
.tileInfo			{font-size: var(--font-size-sm); font-weight:400;}
canvas				{width:100%}
						 
.windowBarButton	{display:inline-block; margin-right:5px;  box-shadow:1px 1px 1px 1px rgb(0 0 255 / .2); padding:0px 4px 2px 4px;}
.right				{float:right;}
.trayButton			{font-size: var(--font-size-xsm); padding: var(--spacing-xs); border:1px; font-weight: 600; }

#sideBar			{padding-right:5px; width:100px;}
#sideBarHeader		{margin-right:5px;}
#sideBarScrollContainer	{display:table-cell; overflow-y:scroll; width:100px; }
#homeCallsList		{display:grid; grid-template-columns: 1fr; }
#homeCallsList > *  {font-size:var(--font-size-sm); margin:1px; padding:2px; width:fit-content;}
.hlCall				{border: 2px solid blue;}

#footer 			{display: grid; grid-template-columns: auto auto auto; grid-template-rows: auto; gap: var(--spacing-sm); font-size:var(--font-size-xsm); color:var(--muted-font-color);}
a:link 				{color: #888;}
a:visited 			{color: #888;}

.hidden				{display:none !important;}