/* ===================================================================
   Sidebar — section headers, tree groups, badges
   -------------------------------------------------------------------
   Loaded AFTER main.css in base.html. A few rules here deliberately
   override the older sidebar rules in main.css (sub-link padding, the
   .nav-section block, badge placement). Nothing outside .sidebar is
   touched, so base_accounting.html keeps working on main.css alone.
   =================================================================== */

/* ── Section headers: CORE / OPERATIONS / EQUIPMENT MANAGEMENT / MORE ── */
.sidebar-nav .nav-section {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 1.05rem 1rem 0.5rem 1rem;
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    color: #5aa9f8;
    text-decoration: none;
    background: transparent;
    transition: color 0.2s ease, opacity 0.3s ease;
    height: auto;              /* main.css zeroes this when collapsed */
    overflow: visible;
}

/* First header sits right under the logo — trim the extra top space. */
.sidebar-nav > .nav-section-block:first-child .nav-section {
    padding-top: 0.35rem;
}

a.nav-section { cursor: pointer; }
a.nav-section:hover { color: #8cc5ff; }

.nav-section-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-section .section-chevron {
    margin-left: auto;
    font-size: 0.85rem;
    transition: transform 0.25s ease;
}

/* Collapsed section → chevron points down */
.nav-section[aria-expanded="false"] .section-chevron {
    transform: rotate(180deg);
}

/* When the whole sidebar is collapsed to icons, the headers become a
   thin rule instead of disappearing entirely — keeps the groups readable.
   opacity is reset to 1 on purpose: main.css zeroes it, and opacity
   applies to the border too, which would swallow the divider. The text
   is hidden by display:none on the children instead. */
.sidebar-collapsed .sidebar-nav .nav-section {
    opacity: 1;
    height: 0;
    padding: 0;
    margin: 0.45rem 0.75rem;
    overflow: hidden;
    border-top: 1px solid rgba(255, 255, 255, 0.09);
}
.sidebar-collapsed .sidebar-nav .nav-section .nav-section-label,
.sidebar-collapsed .sidebar-nav .nav-section .section-chevron {
    display: none;
}

/* No rule directly under the logo. */
.sidebar-collapsed .sidebar-nav > .nav-section-block:first-child .nav-section {
    border-top: 0;
    margin: 0;
}

/* A collapsed *section* must still show its links when the sidebar is
   icon-only, otherwise a user who folded a section loses those icons
   with no header left to unfold it. */
.sidebar-collapsed .nav-section-body.collapse:not(.show) {
    display: block !important;
}

/* ── Divider above Claims Board ── */
.nav-divider {
    height: 1px;
    margin: 0.6rem 1rem;
    background: rgba(255, 255, 255, 0.1);
}
.sidebar-collapsed .nav-divider { margin: 0.6rem 0.75rem; }

/* ── Badges: pushed to the right edge of the row ── */
.sidebar .nav-link .nav-badge {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.32em 0.55em;
    border-radius: 999px;
    transition: opacity 0.3s ease;
}

.sidebar .nav-link .collapse-icon {
    margin-left: auto;
    flex-shrink: 0;
}

/* Badge + chevron on the same row: badge takes the auto margin, the
   chevron just trails it. */
.sidebar .nav-link .nav-badge + .collapse-icon {
    margin-left: 0.45rem;
}

.sidebar-collapsed .nav-link .nav-badge {
    opacity: 0;
    width: 0;
    padding: 0;
    overflow: hidden;
}

/* Keep the label from shoving the badge off the row on long names. */
.sidebar .nav-link .link-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Tree groups (Maintenance / Daily Check) ── */
.nav-tree {
    position: relative;
}

/* Trunk line running down the section */
.nav-tree::before {
    content: "";
    position: absolute;
    left: 1.35rem;
    top: 0.1rem;
    bottom: 1.1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}

.nav-tree > .nav-group > .nav-link {
    position: relative;
    padding-left: 2.1rem;
}

/* Branch into each group header */
.nav-tree > .nav-group > .nav-link::before {
    content: "";
    position: absolute;
    left: 1.35rem;
    top: 50%;
    width: 0.55rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* Nested trunk for the sub-links */
.nav-tree > .nav-group > .collapse {
    position: relative;
}

.nav-tree > .nav-group > .collapse::before {
    content: "";
    position: absolute;
    left: 2.45rem;
    top: 0;
    bottom: 1.05rem;
    border-left: 1px solid rgba(255, 255, 255, 0.13);
}

.sidebar .nav-tree .sub-link {
    position: relative;
    padding-left: 3.2rem !important;   /* beats main.css's 1.5rem !important */
}

.nav-tree .sub-link::before {
    content: "";
    position: absolute;
    left: 2.45rem;
    top: 50%;
    width: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}

/* Icon-only sidebar: no room for tree lines or indentation. */
.sidebar-collapsed .nav-tree::before,
.sidebar-collapsed .nav-tree > .nav-group > .nav-link::before,
.sidebar-collapsed .nav-tree > .nav-group > .collapse::before,
.sidebar-collapsed .nav-tree .sub-link::before {
    display: none;
}

.sidebar-collapsed .nav-tree > .nav-group > .nav-link,
.sidebar-collapsed .sidebar .nav-tree .sub-link {
    padding-left: 1rem !important;
}

/* ── Group headers keep the collapse chevron behaviour from main.css ── */
.nav-group .nav-link[aria-expanded="true"] .collapse-icon {
    transform: rotate(90deg);
}

/* Slightly tighter rows so the longer menu still fits without scrolling
   on a 1080p screen. */
.sidebar .nav-link {
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
}

/* ── Trailer Search link: slightly richer hover / active motion ──
   Same geometry as every other nav-link; only the transition and the icon
   motion differ, so it reads as part of the menu rather than a widget. */
.sidebar .nav-link.nav-link-ts {
    position: relative;
    transition: background-color 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, padding-left 0.18s ease;
}
.sidebar .nav-link.nav-link-ts i {
    transition: transform 0.18s ease, color 0.18s ease;
}
.sidebar .nav-link.nav-link-ts:hover i {
    transform: scale(1.12);
    color: #8cc5ff;
}
.sidebar .nav-link.nav-link-ts.active {
    background: linear-gradient(90deg, rgba(13, 110, 253, 0.28) 0%, #495057 70%);
}
.sidebar .nav-link.nav-link-ts.active i {
    color: #8cc5ff;
}
.sidebar .nav-link.nav-link-ts::after {
    content: "";
    position: absolute;
    right: 0.9rem;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    border-radius: 50%;
    background: #5aa9f8;
    box-shadow: 0 0 8px rgba(90, 169, 248, 0.9);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.2s ease, transform 0.2s ease;
}
.sidebar .nav-link.nav-link-ts.active::after {
    opacity: 1;
    transform: scale(1);
}
.sidebar-collapsed .sidebar .nav-link.nav-link-ts::after { display: none; }