/* Copyright (c) 2026 Datum Investment Solutions, LLC. All rights reserved.
   Proprietary and confidential. See LICENSE at the repository root. */

/* The tab strip, in the top bar.

   Its own sheet, not part of home.css. The property sheet needs these rules
   and must NOT have the rest of home.css, which takes `main` back from
   app.css and would flatten the sheet's two-pane layout.

   THESE ARE TABS, not buttons that happen to be in a row. They were pills:
   rounded on all four sides, floating in the middle of the bar with nothing
   to sit on, and the active one a solid block of accent. Nothing about that
   said "these are views of one thing" -- it said "here are some buttons",
   and a row of buttons in a header reads as unrelated actions.

   A tab is a shape attached to the surface it opens. So: bottom-aligned to
   the bar's lower edge, top corners rounded and bottom corners square,
   bordered on three sides, and the active one filled with the PAGE color
   rather than an accent -- then a 1px cap over the bar's own bottom border
   beneath it, so the active tab is continuous with the page below and the
   inactive ones are not. That continuity is the whole of what makes a tab
   read as a tab rather than as a button. */

/* WHAT THE ACTIVE TAB JOINS TO differs by page, so it is named rather than
   assumed. Below the bar is the page color on the dashboards, and white on
   the marketplace (the filter strip) and the property sheet (the picker).
   A tab filled with the wrong one of those still looks like a tab and stops
   looking attached, which is the only thing the shape is for. */
.tabs{--tabjoin:var(--bg)}
.tabs.onwhite{--tabjoin:var(--card)}

/* NOTHING BEFORE THE TABS.

   The bar used to read `Datum · Property Investments`, then on each page a
   second word for the page -- `Dashboards`, `Property`, `Accounts`. Three
   names for one place, and the `Datum` mark was a second copy of the one the
   rail already shows about thirty pixels to its left. Two marks side by side
   is what made the blue pill look like it was floating: it had nothing to be
   next to that was not already saying the same thing.
   
   So on a page with tabs the strip IS the toolbar and starts at the bar's
   left edge. On a page without tabs the bar carries the page's name in plain
   words instead. The bar always says where you are, once. */

/* Bottom-aligned rather than centerd with everything else in the bar: a tab
   floating in the middle of a header has nothing to be attached to. The
   negative margin is the bar's own bottom padding, so the tabs reach its
   edge exactly. */
.tabs{display:flex;gap:2px;flex-wrap:wrap;min-width:0;
  align-self:stretch;align-items:flex-end;margin-bottom:-10px;padding-top:8px}

/* Each tab is a real link to a real url, so it can be bookmarked, opened in
   a new tab and landed on from the rail -- not a state that exists only
   after somebody clicks. */
.tab{position:relative;display:inline-block;padding:7px 15px 8px;
  border:1px solid transparent;border-bottom:0;border-radius:9px 9px 0 0;
  text-decoration:none;color:var(--ink2);font-size:13px;font-weight:600;
  white-space:nowrap;line-height:1.3}

/* An inactive tab warms towards the front on hover rather than lighting up.
   The active one is already the lit one, and two lit tabs is ambiguous. */
.tab:hover{background:var(--tabjoin);color:var(--ink)}
.tab.on{background:var(--tabjoin);border-color:var(--line);color:var(--ink)}

/* The join: this covers the bar's 1px bottom border under the active tab,
   which is what makes it continuous with the page instead of sitting on a
   line like the others. */
.tab.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;
  height:1px;background:var(--tabjoin)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Wrapped onto a second row, the negative margin would pull the wrong row
   onto the bar's edge, so below 700px the strip stops trying to attach and
   goes back to being a plain row. There is no room for the join there
   anyway. */
@media (max-width: 700px){
  .tabs{align-self:center;margin-bottom:0;padding-top:0}
  .tab{border-radius:7px;border-bottom:1px solid transparent;padding:5px 11px}
  .tab.on{border-color:var(--line)}
  .tab.on::after{display:none}
}