/* =========================================================
   Ravotkampen — Soft Sand Theme
========================================================= */

:root {
  --bg-page: #fbfaf8;
  --bg-navbar: #f5e6d6;
  --bg-form: #e7d3bf;
  --bg-accent: #f2c49b;

  --text: #2a1a12;
  --text-muted: #6f5b4d;

  --border-warm: #d2b9a3;
  --focus-ring: rgba(184, 144, 107, 0.25);

  --input-bg: #ffffff;

  --btn-primary: #d8b28f;
  --btn-primary-hover: #c9a27f;
  --btn-primary-active: #b9916e;
  --btn-primary-disabled: #e6cdb8;

  --radius: 0.85rem;
  --shadow-sm: 0 2px 10px rgba(0,0,0,.06);
}

/* Base */
body {
  background:
    radial-gradient(1200px 700px at 15% 0%, #efe2d6 0%, rgba(239,226,214,0) 60%),
    radial-gradient(900px 600px at 85% 10%, #e7dfd6 0%, rgba(231,223,214,0) 55%),
    linear-gradient(180deg, #f3eee8 0%, #e9e2da 100%);
  background-attachment: fixed;
  color: var(--text);
}


/* Links */
a {
  color: #3a5a84;
}
a:hover {
  color: #2c4668;
}

/* =========================================================
   Navbar
========================================================= */
.navbar-custom {
  background-color: var(--bg-navbar) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
  color: #000 !important;
}

.navbar-custom .nav-link.active {
  font-weight: 600;
  border-bottom: 2px solid rgba(0,0,0,0.18);
}

/* =========================================================
   Cards
========================================================= */
.card {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);

  /* instead of pure white */
  background-color: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(6px);
}


/* =========================================================
   Form cards
========================================================= */
/* Make links inside warm form cards readable */
.form-card {
  background-color: rgba(231, 211, 191, 0.95); /* your soft sand */
}


.form-card a {
  color: #2a1a12;              /* same as main text */
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-card a:hover {
  color: #000000;
}

.form-card .form-card-link {
  color: #2a1a12;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.form-card .form-card-link:hover {
  color: #000;
}



.form-card .form-label {
  font-weight: 600;
  color: var(--text);
}

.form-card .form-control,
.form-card .form-select,
.form-card textarea {
  background-color: var(--input-bg);
  border: 1px solid var(--border-warm);
  color: var(--text);
  border-radius: 0.65rem;
}

.form-card .form-control:focus,
.form-card .form-select:focus,
.form-card textarea:focus {
  border-color: #b8906b;
  box-shadow: 0 0 0 0.15rem var(--focus-ring);
}

.form-card .text-danger {
  color: #8a3b2f !important;
}

/* =========================================================
   Buttons
========================================================= */
.btn-primary {
  background-color: var(--btn-primary);
  border-color: var(--btn-primary);
  color: var(--text);
  font-weight: 600;
}

.btn-primary:hover {
  background-color: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
}

.btn-primary:active {
  background-color: var(--btn-primary-active);
}

/* =========================================================
   Page detail
========================================================= */
.page-detail {
  background-color: var(--bg-form);
  border-radius: var(--radius);
  padding: 2rem;
}

.page-detail .card {
  background-color: rgba(255,255,255,0.9);
}


/* =========================================================
   Alerts
========================================================= */
.alert {
  border-radius: 0.65rem;
}

.status-row {
  gap: 1.1rem;   /* more breathing room between chips */
}

.status-chip {
  padding: .5rem .85rem;  /* taller + wider pills */
}

@media (max-width: 576px) {
  .status-row {
    flex-direction: column;
    align-items: flex-start;
  }
}