/* ============================================================
   Modern side navigator (companies / lifts)
   Card-based rows, avatar tiles, sticky header, restyled tree.
   Palette tokens come from .modern-shell (see main-layout.css).
   ============================================================ */

.modern-side-panel.side-panel-layout {
    padding: 0 !important;
    background: var(--sys-surface);
}

.sm-section {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* ---------- Sticky top area (header + search) ---------- */
.sm-topbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 25px 16px 15px;
    border-bottom: 1px solid var(--sys-line);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--sys-accent) 8%, var(--sys-surface)) 0%,
        var(--sys-surface) 100%);
}

/* ---------- Breadcrumb ---------- */
.sm-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    min-height: 22px;
}

.sm-crumb {
    display: inline-flex;
    align-items: center;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-crumb-chevron {
    margin-left: 6px;
    font-size: 1.05rem;
    line-height: 1;
}

button.sm-crumb--link {
    flex: 0 0 auto;
    border: 0;
    background: transparent;
    padding: 2px 6px;
    margin-left: -4px;
    border-radius: 6px;
    color: var(--sys-soft);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

button.sm-crumb--link:hover {
    background: color-mix(in srgb, var(--sys-accent) 12%, transparent);
    color: var(--sys-brand);
}

.sm-crumb--current {
    flex: 0 1 auto;
    color: var(--sys-brand);
    font-weight: 700;
}

.sm-crumb--leaf {
    color: var(--sys-accent);
}

.sm-count-badge {
    flex: 0 0 auto;
    min-width: 24px;
    height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sys-accent) 16%, transparent);
    color: var(--sys-brand);
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Search ---------- */
.sm-search.mud-input-control {
    margin: 0;
}

.sm-search .mud-input.mud-input-outlined {
    border-radius: 10px;
    background: var(--sys-surface);
}

/* ---------- List ---------- */
.sm-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 10px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sm-list::-webkit-scrollbar {
    width: 8px;
}

.sm-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--sys-brand) 18%, transparent);
    border-radius: 999px;
}

/* ---------- Item card ---------- */
.sm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border-radius: 12px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.06s ease, box-shadow 0.15s ease;
}

.sm-item:hover {
    background: color-mix(in srgb, var(--sys-accent) 9%, transparent);
    border-color: color-mix(in srgb, var(--sys-accent) 22%, transparent);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--sys-brand) 10%, transparent);
}

.sm-item:active {
    transform: translateY(1px);
}

.sm-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    flex: 0 0 auto;
}

.sm-avatar .mud-icon-root {
    font-size: 1.25rem;
    color: inherit;
}

.sm-avatar--company {
    background: color-mix(in srgb, #fb923c 14%, transparent);
    color: #fb923c;
}

.sm-avatar--lift {
    background: color-mix(in srgb, #2f9fd8 16%, transparent);
    color: #2f9fd8;
}

.sm-avatar--lg {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.sm-item-body {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.sm-item-title {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--sys-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-item-subtitle {
    margin-top: 2px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--sys-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-item-go,
.sm-item-caret {
    flex: 0 0 auto;
    color: var(--sys-soft);
    font-size: 1.1rem !important;
    transition: transform 0.2s ease, color 0.15s ease;
}

.sm-item:hover .sm-item-go {
    color: var(--sys-accent);
    transform: translateX(2px);
}

.sm-item-caret.expanded {
    transform: rotate(180deg);
}

/* ---------- Active lift ---------- */
.sm-item.sm-lift.active {
    background: color-mix(in srgb, var(--sys-accent) 12%, transparent);
    border-color: color-mix(in srgb, var(--sys-accent) 35%, transparent);
    box-shadow: inset 3px 0 0 var(--sys-accent);
}

.sm-item.sm-lift.active .sm-item-title {
    color: var(--sys-brand);
}

.sm-item.sm-lift.active .sm-item-caret {
    color: var(--sys-accent);
}

/* ---------- Empty-state alert ---------- */
.sm-alert.mud-alert {
    margin: 12px 16px 0;
}

/* ============================================================
   Lift revision tree
   ============================================================ */
.sm-tree {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 2px 0 10px 22px;
    padding-left: 12px;
    border-left: 2px solid color-mix(in srgb, var(--sys-accent) 28%, transparent);
}

.sm-tree .tree-node {
    padding: 0;
    margin: 0;
}

.sm-tree .tree-node-content {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    margin: 0;
    border-left: 0;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.sm-tree .tree-node-content:hover {
    background: color-mix(in srgb, var(--sys-accent) 10%, transparent);
    border-left: 0;
}

.sm-tree .tree-node-content.selected,
.sm-tree .tree-node-content.selected:hover {
    background: color-mix(in srgb, var(--sys-accent) 16%, transparent);
    color: var(--sys-brand);
    border-left: 0;
    box-shadow: inset 3px 0 0 var(--sys-accent);
}

.sm-tree .tree-node-content.selected .tree-node-text {
    font-weight: 600;
}

.sm-tree .tree-node-content.selected .tree-node-icon,
.sm-tree .tree-node-content.selected .tree-toggle {
    color: inherit !important;
}

.sm-tree .tree-node-text {
    font-size: 0.85rem;
    line-height: 1.3;
    color: var(--sys-ink);
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sm-tree .tree-toggle {
    font-size: 0.72rem;
    color: var(--sys-soft);
    min-width: 12px;
    text-align: center;
}

.sm-tree .tree-spacer {
    min-width: 12px;
}

.sm-tree .tree-node-icon {
    font-size: 0.9rem;
    min-width: 14px;
    text-align: center;
}

.sm-tree .tree-node-icon.fa-book {
    color: #0d6efd;
}

.sm-tree .tree-node-icon.fa-newspaper {
    color: #fd7e14;
}

.sm-tree .tree-node-icon.fa-calendar-alt {
    color: #ffc107;
}

.sm-tree .tree-node-icon.revision-icon {
    color: #34d399;
    font-size: 1rem;
}

.sm-tree .tree-node-icon.revision-icon.revision-icon--pending {
    color: #ef4444;
}

/* Chevron center = content padding-left (8px) + half of the 12px toggle box = 14px.
   Offset the guide line's 1px border so its center sits at 14px. */
.sm-tree .tree-node-children {
    margin-left: 13.5px;
    padding-left: 10.5px;
    border-left: 1px solid color-mix(in srgb, var(--sys-accent) 22%, transparent);
}