@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

body{
  margin: 0px;
  padding: 0px;
  background-color: #F3F4F9;
  font-family: 'Roboto';
  color: #203cb3;
}

#app-title > * {
    color: white;
    margin: 0;
    padding: 0;
}

#about-open {
    white-space: nowrap;
}

#gh-link {
    white-space: nowrap;
}

.card {
    margin: 1em 0 1em 0;
    min-width: auto;
}

label {
  display: block;
  margin-bottom: 0;
}

#transparent-loader-wrapper > div {
    visibility: visible !important;
}

.radio-group .form-check {
  padding-left: 0;
}

.radio-group .btn-group > .form-check:not(:last-child) > .btn {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.radio-group .btn-group > .form-check:not(:first-child) > .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  margin-left: -1px;
}

.showme {
    display: none;
}

.show-him:hover .showme {
    display: block;
}
.center {
  margin: 0 auto;
  display: block;
}

.line-break-height {
    display: block; /* makes it have a width */
    content: ""; /* clears default height */
    margin-top: 2px;
}

img[src*="#help100pc"] {
   width:90%;
}

.VirtualizedSelectOption {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
background-color: #f3f3ed;
align-items: center;
align-content: center;
justify-content: center;
vertical-align: middle;
color: #64645e;
font-size: medium;
display: inline-block;
width: calc(90%);
column-gap: normal;
}


.VirtualizedSelectOption:hover {
overflow: auto;
white-space: normal;
z-index: 1;
}

@media (min-width: 1400px) {
  .modal-xl {
    --bs-modal-width: 1400px;
  }
}

img[src*="#mdpng"] {
   width:100%;
   height:auto;
}

.md-table table {
     border-collapse: collapse;
}

.md-table th, .md-table td {
  border: 1px solid;
}

.mb-2 {
  margin-top: .5rem !important;
  margin-bottom: .5rem !important;
}

/* App shell (server_layout in pinnacle.py). A viewport-tall column: the mobile
   top bar (display:none above 768px) then #app-body, which takes whatever is
   left. 100dvh rather than 100vh so a mobile browser's collapsing address bar
   doesn't leave the bottom of the page unreachable. */
.app-layout {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background-color: #191A1A;
}

/* Body row: the sidebar rail beside the page frame. min-height:0 lets the frame
   be bounded by the viewport instead of stretched by its content, which is what
   keeps the scrolling inside the active page. */
.app-body {
    flex: 1;
    min-height: 0;
    width: 100%;
    display: flex;
}

/* The rail sizes itself (53px collapsed, 220px expanded); it must neither grow
   nor be squeezed by the page beside it. */
.sidebar-container {
    flex: 0 0 auto;
}

.page-container {
    flex: 1;
    /* min-width:0 next to flex:1 — without it, wide page content (tables, code
       blocks) sets the frame's floor width and pushes the layout sideways. */
    min-width: 0;
    min-height: 0;
    height: 100%;
    padding: 16px;
    margin: 0;
    background-color: white;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Page enter animation ──────────────────────────────────────────────
   Each page container starts hidden (display:none) and is revealed one at a
   time by the update_page_styles callback. When display flips none→visible
   the browser restarts this animation, so the active page eases into view on
   every navigation (and on first load). Only opacity animates — the inline
   `display` value set by the callback is preserved. */
.page-fade-in {
    animation: pageEaseIn 0.1s ease-out;
}

@keyframes pageEaseIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .page-fade-in {
        animation: none;
    }
}

/* Backdrop behind the mobile drawer. Sits above the top bar (998) and the
   toolbar pinned into it (999) so opening the drawer dims the whole shell; the
   drawer itself (1001) stays above it. */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    transition: opacity 0.3s ease;
}

.mobile-header {
    display: none;
}

/* Mobile-only route guard (_mobile_search_only_notice in pinnacle.py). Hidden
   by default, which is also its permanent desktop state — only the media query
   below can reveal it, and only once the clientside guard in route.py has marked
   the route unsupported. */
.mobile-only-search {
    display: none;
}

.login-modal-body {
    margin: 28px 86px;
    text-align: center;
    align-items: center;
    position: relative;
}

@media screen and (max-width: 768px) {
    /* Full-bleed page (the frame's desktop 16px gutter goes to the pages
       themselves); it still fills the space under the top bar and still doesn't
       scroll — the active page inside it is the scroll container (route.py gives
       it flex:1/min-height:0/overflow:auto), so there's one scrollbar, not two. */
    .page-container {
        padding: 0;
        border-radius: 0 !important;
    }

    /* Off-canvas rail. In the flow it would sit beside the page and, being
       full-height, force it onto its own line — so it becomes a fixed drawer,
       parked off the left edge. It stays in the DOM rather than display:none:
       it hosts dcc.Location(id="url") and the hidden login modal, both of which
       have to keep rendering. The top bar's hamburger slides it in by adding
       `sidebar-open` here (assets/new_sidebar.js); the backdrop, a nav pick or
       the rail's own collapse icon take it back off. */
    #sidebar-container {
        position: fixed;
        top: 0;
        left: 0;
        /* Explicit width so translateX(-100%) parks the drawer fully off-screen
           regardless of whether the rail inside it is expanded (220px) or not. */
        width: 220px;
        height: 100%;
        z-index: 1001;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
    }

    #sidebar-container.sidebar-open {
        transform: none;
    }

    #sidebar-container.sidebar-open + .sidebar-overlay {
        display: block;
    }

    .mobile-header {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem;
        background-color: #ffffff;
        border-bottom: 1px solid #E2E8F0;
        z-index: 998;
        /* Fixed px, not 7vh: the bar holds a 28px logo, so it can't scale with
           the viewport, and a vh height here made the column overflow. */
        height: 56px;
    }

    /* The dataset dropdown belongs in the top bar on mobile. It can't just be
       rendered there: #dataset-dropdown is a single Dash component that every
       dataset callback binds to, so there's exactly one instance and it lives in
       the toolbar. So the toolbar itself is lifted out of the page frame and
       pinned to the bar's empty right half (fixed, not absolute — its nearest
       positioned ancestor is .page-container, which starts below the bar). The
       page gets back the row the toolbar occupied. 56px clears the hamburger on
       the left. */
    .dataset-toolbar {
        position: fixed;
        top: 0;
        right: 0;
        width: calc(100% - 56px);
        height: 56px;
        padding: 0 12px;
        justify-content: flex-end;
        z-index: 999;
    }

    /* No room for the trail beside the dropdown — on mobile the drawer's Home
       item is how you get back. */
    .dataset-toolbar .page-breadcrumb {
        display: none;
    }

    /* Compact and right-aligned: the hamburger holds the bar's left edge and the
       toolbar's flex-end puts the dropdown against the other one, so the gap
       between them is whatever the screen has spare.

       The width is stated outright — narrower than the inline 260px, which
       crowds a phone — because neither alternative works. Left to flex it fills
       the whole bar; left to its content it follows react-select's control,
       which is only as wide as the label it happens to be showing, so typing a
       search term (label swapped for a one-character input) collapsed the
       dropdown and its menu to fit the typed text. */
    #dataset-container {
        width: 200px !important;
        max-width: 100%;
    }

    /* Covers the page frame, so the route underneath keeps rendering but can't
       be seen or touched. z-index sits above the pages yet below the top bar
       (998) and the toolbar pinned into it (999) — .page-container has z-index
       auto, so it's no stacking context and these numbers compare directly. */
    .mobile-only-search-blocked {
        display: flex;
        position: absolute;
        inset: 0;
        z-index: 100;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 24px;
        background-color: #ffffff;
        text-align: center;
    }

    .mobile-only-search-text {
        margin: 0;
        color: #0F172A;
        font-size: 16px;
        font-weight: 500;
        line-height: 150%;
    }

    /* Home is the only destination the mobile UI supports, so the rail carries
       nothing else. !important because login_button_callback drives these items
       through their inline `style` prop, which a plain rule can't outrank.
       Log In and the user footer are deliberately kept — they're auth, not
       navigation, and without them there'd be no way to sign in or out here. */
    #saved-queries-toggle,
    #feedback-toggle,
    #overview-toggle,
    #user-toggle,
    #setting-toggle {
        display: none !important;
    }

    .mobile-header-left {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .hamburger-button {
        border: none;
        background: transparent;
        padding: 0;
        cursor: pointer;
    }

    .hamburger-icon {
        width: 24px;
        height: 24px;
    }

    .login-modal-body{
        margin: 28px 26px;
    }

    .page-desktop-only{
        display: none !important;
    }
}