/* Community documents. The look comes from the public site's own stylesheet
   (/site/styles.css, the same file www.oakhill-estate.es serves); what
   follows is only what this page adds: the list of documents, the sign-in
   and the form an admin uses to add one. */

/* The page opens under the bar rather than under a photograph. */
.page .section-page { padding-top: clamp(80px, 8vw, 110px); }
.section-page h1 { font-size: clamp(28px, 3.6vw, 38px); margin: 0 0 18px; }

.lede-dark {
  max-width: 62ch;
  color: var(--slate);
  text-shadow: none;
  margin-bottom: 34px;
}

.small { font-size: 13.5px; color: var(--slate); }

/* An admin can look at the page the way an owner sees it: the form and the
   delete buttons disappear, and a line says the view is switched. */
.als-eigenaar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -18px 0 30px;
  font-family: var(--font-title);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  cursor: pointer;
}

.als-eigenaar input { accent-color: var(--olive); width: 15px; height: 15px; }
/* Its own display would otherwise keep a hidden switch on screen. */
.als-eigenaar[hidden] { display: none; }

/* ---------- the documents ---------- */

.doc-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.doc-title {
  font-family: var(--font-title);
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  overflow-wrap: anywhere;
}

.doc-title:hover { border-bottom-color: var(--olive); }

.doc-meta { font-size: 13.5px; color: var(--slate); }

.doc-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

/* Quieter than the buttons on the public pages: a row of them should not
   shout down the titles beside them. */
.btn-doc {
  font-size: 11.5px;
  padding: 8px 16px;
  background: none;
  cursor: pointer;
}

.btn-doc-danger:hover { color: #9e3b3b; border-color: rgba(158, 59, 59, 0.5); }

.doc-empty { color: var(--slate); }

/* ---------- signing in ---------- */

.signin {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}

.signin input { min-width: 280px; }
/* The same 40px as the field beside it: the button's own padding made it a
   few pixels taller, which shows at this size. */
.signin .btn {
  height: 40px;
  padding: 0 26px;
  cursor: pointer;
}

.login-error {
  color: #9e3b3b;
  font-size: 14.5px;
  margin: 0 0 14px;
}

/* ---------- adding one (admins only) ---------- */

.doc-upload {
  background: #fff;
  border: 1px solid var(--line);
  padding: 20px 22px 24px;
  margin-bottom: 10px;
}

.doc-upload h2 {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--slate);
  margin-bottom: 16px;
  padding-bottom: 0;
}

.doc-upload h2::after { display: none; }

/* One row, one height, one typeface, so nothing in it looks like a browser
   default dropped into the page. */
.doc-upload-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 16px;
}

.doc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-title);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}

.doc-upload input,
.doc-upload select,
.signin input {
  height: 40px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--rond);
  background-color: #fff;
  color: var(--ink);
  outline: none;
}

.doc-upload input:focus,
.doc-upload select:focus,
.signin input:focus { border-color: var(--olive); }

/* The drawn chevron: a native select is a different height and a different
   typeface from the fields beside it. */
.doc-upload select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23887e49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 12px;
  padding-right: 32px;
  cursor: pointer;
}

.doc-field-title { flex: 1 1 280px; }
.doc-field-title input { width: 100%; }

/* The file picker: a button and the chosen name inside one field-shaped box,
   with the input itself out of sight. */
.doc-field-file { cursor: pointer; }

/* The button sits inset by the same 5px on top, left and bottom, and the
   chosen name is set in the same ink as the button's label. */
.doc-file {
  display: flex;
  align-items: stretch;
  gap: 14px;
  height: 40px;
  padding: 5px 14px 5px 5px;
  border: 1px solid var(--line);
  background: #fff;
}

.doc-field-file:hover .doc-file { border-color: var(--olive); }

.doc-file-btn {
  display: flex;
  align-items: center;
  border-radius: 3px;
  background: rgba(13, 27, 42, 0.05);
  padding: 0 12px;
  font-family: var(--font-title);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tekst);
}

.doc-file-name {
  align-self: center;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 300;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tekst);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-file input[type="file"] { display: none; }

/* Rides along on the field row rather than sitting above it. */
.doc-add {
  height: 40px;
  padding: 0 22px;
  cursor: pointer;
}

/* ---------- toast ---------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 20px);
  background: var(--ink);
  color: var(--sand);
  font-size: 14px;
  padding: 12px 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 40;
}

.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: #9e3b3b; color: #fff; }

@media (max-width: 700px) {
  .doc-upload-row { flex-direction: column; align-items: stretch; }
  .doc-field-title { flex: 1 1 auto; }
  .doc-file-name { max-width: none; }
  .signin input { min-width: 0; width: 100%; }
}

/* The set-password page stacks its two fields instead of putting them in a
   row beside the button. */
.signin-stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 20px;
}

.signin-stacked input { min-width: 320px; }
.signin-stacked .btn { margin-top: 4px; }

/* The same rounding as the public site's buttons and frames. */
.doc-upload,
.doc-file,
.doc-file-btn,
.toast { border-radius: var(--rond); }

/* ---------- the fields (same as the public site's pages) ---------- */

.doc-upload.veld {
  margin-bottom: 28px;
  border: 0;
  padding: var(--binnen);
  background: rgba(255, 255, 255, 0.38);
}
.doc-upload.veld h3 { margin-bottom: 18px; }

.doc-group .doc-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.doc-group .doc-title { font-family: var(--font-body); font-size: 15.5px; }
.doc-group .doc-actions { display: flex; gap: 8px; flex-shrink: 0; }
.doc-group .doclijst li { align-items: center; }

.knop-wissen { cursor: pointer; }
.knop-wissen:hover { color: #9e3b3b; border-color: rgba(158, 59, 59, 0.5); background: rgba(158, 59, 59, 0.06); }

.doc-empty { margin: 0; }

@media (max-width: 700px) {
  .doc-group .doclijst li { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* The two admin switches sit together. */
.als-eigenaar + .als-eigenaar { margin-top: -22px; }