/* Readers only (petrolyst_reader.py, templates/head_custom_extra.html). Hides what Superset 6.1
   shows whatever the permissions. Cosmetic: what protects is the role and the reader rules. */

/* The dashboard's title row: name, favourite, refresh, owner, last change, "…". */
[data-test="dashboard-header-container"] {
  display: none !important;
}

/* ATOMA's Fleet tab: no filter column and its resize handle (no filter applies there); the
   column is empty then, so the map takes the full width. Site details keeps it. Also hidden
   until the dashboard's grid is there, so it does not flash up while the Fleet tab loads.
   dashboards/atoma/build_bundle.py checks that this names the Fleet tab. */
body:has(.ant-tabs-tab-active[data-node-key="TAB-fleet"]) [data-test="dashboard-filters-panel"],
body:has(.ant-tabs-tab-active[data-node-key="TAB-fleet"]) div:has(+ [data-test="dashboard-filters-panel"]),
body:not(:has([data-test="grid-container"])) [data-test="dashboard-filters-panel"],
body:not(:has([data-test="grid-container"])) div:has(+ [data-test="dashboard-filters-panel"]) {
  display: none !important;
}

/* Superset sizes blocks in pixels and measures again only about 0.3 s after loading, so the
   map would start beside a column that is not there and then widen. Its block spans all 12
   columns (build_bundle.py checks it), so the full width is always right. Its column grows to
   the row's width; the blocks inside it follow.
   Height: down to the window's bottom edge instead of the layout's 800 px. Above the block are
   123 px (navbar, margin, tab row) and below it 16, so the map ends 32 px above the edge, as it
   does from the sides. At least 592 px: the map's own minimum height, 560, and the padding. */
.grid-row > .dragdroppable-column:has(#MARKDOWN-fleet-map) {
  flex-grow: 1;
}
#MARKDOWN-fleet-map > .resizable-container {
  width: 100% !important;
  max-width: 100% !important;
  height: max(592px, 100vh - 139px) !important;
}

/* Navbar: "+" (new) and the theme switcher. */
li.ant-menu-submenu:has(> .ant-menu-submenu-title[data-menu-id$="-new-dropdown"]),
li.ant-menu-submenu:has(> .ant-menu-submenu-title[data-menu-id$="-theme-sub-menu"]) {
  display: none !important;
}

/* Settings: Info and the About group (Superset's name and version); User → Logout remains. */
li.ant-menu-item[data-menu-id$="-info"],
li.ant-menu-item-group:has([data-menu-id$="-about-info"]),
li.ant-menu-item-divider:has(+ li.ant-menu-item-group [data-menu-id$="-about-info"]) {
  display: none !important;
}

/* ATOMA's top-level tabs as a lens switch in the navbar, centred: Map and Insights (owner,
   29 Oct). Pinned to the window, a scroll-linked animation moves it up as fast as the navbar
   scrolls away. Without that support, or narrower than 900 px, the tab row stays in the page.
   With the switch, the map's block grows by the tab row's 46 px: 93 px are left above and
   below it. */
@supports (animation-timeline: scroll()) {
  @media (min-width: 900px) {
    #TABS-main > .ant-tabs-nav {
      position: fixed;
      top: 9px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1000;
      margin: 0;
      padding: 4px;
      border-radius: 12px;
      background: rgba(11, 29, 51, 0.06);
      animation: petrolyst-lens-scroll linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 61px;
    }
    #TABS-main > .ant-tabs-nav::before,
    #TABS-main > .ant-tabs-nav .ant-tabs-ink-bar,
    #TABS-main > .ant-tabs-nav .anchor-link-container {
      display: none;
    }
    #TABS-main > .ant-tabs-nav .ant-tabs-nav-list {
      gap: 4px;
    }
    #TABS-main > .ant-tabs-nav .ant-tabs-tab {
      margin: 0 !important;
      padding: 7px 18px 7px 14px !important;
      border-radius: 9px !important;
      font-size: 15px;
      font-weight: 600;
      color: #3b4a5c;
    }
    #TABS-main > .ant-tabs-nav .ant-tabs-tab-active {
      background: #0b1d33 !important;
    }
    #TABS-main > .ant-tabs-nav .ant-tabs-tab-active .ant-tabs-tab-btn {
      color: #fff !important;
    }
    #TABS-main > .ant-tabs-nav [data-test="span-title"]::before {
      content: "";
      display: inline-block;
      width: 18px;
      height: 18px;
      margin-right: 8px;
      vertical-align: -3px;
      background: currentColor;
      -webkit-mask: var(--lens-icon) center / contain no-repeat;
      mask: var(--lens-icon) center / contain no-repeat;
    }
    #TABS-main .ant-tabs-tab[data-node-key="TAB-fleet"] {
      --lens-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%204%203%206v14l6-2%206%202%206-2V4l-6%202-6-2z'/%3E%3Cpath%20d='M9%204v14M15%206v14'/%3E%3C/svg%3E");
    }
    #TABS-main .ant-tabs-tab[data-node-key="TAB-site"] {
      --lens-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2020V10M10%2020V4M16%2020v-7M22%2020H2'/%3E%3C/svg%3E");
    }
    #MARKDOWN-fleet-map > .resizable-container {
      height: max(592px, 100vh - 93px) !important;
    }
    /* A third lens, AI, as a teaser: greyed, tagged PRO, not a tab and not clickable (owner,
       29 Oct; no AI lens is built until Botswerk exists). Drawn by the tab list itself, so the
       dashboard's layout stays Map and Insights. From 1100 px only: narrower, the wider switch
       would cover the logo. */
    @media (min-width: 1100px) {
      #TABS-main > .ant-tabs-nav .ant-tabs-nav-list::before {
        content: "AI" / "AI, available with Petrolyst Pro";
        order: 1;
        display: flex;
        align-items: center;
        padding: 7px 58px 7px 40px;
        border-radius: 9px;
        font-size: 15px;
        font-weight: 600;
        line-height: 22px;
        color: #8a96a3;
        cursor: not-allowed;
        background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%238a96a3'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9.937%2015.5A2%202%200%200%200%208.5%2014.063l-6.135-1.582a.5.5%200%200%201%200-.962L8.5%209.936A2%202%200%200%200%209.937%208.5l1.582-6.135a.5.5%200%200%201%20.963%200L14.063%208.5A2%202%200%200%200%2015.5%209.937l6.135%201.581a.5.5%200%200%201%200%20.964L15.5%2014.063a2%202%200%200%200-1.437%201.437l-1.582%206.135a.5.5%200%200%201-.963%200z'/%3E%3Cpath%20d='M20%203v4M22%205h-4'/%3E%3C/svg%3E") 14px center / 18px 18px no-repeat;
      }
      #TABS-main > .ant-tabs-nav .ant-tabs-nav-list::after {
        content: "PRO" / "";
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        padding: 3px 7px;
        border-radius: 999px;
        background: #0f7b6c;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.06em;
        line-height: 1;
        pointer-events: none;
      }
    }
  }
}
@keyframes petrolyst-lens-scroll {
  to {
    transform: translate(-50%, -61px);
  }
}