/*

Inf.UFRGS - Simulador Cesar 2024 - Marcelo Johann & Chat GPT-4

Versão mais limpa e help popover com scroll e resize - 23/06/24 23pm

LINE NUMBERS by Matheus Avellar
https://github.com/MatheusAvellar/textarea-line-numbers
Apache-2.0 License - in file LICENSE

*/


@font-face {
  font-family: 'DotMatrixCustomFont';
  src: url('DotMatrixAdapted.otf') format('opentype');
}


:root {
    --memory-cell-height: 20px;
  }

html {
    flex-direction: column-reverse;
    font-family: 'Roboto Mono', 'Monaco', 'Lucida Console', monospace;
}

body {
    font-weight: normal; 
    background-color: #e8e8e8;
}

header {
    display: flex;
    width: 1020px;
    //gap: 8px;
    justify-content: space-between;
    text-align: left;
    font-size: 1.0em; 
    font-weight: normal;
}

h1 {
    font-size: 16px;
    font-weight: normal; 
    padding: 0px;
    margin: 0px;
}

h2 {
    padding: 0px;
    margin: 0px;
    font-size: 16px;
    font-weight: normal; 
    color: #888888;
}

.sidenote-color {
    color: #888888;
}

.container {
     display: flex;
    margin: 4px 0px;
    align-items: left;
    justify-content: left;
    align-items: start;
    gap: 8px 8px;
    width: 100%; /* Ensures the container stretches to fit the width of the body */
    overflow-y: hidden;
}

.register-input {
   font-family: inherit; 
   font-size: 1.0em;  /* Aumenta o tamanho da fonte */
   width: 76px; 
   }

.instruction-input {
    font-family: inherit; 
    font-size: 1.0em;  /* Aumenta o tamanho da fonte */
    width: 200px; 
    }

.memoryContainer {
    height: 640px; /* Adjust based on the desired viewable area */
    width: 240px;
    overflow-y: auto;
    border: 1px solid #ccc;
    position: relative;
    }
  
#leftMemory  {  width: 400px; }
#stackMemory {  width: 160px; }
#rightMemory {  width: 160px; }

.goto {
	margin: 0px;
	padding: 0px;
	width: 162px;
	font-size: 0.8em;  /* Menor tamanho de fonte */
  }

#stackGoto, #rightGoto {
    width: 90px; /* Define a largura em pixels */
    }
  
.memory-cell {
    height: var(--memory-cell-height); /* Use the CSS variable */
    }
  
.spacer {
    height: 0;
    }

.processor {
    display: flex;
    flex-direction: column;
    margin: 0 4px;
    align-items: left;
    }

.spaced-line {
    margin-top: 8px;
    margin-bottom: 0px;
    }

.meialinha {
    font-size: 6px;
    margin-top: 4px;
    margin-bottom: 0px;
    }

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 40px;
    }

.quickref {
    font-size: .8em;
    margin-top: 12px; 
    margin-bottom: 6px; 
    padding: 0;
    }

.references {
    font-size: 12px;
    margin-top: 4px; 
    padding: 0;
    }

.display-container {
    margin: 6px 0;
    display: flex;
    justify-content: left;
    align-items: center;
     }
  
.display-line {
    position: relative;
    height: 32px;
    display: flex;
    align-items: center; /* Center content vertically */
    overflow: hidden;
    }

.display-content {
    background-color: #282828;
    font-family: 'DotMatrixCustomFont', sans-serif;
    font-size: 24px;
    border: 2px solid #104010;
    }
  
#quickref-io { /* at left of display-content, was display 1 before */
    position: relative;
    width: 340px;
    font-size: 12px;
    color: #e0ffe0;
    background: #104010;
    border: 2px solid #104010;
    }

.legenda {
    font-family: 'Roboto Mono', 'Monaco', 'Lucida Console', monospace;
    }  

.display-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1px 6px;
    white-space: nowrap; /* faz ultima palavra aparecer parcialmente se quebrada */
    }

#display1 {
    width: 62px;
    letter-spacing: 2px;
    margin-right: 18px;
    box-shadow: 20px 0 0 0 #104010;
    }

#display1-background {
    color: #101050;
    }

#display1content {
    color: #7070ff;
    background: transparent; /* Ensure the background is visible */
    }

#display2 {
    width: 590px;
    letter-spacing: 2px;
    }

#display2-background {
    color: #104010;
    }

#display2content {
    color: #70ff70;
    background: transparent; /* Ensure the background is visible */
    }

.footerDiv {
    width: auto;
    text-align: left;
    align-items: left;
    justify-content: left;
    }

#log {
    width: 1010px;
    height: 172px;
    overflow-y: auto; /* Allows scrolling if content exceeds the height */
    border: 1px solid lightgray;
    padding: 10px;
    background-color: #f9f9f9; /* Light background for the log area */
    text-align: left;
    font-size: .8em;
    justify-content: left;
    resize: vertical;      /* Allow resizing  vertically */    
    }

#log p {
    margin: 0;
    padding: 0;	
    }


:focus {
    outline: none;  /* Example to remove the outline from all focusable elements */
    /* Or apply other custom styles */
    }

.binaryLamps {
    height: 12px;
    display: flex;  /* Activates flexbox */
    justify-content: left;  /* Centers the children horizontally */
    align-items: center;  /* Aligns children vertically at the center */
    margin-bottom: 2px;
    }

.binaryLampsSet  {
    display: flex;
    justify-content: center;  /* Center the dots horizontally */
    }

.dot {
    width: 5px;
    height: 5px;
    border-radius: 50%; /* Makes the dot circular */
    margin: 1px;
    background-color: #ddd; /* Default color representing '0' */
    }

.dot.on {
    background-color: #00a000; /* Green color representing '1' */
    }

.modal {
    position: fixed;
    z-index: 2; /* Sit on top */
    left: 0;
    top: 0;
    width: auto; /* accomodate what is inside */
    min-width: 50%; /* Prevents the modal from being too wide */
    max-width: 100%; /* Prevents the modal from being too wide */
    height: 100%; /* Full height */
    max-height: 100%; /* Prevents the modal from being too wide */
    overflow: auto; /* Enable scroll if needed */
 //   background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
    display: flex;
    align-items: center;
    justify-content: center;
    }

.modal-content {
    font-size: 1.0em; 
    background-color: #fefefe;
    margin: auto;
    border: 1px solid #888;
 //   width: auto;  /* Lets the width grow with the content, up to the max-width */
    max-width: 95% !important; /* Prevents the modal from being too wide */
    min-width: 640px !important; /* Prevents the modal from being too narrow */
    margin: 10px;  /* Ensures some space between the modal and the viewport edge */
    padding: 16px; /* Padding inside the modal */
    overflow: hidden; /* Ensures no content spills out */
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
   }

.modal-row {
    display: flex;
    gap: 12px;
    justify-content: left;  /* Align content horizontally */
    margin-bottom: 8px; 
    font-size: 0.9em; 
    }

.canvas-container {
      position: relative;
      width: 256px;
      height: 256px;
   box-sizing: border-box;
   }

.canvas-layer {
      position: absolute;
      top: 0;
      left: 0;
      width: 256px;
      height: 256px;
      border: 2px solid #a0a0ff;
   box-sizing: border-box;
   }

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    }

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
    }


.prompt-modal {
    position: fixed;
    top: 50%;
    left: 50%;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    z-index: 1001; /* Ensure it is above other content */
    display: none; /* Hidden by default */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    }

.prompt-modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    border-radius: 6px;
    width: 420px; /* Could be more or less, depending on screen size */
    }


* {
    box-sizing: border-box;  /* Apply box-sizing to all elements */
  }


.asm-modal {
    position: fixed;
    z-index: 1; /* Sit on top */
    top: 0;
    left: 100%;
  width: auto; /* Full width */
  height: 100%; /* Full height */
    transform: translate(-100%, 0);
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.3); /* Black w/ opacity */
    display: flex;
    align-items: center;
    justify-content: center;
    }

.asm-modal-content {
    font-size: inherit; 
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
 //   height:680px;
    min-height:200px;

    width: 800px;  /* Lets the width grow with the content, up to the max-width */
// resize: both;
    max-width: 100% !important;   /* Maximum width as a percentage of its parent */
    max-height: 100% !important;   /* Maximum width as a percentage of its parent */
    margin: 8px;  /* Ensures some space between the modal and the viewport edge */
    padding: 16px; /* Padding inside the modal */
    overflow: hidden; /* Ensures no content spills out */
	// background-color:rgba(255,255,255,0.90);
    align-items: left;
    justify-content: left;
    position: relative;
}

#asmTextarea {
    font-family: inherit;
    font-size: 14px; 
//    width: auto;  /* Full width of its parent */
    min-width: 200px;  /* Minimum width */
    max-width: 100% !important;   /* Maximum width as a percentage of its parent */
    min-height: 100px; /* Minimum height */
    max-height: 85vh !important;   /* Maximum width as a percentage of its parent */
//   resize: both;      /* Allow resizing both horizontally and vertically */    
    overflow: auto;  /*  scrolling inside textarea if content exceeds textarea’s height */
    box-sizing: border-box;  /* Ensures padding and border are included in the width calculation */
// position: absolute;	/* sistema de numeracao de linha não funciona se isso ativo */
    top: 0;
    bottom: 0;
    background-color:rgba(255,255,255,0.50);
    }



.tln-active, .tln-wrapper, .tln-line {
  margin: 0;
  border: 0;
  padding: 0;
  outline: 0;
  box-sizing: border-box;
  vertical-align: middle;
  list-style: none;
}
.tln-active {
  display: inline-block;
  padding: 0.625em;
  width: calc(100% - 3em);
  height: 100%;
  font-size: 1em;
  line-height: 1.5;
  font-size: 14px; 
  word-break: break-all;
  border: 1px solid #aeaeae;
  background-color: #fff;
  resize: none;
  overflow-wrap: normal;
  overflow-x: auto;
  white-space: pre;
}
.tln-wrapper {
  width: 3em;
  padding: 0.6875em 0.3125em 2.1875em;
  height: 100%;
  word-break: break-all;
  overflow: hidden;
  display: inline-block;
  counter-reset: line;
}
.tln-line {
  width: 100%;
  display: block;
  text-align: right;
  line-height: 1.5;
  font-size: 14px; 
  color: #aeaeae;
}
.tln-line::before {
  counter-increment: line;
  content: counter(line);
  font-size: 1em;
  user-select: none;
}

#wrapper {
    border:0px ;
    position:relative; 
    
    resize: both;

    height:580px;
    min-width:200px;
    min-height:200px;
    max-height: 85vh !important;   /* Maximum width as a percentage of its parent */
    max-width: 100% !important;   /* Maximum width as a percentage of its parent */
    display: flex;
    margin:15px auto;
    overflow: auto;
}
        
/* HELP */

.popover {
   display: none;
      position: absolute;
      top: 50px;
      left: 50%;
      transform: translateX(-50%);
      width: 800px;
      height: 800px;
      min-width: 400px;
      max-width: 90%;
      min-height: 100px;
      max-height: 90%;
      background: white;
      border: 1px solid #ccc;
      border-radius: 8px;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      padding: 20px;
      z-index: 1000;
  font-family: system-ui;
  font-size: 1.1em;
  font-weight: 300; /* Light */
  line-height: 1.6; 
      overflow: auto; /* Enable scrolling for overflow content */
      resize: both; /* Enable user resizing */
  }

.popover.show {
      display: block;
    }

.popover .close {
      text-align: right;
    }

.popover .close button {
    background: none;
    border: none;
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    }



/* END OF FILE */