@import url('./tokens.css');
@import url('./base.css');
@import url('./layout.css');
@import url('./components.css');
@import url('./notifications.css');
@import url('./command-palette.css');
@import url('./forms.css');
@import url('./auth.css');
@import url('./dashboard.css');
@import url('./dashboard-ecosystem.css');
@import url('./privacy-mode.css');
@import url('./price-sources.css');
@import url('./price-intelligence.css');
@import url('./price-matching.css');
@import url('./ai-matching-logs.css');
@import url('./pim.css');
@import url('./product-edit-workspace.css');
@import url('./product-create-guided.css');
@import url('./product-market-intelligence.css');
@import url('./product-families.css');
@import url('./google-merchant.css');
@import url('./operations.css');
@import url('./responsive-fast-view.css');
@import url('./tasks.css');
@import url('./invoice-intake.css');
@import url('./service-case-gallery.css');
@import url('./quote-detail-1.css');
@import url('./quote-detail-2.css');
@import url('./quote-detail-3.css');
@import url('./quote-detail-4.css');
@import url('./quote-form.css');
@import url('./marketing.css');
@import url('./automation-designer.css');
@import url('./reporting.css');
@import url('./inbox.css');
@import url('./inbox-production.css');
@import url('./mailing-lists.css');
@import url('./crm.css');
@import url('./connectors.css');
@import url('./alltron.css');

/*
 * Shared AJAX relation picker density.
 * Results behave like a real dropdown: they overlay surrounding content instead
 * of making forms taller, while long metadata stays quickly scannable.
 */
.relation-picker {
    position: relative;
    gap: 0.42rem;
}

.relation-picker__control {
    min-height: 2.5rem;
    padding: 0.16rem 0.22rem 0.16rem 0.72rem;
    border-radius: var(--radius-sm);
}

.relation-picker__input {
    min-height: 2.12rem;
    padding: 0.35rem 0;
    line-height: 1.2;
}

.relation-picker__clear {
    inline-size: 2.05rem;
    block-size: 2.05rem;
}

.relation-picker[data-has-value="0"] .relation-picker__selected {
    display: none;
}

.relation-picker__selected {
    align-items: center;
    gap: 0.55rem;
    min-height: 2.45rem;
    padding: 0.42rem 0.62rem;
    border-radius: var(--radius-sm);
}

.relation-picker__selected-copy {
    min-width: 0;
    gap: 0.05rem;
}

.relation-picker__selected-copy strong,
.relation-picker__selected-copy span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relation-picker__selected-copy strong {
    font-size: 0.84rem;
}

.relation-picker__selected-copy span {
    font-size: 0.72rem;
}

.relation-picker__selected-link {
    flex: 0 0 auto;
    min-height: 1.9rem;
    padding: 0.3rem 0.55rem;
    font-size: 0.74rem;
}

.relation-picker__results {
    position: absolute;
    z-index: 80;
    top: calc(100% + 0.3rem);
    left: 0;
    right: 0;
    gap: 0.28rem;
    max-height: min(23rem, 56vh);
    overflow-y: auto;
    padding: 0.35rem;
    border-radius: var(--radius-sm);
    box-shadow: 0 0.85rem 2rem rgba(15, 42, 70, 0.16);
    overscroll-behavior: contain;
}

.relation-picker__status:empty {
    display: none;
}

.relation-picker__list {
    gap: 0.24rem;
}

.relation-picker__option {
    gap: 0.08rem;
    min-height: 2.75rem;
    padding: 0.42rem 0.58rem;
    border-radius: var(--radius-sm);
}

.relation-picker__option-label,
.relation-picker__option-meta {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.relation-picker__option-label {
    font-size: 0.84rem;
    line-height: 1.2;
}

.relation-picker__option-meta {
    font-size: 0.72rem;
    line-height: 1.25;
}

.relation-picker__empty,
.relation-picker__status {
    padding: 0.35rem 0.45rem;
    font-size: 0.75rem;
}

@media (max-width: 680px) {
    .relation-picker__results {
        max-height: min(20rem, 52vh);
    }

    .relation-picker__option {
        min-height: 3rem;
        padding-block: 0.5rem;
    }
}

/*
 * Shared text editing surfaces.
 * Plain textareas and WYSIWYG editors use one visual language throughout the ERP.
 */
.form-field textarea:not(.rich-text__source),
textarea.form-textarea--code {
    resize: vertical;
    min-height: 5.25rem;
    padding: 0.62rem 0.72rem;
    border-radius: 0.62rem;
    background: #fff;
    line-height: 1.45;
}

.form-field textarea[rows="2"]:not(.rich-text__source) {
    min-height: 3.8rem;
}

.form-field textarea[rows="3"]:not(.rich-text__source),
.form-field textarea[rows="4"]:not(.rich-text__source) {
    min-height: 5.5rem;
}

.form-field textarea[rows="5"]:not(.rich-text__source),
.form-field textarea[rows="6"]:not(.rich-text__source) {
    min-height: 8rem;
}

.rich-text {
    display: grid;
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 42, 70, 0.03);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.rich-text:focus-within {
    border-color: rgba(15, 95, 149, 0.5);
    box-shadow: 0 0 0 3px rgba(15, 95, 149, 0.1);
}

.rich-text__toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem;
    min-height: 2.9rem;
    padding: 0.38rem 0.45rem;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background: #f8fafc;
}

.rich-text__toolbar-group {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.rich-text__toolbar-group + .rich-text__toolbar-group {
    margin-left: 0.15rem;
    padding-left: 0.45rem;
    border-left: 1px solid var(--color-border);
}

.rich-text__toolbar-group--end {
    margin-left: auto;
}

.rich-text__button {
    display: inline-grid;
    place-items: center;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.32rem 0.48rem;
    border: 1px solid transparent;
    border-radius: calc(var(--radius-sm) - 1px);
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
}

.rich-text__button--wide {
    min-width: auto;
}

.rich-text__button:hover {
    border-color: var(--color-border);
    background: #fff;
    color: var(--color-text);
}

.rich-text__button.is-active {
    border-color: rgba(15, 95, 149, 0.22);
    background: rgba(15, 95, 149, 0.09);
    color: var(--color-brand);
}

.rich-text__button:focus-visible {
    outline: 2px solid rgba(15, 95, 149, 0.24);
    outline-offset: 1px;
}

.rich-text__editor {
    position: relative;
    min-height: 8rem;
    max-height: 34rem;
    overflow: auto;
    padding: 0.85rem 0.95rem 1rem;
    border: 0;
    border-radius: 0;
    background: #fff;
    color: var(--color-text);
    line-height: 1.58;
    outline: none;
    overflow-wrap: anywhere;
}

.rich-text--compact .rich-text__editor {
    min-height: 6rem;
}

.rich-text--large .rich-text__editor {
    min-height: 11rem;
}

.rich-text__editor[data-empty="true"]::before {
    content: attr(data-placeholder);
    position: absolute;
    color: #8a96a4;
    pointer-events: none;
}

.rich-text__editor h1,
.rich-text__editor h2,
.rich-text__editor h3,
.wysiwyg-editor h1,
.wysiwyg-editor h2,
.wysiwyg-editor h3,
#wysiwygEditor h1,
#wysiwygEditor h2,
#wysiwygEditor h3 {
    margin: 1rem 0 0.45rem;
    line-height: 1.3;
}

.rich-text__editor h2:first-child,
.rich-text__editor h3:first-child {
    margin-top: 0;
}

.rich-text__editor p,
.rich-text__editor ul,
.rich-text__editor ol,
.rich-text__editor blockquote,
.wysiwyg-editor p,
.wysiwyg-editor ul,
.wysiwyg-editor ol,
#wysiwygEditor p,
#wysiwygEditor ul,
#wysiwygEditor ol {
    margin: 0 0 0.7rem;
}

.rich-text__editor ul,
.rich-text__editor ol,
.wysiwyg-editor ul,
.wysiwyg-editor ol,
#wysiwygEditor ul,
#wysiwygEditor ol {
    padding-left: 1.45rem;
}

.rich-text__editor > :last-child,
.wysiwyg-editor > :last-child,
#wysiwygEditor > :last-child {
    margin-bottom: 0;
}

.rich-text__source {
    display: none !important;
}

/* Legacy WYSIWYG screens get the same compact editor treatment without a markup migration. */
.wysiwyg-toolbar--enhanced,
#wysiwygToolbar.wysiwyg-toolbar--enhanced {
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.3rem !important;
    min-height: 2.9rem;
    margin-bottom: 0 !important;
    padding: 0.38rem 0.45rem !important;
    border: 1px solid var(--color-border) !important;
    border-bottom: 0 !important;
    border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
    background: #f8fafc !important;
}

.wysiwyg-toolbar--enhanced button,
#wysiwygToolbar.wysiwyg-toolbar--enhanced button {
    width: auto !important;
    min-width: 2rem !important;
    height: 2rem !important;
    min-height: 2rem !important;
    padding: 0.32rem 0.48rem !important;
    border: 1px solid transparent !important;
    border-radius: calc(var(--radius-sm) - 1px) !important;
    background: transparent !important;
    color: var(--color-text-muted) !important;
    font-size: 0.76rem !important;
    line-height: 1 !important;
}

.wysiwyg-toolbar--enhanced button:hover,
#wysiwygToolbar.wysiwyg-toolbar--enhanced button:hover {
    border-color: var(--color-border) !important;
    background: #fff !important;
    color: var(--color-text) !important;
}

.wysiwyg-editor[data-clean-paste-ready="1"],
#wysiwygEditor[data-clean-paste-ready="1"] {
    min-height: 12rem !important;
    padding: 0.9rem 1rem 1rem !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 0 0 var(--radius-md) var(--radius-md) !important;
    background: #fff !important;
    color: var(--color-text) !important;
    font-family: var(--font-sans) !important;
    font-size: 0.9rem !important;
    line-height: 1.58 !important;
    overflow-wrap: anywhere;
}

.wysiwyg-editor[data-clean-paste-ready="1"]:focus,
#wysiwygEditor[data-clean-paste-ready="1"]:focus {
    border-color: rgba(15, 95, 149, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(15, 95, 149, 0.1) !important;
    outline: none !important;
}

@media (max-width: 680px) {
    .rich-text__toolbar-group--end {
        margin-left: 0;
    }

    .rich-text__editor {
        min-height: 8rem;
        max-height: none;
    }

    .rich-text__button,
    .wysiwyg-toolbar--enhanced button,
    #wysiwygToolbar.wysiwyg-toolbar--enhanced button {
        min-height: 2.35rem !important;
    }
}

/* Prevent iOS from auto-zooming focused form controls while preserving user pinch zoom. */
@media (max-width: 680px) {
    :is(
        input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
        select,
        textarea
    ) {
        font-size: 16px;
    }
}