/*

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

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

*/

body {
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: left;
    padding: 20px;
    font-family: 'Monaco', 'Lucida Console', monospace; 
    font-weight: normal; 
}

header {
    width: 760px;
//  width: 100%;
    text-align: center;
//    font-size: 1.0em; 
    font-weight: normal;
    margin-bottom: 10px; /* Adds space between the header and the main content */
}

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;
    align-items: left;
    justify-content: left;
    align-items: start;
    width: 100%; /* Ensures the container stretches to fit the width of the body */
overflow-y: hidden;
}

.register-input {
    font-size: 1.0em;  /* Aumenta o tamanho da fonte */
  }

.memoryContainer {
    width: 150px;
    height: 520px;
    overflow-y: scroll;
scroll-behavior: smooth;
overscroll-behavior: contain;
    background-color: #f9f9f9; /* Light background for the log area */
    border: 1px solid black;
    padding: 0px;
    margin: 0 0px; /* Spacing between the memory and processor areas */
    position: relative;
}

/* all the comments below are wrong, CSS has no single line comment
what they are doing is blocking the next construct
*/
.memory-cell {
    position: relative;  // Keeps elements in flow, easier to manage
    width: 100%;         // Ensures each cell stretches across the container
    height: auto;        // Height can adjust based on content
    margin: 2px 0;       // Adds a little space between cells
    padding: 5px;        // Padding inside each cell
    box-sizing: border-box; // Includes padding and border in the element's dimensions
    border: 1px solid #ccc; // Visually distinguishes cells
}

#leftMemory {
    width: 240px;
}

#rightMemory {
    width: 140px;
}

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

.spaced-line {
    margin-top: 12px;
    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: 12px; 
    margin-bottom: 6px; 
    padding: 0;
}


.footerDiv {
    width: auto;
    margin-top: 20px; /* Adds space between the main content and the footer */
    text-align: left;
     align-items: left;
   justify-content: left;
}

#log {
    width: 740px;
    height: 200px;
    overflow-y: auto; /* Allows scrolling if content exceeds the height */
    border: 1px solid black;
    padding: 10px;
    background-color: #f9f9f9; /* Light background for the log area */
//    margin: 0 auto; /* Margens automáticas à esquerda e à direita para centralizar */
    text-align: left;
    font-size: .8em;
    justify-content: left;
}

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


input[type="text"] {
    width: 48px; /* Define a largura em pixels */
}

input[type="instruction"] {
    width: 120px; /* Define a largura em pixels */
}


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

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

#binaryRA {
    display: flex;
    justify-content: center;  /* Center the dots horizontally */
}
#binaryRB {
    display: flex;
    justify-content: center;  /* Center the dots horizontally */
}
#binaryRX {
    display: flex;
    justify-content: center;  /* Center the dots horizontally */
}
#binaryPC {
    display: flex;
    justify-content: center;  /* Center the dots horizontally */
}
#binaryRI {
    display: flex;
    justify-content: center;  /* Center the dots horizontally */
}

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

.dot.on {
    background-color: #00bb00; /* 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: inherit; 
    font-family: inherit; 
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: auto;  /* Lets the width grow with the content, up to the max-width */
    max-width: 90% !important; /* Prevents the modal from being too wide */
    min-width: 360px; /* Prevents the modal from being too narrow */
    margin: 10px;  /* Ensures some space between the modal and the viewport edge */
    padding: 20px; /* 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);
}

#memoryTextarea {
  font-family: 'Roboto Mono', 'Monaco', 'Lucida Console', monospace;
    font-size: 1.0em;  
    width: auto;  /* Full width of its parent */
   min-width: 100px;  /* Minimum width */
   max-width: 100% !important;   /* Maximum width as a percentage of its parent */
   min-height: 100px; /* Minimum height */
   max-height: 380px; /* Maximum height */
   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
}

.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: 320px; /* 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; 
    font-family: 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: 'Roboto Mono', 'Monaco', 'Lucida Console', monospace; 
  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-family: 'Roboto Mono', 'Monaco', 'Lucida Console', monospace; 
  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-family: 'Roboto Mono', 'Monaco', 'Lucida Console', monospace; 
  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:500px;
    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;
}