/* Owner page (Unit 6). The table scrolls inside its own box at phone width. */
.owner-scroll{ overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg) }
.owner-table{ width:100%; border-collapse:collapse; font-size:14px }
.owner-table th,.owner-table td{ padding:10px 14px; text-align:right; border-top:1px solid var(--line); white-space:nowrap }
.owner-table thead th{ border-top:none; font-weight:500; color:var(--ink-3); white-space:normal; min-width:92px; vertical-align:bottom }
.owner-table th:first-child,.owner-table td:nth-child(2),.owner-table thead th:nth-child(2){ text-align:left }
.owner-table tbody th{ font-weight:500 }
.owner-takings td:nth-child(2),.owner-takings thead th:nth-child(2){ text-align:right }
/* The month stays in view while the table scrolls sideways. */
.owner-table tbody th,.owner-table thead th:first-child{ position:sticky; left:0; background:var(--surface); min-width:0 }

/* An owner has the most tabs: at phone width the bar scrolls sideways under the person's finger
   rather than cutting one off. Nothing scrolls it for them; the faded edge is the only cue, and
   the padding lets the last tab clear it. */
@media (max-width:760px){
  .tabbar{ overflow-x:auto; padding-right:28px;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent) }
  .tab{ flex:1 0 auto; padding-left:6px; padding-right:6px }
}