/* The DSS app's top bar. It sits on our own pages and is injected after <body> into the
   pages we pass along (the ledger, the WIP dashboard, the labor sheets, the daily report
   review app), so every rule is scoped to .dssh and sets its own font, colour and box:
   the host page's a, button, select and form rules must not reach it. No script.
   Tokens: dss-tokens.css (--dss-*). */

.dssh { display: block; position: relative; z-index: 30; margin: 0; padding: 0; text-align: left;
  font: 400 15px/1.3 var(--dss-text); color: var(--dss-ink); letter-spacing: normal; text-transform: none;
  -webkit-text-size-adjust: 100%; }
.dssh *, .dssh *::before, .dssh *::after { box-sizing: border-box; }

/* ---------- the bar: the sheet's title field ----------
   One rule system: the bar's bottom edge is a single 2px ink rule, drawn on each piece
   (inset shadow) so the current tab can stand on it and open into the page below. No
   lines between tabs; the logo tab and the current tab carry the only verticals, both
   2px ink like the bottom rule. */
.dssh .dssh-bar { display: grid; grid-template-columns: var(--dss-bar-h) minmax(0, 1fr) auto auto;
  grid-template-areas: "logo tabs who out"; height: var(--dss-bar-h); margin: 0; padding: 0;
  background: var(--dss-blue); color: #fff; }
.dssh .dssh-bar > * { box-shadow: inset 0 -2px 0 var(--dss-ink); }

.dssh .dssh-logo { grid-area: logo; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 0 2px;
  background: var(--dss-paper); border: 0; box-shadow: inset -2px 0 0 var(--dss-ink), inset 0 -2px 0 var(--dss-ink);
  text-decoration: none; }
.dssh .dssh-logo img { display: block; width: 46px; max-width: none; height: auto; margin: 0; border: 0; }
.dssh .dssh-logo:focus-visible { outline: 2.5px solid var(--dss-blue); outline-offset: -5px; }

/* ---------- tabs: the current one is a white tab cut into the field ---------- */
.dssh .dssh-tabs { grid-area: tabs; display: flex; align-items: stretch; min-width: 0; margin: 0; padding: 0;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.dssh .dssh-tabs::-webkit-scrollbar { display: none; }
.dssh .dssh-tab { display: flex; align-items: center; justify-content: center; flex: none; margin: 0; padding: 0 18px 2px;
  min-height: 0; border: 0; border-radius: 0; background: transparent; box-shadow: inset 0 -2px 0 var(--dss-ink);
  color: var(--dss-on-blue); font: 700 14px/1 var(--dss-display); letter-spacing: 0.01em; text-decoration: none;
  white-space: nowrap; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color 160ms var(--dss-ease), color 160ms var(--dss-ease); }
.dssh .dssh-tab:hover { background: var(--dss-blue-ink); color: #fff; text-decoration: none; }
.dssh .dssh-tab:focus-visible { outline: 2.5px solid #fff; outline-offset: -6px; }
/* the current tab: paper, ink sides, no bottom rule, so it opens into the row under the bar */
.dssh .dssh-tab[aria-current] { background: var(--dss-paper); color: var(--dss-ink);
  box-shadow: inset 2px 0 0 var(--dss-ink), inset -2px 0 0 var(--dss-ink); }
.dssh .dssh-tab[aria-current]:hover { background: var(--dss-paper); color: var(--dss-ink); }
/* next to the logo tab, whose own rule is the current tab's left side */
.dssh .dssh-tab:first-child[aria-current] { box-shadow: inset -2px 0 0 var(--dss-ink); }
.dssh .dssh-tab[aria-current]:focus-visible { outline-color: var(--dss-blue); }
/* our own pages without a picker row open onto the grey page itself */
header > .dssh:not(:has(.dssh-sub)) .dssh-tab[aria-current],
header > .dssh:not(:has(.dssh-sub)) .dssh-tab[aria-current]:hover { background: var(--dss-wash); }
.dssh .dssh-short { display: none; }
/* the admin group (Jobs, Users, Audit) sits at the far end of the tabs, set apart by space */
.dssh .dssh-sep { flex: 1 0 28px; }

/* ---------- who is signed in, and sign out ---------- */
.dssh .dssh-who { grid-area: who; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-width: 0;
  max-width: 240px; margin: 0; padding: 0 16px 2px 22px; }
.dssh .dssh-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 13.5px/1.1 var(--dss-display); color: #fff; }
.dssh .dssh-role { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 11.5px/1.1 var(--dss-display); color: var(--dss-on-blue); }
.dssh .dssh-out { grid-area: out; display: flex; align-items: center; margin: 0; padding: 0 14px 2px 2px; }
.dssh .dssh-signout { display: inline-flex; align-items: center; gap: 7px; height: 36px; min-height: 0; margin: 0; padding: 0 13px;
  border: 1.5px solid rgba(255, 255, 255, 0.72); border-radius: var(--dss-r-button); background: transparent; color: #fff;
  font: 700 13px/1 var(--dss-display); letter-spacing: 0.01em; text-decoration: none; cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color 160ms var(--dss-ease), color 160ms var(--dss-ease), transform 120ms var(--dss-ease); }
.dssh .dssh-signout svg { width: 15px; height: 15px; flex: none; }
.dssh .dssh-signout:hover { background: var(--dss-paper); color: var(--dss-blue); border-color: var(--dss-paper); }
.dssh .dssh-signout:active { transform: scale(0.97); }
.dssh .dssh-signout:focus-visible { outline: 2.5px solid #fff; outline-offset: 2px; }

/* ---------- the picker row under the bar (WIP month, labor week and PM) ---------- */
.dssh .dssh-sub { margin: 0; padding: 0; background: var(--dss-paper); border-bottom: 1.5px solid var(--dss-ink); }
.dssh .dssh-sub-in { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 18px; max-width: 1320px;
  margin: 0 auto; padding: 12px 24px 14px; }
.dssh .dssh-pick { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 0; padding: 0; min-width: 0; }
.dssh .dssh-field { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.dssh .dssh-key { display: block; font: 700 11px/1.1 var(--dss-display); letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--dss-charcoal); }
.dssh .dssh-select { display: block; height: 42px; min-height: 0; max-width: 100%; margin: 0; padding: 0 38px 0 12px;
  border: 1.5px solid var(--dss-field); border-radius: var(--dss-r-field); background-color: var(--dss-paper);
  background-image: linear-gradient(45deg, transparent 50%, var(--dss-ink) 50%), linear-gradient(135deg, var(--dss-ink) 50%, transparent 50%);
  background-position: right 17px center, right 12px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  color: var(--dss-ink); font: 400 16px/1.2 var(--dss-text); -webkit-appearance: none; appearance: none; cursor: pointer; }
.dssh .dssh-select:hover { border-color: var(--dss-charcoal); }
.dssh .dssh-select:focus { outline: none; border-color: var(--dss-blue); box-shadow: var(--dss-focus); }
.dssh .dssh-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; min-height: 0;
  margin: 0; padding: 0 16px; border: 1.5px solid var(--dss-ink); border-radius: var(--dss-r-button); background: var(--dss-paper);
  color: var(--dss-ink); font: 700 14px/1 var(--dss-display); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background-color 160ms var(--dss-ease), transform 120ms var(--dss-ease); }
.dssh .dssh-btn:hover { background: var(--dss-wash); text-decoration: none; color: var(--dss-ink); }
.dssh .dssh-btn:active { transform: scale(0.97); }
.dssh .dssh-btn:focus-visible { outline: 2.5px solid var(--dss-blue); outline-offset: 2px; }
.dssh .dssh-btn.dssh-primary { background: var(--dss-blue); border-color: var(--dss-blue-ink); color: #fff; }
.dssh .dssh-btn.dssh-primary:hover { background: var(--dss-blue-ink); color: #fff; }
.dssh .dssh-btn svg { width: 16px; height: 16px; flex: none; }
.dssh .dssh-pick .dssh-push { margin-left: auto; }

.dssh .dssh-sub-in > .dssh-push { margin-left: auto; }

/* dates: Start (optional) and End, typed (10/1/2026, today ...); the calendar button is a shortcut, on once dates.js runs */
.dssh .dssh-datebox { position: relative; display: block; margin: 0; }
.dssh .dssh-date { display: block; width: 150px; max-width: 100%; height: 42px; min-height: 0; margin: 0; padding: 0 12px;
  border: 1.5px solid var(--dss-field); border-radius: var(--dss-r-field); background: var(--dss-paper); color: var(--dss-ink);
  font: 400 16px/1.2 var(--dss-text); font-variant-numeric: tabular-nums; -webkit-appearance: none; appearance: none; }
.dssh .dssh-date::placeholder { color: var(--dss-muted); opacity: 1; }
.dssh .dssh-date:hover { border-color: var(--dss-charcoal); }
.dssh .dssh-date:focus { outline: none; border-color: var(--dss-blue); box-shadow: var(--dss-focus); }
.dssh .dssh-datebox.has-cal .dssh-date { width: 176px; padding-right: 46px; }
.dssh .dssh-cal { position: absolute; top: 1.5px; right: 1.5px; bottom: 1.5px; display: flex; align-items: center; justify-content: center;
  width: 40px; min-height: 0; margin: 0; padding: 0; border: 0; border-left: 1px solid var(--dss-hair); border-radius: 0 2px 2px 0;
  background: transparent; color: var(--dss-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.dssh .dssh-cal[hidden] { display: none !important; }
.dssh .dssh-cal:hover { background: var(--dss-wash); }
.dssh .dssh-cal:focus-visible { outline: 2.5px solid var(--dss-blue); outline-offset: -3px; }
.dssh .dssh-cal svg { width: 16px; height: 16px; }
.dssh .dssh-cal-input { position: absolute; right: 0; bottom: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0;
  opacity: 0; pointer-events: none; }

/* whose jobs: Mine or All PMs, two links set as one switch */
.dssh .dssh-view { display: flex; flex-direction: column; gap: 6px; margin: 0; min-width: 0; }
.dssh .dssh-seg { display: flex; margin: 0; padding: 0; }
.dssh .dssh-seg a { display: inline-flex; align-items: center; justify-content: center; flex: 1 1 0; height: 42px; min-height: 0;
  margin: 0; padding: 0 16px; border: 1.5px solid var(--dss-ink); border-radius: 0; background: var(--dss-paper); color: var(--dss-ink);
  font: 700 14px/1 var(--dss-display); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: background-color 160ms var(--dss-ease); }
.dssh .dssh-seg a + a { border-left-width: 0; }
.dssh .dssh-seg a:first-child { border-radius: var(--dss-r-field) 0 0 var(--dss-r-field); }
.dssh .dssh-seg a:last-child { border-radius: 0 var(--dss-r-field) var(--dss-r-field) 0; }
.dssh .dssh-seg a:hover { background: var(--dss-blue-wash); color: var(--dss-ink); text-decoration: none; }
.dssh .dssh-seg a[aria-current] { background: var(--dss-blue); border-color: var(--dss-blue-ink); color: #fff; }
.dssh .dssh-seg a:focus-visible { position: relative; outline: 2.5px solid var(--dss-blue); outline-offset: 2px; }

/* ---------- phone: logo, name and sign out on top, the tabs on a row of their own ---------- */
@media (max-width: 900px) {
  /* logo, name and sign out on top; the tabs on one row of their own, sharing it evenly */
  .dssh .dssh-bar { grid-template-columns: 50px minmax(0, 1fr) auto; grid-template-rows: 50px 46px;
    grid-template-areas: "logo who out" "tabs tabs tabs"; height: auto; }
  .dssh .dssh-bar > .dssh-who, .dssh .dssh-bar > .dssh-out { box-shadow: none; }
  .dssh .dssh-logo { padding: 0; box-shadow: inset -2px 0 0 var(--dss-ink), inset 0 -2px 0 var(--dss-ink); }
  .dssh .dssh-logo img { width: 42px; }
  .dssh .dssh-who { max-width: none; padding: 0 12px; }
  .dssh .dssh-out { padding: 0 10px 0 0; }
  .dssh .dssh-tabs { padding: 0; }
  .dssh .dssh-tab { flex: 1 0 auto; padding: 0 10px 2px; font-size: 13px; }
  .dssh .dssh-sep { flex: 0 0 10px; }
  .dssh .dssh-long { display: none; }
  .dssh .dssh-short { display: inline; }
  .dssh .dssh-sub-in { padding: 12px 16px 14px; }
  .dssh .dssh-pick { width: 100%; }
  .dssh .dssh-field { flex: 1 1 100%; }
  .dssh .dssh-select { width: 100%; height: 44px; }
  .dssh .dssh-btn { flex: 1 1 0; height: 44px; padding: 0 12px; }
  .dssh .dssh-pick .dssh-push, .dssh .dssh-sub-in > .dssh-push { margin-left: 0; }
  /* one list and its button (the WIP month) share a row */
  .dssh .dssh-one .dssh-field { flex: 1 1 0; }
  .dssh .dssh-one .dssh-btn { flex: 0 0 auto; }
  /* Start and End side by side; Show dates and Rebuild now share the next row */
  .dssh .dssh-sub-in > .dssh-btn { flex: 1 1 140px; }
  .dssh .dssh-range { display: contents; }
  .dssh .dssh-range .dssh-field { flex: 1 1 140px; }
  .dssh .dssh-range .dssh-btn { flex: 1 1 140px; }
  .dssh .dssh-date, .dssh .dssh-datebox.has-cal .dssh-date { width: 100%; min-width: 0; height: 44px; }
  .dssh .dssh-cal { width: 42px; }
  .dssh .dssh-view { flex: 1 1 100%; }
  .dssh .dssh-seg a { height: 44px; }
}
@media (min-width: 520px) and (max-width: 900px) {
  .dssh .dssh-field { flex: 1 1 200px; }
  .dssh .dssh-btn { flex: 0 1 auto; }
  .dssh .dssh-sub-in > .dssh-btn { flex: 0 1 auto; }
}
/* six tabs on a narrow phone still take one row: tighter, and the group gap goes */
@media (max-width: 400px) {
  .dssh .dssh-tab { padding: 0 6px 2px; font-size: 12.5px; letter-spacing: 0; }
  .dssh .dssh-n6 .dssh-sep { flex-basis: 0; }
}
@media (max-width: 340px) {
  .dssh .dssh-tab { padding: 0 4px 2px; font-size: 12px; }
  .dssh .dssh-signout span { display: none; }
  .dssh .dssh-signout { padding: 0 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .dssh .dssh-tab, .dssh .dssh-signout, .dssh .dssh-btn { transition: none; }
  .dssh .dssh-signout:active, .dssh .dssh-btn:active { transform: none; }
}
@media print { .dssh { display: none !important; } }