/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 17px;
  line-height: 17px;
}

body {
  position: relative;

  min-height: 100vh;
  min-width: 100vw;

  background-color: var(--bg); /* keep main bg color */
  color: var(--text);
  transition: all 0.5s ease;
}

/* Brick wall overlay using ::before */
body::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: var(--titlebar-height);

  background-image: url("/assets/brick-wall-texture-be5ff287.svg");
  background-repeat: repeat;
  background-size: auto; /* adjust if needed */

  opacity: 0.5; /* adjust the transparency */
  z-index: -1; /* stay behind all content */

  pointer-events: none; /* make sure it doesn't block clicks */
}
h1, h2{
  font-size: 1.5rem;
  margin: 0.8rem;
}
form {
  width: 100%;
  max-width: 22rem;
  min-width: 16rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field label {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
}

.field input:not([type="checkbox"]):not([type="radio"]),
.field textarea,
.field select {
  /* width: 100%; */
  padding: 0.7rem 0.85rem;
  font-size: 0.95rem;
  line-height: 1.2;

  border-radius: 0.5rem;
  border: 1px solid var(--border);

  background: var(--bg);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}

.field input[type="checkbox"] {
  margin: 0;
}

.field:has(input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.actions {
  margin-top: 0.5rem;
}

.actions input[type="submit"]:active {
  transform: translateY(1px);
}

.field br {
  display: none;
}

.tiny-square-image{
  height: 2rem;
}
.home-image{
  height: 6rem;
  margin-bottom: -1rem;
}
.in-active{
  opacity: 0.2;
  pointer-events: none;
  filter: grayscale(100%);
}
.test-margin-top{
  margin-top: 6rem;
}

.center-wrapper {
  min-height: 100vh;     /* full viewport height */
  display: flex;
  justify-content: center;
  align-items: center;
}
.centered-card {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);

  backdrop-filter: blur(1px) saturate(72%);
  -webkit-backdrop-filter: blur(1px) saturate(72%);
  background-color: rgba(17, 25, 40, 0.29);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.125);

  padding: 1rem 0.5rem;
}