/* === variables === */
:root {
  --bg: #D9D5C9;


  /* === background color === */


  --gap: 5vh;
  /*  gap used in every spacing, literally every spacing!  */
  --smallRadius: 2.5vh;
  --bigRadius: 5vh;

  --shadow-dark: rgba(132, 118, 102, 1);
  --shadow-light: rgba(215, 207, 198, 1);
  /* gradient light */
  --tone: #d8d8d8;
  --tone-hi: rgba(200, 190, 178, .7);
  /* gradient light */
  --tone-lo: rgba(151, 139, 125, .7);
  /* gradient dark */
  --tone-hi-detail-map: rgba(200, 190, 178, .9);
  /* gradient light */
  --tone-lo-detail-map: rgba(151, 139, 125, .9);
  /* gradient dark */
  --ambient: rgba(0, 0, 0, .05);
  --btn-gradient-hi: rgba(95, 116, 104, 1);
  --btn-gradient-lo: rgba(62, 91, 83, 1);
  --input-gradient-hi: rgba(151, 139, 125, .5);
  --input-gradient-lo: rgba(200, 190, 178, .5);
  --btn-shadow-dark: rgba(38, 58, 52, 0.6);
  --btn-shadow-light: rgba(129, 152, 138, 0.6);
  --select-border-light: rgba(255, 255, 255, 0.25);
  --input-focus-ring: 0 0 0 1px rgba(255, 255, 255, 0.02);

}



/* === page basics === */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  overflow: hidden;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  color: #33312f;
}

/*
 === general stuff ===
*/

/* Resets - Prevent color changes on hover, visited, active, etc. */

a {
  color: #33312f;
  text-decoration: none;
}

p {
  color: #33312f;
  size: 0.8rem;
}

h1 {
  color: #33312f;
  font-weight: 800;
  font-size: 2rem;
}

h2 {
  color: #33312f;
  font-weight: 500;
  font-size: 1.3rem;
}

h4 {
margin: 0;
font-size: 1rem;
font-weight: 700;
}

h5 {
margin: 0;
font-size: 0.8rem;
font-weight: 500;
}
/* generic form fixes */

input::placeholder,
textarea::placeholder {
  color: rgba(255, 255, 255, 0.85);
  opacity: 1;
}

textarea {
  resize: vertical !important;
}

/* calculate all divs's internal padding etc, it will make adjustments to height/width calculations  */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/*  ---> errors forms <--- */
.error {
  border: 2px solid red !important;
}

/*
 === backgorund canvas terrain pattern ===
*/

#terrainCanvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 0;
  pointer-events: none;
}

/*
 === app - main content area ===
*/

/* app - occupies everything on top of background, where you have have all content  */

#app {
  position: relative;
  padding: 0;
  margin: 0;
  z-index: 1;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: block;
}

.all-content {
  width: 100%;
  height: 100%;
  padding: var(--gap);
  margin: 0;
  gap: var(--gap);
  display: flex;
  justify-content: start;
  align-items: center;
  flex-direction: row;

}

/*
    === header area ===
*/

#headerArea {
  width: 10%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  overflow: visible;
  transition: height .3s ease;
}

.header {
  cursor: pointer;
  width: 100%;
  aspect-ratio: 1/1;
  display: grid;
  grid-template-rows: auto 1fr;
  justify-items: center;
  align-items: start;
  flex-direction: column;
  gap: var(--gap);
  padding: 12px;
  color: #fff;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: var(--smallRadius);
  background: linear-gradient(145deg, var(--tone-hi), var(--tone-lo));
  box-shadow: 16px 16px 32px -18px var(--shadow-dark), -16px -16px 32px -18px var(--shadow-light), 0 2px 6px var(--ambient);
  transition:
    aspect-ratio .25s ease,
    box-shadow .2s ease,
    transform .2s ease,
    height .25s ease;
}

/* Logo */
.header__logo {
  width: 80%;
  aspect-ratio: 1/1;
  object-fit: contain;
  justify-self: center;
}

.header__menu {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  padding-bottom: calc(var(--gap) - 12px);
  gap: var(--gap);
  white-space: nowrap;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.header__menu>a {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--smallRadius);
  padding: 8px 12px;
  font-weight: 500;
  text-decoration: none;
  background: linear-gradient(145deg, var(--tone-hi), var(--tone-lo));
  box-shadow:
    16px 16px 32px -18px var(--shadow-dark),
    -16px -16px 32px -18px var(--shadow-light),
    0 2px 6px var(--ambient);
  transition: box-shadow .2s ease, transform .2s ease;
}

.header__menu>a:hover,
.header__menu>a:active,
.header__menu>a:focus-visible {
  box-shadow:
    inset 10px 10px 22px -12px var(--shadow-dark),
    inset -15px -15px 22px -12px var(--shadow-light);
  outline: none;
}

.header--open {
  aspect-ratio: auto;
  height: 100%;
}

.header--open .header__menu {
  opacity: 1;
  pointer-events: auto;

}

@media (prefers-reduced-motion: reduce) {
  .header__menu {
    transition: none;
  }
}


/*
    ---> main content <---
*/

.main-content {
  display: flex;
  width: calc(90% - var(--gap));
  height: 100%;
  flex-direction: column;
  padding: var(--gap);
  gap: var(--gap);

  border-radius: var(--bigRadius);
  background: linear-gradient(145deg, var(--tone-hi), var(--tone-lo));
  box-shadow:
    16px 16px 32px -18px var(--shadow-dark),
    -16px -16px 32px -18px var(--shadow-light),
    0 2px 6px var(--ambient);
  transition: box-shadow .2s ease,
    transform .2s ease;
}

.mainContentHeader {
  height: calc(10% - (var(--gap)/2));
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.mainContentArea {
  height: 100%;
  width: calc(90% - (var(--gap)/2));
  gap: var(--gap);
}

.btnSpecial,
.btnSpecial:link,
.btnSpecial:visited {
  border: 0;
  display: inline-grid;
  place-items: center;
  text-decoration: none;
  padding: .75rem 1rem;
  font: 700 0.95rem/1 system-ui, sans-serif;
  color: #eae8e1;
  border-radius: 50%;
  aspect-ratio: 1/1;
  cursor: pointer;

  background: linear-gradient(145deg,
      var(--btn-gradient-hi),
      var(--btn-gradient-lo));

  box-shadow:
    16px 16px 32px -18px var(--shadow-dark),
    -16px -16px 32px -18px var(--shadow-light);

  transition: box-shadow .2s ease, transform .2s ease, filter .2s ease;
}

.btnSpecial:hover {
  color: #ffffff;
  box-shadow:
    inset 10px 10px 22px -12px var(--btn-shadow-dark),
    inset -15px -15px 22px -12px var(--btn-shadow-light);
}

.btnSpecial:active {
  transform: translateY(0);
  filter: brightness(.97);
}

.btnSpecial:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .4),
    16px 16px 32px -18px var(--shadow-dark),
    -16px -16px 32px -18px var(--shadow-light),
    0 2px 6px var(--ambient);
}

/* ====== LOGIN LAYOUT ====== */

#all-content-log-in {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap);
  padding: var(--gap);
}

#log-in-image-container {
  width: 40%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: calc(var(--gap) * 2);
}


#log-in-area {
  width: 30%;
  aspect-ratio: 1 / 1;
  border-radius: var(--smallRadius);
  background: linear-gradient(145deg, var(--tone-hi), var(--tone-lo));
  box-shadow:
    16px 16px 32px -18px var(--shadow-dark),
    -16px -16px 32px -18px var(--shadow-light),
    0 2px 6px var(--ambient);
  overflow: visible;
}


#image-log-in {
  height: 85%;
  width: 100%;
  display: block;
  object-fit: contain;
}

.bottom-logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  justify-items: center;
  height: 15%;
  width: 100%;
  overflow: hidden;
}

.bottom-logos a {
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  padding: 0;
}

.bottom-logos img {
  display: block;
  max-height: 90%;
  max-width: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.bottom-logos img:hover {
  transform: scale(1.04);
}

#log-in-area {
  padding: var(--gap);
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: var(--gap);
  color: #fff;
}

/* titles */

#log-in-area .title {
  margin: 0;
  text-align: left;
}

/* form layout */

#log-in-area .login-form {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  overflow: visible;
}

#log-in-area .input {
  width: 100%;
  padding: 12px 14px;
  border: none;
  border-radius: var(--smallRadius);
  color: #494038;
  outline: none;
  background: linear-gradient(145deg,
      var(--input-gradient-lo),
      var(--input-gradient-hi)
    );
  box-shadow:
    inset 10px 10px 22px -12px var(--shadow-dark),
    inset -15px -15px 22px -12px var(--shadow-light);
}

#log-in-area .input::placeholder {
  color: #ffffff;
}

#loginBtn {
  align-self: center;
}

@media (max-width: 768px) {
  #all-content-log-in {
    flex-direction: column;
  }

  #log-in-image-container,
  #log-in-area {
    width: min(90%, 420px);
    aspect-ratio: 1 / 1;
  }
}
  #log-in-area p{
    font-weight: 300;

  }
/*
    ---> home page <---
*/

#personalDivHeaderHomePage {
  width: auto;
  aspect-ratio: 1/1;
  justify-content: center;
}

#mainContentAreaHomePage {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#mapContainer {
  height: 100%;
  flex: 0 0 calc(90% - (var(--gap) / 2));

}

#map {
  border-radius: var(--smallRadius);
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.map-title {
  position: absolute;
  top: calc(var(--gap) / 2);
  left: calc(var(--gap) / 2);
  margin: 0;
  color: #111;
  font-size: clamp(1rem, 2.2vw, 1.6rem);
  line-height: 1.1;
  z-index: 3;
  pointer-events: none;
}

.map-legend {
  position: absolute;
  left: calc(var(--gap) / 2);
  bottom: calc(var(--gap) / 2);
  width: 60%;
  height: 10%;
  min-height: 56px;
  max-width: 60%;
  overflow: auto;
  padding: 0.8rem;
  border-radius: var(--smallRadius);
  background: linear-gradient(145deg, var(--tone-hi-detail-map), var(--tone-lo-detail-map));
  box-shadow:
    16px 16px 32px -18px var(--shadow-dark),
    -16px -16px 32px -18px var(--shadow-light),
    0 2px 6px var(--ambient);
  color: #111;
  z-index: 3;
  pointer-events: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.legend-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: start;
  gap: .25rem;

}

.dot {
  height: 15px;
  width: 15px;
  border-radius: 50%;
}

.map-legend p {
  margin: 0;
  line-height: 1.1;
}

.map-detail {
  position: absolute;
  top: calc(var(--gap) / 2);
  right: calc(var(--gap) / 2);
  bottom: calc(var(--gap) / 2);
  width: 30%;
  min-width: 260px;
  z-index: 4;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: .5rem;
  padding: 1rem;

  border-radius: var(--smallRadius);
  background: linear-gradient(145deg, var(--tone-hi-detail-map), var(--tone-lo-detail-map));
  box-shadow:
    16px 16px 32px -18px var(--shadow-dark),
    -16px -16px 32px -18px var(--shadow-light),
    0 2px 6px var(--ambient);

  transform: translateX(8px);
  opacity: 1;
}

.map-detail[hidden] {
  display: none !important;
}

#map-detail__close {
  position: absolute;
  top: .5rem;
  right: .5rem;
  width: 35px;
  height: 35px;
  border: 0;
  border-radius: 12px;
  font: 700 18px/1 system-ui, sans-serif;
  cursor: pointer;
  padding: 0;
}

.map-detail__content {
  overflow: auto;
  padding-right: .25rem;
  display: grid;
  align-content: start;
  gap: .5rem;
}

#map-detail-content-panel p {
font-size: 1rem;
font-weight: 700;
}

.map-detail__title {
  margin: 0;
  font: 700 clamp(1rem, 2.2vw, 1.4rem)/1.15 system-ui, sans-serif;
  color: #111;
}

.map-detail__meta {
  margin: 0;
  color: #222;
  opacity: .85;
}

.map-detail__damage {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  align-items: center;
  gap: .5rem;
  padding: .25rem .5rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .35);
  width: max-content;
}

.map-detail__damage .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2);
}

#map-detail__link {
  width: 30%;
  height: auto;
  aspect-ratio: 1/1;
 justify-self: center;
}

#homeButtonsContainer {
  height: 100%;
  flex: 0 0 calc(10% - (var(--gap) / 2));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: var(--gap);

}

.homeButton {
  width: 100%;
  flex: 0 0 auto;
  aspect-ratio: 1 / 1;
  align-self: center;
  display: grid;
  place-items: center;
  text-decoration: none;
  font-weight: 500;

  border-radius: var(--smallRadius);
  background: linear-gradient(145deg, var(--tone-hi), var(--tone-lo));
  box-shadow:
    16px 16px 32px -18px var(--shadow-dark),
    -16px -16px 32px -18px var(--shadow-light),
    0 2px 6px var(--ambient);
  transition: box-shadow .2s ease,
    transform .2s ease;
}

.homeButton:hover {
  box-shadow:
    inset 10px 10px 22px -12px var(--shadow-dark),
    inset -15px -15px 22px -12px var(--shadow-light);
}

/*  ---> shelter list <--- */

#mainContentAreaShelterList {
  height: 100%;
  width: 100%;
  overflow: visible;
}

.shelterGridScroll {
  border-radius: var(--smallRadius);
  height: 85%;
  overflow: auto;
  padding: var(--gap);
  scrollbar-gutter: stable both-edges;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--gap);
}

.item-list {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: start;
  gap: .75rem;
  aspect-ratio: 1 / 1;
  padding: calc( var(--gap) / 2 );
  border-radius: var(--smallRadius);
  background:
    linear-gradient(145deg, var(--tone-hi), var(--tone-lo)),
    var(--card-bg-url, none);
  background-size: auto, cover;
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: normal, multiply;

  box-shadow:
    16px 16px 32px -18px var(--shadow-dark),
    -16px -16px 32px -18px var(--shadow-light),
    0 2px 6px var(--ambient);
  transition: box-shadow .2s ease, transform .2s ease;
  color: #111;
  text-decoration: none;
}

.item-list:hover {
  box-shadow:
    inset 10px 10px 22px -12px var(--shadow-dark),
    inset -15px -15px 22px -12px var(--shadow-light);
}

.item-list .cardHeader {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .25rem;
}

.item-list .cardHeader h2 {
  margin: 0;
  font: 700 1rem/1.1 system-ui, sans-serif;
}

.item-list h3 {
  margin: 0;
  font: 700 1.05rem/1.2 system-ui, sans-serif;
}

.item-list p {
  margin: 0;
  opacity: .9;
  font: 400 .95rem/1.25 system-ui, sans-serif;
}

.item-list .dot {
  width: 25px;
  height: 25px;
  border-radius: 50%;
}

#item-add-shelter,
#item-add-inspection,
#item-add-inspection-shelter,
#item-add-iffipai-shelter,
#item-add-landRegistry-shelter {
  display: flex;
  justify-content: center;
  align-items: center;
}

#item-add-shelter h1,
#item-add-inspection h1 {
  font-size: 4rem;
  margin: 0;
}

.btnTargets {
  height: 10%;
  width: 80%;
  background: linear-gradient(145deg,
      var(--btn-gradient-hi),
      var(--btn-gradient-lo));
  box-shadow:
    16px 16px 32px -18px var(--shadow-dark),
    -16px -16px 32px -18px var(--shadow-light),
    0 2px 6px var(--ambient);

  transition: box-shadow .2s ease, transform .2s ease, filter .2s ease;
}

#btnTargets:hover {
  color: #ffffff;
  box-shadow:
    inset 10px 10px 22px -12px var(--btn-shadow-dark),
    inset -15px -15px 22px -12px var(--btn-shadow-light);
}

#shelterFilters {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
}

#shelterFilters input,
#filtersForm input{
height: 100%;
border: 0;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, var(--btn-gradient-hi), var(--btn-gradient-lo));
  box-shadow:
    inset 4px 4px 8px rgba(0, 0, 0, 0.3),
    inset -4px -4px 8px rgba(255, 255, 255, 0.15);
  outline: none;
  transition: all 0.2s ease;
}

#shelterFilters select,
#filtersForm select {
height: 100%;
border:0;
  border-radius: 15px;
  color: #fff;
  background: linear-gradient(145deg, var(--btn-gradient-hi), var(--btn-gradient-lo));
    box-shadow:
      16px 16px 32px -18px var(--shadow-dark),
      -16px -16px 32px -18px var(--shadow-light); outline: none;
  transition: all 0.2s ease;
}


/* Hover / focus */
#shelterFilters input:hover,
#shelterFilters select:hover,
#shelterFilters input:focus,
#shelterFilters select:focus {
  filter: brightness(1.05);
 box-shadow:
    inset 10px 10px 22px -12px var(--shadow-dark),
    inset -15px -15px 22px -12px var(--shadow-light);

}

.item-list h3 { align-self: start; line-height: 1.15; }

/* ---> form structure <--- */


/*
*
*
    ---> shelter individual menu general <---
*
*
*/

#mainContentAreaShelterIndvidual {
  display: flex;
  flex-direction: row;
  width: 100%;
  overflow: hidden;
}

#display-content-area-info,
#mainContentAreaShelterIndvidual {
}

#actions-sidebar-shelter-details {
  height: 100%;
  width: 15%;
  display: flex;
  padding: 20px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: var(--gap);
}

.shelterSideButton {
  flex: 1 1 0;
  width: 100%;
  display: grid;
  place-items: center;
  text-decoration: none;
  padding: 20px;
  font-weight: 500;

  border-radius: var(--smallRadius);
  background: linear-gradient(145deg, var(--tone-hi), var(--tone-lo));
  box-shadow:
    16px 16px 32px -18px var(--shadow-dark),
    -16px -16px 32px -18px var(--shadow-light),
    0 2px 6px var(--ambient);
  transition: box-shadow .2s ease,
    transform .2s ease;
}

.activeShadow {
  box-shadow:
    inset 10px 10px 22px -12px var(--shadow-dark),
    inset -15px -15px 22px -12px var(--shadow-light);
}

.shelterSideButton:hover {
  box-shadow:
    inset 10px 10px 22px -12px var(--shadow-dark),
    inset -15px -15px 22px -12px var(--shadow-light);
}


#display-content-area-info {
  height: 100%;
  width: calc(85% - var(--gap));
  display: flex;
}

/*
*
*
    ---> shelter individual menu (details section) <---
*
*
*/

#shelterMenuDetailsContent {
  display: flex;
  width: 100%;
  height: 100%;
  gap: var(--gap);
  flex-direction: row;
}

#shelterMenuDetailsContentText {
  height: 100%;
  width: calc(65% - (var(--gap)/2));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

shelterMenuDetailsContentText h2 {
  font-size: 1rem;
  font-weight: 800;
}

#shelterMenuDetailsContentImg {
  height: 100%;
  width: calc(35% - (var(--gap)/2));
  display: flex;
  gap: var(--gap);
  flex-direction: column;
}

#shelterImgForm {
  width: 100%;
  height: auto;
}

.img-uploader {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  border: none;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: #0b0b0b10;
  flex: 0 0 auto;
}

.img-uploader.empty .plus-btn {
  font-size: 64px;
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  border: none;
  cursor: pointer;
}

.img-uploader.has-image img {
  width: 100%;
  height: 100%;
  inset: 0;
  border-radius: var(--smallRadius);
  object-fit: cover;
  object-position: center;
  display: block;
  cursor: pointer;
}

.img-uploader.has-image .change-hint {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 12px;
  opacity: .85;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  padding: 2px 6px;
  border-radius: 6px;
}

#shelter-details-buttons {
  display: flex;
  flex-direction: row;
  gap: var(--gap);
  overflow: visible;
}

/*
 ---> details shelter inspections structure <---
 */
#shelterDetailsInspections,
#shelterDetailsIffipai,
#shelterDetailsLandRegistry {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

#shelterDetailsInspections,
#shelterDetailsIffipai,
#shelterDetailsLandRegistry {
  width: 100%;
  height: 100%;
}


/*
**
**
    ---> form structure <---
**
**
*/

#mainContentNewInspection {
width: 100%;
}

#inspectionForm {
  display: flex;
  gap: var(--gap);
  width: 100%;
}

#col1,
#col2,
#col3 {
  width: calc( 33% - (var(--gap) / 3));
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

#col3 {
  justify-content: center;
  align-items: center;
}

#col3 button {
  width: 50%;
  margin: var(--gap) 0;
}

#inspectionForm input,
#inspectionForm textarea {
  border: none;
  border-radius: var(--smallRadius);
  padding: 10px;
  background: linear-gradient(145deg, var(--input-gradient-lo), var(--input-gradient-hi));
  box-shadow: inset 6px 6px 12px var(--shadow-dark),
    inset -6px -6px 12px var(--shadow-light);
  color: #fff;
}

#inspectionForm select {
  border: none;
  border-radius: var(--smallRadius);
  padding: 10px;
  background: linear-gradient(145deg, var(--input-gradient-lo), var(--input-gradient-hi));
  box-shadow: 6px 6px 12px var(--shadow-dark),
    -6px -6px 12px var(--shadow-light);
  color: #fff;
  appearance: none;
}

#inspectionForm select {
  background:
    linear-gradient(145deg, var(--input-gradient-lo), var(--input-gradient-hi)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 10px center;
  background-size: auto, 10px 6px;
  padding-right: 28px;
  color: #fff;
  border-radius: var(--smallRadius);
  border: none;
  appearance: none;
}

#inside {
  width: 100%;
}

.pdf-attach {
  margin-top: 16px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 12px;
}

#pdfAttachBtn{
width: 30%;
height: auto;
aspect-ratio: 1/1;
font: 700 0.75rem/1 system-ui, sans-serif;

}

.file-name {
  opacity: .8;
  font-size: 0.9rem;
}

#btn-submit-inspection {
width: 35%;
height: auto;
aspect-ratio: 1/1;
}

/*
**
**
    ---> shelter (form) page <---
**
**
*/

#mainContentNewShelter {
  width: 100%;
}

#mainContentNewShelterForm {
  flex-direction: row;
  display: flex;
  gap: var(--gap);
  align-items: stretch;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

#mainContentNewShelterForm textarea {
  resize: vertical !important;
}

#content-form-shelter {
  width: calc(75% - (var(--gap) / 2));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 6px;
  box-sizing: border-box;
}

#content-form-shelter label,
#content-form-shelter input,
#content-form-shelter select,
#content-form-shelter textarea {
  display: block;
  width: 100%;
}

#content-form-shelter .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#content-form-shelter .span-2 {
  grid-column: 1 / -1;
}

#content-form-shelter .field.checkbox {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

@media (max-width: 768px) {
  #content-form-shelter {
    grid-template-columns: 1fr;
  }
}


#btns-form-shelter {
  width: calc(30% - (var(--gap) / 2));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--gap);
}

#content-form-shelter input,
#content-form-shelter textarea {
  border: none;
  border-radius: var(--smallRadius);
  padding: 10px;
  background: linear-gradient(145deg, var(--input-gradient-lo), var(--input-gradient-hi));
  box-shadow: inset 6px 6px 12px var(--shadow-dark),
    inset -6px -6px 12px var(--shadow-light);
  color: #fff;
}

#content-form-shelter select {
  border: none;
  border-radius: var(--smallRadius);
  padding: 10px;
  background: linear-gradient(145deg, var(--input-gradient-lo), var(--input-gradient-hi));
  box-shadow: 6px 6px 12px var(--shadow-dark),
    -6px -6px 12px var(--shadow-light);
  color: #fff;
  appearance: none;
}

#content-form-shelter select {
  background:
    linear-gradient(145deg, var(--input-gradient-lo), var(--input-gradient-hi)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 10px center;
  background-size: auto, 10px 6px;
  padding-right: 28px;
  color: #fff;
  border-radius: var(--smallRadius);
  border: none;
  appearance: none;
}

#inside {
  width: 100%;
}

/*
**
**
    ---> inspection (indv) page <---
**
**
*/

#mainContentEditInspection {
  width: 100%;
  display: flex;
  overflow: visible;
  flex-direction: row;
  gap: var(--gap);
}

#inspection-details-page-area {
  display: flex;
  height: 100%;
  gap: var(--gap);
  padding: var(--gap);
  width: calc(80% - (var(--gap) / 2));
  flex-direction: row;
  justify-content: start;
  border-radius: var(--smallRadius);

  box-shadow:
    16px 16px 32px -18px var(--shadow-dark),
    -16px -16px 32px -18px var(--shadow-light),
    0 2px 6px var(--ambient);
  transition: box-shadow .2s ease,
    transform .2s ease;
}

#inspection-details-page-text {
  display: flex;
  height: 100%;
  width: calc(75% - (var(--gap) / 2));
  flex-direction: column;
  justify-content: start;
}

#inspection-pdf-actions {
  display: flex;
  height: 100%;
  width: calc(25% - (var(--gap) / 2));
  flex-direction: column;
  justify-content: start;
}

#inspection-details-page-btns {
  display: flex;
  height: 100%;
  width: calc(20% - (var(--gap) / 2));
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
}

.inspectionSideButton {
  aspect-ratio: 1 / 1;
  width: 100%;
  height: auto;
  align-self: center;
  display: grid;
  place-items: center;
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--smallRadius);
  background: linear-gradient(145deg, var(--tone-hi), var(--tone-lo));
  box-shadow:
    16px 16px 32px -18px var(--shadow-dark),
    -16px -16px 32px -18px var(--shadow-light),
    0 2px 6px var(--ambient);
  transition: box-shadow .2s ease,
    transform .2s ease;
}

.inspectionSideButton:hover {
  box-shadow:
    inset 10px 10px 22px -12px var(--shadow-dark),
    inset -15px -15px 22px -12px var(--shadow-light);
}

/*
**
**
    ---> dashboard <---
**
**
*/

.dash-upper {
  display: flex;
  gap: var(--gap);
  width: 100%;
  height: 80%;
}

.dash-lower {
  width: 100%;
  height: calc(20% - var(--gap));
  display: flex;
  align-items: center;
}

#dashboard-grid-area {
  border-radius: var(--smallRadius);
  box-shadow:
    16px 16px 32px -18px var(--shadow-dark),
    -16px -16px 32px -18px var(--shadow-light),
    0 2px 6px var(--ambient);
  transition: box-shadow .2s ease,
    transform .2s ease;
}

.grid-shell {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url('/images/dashboard2.png');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  overflow: visible;
}

.grid-stage {
  position: absolute;
  left: 12%;
  top: 11%;
  width: 84.5%;
  height: 62%;
  overflow: visible;
}

.pinLayer {
  position: relative;
  width: 100%;
  height: 100%;
}

.pinAbs {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pinAbs .dot {
  width: 16px;
  height: 16px;
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.35);
  transition: transform 160ms ease, filter 160ms ease;
}

.pinAbs:hover .dot {
  transform: scale(1.55);
  filter: brightness(1.05);
}

.grid-debug {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, 0.12) 0,
      rgba(255, 255, 255, 0.12) calc(100% / var(--rows) - 1px),
      transparent calc(100% / var(--rows))),
    repeating-linear-gradient(to right,
      rgba(255, 255, 255, 0.08) 0,
      rgba(255, 255, 255, 0.08) calc(100% / var(--cols) - 1px),
      transparent calc(100% / var(--cols)));
}

.dash-right {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  height: 100%;
  align-items: flex-end;
  justify-content: space-between;
}

.kpiTall {
  display: flex;
  flex-direction: column;
  height: calc(50% - (var(--gap) / 2) - 22.5px);
  width: 100%;
  justify-content: center;
  gap: 0.25rem;
  padding: 1rem;
  border-radius: var(--smallRadius);
  background: linear-gradient(145deg, var(--tone-hi), var(--tone-lo));
  box-shadow:
    16px 16px 32px -18px var(--shadow-dark),
    -16px -16px 32px -18px var(--shadow-light),
    0 2px 6px var(--ambient);
  transition: box-shadow .2s ease,
    transform .2s ease;
}

.kpiTall h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 400;
  opacity: 0.85;
}

.kpiNumber {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.damageRow {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--gap);
  width: 100%;
  padding: 15px;
  border-radius: var(--smallRadius);
  background: linear-gradient(145deg, var(--tone-hi), var(--tone-lo));
  box-shadow:
    16px 16px 32px -18px var(--shadow-dark),
    -16px -16px 32px -18px var(--shadow-light),
    0 2px 6px var(--ambient);
  transition: box-shadow .2s ease,
    transform .2s ease;
}

.damageBox {
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: center;
  justify-items: center;
  padding: 0.75rem;
  border-radius: var(--smallRadius);
  background: var(--box-color);
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.25),
    inset 0 0 0 9999px color-mix(in srgb, var(--box-color) 10%, transparent);
}

.damageLabel {
  font-size: 0.7rem;
  font-weight: 400;

  opacity: 0.9;
}

.damageCount {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.2;
}

.gridDashboard.showRows {
  background-image:
    repeating-linear-gradient(to bottom,
      rgba(255, 255, 255, 0.08) 0,
      rgba(255, 255, 255, 0.08) calc(100% / var(--rows) - 1px),
      transparent calc(100% / var(--rows)));
}

#close-btn-dashboard {
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* scroll bar remove white backgoroun*/

/* For WebKit browsers: Chrome, Edge, Safari, Opera */
*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  background: transparent;
  }

*::-webkit-scrollbar-thumb {
  background-color: rgba(177, 150, 134, 1);
  border-radius: 6px;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: rgba(177, 150, 134, 0.8);
}

/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(177, 150, 134, 1) transparent;
}


/* new fixes*/

select option {
  background-color: #6d5344;
   color: #fff;
}

select {
  border: none !important;
  outline: none !important;
  box-shadow: var(--select-shadow) !important;
  border-radius: var(--smallRadius);
  transition: box-shadow .2s ease-in-out;
}

input:focus,
textarea:focus {
 /* border: 4px solid var(--input-focus-ring) !important; */
  border-color: transparent;
  outline: none;
  box-shadow:
    inset 6px 6px 12px var(--shadow-dark),
    inset -6px -6px 12px var(--shadow-light),
    var(--input-focus-ring) !important;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  border-color: transparent;
  outline: none;
  box-shadow:
    inset 6px 6px 12px var(--shadow-dark),
    inset -6px -6px 12px var(--shadow-light),
    var(--input-focus-ring) !important;
}

input:focus,
input:focus-visible,
textarea:focus,
textarea:focus-visible,
select:focus,
select:focus-visible {
  box-shadow:
    inset 6px 6px 12px var(--shadow-dark),
    inset -6px -6px 12px var(--shadow-light),
    var(--input-focus-ring) !important;
}
#content-form-shelter input:focus,
#content-form-shelter input:focus-visible,
#content-form-shelter textarea:focus,
#content-form-shelter textarea:focus-visible,
#content-form-shelter select:focus,
#content-form-shelter select:focus-visible {
  border-color: transparent !important;
  outline: none !important;
  box-shadow:
    inset 6px 6px 12px var(--shadow-dark),
    inset -6px -6px 12px var(--shadow-light),
    var(--input-focus-ring) !important;
}

#mainContentNewShelterForm input,
#mainContentNewShelterForm textarea,
#mainContentNewShelterForm select {
  outline: none !important;
}

#mainContentNewShelterForm input:focus,
#mainContentNewShelterForm input:focus-visible,
#mainContentNewShelterForm textarea:focus,
#mainContentNewShelterForm textarea:focus-visible,
#mainContentNewShelterForm select:focus,
#mainContentNewShelterForm select:focus-visible {
  border-color: transparent !important;
  outline: none !important;
  box-shadow:
    inset 6px 6px 12px var(--shadow-dark),
    inset -6px -6px 12px var(--shadow-light),
    var(--input-focus-ring) !important;
}
/* === Shelters · Checkboxes === */

#content-form-shelter .field:has(> input[type="checkbox"]) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 3.2rem;
  background: transparent;
}

#content-form-shelter .field:has(> input[type="checkbox"]) > label {
  flex: 1;
}

#content-form-shelter .field:has(> input[type="checkbox"]) > input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  height: 20%;
  width: auto;
  aspect-ratio: 1 / 1;
  border-radius: 999px;

  background: transparent;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
position: relative;
  box-shadow:
    6px 6px 12px var(--shadow-dark),
    -6px -6px 12px var(--shadow-light);
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

#content-form-shelter .field:has(> input[type="checkbox"]) > input[type="checkbox"]::after {
  content: "";
  width: 90%;
  height: 90%;
  display: block;
  position: absolute;
  border-radius: inherit;
  background: transparent;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

#content-form-shelter .field:has(> input[type="checkbox"]) > input[type="checkbox"]:checked::after {
  background: linear-gradient(145deg, var(--btn-gradient-hi), var(--btn-gradient-lo));
  box-shadow: none;
}

#content-form-shelter .field:has(> input[type="checkbox"]) > input[type="checkbox"]:hover,
#content-form-shelter .field:has(> input[type="checkbox"]) > input[type="checkbox"]:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    8px 8px 16px var(--shadow-dark),
    -8px -8px 16px var(--shadow-light);
  outline: none;
}
#content-form-shelter .field:has(> input[type="checkbox"]) > label {
  width: auto;
  flex: 0 0 auto;
}

#btn-submit-shelter {
width: 35%;
height: auto;
aspect-ratio: 1/1;
}

#mainContentNewInspection {
  height: auto;
    flex: 1 1 0;
      min-height: 0;
       display: flex;
}

#inspectionForm {
  display: flex;
  gap: var(--gap);
  width: 100%;
  height: 100%;
  min-height: 0;
}

#col1,
#col2 {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc( var(--gap) * 0.9 );
  overflow-y: auto;
  overflow-x: hidden;
}

#col3 {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* === Inspection · Checkboxes */

#inspectionForm label:has(> input[type="checkbox"]) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-height: 3.2rem;
  background: transparent;
  cursor: pointer;
    align-self: flex-start;

}

#inspectionForm input[type="checkbox"] {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  height: 5%;
  width: auto;
  aspect-ratio: 1 / 1;
  border-radius: 999px;

  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;

  box-shadow:
    6px 6px 12px var(--shadow-dark),
    -6px -6px 12px var(--shadow-light);
  transition:
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

#inspectionForm input[type="checkbox"]::after {
  content: "";
  width: 90%;
  height: 90%;
  display: block;
  position: absolute;
  border-radius: inherit;
  background: transparent;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6);
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

#inspectionForm input[type="checkbox"]:checked::after {
  background: linear-gradient(145deg, var(--btn-gradient-hi), var(--btn-gradient-lo));
  box-shadow: none;
}

#inspectionForm input[type="checkbox"]:hover,
#inspectionForm input[type="checkbox"]:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    8px 8px 16px var(--shadow-dark),
    -8px -8px 16px var(--shadow-light);
  outline: none;
}
#content-form-shelter input[type="checkbox"] {
  width: auto !important;
}
input[type="checkbox"] {
  width: auto !important;
  display: inline-flex !important;
}
#inspectionForm input[type="checkbox"] {
  width: auto !important;
  align-self: flex-start !important;
}
#col2 input[type="checkbox"] {
    margin-left: 12px !important;
    }

    /* ===> FILTER CHECKBOX INSPECTION FORM <===*/

#filtersForm,
#shelterFilters {
  display: flex;
  align-items: stretch;
  gap: 1rem;
}

#filtersForm > label,
#shelterFilters > label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.4rem;
}

#filtersForm input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  height: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50% !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #e1ddd9 !important;
  border: none !important;
  cursor: pointer;
}
#filtersForm input[type="checkbox"]:checked {
  background: var(--btn-gradient-lo) !important;
  border-color: var(--btn-gradient-lo) !important;
  box-shadow:
    inset 2px 2px 4px rgba(0, 0, 0, 0.35),
    inset -2px -2px 4px rgba(255, 255, 255, 0.15);
}

input,
select,
textarea {
  border-radius: 30px !important;
}
/* === Inspection details === */

#inspection-details-page-text {

  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  padding-right: 0.5rem;
  gap: 0.75rem;
}

.inspection-detail-row {
  display: flex;
  flex-direction: column;
}

#inspection-details-page-text .inspection-detail-row h2 {
  margin: 0 0 0.15rem 0;
  font-size: 1rem;
  font-weight: 600;
}


#inspection-details-page-text .inspection-detail-row p {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 400;
}

    /* === Inspection · PDF button tweaks === */


 #inspection-pdf-actions {
   display: flex;
   height: 100%;
   width: calc(25% - (var(--gap) / 2));
   flex-direction: column;
   align-items: center;
   justify-content: center;
 }

 #inspection-pdf-actions .btnSpecial {
   width: 50%;
   aspect-ratio: 1 / 1;
   height: auto;
   border-radius: 50%;
   padding: 0;
   font-size: 0.75rem;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 #inspection-pdf-actions .btnSpecial {
   display: flex;
    align-items: center;
    justify-content: center;
     font-size: 0.8rem;
        letter-spacing: 0.5px;
         }
#inspection-details-page-btns .inspectionSideButton {
  font-size: 1.1rem;
  font-weight: 700;
   letter-spacing: 0.5px;
     text-align: center;
     }

     /* ---> patch size cards <---<*/

  .shelterGridScroll {
    grid-template-columns: repeat(auto-fill, minmax(220px, min(260px, 1fr)));
  }

  .item-list {
    max-width: 260px;
    max-height: 260px;
  }


/*  ---> target items list fix <--- */

#display-content-area-info {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
}

#targetsAll,
#targetsNew,
#targetsEdit {
  width: 100%;
  flex: 1 1 0;
  height: 100%;
  box-sizing: border-box;
  grid-template-columns: repeat(auto-fill, minmax(160px, min(190px, 1fr)));
}

#targetsAll .item-list,
#targetsNew .item-list,
#targetsEdit .item-list {
  max-width: 190px;
  max-height: 190px;
  aspect-ratio: 1 / 1;
  justify-self: center;
}

/*   ---> targets details <--- */

#landRegistryMenuDetailsContent {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

#landRegistryMenuDetailsContent > h1 {
  margin: 0;
}

#landRegistryForm {
  flex: 1 1 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: var(--gap);
  align-items: stretch;
}

#landRegistry-form-content {
  height: 100%;
  width: 33%;
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 0.6);
  padding-right: 8px;
  box-sizing: border-box;
  overflow-y: auto;
}

#landRegistry-form-content .field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

#landRegistry-form-content label,
#landRegistry-form-content input,
#landRegistry-form-content select,
#landRegistry-form-content textarea {
  width: 100%;
  display: block;
  box-sizing: border-box;
}

#landRegistry-form-buttons {
  flex: 0 0 28%;
  height: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: calc(var(--gap) / 2);
}

#landRegistry-form-buttons .btnSpecial {
  width: 45%;
  max-width: 140px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
}

#landRegistry-form-content .field > input,
#landRegistry-form-content .field > select,
#landRegistry-form-content .field > textarea {
  width: 100%;
}
#landRegistry-form-content input,
#landRegistry-form-content textarea {
  border: none;
  border-radius: var(--smallRadius);
  padding: 20px;
  background: linear-gradient(145deg, var(--input-gradient-lo), var(--input-gradient-hi));
  box-shadow: inset 6px 6px 12px var(--shadow-dark),
    inset -6px -6px 12px var(--shadow-light);
  color: #fff;
}

#landRegistry-form-content select {
  border: none;
  border-radius: var(--smallRadius);
  padding: 20px;
  background:
    linear-gradient(145deg, var(--input-gradient-lo), var(--input-gradient-hi)),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M1 1l4 4 4-4' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 10px center;
  background-size: auto, 10px 6px;
  padding-right: 28px;
  box-shadow: 6px 6px 12px var(--shadow-dark),
    -6px -6px 12px var(--shadow-light);
  color: #fff;
  appearance: none;
}
#targetsFormWrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: var(--gap);
}

#targetsFormInputs {
  display: flex;
  width: 33%;
  flex-direction: column;
  gap: calc(var(--gap) * 0.6);
}

#targetsFormInputs .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#targetsFormInputs select,
#targetsFormInputs textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--smallRadius);
  border: none;
  background: linear-gradient(145deg, var(--input-gradient-lo), var(--input-gradient-hi));
  box-shadow:
    inset 4px 4px 8px var(--shadow-dark),
    inset -4px -4px 8px var(--shadow-light);
  color: #fff;
  box-sizing: border-box;
}

#targetsFormButtons {
  flex: 0 0 28%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: calc(var(--gap) / 2);
}

#targetsFormButtons .btnSpecial {
  width: 45%;
  max-width: 140px;
  aspect-ratio: 1/1;
  border-radius: 50%;
}

#targetsAll {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, min(190px, 1fr)));
}

#targetsAll .item-list {
  max-width: 190px;
  max-height: 190px;
  aspect-ratio: 1 / 1;
  justify-self: center;
}

#targetsNew,
#targetsEdit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#targetsNew h1,
#targetsEdit h1 {
  width: 100%;
  margin-bottom: var(--gap);
}

#targetsForm {
  width: 100%;
}


/* ---> patch form shelters <--- */

#form-errors {
  margin-top: 1rem;
  max-height: 200px;
  overflow-y: auto;
}

#form-errors .form-error-summary {
  padding: 0.75rem 1rem;
  color: #b00020;
  font-size: 0.9rem;
}

#form-errors .form-error-summary ul {
  margin: 0.5rem 0 0;
  padding-left: 1.25rem;
}

#form-errors .form-error-summary li {
  margin-bottom: 0.25rem;
}

.error {
  border: 1px solid #ff4d4f !important;
  box-shadow: 0 0 4px rgba(255, 77, 79, 0.6);
}





#shelterNewInspections {
width: 100%;
}


/* ---> IFFIPAI FORM CHANGES <--- */

#display-content-area-info-iffipai {
  height: 100%;
  width: calc(85% - var(--gap));
  display: flex;
  flex-direction: column;
}

#iffipai-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  align-items: flex-start;
  margin-top: 20px;
}

#iffipaiForm {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
gap: var(--gap);

}

#content-form-iffipai {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 33%;
}

#btns-form-iffipai {
  display: flex;
  align-items: center;
  justify-content: center;
    width: 33%;

}

#btns-form-iffipai .btnSpecial {
  white-space: nowrap;
}

#content-form-iffipai .field label {
  display: block;
  margin-bottom: 4px;
}

#content-form-iffipai .field input,
#content-form-iffipai .field select {
  width: 100%;
  height: 2rem;
}

#btnSpecialFormIFFIPAI {
height: 80%;
width: auto;
aspect-ratio: 1/1;
}

#iffipaiForm select,
#iffipaiForm input {

  border-radius: var(--smallRadius);
  border: none;
  background: linear-gradient(145deg, var(--input-gradient-lo), var(--input-gradient-hi));
  box-shadow:
    inset 4px 4px 8px var(--shadow-dark),
    inset -4px -4px 8px var(--shadow-light);
  color: #fff;
  box-sizing: border-box;
}

/* ---> Land Registry new FORM CHANGES <--- */

#display-content-area-info {
  height: 100%;
  width: calc(85% - var(--gap));
  display: flex;
  flex-direction: column;
}

#landRegistry-form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  align-items: flex-start;
  margin-top: 20px;
}

#landRegistryForm {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
gap: var(--gap);

}

#content-form-landRegistry {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 33%;
}

#btns-form-landRegistry {
  display: flex;
  align-items: center;
  justify-content: center;
    width: 33%;

}

#btns-form-landRegistry .btnSpecial {
  white-space: nowrap;
}

#content-form-landRegistry .field label {
  display: block;
  margin-bottom: 4px;
}

#content-form-landRegistry .field input,
#content-form-landRegistry .field select {
  width: 100%;
}

#btnSpecialFormLandRegistry {
height: 80%;
width: auto;
aspect-ratio: 1/1;
}

#landRegistryForm select,
#landRegistryForm input {

  height: 2rem;
  border-radius: var(--smallRadius);
  border: none;
  background: linear-gradient(145deg, var(--input-gradient-lo), var(--input-gradient-hi));
  box-shadow:
    inset 4px 4px 8px var(--shadow-dark),
    inset -4px -4px 8px var(--shadow-light);
  color: #fff;
  box-sizing: border-box;
}


/* targets edit form */

#h1TargetEdit {
    margin: 0;
  padding: 0;
}


#editTargetForm {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
gap: var(--gap);

}

#content-form-edit-target {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 33%;
}

#btns-form-edit-target {
  display: flex;
  align-items: center;
  justify-content: center;
    width: 33%;

}

#btns-form-edit-target .btnSpecial {
  white-space: nowrap;
}

#btns-form-edit-target .field label {
  display: block;
  margin-bottom: 4px;
}

#btns-form-edit-target .field input,
#btns-form-edit-target .field select {
  width: 100%;
  height: 2rem;
}

#btnSpecialFormTarget {
height: 35%;
width: auto;
aspect-ratio: 1/1;
}

#editTargetForm select,
#editTargetForm input,
#editTargetForm  textarea {

  width: 100%;
  border-radius: var(--smallRadius);
  border: none;
  background: linear-gradient(145deg, var(--input-gradient-lo), var(--input-gradient-hi));
  box-shadow:
    inset 4px 4px 8px var(--shadow-dark),
    inset -4px -4px 8px var(--shadow-light);
  color: #fff;
  box-sizing: border-box;
}

#editTargetForm select,
#editTargetForm input {
height: 2rem;
}



/* ========= LAND REGISTRY SELECT FIX ========= */
#landRegistryForm select {
  height: auto !important;
  min-height: 2.4rem;
  padding: 10px 14px !important;
  line-height: 1.2 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  appearance: auto !important;
}




/* =========================================================
   RESALP - RESPONSIVE OVERRIDES
            NEW
            09-11-2026
            GLOBAL VERSION
   ========================================================= */

/* FIX: Structural Intervention checkbox */

#inspectionForm input[type="checkbox"] {
  flex: 0 0 24px;
  inline-size: 24px !important;
  block-size: 24px !important;
  min-inline-size: 24px;
  min-block-size: 24px;
  margin: 0 0.35rem 0 0 !important;
  align-self: flex-start !important;
}

#inspectionForm #col2 > label:first-child {
  flex: 0 0 auto;
  min-height: 32px;
  gap: 0.6rem;
  align-items: center;
  white-space: normal;
}

#inspectionForm #extra-details {
  min-width: 0;
}

#inspectionForm #form-errors {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* =========================================================
   LOGIN - FOUR EVENLY SPACED LOGOS
   ========================================================= */

.bottom-logos {
  width: 100%;
  height: auto;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.4rem, 1.4vw, 1.2rem);
  justify-items: stretch;
  align-items: center;
  overflow: visible;
}

.bottom-logos > a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: clamp(54px, 10vh, 96px);
  padding: 0.25rem;
  overflow: visible;
}

.bottom-logos > a > img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* =========================================================
   RESPONSIVE - TABLET, SMALL DESKTOP, SHORT WINDOWS
   ========================================================= */

@media (max-width: 768px) {

  :root {
    --gap: clamp(0.75rem, 2.2vw, 1.5rem);
    --smallRadius: 14px;
    --bigRadius: 22px;
  }

  html,
  body {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }

  #app {
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: visible;
  }

  /* Main application layout */

  .all-content:not(#all-content-log-in) {
    width: 100%;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(0.75rem, 2.5vw, 1.5rem);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1rem;
  }

  /* Header */

  #headerArea {
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    position: relative;
    z-index: 10;
  }

  .header {
    width: 100%;
    height: auto;
    min-height: 4rem;
    aspect-ratio: auto;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    overflow: visible;
  }

  .header__logo {
    flex: 0 0 3rem;
    width: 3rem;
    height: 3rem;
  }

  .header__menu {
    flex: 1 1 100%;
    display: none;
    flex-flow: row wrap;
    align-self: auto;
    align-items: stretch;
    gap: 0.6rem;
    padding: 0;
    white-space: normal;
    opacity: 0;
    pointer-events: none;
  }

  .header--open {
    height: auto;
  }

  .header--open .header__menu {
    display: flex;
    opacity: 1;
    pointer-events: auto;
  }

  .header__menu > a {
    flex: 1 1 7rem;
    min-height: 2.75rem;
    text-align: center;
  }

  /* Main content */

  .main-content {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: clamp(0.75rem, 2.5vw, 1.5rem);
    gap: 1rem;
  }

  .mainContentHeader {
    width: 100%;
    min-height: 2.75rem;
    height: auto;
    gap: 1rem;
    flex-wrap: wrap;
  }

  .mainContentHeader h1 {
    font-size: clamp(1.25rem, 4vw, 2rem);
  }

  .mainContentArea {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  /* Home and map */

  #mainContentAreaHomePage {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  #mapContainer {
    width: 100%;
    flex: 0 0 auto;
    height: min(65dvh, 620px);
    min-height: 320px;
  }

  #homeButtonsContainer {
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    flex-flow: row wrap;
    justify-content: stretch;
    gap: 0.75rem;
  }

  .homeButton {
    width: auto;
    min-height: 3rem;
    flex: 1 1 9rem;
    aspect-ratio: auto;
    padding: 0.75rem;
    text-align: center;
  }

  .map-legend {
    width: auto;
    max-width: min(90%, 500px);
    height: auto;
    max-height: 30%;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 0.45rem;
  }

  .map-detail {
    width: min(86%, 360px);
    min-width: 0;
    max-height: calc(100% - 1rem);
    padding: 0.75rem;
  }

  #map-detail__link {
    width: auto;
    height: auto;
    min-height: 2.75rem;
    aspect-ratio: auto;
    border-radius: 1rem;
  }

  /* Lists */

  .shelterGridScroll {
    width: 100%;
    height: auto;
    max-height: none;
    overflow: visible;
    padding: 0.65rem;
    grid-template-columns:
            repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  }

  #shelterFilters,
  #filtersForm {
    flex-wrap: wrap;
  }

  /* Shelter details and related records */

  #mainContentAreaShelterIndvidual {
    height: auto;
    flex-direction: column;
    overflow: visible;
    gap: 1rem;
  }

  #actions-sidebar-shelter-details {
    width: 100%;
    height: auto;
    padding: 0;
    flex-flow: row wrap;
    gap: 0.75rem;
  }

  .shelterSideButton {
    flex: 1 1 9rem;
    aspect-ratio: auto;
    min-height: 3rem;
    padding: 0.75rem;
    text-align: center;
  }

  #display-content-area-info,
  #display-content-area-info-iffipai {
    width: 100%;
    height: auto;
    min-height: 0;
  }

  /* Shared responsive arrangement for specific layouts */

  #shelterMenuDetailsContent,
  #mainContentNewShelterForm,
  #mainContentEditInspection,
  #inspection-details-page-area,
  #landRegistryForm,
  #targetsFormWrapper,
  #iffipaiForm,
  #editTargetForm {
    width: 100%;
    height: auto;
    flex-flow: row wrap;
    align-items: stretch;
    gap: 1rem;
  }

  #shelterMenuDetailsContentText,
  #shelterMenuDetailsContentImg,
  #content-form-shelter,
  #landRegistry-form-content,
  #targetsFormInputs,
  #content-form-iffipai,
  #content-form-landRegistry,
  #content-form-edit-target,
  #inspection-details-page-text,
  #inspection-pdf-actions {
    width: 100%;
    height: auto;
    flex: 1 1 260px;
    min-width: 0;
    max-height: none;
    overflow: visible;
  }

  /* Action areas */

  #btns-form-shelter,
  #landRegistry-form-buttons,
  #targetsFormButtons,
  #btns-form-iffipai,
  #btns-form-landRegistry,
  #btns-form-edit-target,
  #inspection-details-page-btns {
    width: 100%;
    height: auto;
    flex: 1 1 100%;
    flex-flow: row wrap;
    justify-content: center;
    gap: 0.75rem;
  }

  #btns-form-shelter .btnSpecial,
  #landRegistry-form-buttons .btnSpecial,
  #targetsFormButtons .btnSpecial,
  #btns-form-iffipai .btnSpecial,
  #btns-form-landRegistry .btnSpecial,
  #btns-form-edit-target .btnSpecial,
  #inspection-details-page-btns .inspectionSideButton {
    width: auto;
    min-width: 5.5rem;
    min-height: 3rem;
    max-width: 12rem;
    height: auto;
    aspect-ratio: auto;
    padding: 0.8rem;
  }

  #iffipai-form-layout,
  #landRegistry-form-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Inspection form */

  #inspectionForm {
    width: 100%;
    height: auto;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.25rem;
  }

  #inspectionForm #col1,
  #inspectionForm #col2 {
    width: auto;
    flex: 1 1 260px;
    min-width: 0;
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
    gap: 0.75rem;
  }

  #inspectionForm #col3 {
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
    justify-content: center;
    gap: 1rem;
  }

  #inspectionForm #col1 > input,
  #inspectionForm #col1 > select,
  #inspectionForm #col2 > input:not([type="checkbox"]),
  #inspectionForm #col2 > textarea {
    width: 100%;
    min-width: 0;
  }

  #inspectionForm #col3 button,
  #pdfAttachBtn,
  #btn-submit-inspection {
    width: auto;
    min-width: 6rem;
    min-height: 3rem;
    height: auto;
    margin: 0;
    aspect-ratio: auto;
    border-radius: 1rem;
    padding: 0.8rem;
  }

  .pdf-attach {
    flex-flow: row wrap;
    justify-content: flex-start;
  }

  /* Dashboard */

  .dash-upper {
    height: auto;
    flex-direction: column;
    min-height: 0;
  }

  #dashboard-grid-area {
    width: 100%;
    min-height: 320px;
    height: min(55dvh, 600px);
  }

  .dash-right {
    width: 100%;
    height: auto;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  .kpiTall {
    flex: 1 1 150px;
    width: auto;
    height: auto;
  }

  .dash-lower {
    height: auto;
  }

  .damageRow {
    grid-template-columns:
            repeat(auto-fit, minmax(90px, 1fr));
    gap: 0.75rem;
  }

  /* Login */

  #all-content-log-in {
    width: 100%;
    height: auto;
    min-height: 100dvh;
    flex-direction: column;
    padding: clamp(0.75rem, 3vw, 1.5rem);
  }

  #log-in-image-container,
  #log-in-area {
    width: min(100%, 520px);
    height: auto;
    aspect-ratio: auto;
    padding: clamp(0.75rem, 3vw, 1.5rem);
  }

  #image-log-in {
    height: auto;
    max-height: 220px;
  }

  #log-in-area {
    gap: 1rem;
  }

  #log-in-area .login-form {
    gap: 1rem;
  }
}

/* =========================================================
   SMALL SCREENS
   ========================================================= */

@media (max-width: 600px) {

  .mainContentHeader > div {
    max-width: 100%;
  }

  #inspectionForm #col1,
  #inspectionForm #col2 {
    flex-basis: 100%;
  }

  #content-form-shelter {
    grid-template-columns: minmax(0, 1fr);
  }

  #mapContainer {
    height: 65dvh;
    min-height: 290px;
  }

  .map-title {
    max-width: 70%;
  }

  .map-legend {
    max-height: 35%;
  }

  .bottom-logos {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .bottom-logos > a {
    height: 52px;
  }

  .damageBox {
    padding: 0.45rem;
  }

  .damageLabel {
    overflow-wrap: anywhere;
  }
}



/* =========================================================
   RESALP - CUSTOM FORM CONTROLS
   ========================================================= */

/* Selects */

#app select:not([multiple]) {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;

  color: #fff !important;
  -webkit-text-fill-color: #fff !important;

  min-height: 2.65rem;
  min-width: 0;

  padding: 0.65rem 2.4rem 0.65rem 0.9rem !important;

  border-radius: var(--smallRadius);

  background-image:
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
          linear-gradient(
                  145deg,
                  var(--input-gradient-lo),
                  var(--input-gradient-hi)
          ) !important;

  background-position:
          right 0.8rem center,
          center !important;

  background-size:
          12px 8px,
          cover !important;

  background-repeat: no-repeat !important;

  box-shadow:
          16px 16px 32px -18px var(--shadow-dark), -16px -16px 32px -18px var(--shadow-light), 0 2px 6px var(--ambient);

  cursor: pointer;
}

#app select:not([multiple]) > option {
  background: #6d5344;
  color: #fff;
}

/* Disabled controls */

#app select:disabled,
#app input:disabled,
#app textarea:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* Textual inputs */

#app input:is(
    [type="text"],
    [type="number"],
    [type="date"],
    [type="email"],
    [type="password"],
    [type="search"],
    [type="url"],
    [type="tel"]
),
#app textarea {
  min-width: 0;
  min-height: 2.65rem;
  max-width: 100%;

  padding: 0.65rem 0.9rem;

  border: none;
  border-radius: var(--smallRadius);

  background: linear-gradient(
          145deg,
          var(--input-gradient-lo),
          var(--input-gradient-hi)
  );

  color: #fff;

  box-shadow:
          inset 4px 4px 8px var(--shadow-dark),
          inset -4px -4px 8px var(--shadow-light);
}

/* Date input icon */

#app input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .85;
  cursor: pointer;
}

/* Scrollbars - Firefox and compatible browsers */

html,
body,
#app,
#app * {
  scrollbar-color: rgba(151, 139, 125, 1) transparent;
  scrollbar-width: auto;
}

/* Scrollbars - Chromium / WebKit */

html::-webkit-scrollbar,
body::-webkit-scrollbar,
#app *::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track,
#app *::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
#app *::-webkit-scrollbar-thumb {
  background: rgba(132, 118, 102, .8);
  border-radius: 999px;
  border: none;
  background-clip: padding-box;
}



/* =========================================================
   RESALP - FORM CONTROLS SHADOW OVERRIDE
   Selects: raised -> inset on hover
   Inputs: inset -> shorter inset on hover
   ========================================================= */

:root {

  /* Select - normal (same shadow as buttons) */
  --form-select-raised:
          16px 16px 32px -18px var(--shadow-dark),
          -16px -16px 32px -18px var(--shadow-light);

  /* Select - hover (inverted shadow) */
  --form-select-hover:
          inset 10px 10px 22px -12px var(--shadow-dark),
          inset -15px -15px 22px -12px var(--shadow-light);

  /* Inputs - normal */
  --form-input-normal:
          inset 6px 6px 12px var(--shadow-dark),
          inset -6px -6px 12px var(--shadow-light);

  /* Inputs - hover (shorter shadow) */
  --form-input-hover:
          inset 3px 3px 6px var(--shadow-dark),
          inset -3px -3px 6px var(--shadow-light);
}


/* =========================================================
   SELECTS - ALL FORMS
   ========================================================= */

/* Normal and focused state */

:is(body, #app) select,
:is(body, #app) select:is(:focus, :focus-visible) {

  box-shadow: var(--form-select-raised) !important;

  transition:
          box-shadow 0.2s ease,
          filter 0.2s ease;
}

/* Hover: invert the shadow */

:is(body, #app) select:hover:not(:disabled) {

  box-shadow: var(--form-select-hover) !important;
}


/* =========================================================
   INPUTS AND TEXTAREAS - ALL FORMS
   ========================================================= */

/* Normal state and focus */

:is(body, #app) :is(
    input:not([type]),
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    textarea
),
:is(body, #app) :is(
    input:not([type]),
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    textarea
):is(:focus, :focus-visible) {

  box-shadow: var(--form-input-normal) !important;

  transition: box-shadow 0.2s ease;
}

/* Hover: shorter inset shadow */

:is(body, #app) :is(
    input:not([type]),
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    textarea
):hover:not(:disabled) {

  box-shadow: var(--form-input-hover) !important;
}


/* =========================================================
   KEYBOARD FOCUS
   ========================================================= */

:is(body, #app) :is(
    select,
    input:not([type]),
    input[type="text"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    input[type="email"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    textarea
):focus-visible {

  outline: none !important;
  outline-offset: 2px;
}


/* =========================================================
   LOGIN - EVEN LOGO SPACING
   ========================================================= */

#all-content-log-in .bottom-logos {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  grid-template-columns: none;

  width: 100%;
  height: 15%;
  gap: 0.35rem;

  overflow: visible;

  container-type: inline-size;
}

/* Each logo occupies only its actual width */

#all-content-log-in .bottom-logos > a {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 1 auto;

  width: auto;
  height: 100%;
  min-width: 0;

  padding: 0;
  overflow: visible;
}

/* Preserve image proportions */

#all-content-log-in .bottom-logos > a > img {
  display: block;

  width: auto;
  height: auto;

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

  object-fit: contain;
}

/* GMG - wide logo */

#all-content-log-in .bottom-logos > a:nth-child(1) > img {
  height: clamp(15px, 7cqw, 40px);
}

/* IRPI */

#all-content-log-in .bottom-logos > a:nth-child(2) > img {
  height: clamp(18px, 11cqw, 60px);
}

/* CNR - vertical logo */

#all-content-log-in .bottom-logos > a:nth-child(3) > img {
  height: clamp(24px, 14cqw, 78px);
}

/* CAI */

#all-content-log-in .bottom-logos > a:nth-child(4) > img {
  height: clamp(24px, 14cqw, 76px);
}


/* =========================================================
   RESALP - SMOOTH BOX-SHADOW TRANSITIONS
   ========================================================= */

:root {
  --shadow-motion-time: 0.35s;
  --shadow-motion-easing: cubic-bezier(0.22, 1, 0.36, 1);

  /* Raised panels */
  --shadow-raised-panel:
          16px 16px 32px -18px var(--shadow-dark),
          -16px -16px 32px -18px var(--shadow-light),
          0 2px 6px var(--ambient),
          inset 0 0 0 0 transparent,
          inset 0 0 0 0 transparent;

  /* Pressed panels */
  --shadow-pressed-panel:
          0 0 0 0 transparent,
          0 0 0 0 transparent,
          0 0 0 0 transparent,
          inset 10px 10px 22px -12px var(--shadow-dark),
          inset -15px -15px 22px -12px var(--shadow-light);

  /* Raised buttons and selects */
  --shadow-raised-control:
          16px 16px 32px -18px var(--shadow-dark),
          -16px -16px 32px -18px var(--shadow-light),
          inset 0 0 0 0 transparent,
          inset 0 0 0 0 transparent;

  /* Pressed  and selects */
  --shadow-pressed-control:
          0 0 0 0 transparent,
          0 0 0 0 transparent,
          inset 10px 10px 22px -12px var(--shadow-dark),
          inset -15px -15px 22px -12px var(--shadow-light);
  /* Pressed buttons and  */
  --shadow-btns-control:
          0 0 0 0 transparent,
          0 0 0 0 transparent,
          inset 10px 10px 22px -12px var(--btn-gradient-lo),
          inset -15px -15px 22px -12px var(--btn-gradient-hi);
}


/* =========================================================
   GLOBAL FALLBACK
   ========================================================= */

:where(#app, #app *, #app *::before, #app *::after) {
  transition:
          box-shadow var(--shadow-motion-time)
          var(--shadow-motion-easing);
}


/* =========================================================
   COMPONENTS WITH EXISTING TRANSITIONS
   ========================================================= */

#app :is(
    .main-content,
    .header__menu > a,
    .homeButton,
    .item-list,
    .btnTargets,
    .shelterSideButton,
    .inspectionSideButton,
    #inspection-details-page-area,
    #dashboard-grid-area,
    .kpiTall,
    .damageRow,
    .btnSpecial
) {
  transition:
          box-shadow var(--shadow-motion-time)
          var(--shadow-motion-easing),
          transform 0.2s ease,
          filter 0.2s ease;
}


/* Header: preserve opening/closing animation */

#app .header {
  transition:
          aspect-ratio 0.25s ease,
          height 0.25s ease,
          transform 0.2s ease,
          box-shadow var(--shadow-motion-time)
          var(--shadow-motion-easing);
}


/* =========================================================
   INPUTS, TEXTAREAS AND SELECTS
   ========================================================= */

#app :is(
    select,
    textarea,
    input:not([type="checkbox"])
         :not([type="radio"])
         :not([type="file"])
         :not([type="submit"])
         :not([type="button"])
         :not([type="reset"])
) {
  transition:
          box-shadow var(--shadow-motion-time)
          var(--shadow-motion-easing),
          border-color 0.2s ease,
          filter 0.2s ease;
}


/* =========================================================
   CHECKBOXES
   Preserve their existing animations
   ========================================================= */

#app #inspectionForm input[type="checkbox"],
#app #content-form-shelter
.field:has(> input[type="checkbox"]) > input[type="checkbox"] {
  transition:
          box-shadow var(--shadow-motion-time)
          var(--shadow-motion-easing),
          border-color 0.15s ease,
          background 0.15s ease,
          transform 0.15s ease;
}

#app #inspectionForm input[type="checkbox"]::after,
#app #content-form-shelter
.field:has(> input[type="checkbox"]) > input[type="checkbox"]::after {
  transition:
          box-shadow var(--shadow-motion-time)
          var(--shadow-motion-easing),
          background 0.15s ease,
          transform 0.15s ease;
}


/* =========================================================
   SMOOTH RAISED -> PRESSED TRANSITION
   ========================================================= */

/* Normal state */

#app :is(
    .header__menu > a,
    .homeButton,
    .item-list,
    .shelterSideButton,
    .inspectionSideButton,
    .btnTargets
) {
  box-shadow: var(--shadow-raised-panel);
}

/* Hover / pressed state */

#app :is(
    .header__menu > a,
    .homeButton,
    .item-list,
    .shelterSideButton,
    .inspectionSideButton,
    .btnTargets
):hover,
#app .header__menu > a:is(:active, :focus-visible),
#app .shelterSideButton.activeShadow {
  box-shadow: var(--shadow-pressed-panel);
}


/* =========================================================
   SPECIAL BUTTONS
   ========================================================= */

#app .btnSpecial:not(:focus-visible) {
  box-shadow: var(--shadow-raised-control);
}

#app .btnSpecial:hover:not(:focus-visible) {
  box-shadow: var(--shadow-btns-control);
}


/* =========================================================
   SELECTS
   Override normal, hover and focus shadows
   ========================================================= */

#app select,
#app select:is(:focus, :focus-visible) {
  box-shadow: var(--shadow-raised-control) !important;
}

#app select:hover:not(:disabled) {
  box-shadow: var(--shadow-pressed-control) !important;
}


/* =========================================================
   ACCESSIBILITY - REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  :where(
        #app,
        #app *,
        #app *::before,
        #app *::after
    ) {
    transition-duration: 0s !important;
  }
}

#headerArea,
.header,
.header__menu {
  min-width: 0;
  max-width: 100%;
}

.header__menu {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.header__menu > a {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}





#homeButtonsContainer {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  gap: 1rem;
}

#homeButtonsContainer > .homeButton {
  box-sizing: border-box;

  width: min(100%, 350px);
  min-width: 0;
  max-width: 100%;

  aspect-ratio: 1 / 1;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0.4rem;
  text-align: center;

  white-space: normal;
  overflow-wrap: anywhere;
  font-size: clamp(0.75rem, 1vw, 1.125rem);
}


#mainContentHeaderHomePage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

#mainContentHeaderHomePage > h1 {
  flex: 1 1 240px;
  min-width: 0;
  margin: 0;
}

#mainContentHeaderHomePage > div {
  flex: 2 1 420px;
  min-width: 0;
}
#shelterFilters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;

  gap: 0.75rem 1rem;
  width: 100%;
  min-width: 0;
  height: auto;
}

#shelterFilters > label {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;

  flex: 0 0 auto;
  gap: 0.5rem;
  max-width: 100%;
  white-space: nowrap;
}

#shelterFilters input {
  flex: 0 1 auto;
  width: clamp(110px, 12vw, 160px);
  min-width: 0;
  box-sizing: border-box;
}

#shelterFilters select {
  flex: 0 1 auto;
  width: 120px;
  min-width: 0;
  box-sizing: border-box;
}


#filtersForm {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;

  gap: 0.75rem 1rem;
  width: 100%;
  min-width: 0;
  height: auto;
  box-sizing: border-box;
}

#filtersForm > label {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;

  flex: 0 0 auto;
  gap: 0.5rem;
  max-width: 100%;
  white-space: nowrap;
}

/* Date e Damage */
#filtersForm select {
  width: clamp(130px, 14vw, 190px);
  max-width: 100%;
  min-width: 0;
  flex: 0 1 auto;
  box-sizing: border-box;
}

/* Group by shelter */
#filtersForm input[type="checkbox"] {
  width: auto;
  flex: 0 0 auto;
  margin: 0;
}

#mainContentHeaderHomePage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;

  min-width: 0;
  height: auto;
}

#mainContentHeaderHomePage > h1 {
  flex: 0 1 260px;
  min-width: 0;
}

#mainContentHeaderHomePage > div {
  flex: 1 1 450px;
  min-width: 0;
}