/* Q Org Web Field Controls v1.2
   Website-only normalization for native Select, Frappe Web Form Select,
   Link/Dynamic Link/Autocomplete lists, login language picker and empty
   breadcrumb spacing. This file is intentionally NOT loaded in Desk. */

/* Web component aliases. Every value originates from active web_light_* or
   web_dark_* tokens generated by Q Org Design System Settings. Website Theme
   can override any alias or the component selectors after web_include_css. */
html[data-qorg-scope="web"] {
    --qorg-web-control-height: var(--qorg-web-field-height, 44px);
    --qorg-web-control-radius: var(--qorg-web-field-radius, var(--border-radius, 6px));
    --qorg-web-popup-bg: var(--qorg-elevated-bg, var(--qorg-surface-bg, var(--card-bg)));
    --qorg-web-popup-border: var(--qorg-border, var(--border-color));
    --qorg-web-popup-text: var(--qorg-text, var(--text-color));
    --qorg-web-popup-icon: var(--qorg-icon, var(--text-muted));
    --qorg-web-popup-hover-bg: color-mix(in srgb, var(--qorg-link, var(--primary-color)) 10%, var(--qorg-control-bg, var(--control-bg)));
    --qorg-web-popup-hover-text: var(--qorg-link-hover, var(--qorg-link, var(--primary-color)));
    --qorg-web-popup-active-bg: color-mix(in srgb, var(--qorg-link, var(--primary-color)) 16%, var(--qorg-control-bg, var(--control-bg)));
    --qorg-web-popup-active-text: var(--qorg-link-hover, var(--qorg-link, var(--primary-color)));
    --qorg-web-popup-radius: var(--qorg-default-menu-radius, var(--qorg-web-card-radius, var(--border-radius, 8px)));
    --qorg-web-popup-item-height: var(--qorg-web-field-height, 44px);
    --qorg-web-popup-item-radius: var(--qorg-web-field-radius, var(--border-radius, 6px));
    --qorg-web-popup-item-padding: 12px;
}

/* Closed controls. Restricted to Website scope so Desk remains untouched. */
html[data-qorg-scope="web"][data-qorg-theme-runtime="1"] :is(
    input.form-control:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
    textarea.form-control,
    select.form-control,
    select.input-with-feedback,
    .awesomplete > input.form-control,
    .awesomplete > input.input-with-feedback
) {
    width: 100%;
    min-height: var(--qorg-web-control-height) !important;
    color: var(--qorg-field-text, var(--text-color)) !important;
    background: var(--qorg-field-bg, var(--control-bg)) !important;
    border: 1px solid var(--qorg-field-border, var(--border-color)) !important;
    border-radius: var(--qorg-web-control-radius) !important;
    box-shadow: none !important;
}

html[data-qorg-scope="web"][data-qorg-theme-runtime="1"] :is(
    input.form-control,
    textarea.form-control,
    select.form-control,
    select.input-with-feedback,
    .awesomplete > input
):focus {
    border-color: var(--qorg-field-focus, var(--primary-color)) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--qorg-field-focus, var(--primary-color)) 18%, transparent) !important;
}

html[data-qorg-scope="web"][data-qorg-theme-runtime="1"] :is(input, textarea)::placeholder {
    color: var(--qorg-field-placeholder, var(--text-muted)) !important;
    opacity: 1;
}

/* Native Select: explicitly disable experimental base-select to prevent the
   popup from becoming document content and overlapping following labels. */
html[data-qorg-scope="web"][data-qorg-theme-runtime="1"] :is(
    .frappe-control[data-fieldtype="Select"],
    .qorg-filter-card label:has(> select.form-control)
) {
    position: relative;
}

html[data-qorg-scope="web"][data-qorg-theme-runtime="1"] :is(
    .frappe-control[data-fieldtype="Select"] select.form-control,
    .frappe-control[data-fieldtype="Select"] select.input-with-feedback,
    .qorg-filter-card select.form-control
) {
    display: block !important;
    height: var(--qorg-web-control-height) !important;
    padding-block: 0 !important;
    padding-inline: 12px 38px !important;
    line-height: normal !important;
    text-align: start !important;
    text-align-last: start !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer;
}

html[dir="rtl"][data-qorg-scope="web"][data-qorg-theme-runtime="1"] :is(
    .frappe-control[data-fieldtype="Select"] select.form-control,
    .frappe-control[data-fieldtype="Select"] select.input-with-feedback,
    .qorg-filter-card select.form-control
) {
    padding-inline: 38px 12px !important;
}

/* Frappe Web Form Select arrow, aligned at inline-end beside the value. */
html[data-qorg-scope="web"][data-qorg-theme-runtime="1"] .frappe-control[data-fieldtype="Select"] :is(.control-input, .control-input-wrapper) {
    position: relative;
    overflow: visible;
}

html[data-qorg-scope="web"][data-qorg-theme-runtime="1"] .frappe-control[data-fieldtype="Select"] .select-icon {
    position: absolute !important;
    inset-block-start: 50% !important;
    inset-inline-end: 12px !important;
    inset-block-end: auto !important;
    inset-inline-start: auto !important;
    z-index: 2;
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    color: var(--qorg-web-popup-icon) !important;
    pointer-events: none;
    transform: translateY(-50%) !important;
}

html[dir="rtl"][data-qorg-scope="web"][data-qorg-theme-runtime="1"] .frappe-control[data-fieldtype="Select"] .select-icon {
    inset-inline-end: auto !important;
    inset-inline-start: 12px !important;
}

/* Plain Selects on custom portal pages do not have Frappe's select-icon. */
html[data-qorg-scope="web"][data-qorg-theme-runtime="1"] .qorg-filter-card label:has(> select.form-control)::after {
    content: "";
    position: absolute;
    inset-inline-end: 14px;
    inset-block-end: calc((var(--qorg-web-control-height) / 2) - 3px);
    width: 7px;
    height: 7px;
    border-inline-end: 2px solid var(--qorg-web-popup-icon);
    border-block-end: 2px solid var(--qorg-web-popup-icon);
    pointer-events: none;
    transform: rotate(45deg);
}

html[dir="rtl"][data-qorg-scope="web"][data-qorg-theme-runtime="1"] .qorg-filter-card label:has(> select.form-control)::after {
    inset-inline-end: auto;
    inset-inline-start: 14px;
}

/* Native option colors where the browser exposes them. The popup remains a
   native overlay, avoiding layout collisions and preserving accessibility. */
html[data-qorg-scope="web"][data-qorg-theme-runtime="1"] select option {
    color: var(--qorg-web-popup-text);
    background: var(--qorg-web-popup-bg);
}
html[data-qorg-scope="web"][data-qorg-theme-runtime="1"] select option:checked {
    color: var(--qorg-web-popup-active-text);
    background: var(--qorg-web-popup-active-bg);
}

/* Link, Dynamic Link and Autocomplete listboxes. */
html[data-qorg-scope="web"][data-qorg-theme-runtime="1"] :is(
    [data-fieldtype="Link"],
    [data-fieldtype="Dynamic Link"],
    [data-fieldtype="Autocomplete"],
    .link-field
) :is(.control-input, .control-input-wrapper, .awesomplete) {
    position: relative;
    overflow: visible;
}

html[data-qorg-scope="web"][data-qorg-theme-runtime="1"] .awesomplete > ul[role="listbox"] {
    z-index: 1060 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-height: min(360px, 55vh) !important;
    margin-block-start: 6px !important;
    padding: 6px !important;
    overflow-y: auto !important;
    color: var(--qorg-web-popup-text) !important;
    background: var(--qorg-web-popup-bg) !important;
    border: 1px solid var(--qorg-web-popup-border) !important;
    border-radius: var(--qorg-web-popup-radius) !important;
    box-shadow: 0 14px 34px rgb(0 0 0 / 18%) !important;
}

html[data-qorg-scope="web"][data-qorg-theme-runtime="1"] .awesomplete > ul[role="listbox"] > li {
    min-height: var(--qorg-web-popup-item-height) !important;
    display: flex !important;
    align-items: center !important;
    padding: 8px var(--qorg-web-popup-item-padding) !important;
    color: var(--qorg-web-popup-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: var(--qorg-web-popup-item-radius) !important;
    cursor: pointer;
}

html[data-qorg-scope="web"][data-qorg-theme-runtime="1"] .awesomplete > ul[role="listbox"] > li:is(:hover, :focus, [aria-selected="true"]) {
    color: var(--qorg-web-popup-hover-text) !important;
    background: var(--qorg-web-popup-hover-bg) !important;
}

html[data-qorg-scope="web"][data-qorg-theme-runtime="1"] .awesomplete > ul[role="listbox"] > li mark {
    color: inherit !important;
    background: transparent !important;
    font-weight: 700;
}

/* Login language picker. */
html[data-qorg-scope="web"][data-qorg-theme-runtime="1"] .qorg-language-trigger {
    min-height: var(--qorg-web-control-height);
    color: var(--qorg-field-text, var(--text-color));
    background: var(--qorg-field-bg, var(--control-bg));
    border: 1px solid var(--qorg-field-border, var(--border-color));
    border-radius: var(--qorg-web-control-radius);
}

html[data-qorg-scope="web"][data-qorg-theme-runtime="1"] .qorg-language-options {
    z-index: 1080;
    padding: 6px;
    color: var(--qorg-web-popup-text);
    background: var(--qorg-web-popup-bg);
    border: 1px solid var(--qorg-web-popup-border);
    border-radius: var(--qorg-web-popup-radius);
    box-shadow: 0 14px 34px rgb(0 0 0 / 18%);
}

html[data-qorg-scope="web"][data-qorg-theme-runtime="1"] .qorg-language-option {
    min-height: var(--qorg-web-popup-item-height);
    padding: 8px var(--qorg-web-popup-item-padding);
    color: var(--qorg-web-popup-text);
    background: transparent;
    border: 0;
    border-radius: var(--qorg-web-popup-item-radius);
}

html[data-qorg-scope="web"][data-qorg-theme-runtime="1"] .qorg-language-option:is(:hover, :focus-visible) {
    color: var(--qorg-web-popup-hover-text);
    background: var(--qorg-web-popup-hover-bg);
}
html[data-qorg-scope="web"][data-qorg-theme-runtime="1"] .qorg-language-option:is([aria-current="true"], .is-active) {
    color: var(--qorg-web-popup-active-text);
    background: var(--qorg-web-popup-active-bg);
}

/* Empty breadcrumb and full-height login rules created unwanted blank space on
   managed Web Forms. Scope the correction only to pages that actually contain
   Q Org portal content or a Web Form; Login and Desk are unaffected. */
html[data-qorg-scope="web"] :is(.breadcrumb-container, .breadcrumb-container.container):empty {
    display: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

html[data-qorg-scope="web"]:has(:is(.web-form-container, .web-form-wrapper, .qorg-portal)) body :is(
    main.page-content,
    .page-content-wrapper > .container,
    .page-content-wrapper .container,
    .page_content > .container,
    main.container
) {
    min-height: 0 !important;
}

/* --------------------------------------------------------------------------
   7. Q Org accessible Web Select enhancement
   -------------------------------------------------------------------------- */
html[data-qorg-scope="web"] .qorg-web-select {
    position: relative;
    width: 100%;
}

html[data-qorg-scope="web"] .qorg-web-select > select.qorg-web-select__native {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

html[data-qorg-scope="web"] .qorg-web-select__trigger {
    width: 100%;
    min-height: var(--qorg-web-control-height);
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 8px;
    padding-block: 0;
    padding-inline: 14px 16px;
    color: var(--qorg-field-text, var(--text-color));
    background: var(--qorg-field-bg, var(--control-bg));
    border: 1px solid var(--qorg-field-border, var(--border-color));
    border-radius: var(--qorg-web-control-radius);
    font: inherit;
    text-align: start;
    cursor: pointer;
    box-shadow: none;
}

html[data-qorg-scope="web"] .qorg-web-select__trigger:is(:hover, :focus-visible),
html[data-qorg-scope="web"] .qorg-web-select.is-open .qorg-web-select__trigger {
    border-color: var(--qorg-field-focus, var(--primary-color));
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--qorg-field-focus, var(--primary-color)) 18%, transparent);
}

html[data-qorg-scope="web"] .qorg-web-select__trigger:disabled {
    opacity: .62;
    cursor: not-allowed;
}

html[data-qorg-scope="web"] .qorg-web-select__value {
    grid-column: 2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}

html[data-qorg-scope="web"] .qorg-web-select__arrow {
    width: 9px;
    height: 9px;
    grid-column: 3;
    justify-self: end;
    border-inline-end: 2px solid var(--qorg-web-popup-icon);
    border-block-end: 2px solid var(--qorg-web-popup-icon);
    transform: rotate(45deg) translateY(-2px);
    transform-origin: center;
    transition: transform .14s ease;
}

html[data-qorg-scope="web"] .qorg-web-select.is-open .qorg-web-select__arrow {
    transform: rotate(225deg) translate(-1px, -1px);
}

html[data-qorg-scope="web"] .qorg-web-select__list {
    position: absolute;
    inset-block-start: calc(100% + 6px);
    inset-inline: 0;
    z-index: 1080;
    max-height: min(360px, 55vh);
    margin: 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
    color: var(--qorg-web-popup-text);
    background: var(--qorg-web-popup-bg);
    border: 1px solid var(--qorg-web-popup-border);
    border-radius: var(--qorg-web-popup-radius);
    box-shadow: 0 14px 34px rgb(0 0 0 / 18%);
}

html[data-qorg-scope="web"] .qorg-web-select__list[hidden] {
    display: none;
}

html[data-qorg-scope="web"] .qorg-web-select__option {
    min-height: var(--qorg-web-popup-item-height);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px var(--qorg-web-popup-item-padding);
    color: var(--qorg-web-popup-text);
    background: transparent;
    border-radius: var(--qorg-web-popup-item-radius);
    cursor: pointer;
}

html[data-qorg-scope="web"] .qorg-web-select__option:is(:hover, [data-active="1"]) {
    color: var(--qorg-web-popup-hover-text);
    background: var(--qorg-web-popup-hover-bg);
}

html[data-qorg-scope="web"] .qorg-web-select__option[aria-selected="true"] {
    color: var(--qorg-web-popup-active-text);
    background: var(--qorg-web-popup-active-bg);
}

html[data-qorg-scope="web"] .qorg-web-select__option[aria-disabled="true"] {
    opacity: .48;
    cursor: not-allowed;
}

html[data-qorg-scope="web"] .qorg-web-select__check {
    width: 16px;
    flex: 0 0 16px;
    color: var(--qorg-link, var(--primary-color));
    font-weight: 700;
    visibility: hidden;
}

html[data-qorg-scope="web"] .qorg-web-select__option[aria-selected="true"] .qorg-web-select__check {
    visibility: visible;
}

/* Filters align vertically after the select is enhanced. */
html[data-qorg-scope="web"] .qorg-filter-grid {
    align-items: center;
}

/* The custom popup is the single visible arrow/menu owner. */
html[data-qorg-scope="web"] .qorg-web-select + .select-icon,
html[data-qorg-scope="web"] .qorg-web-select ~ .select-icon,
html[data-qorg-scope="web"] .frappe-control[data-fieldtype="Select"]:has(.qorg-web-select) .select-icon,
html[data-qorg-scope="web"] .qorg-filter-card label:has(.qorg-web-select)::after {
    display: none !important;
}

/* --------------------------------------------------------------------------
   8. Web Form action button alignment
   Scope only the two native Web Form action locations. Do not target .btn,
   buttons, dropdown items, Desk menus, or sidebar controls globally.
   -------------------------------------------------------------------------- */
html[data-qorg-scope="web"] .web-list-actions > a.btn.button-new,
html[data-qorg-scope="web"] .text-center > a.btn.btn-new-doc {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: normal !important;
    vertical-align: middle !important;
}