/* 
  # LAYOUT CSS STYLES FOR DASHBOARD

    1. HEADER | 2. BODY | 3. FORM | 4. FOOTER

    This file contains the CSS styles for the dashboard layout.
    It includes styles for the header, body, form, and footer sections.
    The styles are organized into sections for better readability and maintainability.

  1. HEADER ---------------------------------  
*/

.container {
  max-width: 144rem;
  margin: 0 auto;
}

.main-header-container {
  background: var(--color-primary);
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 100;
  box-shadow: 0px 0px 10px var(--color-gray-7);
  padding: var(--spacing-gutter-small);
}

.main-logo {  
  font-size: calc(var(--font-size) * 1.5);
  font-weight: bold;
  color: var(--color-white);
  text-decoration: none;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin: 0 auto;
}

.main-logo-icon {
  margin-right: 5px;
  color: var(--color-white);
  font-size: 2.5rem;
}

.main-logo-text {
  padding-top: 5px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.main-logo-text-descricao {
  font-weight: lighter;
  font-size: calc(var(--font-size) * 1.3);
}

/* 
  2. BODY ---------------------------------  
*/

.container-body {
  display: grid;
  justify-content: center;
  gap: var(--spacing-gutter-small);
  padding: var(--spacing-gutter-medium);
}

.login-box {
  display: flex;
  flex-flow: column nowrap;
  min-width: 300px;
  max-width: 500px;
  background-color: var(--color-primary-light);
  padding: var(--spacing-gutter-medium);
  box-shadow: 0px 0px 10px var(--color-gray-2);
}

.login-box h1 {
  font-size: 2.5rem;
  color: var(--color-primary);
  margin-bottom: 1rem;
}

.main-content-container {
  background: var(--color-gray-0);
}

.main-content {
  padding-top: 0;
}

.main-content-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--spacing-gutter-large);
}

.main-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: var(--color-primary-dark);
  color: var(--color-white);
  padding: var(--spacing-gutter-small);
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  z-index: 100;
  box-shadow: 0px 0px 10px 0px var(--color-gray-7);
}

.main-footer div {
  margin-left: 1rem;
}

.main-footer .developer a,
.main-footer .powered a {
  font-size: calc(var(--font-size) * 1.3);
  color: var(--color-white);
  text-decoration: none;
  transition: all 300ms ease-in-out;
}

.main-footer a:hover {
  color: var(--color-primary-hover);
}

/* ----- Forms -------*/

.form-content {
  /* max-width: 64rem; */
  /* margin: 0 auto; */
  margin-bottom: var(--spacing-gutter-medium);
}

.form-content label,
.form-content .help-text,
.errorlist {
  display: block;
  margin: 0.5rem 0;
  font-size: calc(var(--font-size) * 1.3);
  list-style-type: none;
}

.form-group label {
    color: var(--color-gray-7);
  }

.errorlist {
  color: var(--color-error-dark);
}

.form-content input,
.form-content textarea,
.form-content select {
  width: 100%;
  padding: 1rem;
  border: 1px solid var(--color-gray-1);
  font-size: calc(var(--font-size) * 1.3);
}

.form-content-grid {
  display: grid;
  gap: calc(var(--spacing-gutter-small)) var(--spacing-gutter-medium);
}

.form-content button {
  padding: 1rem 2rem;
  border: none;
  background: var(--color-primary-dark);
  color: var(--color-white);
}

.inline-form {
  display: inline;
}

.span-2 {
  grid-column: span 2;
}

.plaintext-button {
  display: inline;
  border: none;
  background: none;
  cursor: pointer;
  color: var(--color-primary);
  font-size: calc(var(--font-size) * 1.3);
}