/* 
Name: Oliwier Jakubiec
Date: March 2025
ID : C00296807
Title: loan Account and account report Css file 
*/

/* some css constant variables for consistent colours between pages */
:root {
  --sidebar-bg-color: #78569F;
  --content-bg-color: #EED7FB;
}

/* give all elements box sizing of border box */
* {
  box-sizing: border-box;
}

/* the main div */
.theForm {
  /* adds space above the form */
  margin-top: 6em;
  /* sets a light purple background colour */
  background-color: var(--content-bg-color);
  /* thin purple border */
  border: solid var(--sidebar-bg-color) 2px;
  /* rounded borders */
  border-radius: 16px;
  /* space around the form's elements */
  margin-top: 50px;
  padding: 16px;
  max-width: 50%;
  min-width: fit-content;
  margin: 50px auto 10px;
}

/* styles the inputs */
.inputbox > input, select {
  /*  !important because the nav menu conflicts with these styles */
  /* thin purple border */
  border: solid var(--sidebar-bg-color) 2px !important;
  /* slight rounded border */
  border-radius: 8px !important;
  /* horizontal padding */
  padding: 4px 8px !important;
}

/* inputs of id submit when disabled */
input#submit:disabled,input#toggle:disabled {
  /* darken the color */
  background-color: #d9cfd7;
  color: #7c7c7c;
  border-color: #c5c5c5;
  /* no cursor */
  cursor: default;
}

/* button input */
.button > input {
  /* padding  */
  padding: 0.2rem 3rem;
  font-size: 1.2rem;
  height: auto;
  display: block; /* lets it be centered */
  border-radius: 5px;
  background-color: #f8fdff;
  color: black;
  border: solid var(--sidebar-bg-color) 2px;
  cursor: pointer;  /* cursor changes to pointer when hovered */
  transition-timing-function: ease-out; /* smooth transition */
  transition: 0.6s; /* transition time */
  margin: 10px auto; /* center the button */
}

/* button input when hovered */
.button > input:hover {
  color: white;
  background-color: var(--sidebar-bg-color);
}

/* read only inputs */
input:read-only, input:read-only:focus {
  outline: none;
}

/* table styles */
table {
  /* center table */
  margin: 0 auto;
  border-spacing: 0px;  /* no space between cells */
  padding: 10px;
  width: -webkit-fill-available; /* fill the width available*/

}

/* style for each row in the table */
.accountRow {
  /* center row */
  margin: 0 auto;
  padding: 5px;
  max-width: fit-content; /* fit the content */
  cursor: pointer;  /* cursor changes to pointer when hovered */

}
/* style for the currently selected account */
.selectedAccount {
  /* change the background color, important makes it overide the old color */
  background: #ae6fae !important;
  color: white;
  /* underline for emphasis */
  text-decoration: underline;
}

/* style for the report */
.report {
  /* adds space above the form */
  margin-top: 6em;
  /* sets a light purple background colour */
  background-color: var(--content-bg-color);
  /* thin purple border */
  border: solid var(--sidebar-bg-color) 2px;
  /* rounded borders */
  border-radius: 16px;
  /* space around the form's elements */
  margin-top: 50px;
  padding: 16px;
  max-width: 50%;
  min-width: 800px;
  /* center */
  margin: 50px auto;
}

/* make paragraphs slightly larger */
p {
  font-size: 1.1rem;
}

/* align cell text in the center and add padding */
td {
  text-align: center;
  padding: 2px;
}

/* table header padding */
th {
  padding: 10px;
}

/* each table track that is an even child so 2,4,6,... */
tr:nth-child(even) {
  background-color: #e0c7ea;
}

/* make lables a little larger */
.inputbox > label {
  width: 275px;
}

/* style for error messages */
.errorStyle {
  color: red; 
  text-align: center; 
  font-size: 30px;
}