/* Mobile dashboard sheet — the pull-up panel holding the KPIs, the KPI graph and the insights. */

/*
    The collapsed handle is pinned to the bottom of the viewport. It sits in the same (modal) layer as
    the sheet rather than in the page flow, so that neither is trapped inside Layout's transformed
    content wrapper — a transform would make them scroll with the page and drag the topbar off-screen.
    `.frontpage-layout` reserves matching bottom padding so the chat input is never covered.
*/
.mobile-sheet-handle {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030; /* under the backdrop (1040) and the sheet (1050) */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #dee2e6;
    background: #ffffff;
    cursor: pointer;
    user-select: none;
    touch-action: none; /* the handle is draggable; let the drag module own the gesture */
}

.mobile-sheet-handle-chevron {
    font-size: 1rem;
    color: #6c757d;
}

.mobile-sheet-handle-label {
    font-size: 0.9rem;
    font-weight: 400;
    color: #1d1d1d;
}

.mobile-sheet-handle-badge {
    font-size: 0.65rem;
    margin-left: auto;
}

/* Backdrop */

.mobile-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(29, 29, 29, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease-out;
    z-index: 1040;
}

.mobile-sheet-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

/* The sheet itself */

.mobile-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* dvh, not vh: the mobile URL bar collapsing must not leave the sheet taller than the screen. */
    height: 88dvh;
    max-height: 88dvh;
    display: flex;
    flex-direction: column;
    background: #f8f9fa;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    transform: translateY(100%);
    transition: transform 0.25s ease-out;
    will-change: transform;
}

.mobile-sheet.open {
    transform: translateY(0);
}

.mobile-sheet-grabber {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 1rem;
    flex-shrink: 0;
    cursor: grab;
    touch-action: none; /* the grabber is draggable; let the drag module own the gesture */
}

.mobile-sheet-grabber-bar {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: #ced4da;
}

.mobile-sheet-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
}

/* Contents */

/* The KPI tiles are `col-12 col-sm-3`, so on a phone they stack into a ~440px column and push the
   graph below the fold — tapping a tile then looks like nothing happened. Two-up keeps all four
   tiles and the graph they open on the same screen. */
.mobile-sheet-tiles {
    margin-bottom: 0.5rem;
}

.mobile-sheet-tiles > div {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}

.mobile-sheet-graph {
    margin-bottom: 1rem;
    border: none;
}

.mobile-sheet-insights-heading {
    font-weight: 400;
    font-size: 0.85rem;
    color: #6c757d;
    margin: 0.5rem 0 0.5rem;
}

.mobile-sheet-insights-empty {
    font-size: 0.9rem;
    padding: 1rem 0;
}

.mobile-sheet-insight-link {
    display: block;
    margin-bottom: 0.75rem;
}

.mobile-sheet-insights-all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    font-weight: 400;
    color: #1d1d1d;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.mobile-sheet-insights-all:hover,
.mobile-sheet-insights-all:focus {
    color: #1d1d1d;
    text-decoration: none;
    border-color: #1d1d1d;
}