html {
  font-size: 15px;
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.navbar-brand {
  letter-spacing: 0.5px;
}

/* ---------- Hero ---------- */
.ekam-hero {
  position: relative;
  background: linear-gradient(135deg, #14203a 0%, #1c3a52 45%, #1f5c66 100%);
  color: #fff;
  padding: 5rem 1.5rem 6rem;
  text-align: center;
  overflow: hidden;
}

.ekam-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
}

.ekam-hero-wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 70px;
  fill: #f8f9fa; /* matches page background so the wave blends into the content below */
}

/* ---------- Sea-background hero variant (signed-in Welcome screen) ---------- */
.ekam-hero-sea {
  background-image: linear-gradient(135deg, rgba(20, 32, 58, 0.55) 0%, rgba(28, 58, 82, 0.4) 45%, rgba(31, 92, 102, 0.35) 100%),
                     url('/images/illustrations/sea-hero.svg');
  background-size: cover;
  background-position: center;
}

/* ---------- Illustration cards ---------- */
/* Currently pointing at hand-built SVG illustrations in
   wwwroot/images/illustrations/. To swap in real photography later,
   just point these <img> tags at photo files instead (keep ~4:3
   aspect ratio for a consistent grid) - no CSS changes needed. */
.ekam-photo-card {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.5rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ekam-photo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

/* ---------- PMS module forms (Companies, Properties, Information) ---------- */
/* Scoped to .pms-form so this doesn't affect login/register or other
   unrelated pages - just wrap a form/container with this class. */
.pms-form .form-control,
.pms-form .form-select {
  background-color: #fffde7;
}

.pms-form .form-control:focus,
.pms-form .form-select:focus {
  background-color: #fffde7;
}

.pms-form .form-control:disabled {
  background-color: #f1f1ea;
}

/* ---------- Tappable list rows (Suppliers, Information, etc.) ---------- */
/* The whole row navigates to the record's detail/edit page (better for
   touch/mobile than a small Edit button), while the Actions cell opts
   out via event.stopPropagation() so its own buttons still work normally. */
.pms-clickable-row {
  cursor: pointer;
}

.pms-clickable-row:hover {
  background-color: #f8f9fa;
}

.pms-clickable-row:active {
  background-color: #f1f1f1;
}