/* GeneaFree app shell — left rail + main + optional right rail.
   Generalized from admin.css; namespaced under .app-shell-* so it can
   coexist with the legacy .admin-* classes during migration.

   Breakpoints:
     - <md  : left rail collapses into a Bootstrap offcanvas drawer
     - md+  : left rail is a sticky sidebar
     - lg+  : right rail (when present) becomes sticky too
*/

.app-shell-layout {
    min-height: calc(100vh - 56px);   /* room for top navbar */
}

/* ── Left rail ─────────────────────────────────────────────────────── */
.app-shell-sidebar {
    background: #f8f9fa;
    border-right: 1px solid #dee2e6;
    padding: 0;
}

@media (min-width: 992px) {
    .app-shell-sidebar {
        position: sticky;
        top: 56px;
        height: calc(100vh - 56px);
        overflow-y: auto;
    }
}

@media (max-width: 991.98px) {
    /* When acting as offcanvas drawer (phone portrait + landscape, small tablets) */
    .app-shell-sidebar.offcanvas-lg {
        max-width: 280px;
        background: #f8f9fa;
        border-right: 1px solid #dee2e6;
    }
}

.app-shell-nav {
    padding: 1rem 0;
}

.app-shell-nav-group + .app-shell-nav-group {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e9ecef;
}

.app-shell-nav-heading {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0 1rem 0.35rem;
    color: #6c757d;
}

.app-shell-nav-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.42rem 1rem;
    color: #343a40;
    text-decoration: none;
    font-size: 0.92rem;
    border-left: 3px solid transparent;
}

.app-shell-nav-link:hover {
    background: #e9ecef;
    color: #000;
}

.app-shell-nav-link.active {
    background: #fff;
    border-left-color: #ffc107;
    font-weight: 600;
    color: #000;
}

.app-shell-nav-link i.bi {
    width: 1.1rem;
    text-align: center;
    font-size: 1rem;
}

/* ── Accordion toggles (Personnes / Outils headers) ────────────────── */
.app-shell-nav-accordion {
    width: 100%;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    cursor: pointer;
    text-align: left;
    font-weight: 600;
}
.app-shell-nav-accordion .chev {
    margin-left: auto;
    transition: transform 0.18s;
    font-size: 0.75rem;
}
.app-shell-nav-accordion.collapsed .chev {
    transform: rotate(-90deg);
}

/* Sub-items indented under an accordion header */
.app-shell-nav-sub {
    padding-left: 2.3rem;
    font-size: 0.88rem;
}

/* ── "Invite / Share" — promoted but understated ───────────────────────
   Sharing is the key social action, so it sits up top (not buried in an
   accordion) with a subtle green tint + accent icon — discoverable
   without shouting. */
.app-shell-nav-cta {
    color: #198754;
    font-weight: 600;
    border-left-color: transparent;
}
.app-shell-nav-cta:hover,
.app-shell-nav-cta.active {
    background: rgba(25, 135, 84, .10);
    color: #157347;
    border-left-color: #198754;
}
.app-shell-nav-cta i.bi { color: #198754; }

/* ── Main pane ─────────────────────────────────────────────────────── */
.app-shell-main {
    padding: 1.5rem 1.5rem 3rem;
}

@media (max-width: 767.98px) {
    .app-shell-main { padding: 1rem; }
}

/* Hamburger — only shown when sidebar is offcanvas (below md). The
   d-md-none Bootstrap utility on the button does the visibility work;
   this rule just adds breathing room above the page content. */
.app-shell-burger {
    margin-bottom: 0.75rem;
}

/* ── Right rail (optional inspector) ───────────────────────────────── */
.app-shell-right {
    background: #fff;
    border-left: 1px solid #dee2e6;
    padding: 1rem;
}

@media (min-width: 992px) {
    .app-shell-right {
        position: sticky;
        top: 56px;
        height: calc(100vh - 56px);
        overflow-y: auto;
    }
}

/* ── Tree picker dropdown ──────────────────────────────────────────── */
/* The toggle is styled to match .app-shell-nav-link so the picker reads
   as part of the nav rhythm rather than a foreign boxed control.
   Distinct background tints in the menu still let users tell their own
   trees from trees that have been shared with them. */
.tree-picker {
    padding: 0;
}

.tree-picker-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.42rem 1rem;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    color: #343a40;
    font-weight: 600;
    font-size: 0.92rem;
    text-align: left;
}

.tree-picker-toggle::after {
    margin-left: auto;          /* push chevron to the right */
    opacity: 0.5;
}

.tree-picker-toggle:hover {
    background: #e9ecef;
    color: #000;
}

.tree-picker-toggle[aria-expanded="true"] {
    background: #e9ecef;
}

.tree-picker-toggle .tree-name {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-picker-toggle i.bi {
    width: 1.1rem;
    text-align: center;
    font-size: 1rem;
}

.tree-picker-menu {
    max-height: 60vh;
    overflow-y: auto;
    min-width: 260px;
}

.tree-picker-section {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6c757d;
    padding: 0.5rem 1rem 0.2rem;
}

.tree-picker-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 1rem;
}

.tree-picker-row.owned   { background: #fff; }
.tree-picker-row.shared  { background: #eef4fb; }   /* tinted blue */
.tree-picker-row:hover   { filter: brightness(0.96); }
.tree-picker-row.active  { font-weight: 600; }
.tree-picker-row a.tree-link {
    flex: 1 1 auto;
    color: #212529;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tree-picker-row .tree-newtab {
    color: #6c757d;
    text-decoration: none;
}
.tree-picker-row .tree-newtab:hover { color: #000; }

/* ── Inspector card (right rail) ───────────────────────────────────── */
.inspector-card .inspector-dl {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 0.5rem;
    row-gap: 0.2rem;
    margin-bottom: 0;
}
.inspector-card .inspector-dl dt {
    font-weight: 500;
    color: #6c757d;
    white-space: nowrap;
}
.inspector-card .inspector-dl dd {
    margin: 0;
}

/* Highlight the row whose person is showing in the inspector */
tr.inspector-active,
[data-inspector-trigger].inspector-active {
    background: #fff8e1 !important;
}
[data-inspector-trigger] {
    cursor: pointer;
}

/* When the right-rail inspector is hidden (person_inspector.js toggles the
   class), let the main column reclaim the full width the rail would occupy. */
@media (min-width: 992px) {
    .app-shell-main.app-shell-main-wide {
        flex: 0 0 auto;
        width: 83.3333%;
        max-width: 83.3333%;
    }
}