/* bp-editor.css — functional editor styles extracted from legacy bp-db.css.
   Global element/design rules were dropped; colors mapped to the soil design system. */

.asteriskField {
    color: #ff0000;
}

.btn-bp-primary {
    background-color: #3498DB;
    background-image: none;
    text-shadow: none !important;
    border: none !important;
    width: 130px !important;
}

.dialog-ovelay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.50);
}

.dialog-ovelay .dialog {
    width: 400px;
    margin: 400px auto 0px;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    border-radius: 0%;
    overflow: hidden
}

.dialog-ovelay .dialog header {
    padding: 12px 10px;
    color: #fff !important;
    border-bottom: 1px solid #4b3621;
    background-color: #33210d;
}

.dialog-ovelay .dialog header h3 {
    font-size: 16px;
    font-weight: bold;
    margin: auto;
    display: inline-block;
    color: #fff !important;
}

.dialog-ovelay .dialog header .fa-close {
    float: right;
    color: #fff;
    cursor: pointer;
    transition: all .5s ease;
    border-radius: 1px
}

.dialog-ovelay .dialog header .fa-close:hover {
    color: #b9b9b9
}

.dialog-ovelay .dialog header .fa-close:active {
    box-shadow: 0 0 5px #944925;
    color: #a2a2a2
}

.dialog-ovelay .dialog .dialog-msg {
    padding: 12px 10px
}

.dialog-ovelay .dialog .dialog-msg p {
    margin: 0;
    font-size: 15px;
    color: #333
}

.dialog-ovelay .dialog footer {
    border-top: 1px solid #e5e5e5;
    padding: 12px 10px;
}

.dialog-ovelay .dialog footer .controls {
    direction: rtl
}

.dialog-ovelay .dialog footer .controls .button {
    padding: 5px 15px;
    border-radius: 3px
}

.bp-add-row-form {
    margin-top: 32px;
    color: #fff;
    height: 37px;
    width: 37px;
}

.add-form-row {
    color: #fff;
    height: 37px;
    width: 37px;
    padding: 6px 2px;
}

.remove-form-row {
    color: #fff !important;
    height: 37px;
    width: 37px;
    padding: 6px 2px;
}

.remove-form-row:hover {
    color: #fff !important;
    height: 37px;
    width: 37px;
    padding: 6px 2px;
}

.bp-hidden-table {
    min-height: 0 !important;
}

.bp-card-body {
    padding: 0;
}

.bp-nav-tabs.nav-tabs {
    border-bottom: 3px solid #fe9e72;
}

.agrovocdialog-ovelay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.50);
}

.agrovocdialog-ovelay .dialog {
    width: 50%;
    margin: 80px auto 0px;
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    border-radius: 0%;
    overflow: hidden;
}

.agrovocdialog-ovelay .dialog header {
    padding: 12px 10px;
    color: #fff !important;
    border-bottom: 1px solid #4b3621;
    background-color: #33210d;
}

.agrovocdialog-ovelay .dialog header h3 {
    font-size: 16px;
    font-weight: bold;
    margin: auto;
    display: inline-block;
    color: #fff !important;
}

.agrovocdialog-ovelay .dialog header .fa-close {
    float: right;
    color: #fff;
    cursor: pointer;
    transition: all .5s ease;
    border-radius: 1px
}

.agrovocdialog-ovelay .dialog header .fa-close:hover {
    color: #b9b9b9
}

.agrovocdialog-ovelay .dialog header .fa-close:active {
    box-shadow: 0 0 5px #944925;
    color: #a2a2a2
}

.agrovocdialog-ovelay .dialog .dialog-msg {
    padding: 12px 20px 0 20px
}

.agrovocdialog-ovelay .dialog .dialog-msg p {
    margin: 0;
    font-size: 15px;
    color: #333
}

.agrovocdialog-ovelay .dialog footer {
    border-top: 1px solid #e5e5e5;
    padding: 12px 10px;
}

.agrovocdialog-ovelay .dialog footer .controls {
    direction: rtl
}

.agrovocdialog-ovelay .dialog footer .controls .button {
    padding: 5px 15px;
    border-radius: 3px
}

.messwert-errors, .idented-error-message {
    margin-left: 15px;
}

.parameter-errors {
    margin-left: 30px;
}

.dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.50);
}

.dialog-overlay .dialog {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50%;
    max-height: calc(100% - 200px);
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    border-radius: 0%;
    overflow-y: scroll;
    overflow-x: hidden;
}

.dialog-overlay header {
    padding: 12px 10px;
    color: #fff !important;
    border-bottom: 1px solid #4b3621;
    background-color: #33210d;
}

.dialog-overlay h3 {
    font-size: 16px;
    font-weight: bold;
    margin: auto;
    display: inline-block;
    color: #fff !important;
}

.dialog-overlay .fa-close {
    float: right;
    color: #fff;
    cursor: pointer;
    transition: all .5s ease;
    border-radius: 1px
}

.dialog-overlay .fa-close:hover {
    color: #b9b9b9
}

.dialog-overlay .fa-close:active {
    box-shadow: 0 0 5px #944925;
    color: #a2a2a2
}

.dialog-overlay .dialog-msg {
    padding: 12px 20px
}

.dialog-overlay .dialog-msg p {
    margin: 0;
    font-size: 15px;
    color: #333
}

.dialog-overlay footer {
    border-top: 1px solid #e5e5e5;
    padding: 12px 10px;
}

.dialog-overlay .controls {
    direction: rtl
}

.dialog-overlay .controls .button {
    padding: 5px 15px;
    border-radius: 3px
}

.dialog-overlay form {
    margin: 10px;
}

.subcard {
    background: #f6f6f6;
}

/* --- Accordion / tab shells shared by profil detail, create and edit -------
   Replaces the legacy green bp-card/tab styling with the soil design system. */

.bp-card-body {
    padding: 0;
}

.card-header.bp-card-header {
    background: #4b3621 !important; /* primary-container */
    border: none;
    border-radius: 0;
}

.card-header.bp-card-header a,
.card-header.bp-card-header h5,
.card-header.bp-card-header span {
    color: #ffffff;
}

.card-header.bp-subcard-header {
    background: #f4ece9 !important; /* surface-container */
    border: none;
    border-left: 4px solid #944925; /* secondary */
    border-radius: 0;
}

.card-header.bp-subcard-header a,
.card-header.bp-subcard-header h5,
.card-header.bp-subcard-header span {
    color: #33210d; /* primary */
}

/* --- Whole-header collapse toggle + rotating chevron ----------------------
   The accordion trigger used to be only the inner `.bp-collapse-link` text, so
   clicks anywhere else on the bar did nothing. accordion-toggle.js forwards a
   bar click to that link; these rules give the affordance (pointer + hover) and
   a chevron pinned to the right that rotates with the expanded state. */

.card-header.bp-card-header,
.card-header.bp-subcard-header {
    position: relative;
    cursor: pointer;
    padding-right: 2.5rem;
}

.card-header.bp-card-header:hover {
    background: #5c4429 !important; /* primary-container, lightened */
}

.card-header.bp-subcard-header:hover {
    background: #ece0db !important; /* surface-container, darkened */
}

.card-header.bp-card-header::after,
.card-header.bp-subcard-header::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 50%;
    width: 0.85rem;
    height: 0.85rem;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.2s ease;
    pointer-events: none;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M3.3%205.3a1%201%200%200%201%201.4%200L8%208.6l3.3-3.3a1%201%200%201%201%201.4%201.4l-4%204a1%201%200%200%201-1.4%200l-4-4a1%201%200%200%201%200-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2016%2016'%3E%3Cpath%20d='M3.3%205.3a1%201%200%200%201%201.4%200L8%208.6l3.3-3.3a1%201%200%201%201%201.4%201.4l-4%204a1%201%200%200%201-1.4%200l-4-4a1%201%200%200%201%200-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.card-header.bp-card-header::after {
    background-color: #ffffff;
}

.card-header.bp-subcard-header::after {
    background-color: #33210d; /* primary */
}

/* Expanded → chevron points up. Tracks the live aria-expanded on the link. */
.card-header.bp-card-header:has(.bp-collapse-link[aria-expanded="true"])::after,
.card-header.bp-subcard-header:has(.bp-collapse-link[aria-expanded="true"])::after {
    transform: translateY(-50%) rotate(180deg);
}

.subcard {
    background: #faf2ee; /* surface-container-low */
}

.tab-content {
    background-color: #fff;
    color: #1e1b19;
    border: 1px solid #d2c4ba; /* outline-variant */
    border-top: none;
    border-radius: 0 0 0.5rem 0.5rem;
}

.bp-nav-tabs.nav-tabs {
    border-bottom: 3px solid #944925; /* secondary */
}

.nav-tabs .bp-nav-link.nav-link {
    font-weight: 600;
    color: #4e453d !important; /* on-surface-variant */
    border: none;
    border-radius: 0.5rem 0.5rem 0 0;
    padding: .5rem 1rem;
}

.nav-tabs .bp-nav-link.nav-link:hover {
    color: #ffffff !important;
    background-color: #4b3621; /* primary-container */
}

.nav-tabs .bp-nav-link.nav-link.active {
    color: #ffffff !important;
    background-color: #944925; /* secondary */
}


/* ===========================================================================
   Editor form system (mockups: create_profile_wizard /
   high_density_horizon_specification)

   Form-design principles applied:
   - one consistent field anatomy: small uppercase label -> 40px filled
     control -> 12px hint (Wroblewski/NN-g: labels above fields, single
     visual ruler)
   - element-based selectors: the legacy widgets ship dozens of class
     variants (.textinput/.select/.numberinput/...) and 109 controls had no
     .form-control at all — styling <input>/<select>/<textarea> directly is
     the only way to make every field identical
   - paired fields only for logically coupled data (ober/unter, datum ranges)
   - sienna focus ring everywhere, including Tom Select
   =========================================================================== */

/* --- Field anatomy ---------------------------------------------------------- */
.bpform input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="submit"]):not([type="button"]),
.bpform select,
.bpform textarea {
  display: block;
  width: 100%;
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: #33210d;
  background-color: #ffffff;
  border: 1px solid #cabeb3;
  border-radius: 0.5rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.bpform textarea { min-height: 4.5rem; }
.bpform select {
  /* keep ONLY the Tailwind-forms chevron (appearance:auto would add a second native arrow) */
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.25rem;
}

.bpform input:focus,
.bpform select:focus,
.bpform textarea:focus {
  outline: 0;
  border-color: #944925;                /* secondary (sienna) */
  box-shadow: 0 0 0 0.15rem rgba(148, 73, 37, 0.18);
}
.bpform input[readonly],
.bpform input:disabled,
.bpform select:disabled,
.bpform textarea[readonly] {
  background-color: #f4ece9;
  color: #7a6a5c;
}
.bpform .is-invalid,
.bpform input.is-invalid,
.bpform select.is-invalid {
  border-color: #b3261e;
}

/* Tom Select: same anatomy as native controls */
.bpform .ts-wrapper .ts-control {
  min-height: 2.5rem;
  padding: 0.5rem 0.75rem;
  background-color: #ffffff;
  border: 1px solid #cabeb3;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  color: #33210d;
}
.bpform .ts-wrapper.focus .ts-control {
  border-color: #944925;
  box-shadow: 0 0 0 0.15rem rgba(148, 73, 37, 0.18);
}
.bpform .ts-wrapper .ts-control input { /* inner search input must stay bare */
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  width: auto;
  display: inline-block;
}

/* Checkboxes & radios: aligned row, brand accent, full-row click target */
.bpform input[type="checkbox"],
.bpform input[type="radio"] {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: #944925;
  vertical-align: -0.15rem;
  margin-right: 0.45rem;
}
.bpform .custom-control,
.bpform .form-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
}
.bpform .custom-control-label { margin: 0; }

/* File inputs */
.bpform input[type="file"] {
  width: 100%;
  padding: 0.4rem 0.5rem;
  font-size: 0.875rem;
  border: 1px dashed #cabeb3;
  border-radius: 0.5rem;
  background: #fdfaf8;
}

/* --- Labels / hints / help -------------------------------------------------- */
.bpform .form-group { margin-bottom: 1rem; }
.bpform .form-group > label {
  display: inline-block;
  margin-bottom: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #7a6a5c;                       /* on-surface-variant */
}
.bpform .form-text {
  margin-top: 0.3rem;
  font-size: 0.74rem;
  line-height: 1.35;
  color: #9a8a7c;
}
.bpform .asteriskField { color: #944925; font-weight: 700; }

/* Help icon sits quietly next to the label, not floating in the flow */
.bpform .bpquestion {
  font-size: 0.8rem;
  color: #b9a89a;
  vertical-align: 0.05rem;
  margin-left: 0.15rem;
  cursor: help;
}

/* --- Grid rhythm ------------------------------------------------------------- */
.bpform .form-row {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
}
.bpform .form-row > * { padding-left: 0.5rem; padding-right: 0.5rem; }

/* --- Section cards ----------------------------------------------------------- */
.bpform .card {
  border: 1px solid #e2d8cf;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(75, 54, 33, 0.05);
  overflow: hidden;                      /* keep header corners rounded */
}
.bpform .card .card { box-shadow: none; }
.bpform > .tab-content > .tab-pane > .card,
.bpform .tab-content > .tab-pane > div > .card {
  border-top: 3px solid #944925;
}
.bpform .card-body { padding: 1.25rem; }

/* Wizard step buttons reset (they are <button>) */
.wizard-step { background: none; border: 0; cursor: pointer; padding: 0; }

/* --- Formset add / remove icon buttons --------------------------------------
   Roadmap target 5: the +/- formset controls were generic bootstrap-lite
   .btn-secondary/.btn-danger rectangles (navy + red). Restyle them — without
   touching markup or the JS hook classes — into compact soil icon buttons:
   add => secondary (sienna), remove => error. Scoped under .bpform so they win
   over bootstrap-lite's button rules; the white fa icons (inline color) stay
   valid because both treatments are filled. Exact add hooks are enumerated on
   purpose: a [class*="-add-row"] match would also catch `bp-add-row-form`,
   which is present on REMOVE buttons. */
.bpform .add-form-row,
.bpform .parameter-add-row,
.bpform .agrovoc-add-row,
.bpform .anthropogene-add-row,
.bpform .vegetation-add-row,
.bpform .btn-danger {
  width: 2.25rem;
  height: 2.25rem;
  min-height: 0;
  padding: 0;
  border: none;
  border-radius: 0.5rem;
  flex: 0 0 auto;
}

.bpform .add-form-row,
.bpform .parameter-add-row,
.bpform .agrovoc-add-row,
.bpform .anthropogene-add-row,
.bpform .vegetation-add-row {
  background-color: #944925;            /* secondary (sienna) */
  color: #ffffff;
}
.bpform .add-form-row:hover,
.bpform .parameter-add-row:hover,
.bpform .agrovoc-add-row:hover,
.bpform .anthropogene-add-row:hover,
.bpform .vegetation-add-row:hover {
  background-color: #773310;            /* on-secondary-container */
}

.bpform .btn-danger {
  background-color: #ba1a1a;            /* error */
  color: #ffffff;
}
.bpform .btn-danger:hover {
  background-color: #93000a;            /* on-error-container */
}

/* Progressive disclosure: descriptor sub-groups start hidden until parent has a value; JS adds .bp-descriptor-visible */
.bp-descriptor-group[data-descriptor-trigger] {
  display: none;
}
.bp-descriptor-group[data-descriptor-trigger].bp-descriptor-visible {
  display: block;
}