/**
 * DOPS 360 admin overrides. Loaded automatically after the core stylesheet on
 * every admin page (see assets_helper: 'custom-css' registers when this file
 * exists), so fixes here apply CRM-wide without touching vendor files.
 */

/* ── Tags input (jQuery tagit) ────────────────────────────────────────────────
   The stock tagit/zendesk theme left the suggestion menu unstyled for this UI:
   it hugged the input (first suggestion clipped behind the field), grew without
   a height cap into a huge browser-scrollbar list, and used 1998-grey chrome.
   Restyled to match the DOPS look; applies everywhere tagit renders (Add/Edit
   Lead, task modal, bulk tag actions, …). */

/* the field itself — one clean input-look frame around the chips + typing area */
ul.tagit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    border: 1px solid #ccc !important;
    border-radius: 4px;
    background: #fff !important;
    padding: 4px 8px !important;
    min-height: 36px;
    margin: 0;
    box-shadow: none;
}
ul.tagit:focus-within {
    border-color: #15171f !important;
}
/* the INNER typing input must be invisible inside the frame — global input rules
   were giving it its own dark border, so the field read as a box within a box */
ul.tagit li.tagit-new {
    padding: 0;
    margin: 0;
    flex: 1;
    min-width: 80px;
}
ul.tagit li.tagit-new input,
ul.tagit li.tagit-new input[type="text"],
ul.tagit li.tagit-new input:focus {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    height: 26px !important;
    min-height: 0 !important;
    padding: 0 2px !important;
    margin: 0 !important;
    width: 100% !important;
    font-size: 13px;
    color: #14161f;
}
ul.tagit li.tagit-choice {
    background: #f3f2ef;
    border: 1px solid #e2ded6;
    border-radius: 6px;
    color: #3a3d47;
    font-weight: 500;
    padding: 2px 24px 2px 8px;
}
ul.tagit li.tagit-choice .tagit-close .ui-icon-close {
    opacity: .55;
}
ul.tagit li.tagit-choice .tagit-close:hover .ui-icon-close {
    opacity: 1;
}

/* anchor for the suggestion menu (tagit appends it to #inputTagsWrapper) */
#inputTagsWrapper {
    position: relative;
}
/* jQuery UI positions the menu against the INNER text input (which sits ~15px above
   the field's outer frame), so its inline top overlapped the field and clipped into
   it. The menu lives inside the relative wrapper, so pin it below the whole field
   and span the field's width — the inline top/left from position() is overridden. */
#inputTagsWrapper .tagit-autocomplete.ui-autocomplete {
    top: 100% !important;
    left: 0 !important;
    right: 0;
    width: auto !important;
    margin-top: 4px;
}

/* the suggestion dropdown */
.tagit-autocomplete.ui-autocomplete {
    margin-top: 6px;                 /* clear the input instead of overlapping it */
    padding: 5px;
    background: #fff;
    border: 1px solid #e7e4dd;
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(20, 22, 31, .14);
    max-height: 260px;               /* long tag lists scroll inside the menu */
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 1085;                   /* above Bootstrap modals (1050) */
    min-width: 220px;
}
.tagit-autocomplete.ui-menu .ui-menu-item {
    float: none;
}
.tagit-autocomplete.ui-menu .ui-menu-item a {
    display: block;
    padding: 8px 12px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 500;
    color: #3a3d47;
    border: 0;
    background: none;
    cursor: pointer;
}
/* hover/active without the stock -1px margin + border, which made rows jiggle
   and clipped the first item under the input */
.tagit-autocomplete .ui-menu .ui-menu-item a.ui-state-hover,
.tagit-autocomplete .ui-menu .ui-menu-item a.ui-state-focus,
.tagit-autocomplete .ui-menu .ui-menu-item a.ui-state-active {
    margin: 0;
    border: 0;
    background: #f3f4f6;
    color: #14161f;
    font-weight: 600;
}
/* slim scrollbar so a long list reads as a tidy menu, not a broken panel */
.tagit-autocomplete.ui-autocomplete::-webkit-scrollbar {
    width: 6px;
}
.tagit-autocomplete.ui-autocomplete::-webkit-scrollbar-thumb {
    background: #d8d4cb;
    border-radius: 3px;
}
.tagit-autocomplete.ui-autocomplete::-webkit-scrollbar-track {
    background: transparent;
}