/*
 * Location manager page.
 *
 * Everything visual lives here rather than in style attributes: the Content-Security-Policy sets
 * style-src 'self' with no 'unsafe-inline', so an inline style attribute is silently dropped.
 */

/* ---------- Panes ---------- */

/* The three panes are one fixed height and scroll independently, so they stay level with each
   other however much content any one of them holds. Each card is a flex column whose body takes
   the remaining space below the header. */
.lm-pane {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 290px);
    min-height: 340px;
}

.lm-pane > .card-body {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

/* A pane whose body has a part that must stay visible while the rest scrolls. The body itself
   stops scrolling; only .lm-split-scroll does. */
.lm-pane > .card-body.lm-split {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lm-split-fixed {
    flex: 0 0 auto;
}

.lm-split-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Once the columns stack, a full-height pane each would make the page enormous. */
@media (max-width: 991.98px) {
    .lm-pane {
        height: auto;
        max-height: 70vh;
    }
}

.lm-muted {
    color: #6c757d;
}

.lm-small {
    font-size: 12px;
}

.lm-empty {
    padding: 24px 8px;
    text-align: center;
    color: #6c757d;
    font-style: italic;
}

/* ---------- Tree ---------- */

.lm-tree {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
}

.lm-tree .lm-tree {
    padding-left: 18px;
}

.lm-li {
    margin: 0;
}

.lm-node {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px;
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
}

.lm-node:hover {
    background-color: #f2f4f6;
}

.lm-node:focus {
    outline: 2px solid #80bdff;
    outline-offset: -2px;
}

.lm-node--selected,
.lm-node--selected:hover {
    background-color: #cfe2ff;
    font-weight: 500;
}

.lm-twisty {
    border: 0;
    background: transparent;
    padding: 0 2px;
    line-height: 1;
    color: #adb5bd;
    cursor: pointer;
}

.lm-twisty--leaf {
    visibility: hidden;
}

.lm-icon {
    color: #6c757d;
    width: 14px;
    text-align: center;
}

.lm-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-count {
    font-size: 10px;
    color: #6c757d;
    background-color: #e9ecef;
    border-radius: 8px;
    padding: 0 6px;
}

.lm-collapsed > .lm-tree {
    display: none;
}

.lm-new {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    margin-top: 4px;
    color: #6c757d;
    font-size: 12px;
    font-style: italic;
    cursor: pointer;
}

.lm-new:hover {
    color: #0d6efd;
}

/* ---------- Function rows ---------- */

.lm-func {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    margin-bottom: 5px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    font-size: 12px;
    background-color: #fff;
    cursor: grab;
}

.lm-func:hover {
    border-color: #adb5bd;
}

.lm-func-grip {
    color: #adb5bd;
}

.lm-func-body {
    flex: 1;
    min-width: 0;
}

.lm-func-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-func-desc {
    font-size: 11px;
    color: #495057;
    /* Descriptions come from the installation and can be long; give them two lines in the narrow
       pane rather than a single truncated one. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lm-func-sub {
    font-size: 10px;
    color: #6c757d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-assigned-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 6px;
    border: 1px solid #dee2e6;
    border-radius: 6px;
}

.lm-assigned-row .lm-func-body {
    font-size: 13px;
}

/* The centre pane is wide enough to show a description in full. */
.lm-assigned-row .lm-func-desc {
    font-size: 12px;
    -webkit-line-clamp: none;
    display: block;
}

/* ---------- Category chips ---------- */

.lm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}

/* Sized to their label so several sit on one row. flex:0 0 auto stops them being stretched, and
   nowrap keeps a two-word label from breaking and making the row taller than the others. */
.lm-chip {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 11px;
    line-height: 1.6;
    padding: 1px 8px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background-color: #f1f3f5;
    color: #495057;
    cursor: pointer;
}

.lm-chip[aria-pressed="true"] {
    background-color: #cfe2ff;
    border-color: #9ec5fe;
    color: #084298;
}

/* ---------- Drag & drop ---------- */

/* jQuery UI's own stylesheet is not loaded, so the drag helper needs styling here. */
.ui-draggable-dragging {
    z-index: 1080;
    opacity: 0.9;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    background-color: #fff;
    border: 1px solid #9ec5fe;
    border-radius: 6px;
    padding: 4px 8px;
    max-width: 260px;
    list-style: none;
}

.lm-drop-ok {
    background-color: #d1e7dd !important;
    outline: 1px dashed #198754;
}

.lm-drop-bad {
    background-color: #f8d7da !important;
    outline: 1px dashed #dc3545;
    cursor: no-drop;
}

.lm-dropzone {
    padding: 14px;
    margin-top: 6px;
    border: 1px dashed #adb5bd;
    border-radius: 6px;
    text-align: center;
    color: #6c757d;
    font-size: 12px;
}

/* ---------- Detail pane ---------- */

/* Sits in the card header, so it must not add height of its own - an empty breadcrumb still has
   to leave the header the same size as the other two panes'. */
.lm-breadcrumb {
    font-size: 12px;
    color: #6c757d;
    font-weight: 400;
    margin: 0;
    min-height: 1.2em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lm-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 10px;
}

.lm-detail-title {
    font-size: 17px;
    font-weight: 500;
}

.lm-detail-id {
    font-size: 12px;
    color: #adb5bd;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.lm-detail-icon {
    font-size: 22px;
    color: #6c757d;
    margin-right: 10px;
}

.lm-status {
    font-size: 12px;
    margin-right: 8px;
    align-self: center;
}

.lm-hint {
    font-size: 11px;
    color: #6c757d;
    font-style: italic;
    margin-bottom: 6px;
}