/* ============================================================
   entity-picker.css
   Styles for the EntityPicker component (.ep-picker) and the
   EntityPreview floating panel (.ep-panel).
   Loaded on every page via _Layout.cshtml.
   ============================================================ */

/* ── Design tokens (mirrors components.css conventions) ───────────────────── */

:root {
    --ep-border:       #d1d5db;
    --ep-bg:           #fff;
    --ep-bg-hover:     #f0f4ff;
    --ep-bg-selected:  #dbeafe;
    --ep-text:         #111827;
    --ep-muted:        #6b7280;
    --ep-accent:       #2563eb;
    --ep-shadow:       0 4px 16px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.06);
    --ep-radius:       .5rem;
    --ep-radius-sm:    .3rem;
    --ep-chip-h:       2rem;

    --ep-chip-border:         #93c5fd;
    --ep-bg-selected-hover:   #bfdbfe;
    --ep-icon-bg:             #f3f4f6;
    --ep-count-bg:            #e5e7eb;
    --ep-bg-alt:              #f9fafb;
}

[data-bs-theme="dark"] {
    --ep-border:              #334155;
    --ep-bg:                  #1e293b;
    --ep-bg-hover:            #1e3a5f;
    --ep-bg-selected:         #1e3a8a;
    --ep-text:                #f1f5f9;
    --ep-muted:               #94a3b8;
    --ep-accent:              #60a5fa;
    --ep-shadow:              0 4px 16px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.3);
    --ep-chip-border:         #1e40af;
    --ep-bg-selected-hover:   #1d3461;
    --ep-icon-bg:             #273549;
    --ep-count-bg:            #334155;
    --ep-bg-alt:              #273549;
}

/* ── Picker container ─────────────────────────────────────────────────────── */

.ep-picker {
    position: relative;
}

/* ── Chips (selected items) ──────────────────────────────────────────────── */

.ep-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    min-height: 0;
    margin-bottom: .35rem;
}

.ep-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    height: var(--ep-chip-h);
    padding: 0 .45rem 0 .5rem;
    background: var(--ep-bg-selected);
    border: 1px solid var(--ep-chip-border);
    border-radius: 99px;
    font-size: .8rem;
    font-weight: 500;
    color: var(--ep-text);
    max-width: 240px;
}

.ep-chip-icon {
    font-size: .8rem;
    color: var(--ep-accent);
    flex-shrink: 0;
}

.ep-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ep-chip-preview,
.ep-chip-remove {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0 .15rem;
    border: none;
    background: none;
    cursor: pointer;
    line-height: 1;
    color: var(--ep-muted);
    font-size: .75rem;
    border-radius: .15rem;
    transition: color .1s;
}

.ep-chip-preview:hover { color: var(--ep-accent); }
.ep-chip-remove:hover  { color: var(--color-danger); }

/* ── Search input ─────────────────────────────────────────────────────────── */

.ep-search-wrap {
    position: relative;
}

.ep-search-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius-sm);
    padding: .25rem .5rem;
    background: var(--ep-bg);
    transition: border-color .15s, box-shadow .15s;
}

.ep-search-wrap:focus-within .ep-search-row {
    border-color: var(--ep-accent);
    box-shadow: 0 0 0 3px rgba(37,99,235,.15);
}

.ep-search-icon { font-size: .85rem; flex-shrink: 0; }

.ep-search-input {
    flex: 1;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: .875rem;
    background: transparent;
    min-width: 0;
}

.ep-search-input:focus { outline: none; }

/* ── Results dropdown ────────────────────────────────────────────────────── */

.ep-results {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    z-index: 1050;
    background: var(--ep-bg);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    box-shadow: var(--ep-shadow);
    max-height: 340px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ep-results-section { padding: .25rem 0; }
.ep-results-section + .ep-results-section { border-top: 1px solid var(--ep-border); }

.ep-results-header {
    padding: .3rem .65rem .15rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ep-muted);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .25rem;
}

.ep-results-count {
    background: var(--ep-count-bg);
    border-radius: 99px;
    padding: 0 .4em;
    font-size: .68rem;
    font-weight: 700;
    color: var(--ep-muted);
}

.ep-results-empty {
    padding: .75rem 1rem;
    font-size: .85rem;
    color: var(--ep-muted);
    text-align: center;
}

/* ── Entity card (in results + preview context) ─────────────────────────── */

.ep-card {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .45rem .65rem;
    cursor: default;
    transition: background .1s;
}

.ep-card:hover { background: var(--ep-bg-hover); }
.ep-card--selected { background: var(--ep-bg-selected); }
.ep-card--selected:hover { background: var(--ep-bg-selected-hover); }

.ep-card-icon {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: .3rem;
    background: var(--ep-icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--ep-accent);
    flex-shrink: 0;
}

.ep-card-body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.ep-card-label {
    font-size: .875rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--ep-text);
}

.ep-card-sublabel {
    font-size: .78rem;
    color: var(--ep-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: .05rem;
}

.ep-card-actions {
    display: flex;
    gap: .15rem;
    align-items: center;
    flex-shrink: 0;
}

.ep-btn-preview,
.ep-btn-select,
.ep-btn-remove {
    display: inline-flex;
    align-items: center;
    border: none;
    background: none;
    cursor: pointer;
    padding: .2rem .3rem;
    border-radius: .25rem;
    font-size: .85rem;
    line-height: 1;
    color: var(--ep-muted);
    transition: color .1s, background .1s;
}

.ep-btn-preview:hover { color: var(--ep-accent);       background: var(--color-primary-muted); }
.ep-btn-select:hover  { color: var(--color-success);    background: var(--color-success-muted); }
.ep-btn-remove:hover  { color: var(--color-danger);     background: var(--color-danger-muted);  }

/* ── Floating preview panel ──────────────────────────────────────────────── */

.ep-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1059;
}

.ep-panel {
    position: absolute;
    z-index: 1060;
    width: 320px;
    background: var(--ep-bg);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    box-shadow: var(--ep-shadow);
    overflow: hidden;
}

.ep-panel[hidden] { display: none; }

/* Mobile: bottom sheet */
@media (max-width: 575.98px) {
    .ep-panel.ep-panel--sheet {
        position: fixed;
        left: 0 !important;
        right: 0 !important;
        bottom: 0;
        top: auto;
        width: 100%;
        border-radius: var(--ep-radius) var(--ep-radius) 0 0;
        border-bottom: none;
        max-height: 70vh;
        overflow-y: auto;
    }
}

.ep-panel-titlebar {
    display: flex;
    justify-content: flex-end;
    padding: .35rem .5rem .15rem;
    border-bottom: 1px solid var(--ep-border);
}

.ep-panel-close {
    display: inline-flex;
    align-items: center;
    border: none;
    background: none;
    cursor: pointer;
    padding: .2rem .3rem;
    border-radius: .25rem;
    font-size: .85rem;
    color: var(--ep-muted);
    transition: color .1s, background .1s;
}

.ep-panel-close:hover { color: var(--ep-text); background: var(--ep-icon-bg); }

.ep-panel-loading,
.ep-panel-error {
    padding: 1rem;
    font-size: .85rem;
    color: var(--ep-muted);
    text-align: center;
}

/* ── Preview panel inner layout ──────────────────────────────────────────── */

.ep-panel-body { padding: 0; }

.ep-preview-header {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem .85rem .5rem;
    border-bottom: 1px solid var(--ep-border);
    background: var(--ep-bg-alt);
}

.ep-type-icon {
    font-size: 1.25rem;
    color: var(--ep-accent);
    margin-top: .1rem;
    flex-shrink: 0;
}

.ep-preview-title {
    font-size: .9rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--ep-text);
    word-break: break-word;
}

.ep-preview-sub {
    font-size: .77rem;
    color: var(--ep-muted);
    margin-top: .15rem;
}

.ep-preview-body {
    padding: .65rem .85rem .85rem;
}

/* ── Field grid inside preview panels ───────────────────────────────────── */

.ep-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .4rem .75rem;
}

.ep-field {
    display: flex;
    flex-direction: column;
    gap: .05rem;
}

.ep-field--full { grid-column: span 2; }

.ep-field-label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ep-muted);
    font-weight: 600;
}

.ep-field-value {
    font-size: .85rem;
    font-weight: 500;
    color: var(--ep-text);
}

/* ── Item list (Order preview) ───────────────────────────────────────────── */

.ep-item-list {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
}

.ep-item-list li {
    display: flex;
    justify-content: space-between;
    padding: .2rem 0;
    font-size: .82rem;
    border-bottom: 1px dashed var(--ep-border);
}

.ep-item-list li:last-child { border-bottom: none; }

.ep-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ep-text);
}

.ep-item-price {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--ep-text);
    margin-left: .5rem;
}

.ep-more-hint {
    font-size: .75rem;
    color: var(--ep-muted);
    margin-top: .25rem;
    text-align: right;
}

/* ── Notes ───────────────────────────────────────────────────────────────── */

.ep-notes {
    margin-top: .5rem;
    padding: .4rem .5rem;
    background: var(--ep-bg-alt);
    border-left: 3px solid var(--ep-border);
    font-size: .8rem;
    color: var(--ep-muted);
    border-radius: 0 .25rem .25rem 0;
    white-space: pre-line;
}

/* ── Priority badges (Group / WatchList preview) ─────────────────────────── */

.ep-priority-row {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}

.ep-priority-badge {
    display: inline-flex;
    align-items: center;
    padding: .15em .55em;
    border-radius: 99px;
    font-size: .72rem;
    font-weight: 600;
}

.ep-priority-high   { background: var(--color-danger-muted);  color: var(--color-danger);  }
.ep-priority-medium { background: var(--color-warning-muted); color: var(--color-warning); }
.ep-priority-low    { background: var(--badge-unlisted-bg);   color: var(--badge-unlisted-text); }

/* ── Insight tile embed ───────────────────────────────────────────────────── */

.ep-insight-tile {
    margin-top: .35rem;
    min-width: unset;
    width: 100%;
    box-shadow: none;
    border-color: var(--ep-border);
    background: var(--ep-bg-alt);
}

/* ── Links inside panels ─────────────────────────────────────────────────── */

.ep-link {
    color: var(--ep-accent);
    text-decoration: none;
    font-weight: 500;
}

.ep-link:hover { text-decoration: underline; }

/* ── Insight breakdown table (How it was calculated) ─────────────────────── */

.ep-breakdown-table {
    width: 100%;
    font-size: .8rem;
    border-collapse: collapse;
}

.ep-breakdown-table td {
    padding: .1rem .25rem;
    vertical-align: top;
}

.ep-breakdown-label {
    color: var(--ep-text);
    width: 45%;
}

.ep-breakdown-value {
    text-align: right;
    width: 35%;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ep-breakdown-note {
    font-size: .72rem;
    color: var(--ep-muted);
    padding-left: .5rem;
}

/* Subtraction rows — muted red to signal a deduction */
.ep-breakdown-sub .ep-breakdown-value { color: var(--bs-danger); }

/* Separator row above the result */
.ep-breakdown-separator td {
    border-top: 1px solid var(--ep-border);
    padding: .1rem 0 .15rem;
}

/* Result row — bold */
.ep-breakdown-result .ep-breakdown-label,
.ep-breakdown-result .ep-breakdown-value {
    font-weight: 600;
    color: var(--ep-text);
}

/* ── Insight preview action buttons (PDF / Post / Remind / Message) ───────── */
.ep-preview-actions {
    display: flex;
    gap: .35rem;
    padding-top: .65rem;
    margin-top: .65rem;
    border-top: 1px solid var(--ep-border);
}
.ep-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: var(--ep-radius-sm);
    border: 1px solid var(--ep-border);
    color: var(--ep-muted);
    font-size: .9rem;
    text-decoration: none;
    transition: color .15s, border-color .15s;
}
.ep-action-btn:hover {
    color: var(--ep-accent);
    border-color: var(--ep-accent);
}

/* ── Ticket badges — used inside _TicketPreview.cshtml which loads on any page ── */
/* These mirror the definitions in tickets.css; both files reference the same rules. */
.tk-badge {
    display: inline-block;
    padding: .18em .55em;
    border-radius: .3rem;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.badge-tk-new           { background: var(--badge-tk-new-bg);       color: var(--badge-tk-new-text);       border: 1px solid var(--badge-tk-new-border); }
.badge-tk-in-progress   { background: var(--badge-tk-inprog-bg);    color: var(--badge-tk-inprog-text);    border: 1px solid var(--badge-tk-inprog-border); }
.badge-tk-under-review  { background: var(--badge-tk-review-bg);    color: var(--badge-tk-review-text);    border: 1px solid var(--badge-tk-review-border); }
.badge-tk-resolved      { background: var(--badge-tk-resolved-bg);  color: var(--badge-tk-resolved-text);  border: 1px solid var(--badge-tk-resolved-border); }
.badge-tk-closed        { background: var(--badge-tk-closed-bg);    color: var(--badge-tk-closed-text);    border: 1px solid var(--badge-tk-closed-border); }
.badge-tk-wont-fix      { background: var(--badge-tk-wontfix-bg);   color: var(--badge-tk-wontfix-text);   border: 1px solid var(--badge-tk-wontfix-border); }
.badge-tk-priority-low      { background: var(--badge-pri-low-bg);  color: var(--badge-pri-low-text);  border: 1px solid var(--badge-pri-low-border); }
.badge-tk-priority-medium   { background: var(--badge-pri-med-bg);  color: var(--badge-pri-med-text);  border: 1px solid var(--badge-pri-med-border); }
.badge-tk-priority-high     { background: var(--badge-pri-high-bg); color: var(--badge-pri-high-text); border: 1px solid var(--badge-pri-high-border); }
.badge-tk-priority-critical { background: var(--badge-pri-crit-bg); color: var(--badge-pri-crit-text); border: 1px solid var(--badge-pri-crit-border); font-weight: 700; }