/* ═══════════════════════════════════════════════════════
   CONTROLS — Agerpix v2 Design System
   Form controls, field types, and interactive elements
   ═══════════════════════════════════════════════════════ */

/* ── Container ── */
.edit_view {
    width: 100%;
    font-family: var(--font);
}

/* ── ColorPicker ── */
span.input-group-addon {
    height: 2.3555555rem !important;
    border: 1px solid var(--color-border, #e2e8f0);
    display: flex;
    width: 3rem;
    border-radius: 0 var(--radius-xs, 4px) var(--radius-xs, 4px) 0;
    border-left: 0;
    align-items: center;
}
.colorpicker-element .input-group-addon i,
.colorpicker-element .add-on i {
    display: block;
    height: 60%;
    width: 70%;
    border-radius: var(--radius-xs, 4px);
    margin: auto;
}

/* ── Custom File Input ── */
.custom-file-label {
    overflow: hidden;
    white-space: nowrap;
    padding-right: 8em;
    text-overflow: ellipsis;
    font-family: var(--font);
    font-size: 0.875rem;
    border-color: var(--color-border, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
    color: var(--color-text, #111827);
}
.custom-file-input {
    cursor: pointer;
}

/* ── Textarea autosize ── */
textarea.textarea-autosize {
    height: 2.25rem;
    min-height: 2.25rem;
    resize: none;
    overflow-y: hidden;
    font-family: var(--font);
    border-color: var(--color-border, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
    transition: border-color 0.2s, box-shadow 0.2s;
}
textarea.textarea-autosize:focus {
    border-color: var(--color-primary, #1a4d3e);
    box-shadow: var(--accent-glow);
}
textarea.textarea-autosize.form-control-lg {
    height: 3.75rem;
    min-height: 3.75rem;
}
textarea.textarea-autosize.form-control-sm {
    height: 2rem;
    min-height: 2rem;
}

/* ── Relation entity many card / Permission ── */
.relation-entity-many-card-item,
.permission-card-item {
    opacity: 0.45;
    transition: opacity 0.15s;
}
.relation-entity-many-card-item.active,
.permission-card-item.active {
    opacity: 1;
}

/* ── Validation feedback ── */
[ftype="FieldRelationEntityManyCard"].is-invalid ~ .invalid-feedback,
[ftype="FieldSchedule"].is-invalid ~ .invalid-feedback,
[ftype="FieldGalery"].is-invalid ~ .invalid-feedback,
[ftype="FieldPermission"].is-invalid ~ .invalid-feedback,
[ftype="FieldImage"].is-invalid ~ .invalid-feedback {
    display: block;
}
[ftype="FieldRelationEntityManyCard"].is-invalid,
[ftype="FieldSchedule"].is-invalid,
[ftype="FieldGalery"].is-invalid,
[ftype="FieldPermission"].is-invalid,
[ftype="FieldImage"].is-invalid {
    border: 1px solid var(--color-danger, #dc2626);
    border-radius: var(--radius-sm, 6px);
}

.field-select-all,
.field-unselect-all {
    float: right;
    font-size: 0.75rem;
    margin-right: 1rem;
    cursor: pointer;
    color: var(--color-primary, #1a4d3e);
    font-weight: 600;
    transition: opacity 0.15s;
}
.field-select-all:hover,
.field-unselect-all:hover {
    opacity: 0.7;
}

/* ── Links ── */
.link {
    color: var(--color-primary, #1a4d3e);
}

/* ── Schedule ── */
tr.field-schedule-separator td,
tr.field-schedule-separator th {
    background-color: var(--color-border-light, #f1f5f9);
    padding: 0.2rem;
}

/* ── Gallery ── */
.galery-image {
    border-radius: var(--radius-sm, 6px);
    background-color: var(--color-surface, #fff);
    height: 5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border, #e2e8f0);
}
.galery-image-preview {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: var(--radius-sm, 6px);
}
.galery-image-item-icons {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    color: #fff;
    background-color: rgba(0,0,0,0.45);
    border-radius: var(--radius-sm, 6px);
    transition: background-color 0.15s;
}
.galery-image-item-icons:hover {
    background-color: rgba(0,0,0,0.55);
}
.galery-image-remove,
.galery-image-download,
.galery-image-view,
.galery-image-add {
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.galery-image-remove,
.galery-image-download,
.galery-image-view {
    display: none;
}
.galery-image-preview.with_data .galery-image-add { display: none; }
.galery-image-preview.with_data .galery-image-remove,
.galery-image-preview.with_data .galery-image-view { display: block; }
.galery-image-preview.from_server .galery-image-download { display: block; }
.galery-image-wp.is-invalid .galery-image {
    opacity: 0.5;
    box-shadow: 0 0 0 2px var(--color-danger, #dc2626);
}

/* ── Single Image ── */
.single-image-image {
    border-radius: var(--radius-sm, 6px);
    background-color: var(--color-surface, #fff);
    height: 5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border, #e2e8f0);
}
.single-image-image-preview {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: var(--radius-sm, 6px);
}
.single-image-image-item-icons {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    color: #fff;
    background-color: rgba(0,0,0,0.45);
    border-radius: var(--radius-sm, 6px);
}
.single-image-image-remove,
.single-image-image-view,
.single-image-image-download,
.single-image-image-add {
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.single-image-image-remove,
.single-image-image-view,
.single-image-image-download {
    display: none;
}
.single-image-image-preview.with_data .single-image-image-add { display: none; }
.single-image-image-preview.with_data .single-image-image-remove,
.single-image-image-preview.with_data .single-image-image-view { display: block; }
.single-image-image-preview.from_server .single-image-image-download { display: block; }
.single-image-image-wp.is-invalid .single-image-image {
    opacity: 0.5;
    box-shadow: 0 0 0 2px var(--color-danger, #dc2626);
}

/* ── Files ── */
.files-file {
    border-radius: var(--radius-sm, 6px);
    background-color: var(--color-surface, #fff);
    height: 5rem;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border, #e2e8f0);
}
.files-file-preview {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: var(--radius-sm, 6px);
}
.files-file-item-icons {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    color: #fff;
    background-color: rgba(0,0,0,0.45);
    border-radius: var(--radius-sm, 6px);
}
.files-file-remove,
.files-file-download,
.files-file-add {
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}
.files-file-remove,
.files-file-download {
    display: none;
}
.files-file-preview.with_data .files-file-add { display: none; }
.files-file-preview.with_data .files-file-remove { display: block; }
.files-file-preview.from_server .files-file-download { display: block; }
.files-file-wp.is-invalid .files-file {
    opacity: 0.5;
    box-shadow: 0 0 0 2px var(--color-danger, #dc2626);
}

/* ── Pagination ── */
.pagination .active .page-link {
    background-color: var(--color-primary, #1a4d3e);
    border-color: var(--color-primary, #1a4d3e);
}

/* ── Bootstrap select ── */
.bootstrap-select button {
    min-width: 4rem;
    background-color: var(--color-surface, #fff) !important;
    border-color: var(--color-border, #e2e8f0);
    font-family: var(--font);
    font-size: 0.875rem;
    border-radius: var(--radius-sm, 6px);
}
.bootstrap-select .dropdown-item.active,
.bootstrap-select .dropdown-item:active {
    background-color: var(--color-primary, #1a4d3e);
    color: #fff;
}
.form-inline .bootstrap-select,
.form-horizontal .bootstrap-select,
.form-group .bootstrap-select {
    padding-left: 0;
}
.dropdown-item:focus,
.dropdown-item:hover {
    background-color: var(--color-primary-light, #25644f) !important;
    color: #fff;
}

/* ── Field map ── */
.field-geometry-map {
    height: 15rem !important;
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-sm, 6px);
}
.field-geometry-map-controls {
    z-index: 1000;
    position: absolute;
    right: 0.6rem;
    top: 0.6rem;
}
.field-geometry-map-control {
    width: 2rem;
    height: 2rem;
    background-color: var(--color-surface, #fff);
    border-radius: var(--radius-xs, 4px);
    margin-bottom: 0.3rem;
    cursor: pointer;
    box-shadow: var(--shadow-xs);
    transition: background-color 0.15s;
}
.field-geometry-map-control:hover {
    background-color: var(--color-border-light, #f1f5f9);
}
.field-geometry-map-control i {
    font-size: 1rem !important;
    color: var(--color-text, #111827);
}
.field-geometry-map.is-invalid {
    border: 1px solid var(--color-danger, #dc2626);
}

/* ── Field plot ranges ── */
.field-plot-icon {
    background-image: url(../img/icons/leafiness.svg);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 2rem;
    height: 2rem;
}
.field-plot-icon.leafiness      { background-image: url(../img/icons/leafiness.svg); }
.field-plot-icon.production     { background-image: url(../img/icons/production.svg); }
.field-plot-icon.vigor          { background-image: url(../img/icons/vigor.svg); }
.field-plot-icon.leaf_fruit_ratio { background-image: url(../img/icons/leaf_fruit.svg); }
.field-plot-icon.caliber        { background-image: url(../img/icons/caliber.svg); }

.field-plot-icon-color {
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-xs, 4px);
}
.field-plot-icon-color.one   { background-color: rgb(237,30,121); }
.field-plot-icon-color.two   { background-color: rgb(252,238,33); }
.field-plot-icon-color.three { background-color: rgb(140,198,63); }

.field-plot-icon-item-ranges {
    font-size: 0.75rem;
    text-align: right;
    margin-right: 0.5rem;
    cursor: pointer;
    color: var(--color-text-secondary, #6b7280);
}
.field-plot-item-wp {
    width: 33%;
    text-align: center;
}
.field-plot-range {
    width: calc(100% - 5rem);
    margin-left: -3rem;
}
.field-plot-icon-item-ranges.break-1 span,
.field-plot-icon-item-ranges.break-2 span {
    border: 1px solid var(--color-border, #e2e8f0);
    padding: 0.2rem 0.4rem;
    border-radius: var(--radius-xs, 4px);
    margin-left: 0.2rem;
    font-family: var(--font-mono);
}
.field-plot-items.is-invalid,
.was-validated .field-plot-items:invalid {
    border-color: var(--color-danger, #dc2626);
    padding-right: calc(1.5em + .75rem);
    background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E);
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    display: block;
    border-width: 1px;
    border-style: solid;
    border-radius: var(--radius-sm, 6px);
}
.field-plot-items.is-invalid ~ .invalid-feedback,
.field-plot-items.is-invalid ~ .invalid-tooltip,
.was-validated .field-plot-items:invalid ~ .invalid-feedback,
.was-validated .field-plot-items:invalid ~ .invalid-tooltip {
    display: block;
}

/* ── Field relation entity search / text multiple ── */
.field-entity-relation-item-wp,
.field-text-multiple-item-wp {
    border: 1px solid var(--color-border, #e2e8f0);
    border-radius: var(--radius-xs, 4px);
}

/* Related entity tables */
.relation-entity-many-count-content .table,
.relation-entity-many-content .table {
    font-size: 0.8rem;
}

/* Field text multiple */
.field-text-multiple input[type="text"] {
    width: calc(100% - 2.6rem);
}
.field-text-multiple .field-text-multiple-add {
    position: absolute;
    top: 1.7rem;
    right: 0.9rem;
    color: var(--color-primary, #1a4d3e);
}
.field-text-multiple-item-content {
    word-break: break-all;
}

/* ── Field file buttons ── */
.field-file-btns button {
    color: #fff;
    background-color: var(--color-primary, #1a4d3e);
    border-color: var(--color-primary, #1a4d3e);
    border-radius: var(--radius-sm, 6px);
    font-family: var(--font);
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
    transition: background-color 0.15s, color 0.15s;
}
.field-file-btns button:hover {
    color: var(--color-primary, #1a4d3e);
    background-color: var(--color-surface, #fff);
    border-color: var(--color-primary, #1a4d3e);
}

/* ── Field relation entity table ── */
.is-invalid[ftype="FieldRelationEntityTable"] {
    border: 1px solid var(--color-danger, #dc2626);
    padding: 0.4rem;
    border-radius: var(--radius-xs, 4px);
}
.is-invalid[ftype="FieldRelationEntityTable"] ~ .invalid-feedback {
    display: block;
}

/* ── Field plot selector ── */
.plot-selector-item {
    display: block;
    padding: 0.5em;
    border: 1px solid var(--color-border, #e2e8f0);
    margin: 0.3em;
    width: 18%;
    text-align: center;
    border-radius: var(--radius-sm, 6px);
    font-family: var(--font);
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.field-plot-selector-items {
    display: flex;
    flex-wrap: wrap !important;
}
.plot-selector-item.item-selected {
    background-color: var(--color-primary, #1a4d3e);
    color: #fff;
    border-color: var(--color-primary, #1a4d3e);
}
.plot-selector-item:hover {
    border-color: var(--color-primary-light, #25644f);
    background-color: var(--color-border-light, #f1f5f9);
}
.plot-selector-item.item-selected:hover {
    background-color: var(--color-primary-light, #25644f);
}

@media screen and (max-width: 995px) { .plot-selector-item { width: 23%; } }
@media screen and (max-width: 770px) { .plot-selector-item { width: 31%; } }
@media screen and (max-width: 450px) { .plot-selector-item { width: 47%; } }

/* ── Dark theme overrides ── */
[data-theme="dark"] span.input-group-addon { border-color: var(--color-border); background-color: var(--color-surface); }
[data-theme="dark"] .custom-file-label { background-color: var(--color-bg); border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] textarea.textarea-autosize { background-color: var(--color-bg); border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .bootstrap-select button { background-color: var(--color-surface) !important; border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .galery-image,
[data-theme="dark"] .single-image-image,
[data-theme="dark"] .files-file { background-color: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .field-geometry-map { border-color: var(--color-border); }
[data-theme="dark"] .field-geometry-map-control { background-color: var(--color-surface); }
[data-theme="dark"] .field-geometry-map-control i { color: var(--color-text); }
[data-theme="dark"] tr.field-schedule-separator td,
[data-theme="dark"] tr.field-schedule-separator th { background-color: var(--color-border-light); }
[data-theme="dark"] .field-entity-relation-item-wp,
[data-theme="dark"] .field-text-multiple-item-wp { border-color: var(--color-border); }
[data-theme="dark"] .plot-selector-item { border-color: var(--color-border); color: var(--color-text); }
[data-theme="dark"] .plot-selector-item:hover { background-color: var(--color-border-light); }
[data-theme="dark"] .field-plot-icon-item-ranges.break-1 span,
[data-theme="dark"] .field-plot-icon-item-ranges.break-2 span { border-color: var(--color-border); }