/* Edit boxes in the add / view pin panel. --surface-2 with a --border outline
   is only a shade away from the panel's own --surface, which made the fields
   hard to tell apart from the panel around them — so they get their own,
   stronger tokens here, plus a larger hit area and text size. Loaded after
   Bootstrap and panel.css, and before accessabilty.css. */

:root {
    --field-bg: #ffffff;
    --field-border: #8f8a7c;
    --field-border-hover: #5f5b51;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) {
        --field-bg: #0f1012;
        --field-border: #6f7178;
        --field-border-hover: #a0a0a5;
    }
}

:root[data-theme=dark] {
    --field-bg: #0f1012;
    --field-border: #6f7178;
    --field-border-hover: #a0a0a5;
}

/* Contrast modes already make --border the brightest color available. Kept
   in this file, after the dark rules above, because :root.cN only ties them
   on specificity (see the matching note in accessabilty.css). */
:root.c2,
:root.c3,
:root.c4 {
    --field-bg: var(--surface);
    --field-border: var(--border);
    --field-border-hover: var(--border);
}

#issuemap-app .form-control,
#issuemap-app .form-select {
    min-height: 2.875rem;
    padding: 0.625rem 0.875rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ink);
    background-color: var(--field-bg);
    border: 0.09375rem solid var(--field-border);
    border-radius: var(--radius-sm);
}

#issuemap-app .form-select {
    padding-right: 2.5rem;
}

/* Bootstrap sets the dropdown arrow on .form-select itself and only swaps it
   for [data-bs-theme=dark], which is absent when dark mode comes from the OS
   preference — and a :root-level override (as in accessabilty.css) is
   shadowed by the element's own declaration. Now that the field follows the
   theme, the arrow has to as well. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme=light]) #issuemap-app .form-select {
        --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23dee2e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    }
}

:root[data-theme=dark] #issuemap-app .form-select,
:root.c2 #issuemap-app .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

:root.c3 #issuemap-app .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffff00' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

:root.c4 #issuemap-app .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

#issuemap-app .form-control:hover:not(:focus):not([readonly]):not(:disabled),
#issuemap-app .form-select:hover:not(:focus):not(:disabled) {
    border-color: var(--field-border-hover);
}

#issuemap-app .form-control:focus,
#issuemap-app .form-select:focus {
    background-color: var(--field-bg);
    border-color: var(--teal);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--teal) 30%, transparent);
}

#issuemap-app .form-control::placeholder {
    color: var(--ink-dim);
}

#issuemap-app textarea.form-control {
    resize: vertical;
    min-height: 80px;
}

#issuemap-app .form-control[readonly] {
    background: var(--bg);
    color: var(--ink-dim);
    cursor: default;
}

/* View mode shows the description as plain text, so the taller box is only
   for the editable form. */
#issuemap-app .add-panel:not(.is-view-mode) #pointDescription {
    min-height: 7.5rem;
}

/* Bootstrap pulls the "choose file" button out to the field's edges with
   negative margins equal to the field padding — keep the two in step. */
#issuemap-app .form-control::file-selector-button {
    padding: 0.625rem 0.875rem;
    margin: -0.625rem -0.875rem;
    margin-inline-end: 0.875rem;
}

/* The category picker is disabled (not hidden) while viewing a pin. */
#issuemap-app .form-select:disabled {
    background-color: var(--bg);
    border-color: var(--border);
    color: var(--ink-dim);
}