/* TSOS.css */

/* 
    Brendan Gibbons 
    CMPT 424 111 
    Professor Labouseur 

    September 11, 2023 


    iProject 1 CSS Document 
    
*/

body {
  background: #909193 url(distrib/images/linen.png) repeat;
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-size: 12pt;
  font-weight: normal;
  font-style: normal;

  margin: 0;
}

h1 {
  color: black;
  font-size: 24pt;
  font-weight: normal;
  font-style: normal;
  border-bottom: 1px solid black;
}

h2 {
  color: black;
  font-size: 20pt;
  font-weight: normal;
  font-style: normal;
}

h3 {
  font-family: Helvetica, Verdana, Arial, sans-serif;
  font-size: 16pt;
  font-weight: normal;
  font-style: normal;
}

#brenDOSLogo {
  color:blueviolet;
  font-family: "mighty-slab", serif;
  font-weight: 400;
  text-shadow: 0pt 1pt 3pt#f0f0ff;
  text-align: center;
  font-size: 14pt;

}

#display {
  background-color:#000000;
  border: 4px solid #232323; 
  border-top: 20px solid #232323;
  border-radius: 8px;
  cursor: default;

  transition: all .2s ease-in-out;
}

#display:focus {

  border-color: blueviolet;
}

/*  Layout CSS  */

/*  
    Referred to one of my old projects for some CSS design methods
    https://begibbons2021.github.io/SD330/project/
*/
#siteContent {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 100%;

  min-height: 100dvh;
  min-height: 100vh;
}

#header {
  display: block;
  background-color: #232323;

  width: inherit;
  margin: 0 0 1rem 0;
  padding: 1rem;
}

#divMenuBar {
  display: grid;
  grid-template-columns: 50% 50%;
  justify-content: space-between;

  vertical-align: center;
  width: inherit;

  background-color: #232323;
  color: #fefefe;
}

#divButtonBar {
  display: block;
  width: inherit;
}

#divClockBar {
  display: block;
  text-align: right;
  width: 100%;
}

#divUserStatus {
  max-width: inherit;
  word-wrap: break-word;
}

#divMain {
  display: block;
  width: auto;

}

#divMain > * {
  padding-bottom: 4px;
}

.divName {
  text-align: center;

  word-wrap: normal;
  padding-top: 2px;
  padding-bottom: 4px;

  width: 100%;
  max-width: 100%;

  overflow: hidden;
}


#divLog {
  background-color: #232323;
  color: #fefefe;
  text-align: center;

  display: block;
  width: inherit;
  max-width: 100%;

}

#divUserProgramInput {
  background-color: #232323;
  color: #fefefe;
  text-align: center;

  display: block;
  width: inherit;
  max-width: 100%;
}

#taHostLog {
  background-color: #000000;
  color: #ffffff;

  margin-left: auto;
  margin-right: auto;

  display: block;
  resize: none;
  width: 80%;
  max-width: 100%;
}

#taProgramInput {

  margin-left: auto;
  margin-right: auto;

  display: block;
  resize: none;
  width: 80%;
  max-width: 100%;
}

.statusTableContainer {
  display: block;
  text-align: center;

  background-color: #232323;
  color: #ffffff;
}

.statusTableContainer > * {
  margin-bottom: 2px;
}

.statusTable {
  background-color: #fefefe;
  border: 1px solid #fefefe;
  border-radius: 4pt;

  color:#fefefe;

  margin-left: auto;
  margin-right: auto;

  text-align: center;

  display: block;
  width: fit-content;
  max-width: 100%;

  /* Did not know this was the auto behavior: https: //stackoverflow.com/questions/18716863/css-hide-scroll-bar-if-not-needed */
  overflow: auto;

}

.statusTable td {
  font-family: 'Courier New', Courier, monospace;
  font-weight: bolder;
}

/*
  Used this site to clarify how character units work
  https://www.freecodecamp.org/news/css-unit-guide/  
*/

.statusTable1Char {
  min-width: 1ch;
}

.statusTable2Char {
  min-width: 2ch;
}

.statusTable4Char {
  min-width: 4ch;
}

.statusTable6Char {
  min-width: 6ch;
}

.statusTable8Char {
  min-width: 8ch;
}

.statusTable12Char {
  min-width: 12ch;
}


#divMemoryMonitor {
  background-color: #232323;
  color: #ffffff;

  text-align: center;
}

#tblMemoryMonitor {

  height: 10dvh;
  height: 10vh;

}

#tblMemoryMonitor td {
  min-width: 2ch;
}

#tblProcMonitor {
  height: 12dvh;
  height: 12vh;
}

#tblProcMonitorQuantumLabel {
  /* https: //stackoverflow.com/questions/679804/prevent-wrapping-of-span-or-div */
  display: inline-block;

  align-content: center;
  vertical-align: middle;
  font-size: 80%;

  background-color: #fefefe;
  color: #000000;

  border:2px solid #000000;
  border-radius: 8px;
  padding: 2px;

  transition: all .2s ease-in-out;
}

#tblProcMonitor td  {
  width: 2ch;
}


#divDiskMonitor {
  max-width: 500px;
}

#tblDiskMonitor {
  max-height: 300px;
  font-size: smaller;
}

#diskMonitordisk> *:nth-child(even)  {
  background-color: #111111;
}

.statusTableLabels {
  background-color: #232323;
  color: #fefefe;
}

/* #CpuMonitorState {
  width: ;
} */

.statusTable > tbody {
  background-color: #000000;
}


/*  GUI Button CSS  */

.normal_button {
  background-color: #fefefe;
  border-radius: 5%;
  color: #232323;
  width: 100px;
}

.normal_button:hover:enabled {
  background-color: #fff0f0;
  cursor: pointer;
  transition: all .3s ;
}

.normal_button:active {
  background-color: #ececec;
}

.normal_button:disabled {
  background-color: #bfbfbf;
}

#btnStartOS:hover:enabled {
  background-color: #f0fff0;
}


/* Footer Content */
.footerText {
  color: black;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 8pt;
  text-align: center;
}


/* Unused as of now, but may find a use for it later. */
.loadError {
  border-color: darkred;
}

.runningProcess {
  background-color: darkslateblue;

  transition: all .2s ease-in;
}