/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */
input[type="search"] { appearance: none; }
input[type="search"]::-webkit-search-cancel-button { display: none; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
.price-editor > summary::after,
.field-map > summary::after,
.sync-issue-panel > summary::after { display: inline-block; margin-left: 7px; color: var(--muted); content: "+"; }
.price-editor[open] > summary::after,
.field-map[open] > summary::after,
.sync-issue-panel[open] > summary::after { content: "−"; }
.native-file-input { position: fixed !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; opacity: 0 !important; pointer-events: none !important; }
.file-picker { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; }
.file-picker-button { min-height: 38px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px; color: var(--ink); background: var(--surface); font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.file-picker-name { overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.file-picker.has-file .file-picker-name { color: var(--ink); }
.file-picker.is-invalid .file-picker-button { border-color: #c84f46; box-shadow: 0 0 0 2px #c84f4618; }
.custom-select { position: relative; min-width: 0; }
.custom-select-trigger { display: flex; width: 100%; min-height: 40px; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line); border-radius: 9px; padding: 0 11px; color: var(--ink); background: var(--surface); font: inherit; font-size: 10px; text-align: left; cursor: pointer; }
.custom-select-trigger[aria-invalid="true"] { border-color: #c84f46; box-shadow: 0 0 0 2px #c84f4618; }
.custom-select-menu { position: absolute; z-index: 15; top: calc(100% + 5px); right: 0; left: 0; max-height: 240px; overflow-y: auto; border: 1px solid var(--line); border-radius: 9px; padding: 5px; background: var(--surface); box-shadow: 0 14px 36px #17212620; }
.custom-select-menu button { display: block; width: 100%; min-height: 36px; border: 0; border-radius: 7px; padding: 0 9px; color: var(--ink); background: transparent; font: inherit; font-size: 10px; text-align: left; cursor: pointer; }
.custom-select-menu button:hover, .custom-select-menu button:focus-visible { background: var(--subtle); outline: none; }
.custom-select-menu button.is-selected { color: #3370ff; background: #edf3ff; font-weight: 700; }
.stepper { display: grid; min-width: 96px; height: 40px; grid-template-columns: 32px minmax(32px, 1fr) 32px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); }
.stepper button { border: 0; padding: 0; color: var(--muted); background: var(--subtle); font-size: 15px; cursor: pointer; }
.stepper input { min-width: 0 !important; width: 100% !important; min-height: 0 !important; height: 100% !important; border: 0 !important; border-radius: 0 !important; padding: 0 3px !important; color: var(--ink); background: var(--surface); font-size: 11px; text-align: center; outline: none; }
.stepper:focus-within { border-color: #3370ff; box-shadow: 0 0 0 2px #3370ff18; }