/* TBC v1.7.6.0 Botanical Brand Theme
   Approved visual direction: deep green + cream + warm gold + botanical line art. */

:root{
  --tbc-brand-green:#0a4b40;
  --tbc-brand-green-2:#073d35;
  --tbc-brand-green-3:#052f2a;
  --tbc-brand-gold:#e2aa35;
  --tbc-brand-gold-2:#f0c766;
  --tbc-brand-cream:#f6f1e7;
  --tbc-brand-paper:#fffdf8;
  --tbc-brand-paper-2:#fbf8f1;
  --tbc-brand-line:#ded5c8;
  --tbc-brand-line-green:#bad4c8;
  --tbc-brand-ink:#172f29;
  --tbc-brand-muted:#68756f;
  --tbc-brand-mint:#e5f1eb;
  --tbc-brand-mint-2:#d4e9df;
  --tbc-brand-warn:#fff2cd;
  --tbc-brand-danger:#fbe6df;
  --tbc-brand-shadow:0 10px 28px rgba(25,49,41,.065);
  --tbc-brand-shadow-soft:0 5px 16px rgba(25,49,41,.045);
}

.shell,
.pp-shell{
  background:var(--tbc-brand-green-2)!important;
}

.main,
.pp-main{
  background:
    linear-gradient(rgba(246,241,231,.96),rgba(246,241,231,.96)),
    url('./assets/tbc-botanical-corner.svg') top right/260px auto no-repeat!important;
  color:var(--tbc-brand-ink)!important;
}

.content,
.pp-content{
  background:transparent!important;
  color:var(--tbc-brand-ink)!important;
}

.sidebar,
.pp-sidebar{
  background:
    linear-gradient(180deg,rgba(7,61,53,.985),rgba(5,47,42,.995)),
    url('./assets/tbc-botanical-side.svg') left bottom/230px auto no-repeat!important;
  color:#f7f3e9!important;
  border-right:1px solid rgba(151,196,177,.18)!important;
}

.brand,
.pp-brand{
  color:#fff!important;
}

.brand-mark,
.pp-brand .mark{
  background:linear-gradient(145deg,#f1bd55,var(--tbc-brand-gold))!important;
  color:#173028!important;
  box-shadow:0 7px 18px rgba(0,0,0,.16)!important;
  border:1px solid rgba(255,255,255,.16)!important;
}

.brand h1,
.pp-brand strong{
  color:#fff!important;
}

.brand p,
.pp-brand small{
  color:rgba(255,255,255,.68)!important;
  letter-spacing:.12em!important;
}

.nav button,
.nav a,
.pp-nav a{
  color:rgba(255,255,255,.88)!important;
  border-color:transparent!important;
}

.nav button:hover,
.nav a:hover,
.pp-nav a:hover{
  background:rgba(255,255,255,.065)!important;
  color:#fff!important;
}

.pp-nav-label{
  color:rgba(255,255,255,.56)!important;
  letter-spacing:.14em!important;
}

.sidebar-foot,
.pp-sidebar-footer{
  border-color:rgba(255,255,255,.14)!important;
  color:rgba(255,255,255,.82)!important;
}

.sidebar-foot strong,
.pp-sidebar-footer strong{
  color:#fff!important;
}

.sidebar-foot a,
.sidebar-foot button,
.pp-sidebar-footer a,
.pp-sidebar-footer button{
  color:#fff!important;
}

.topbar{
  position:relative;
}

.topbar,
.pp-topbar{
  background:rgba(255,253,248,.96)!important;
  border-color:var(--tbc-brand-line)!important;
  box-shadow:0 4px 18px rgba(24,49,40,.035)!important;
}

.topbar::after,
.pp-topbar::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--tbc-brand-gold),transparent);
  opacity:.45;
  pointer-events:none;
}

.topbar-left h1,
.topbar-left h2,
.pp-topbar h2{
  color:var(--tbc-brand-ink)!important;
}

.topbar-left p,
.pp-topbar p{
  color:var(--tbc-brand-muted)!important;
}

.top-controls .control,
.top-controls input,
.top-controls select{
  border-color:var(--tbc-brand-line)!important;
  background:var(--tbc-brand-paper)!important;
  color:var(--tbc-brand-ink)!important;
}

.tbc-help-btn,
.tbc-notify-bell{
  background:var(--tbc-brand-paper)!important;
  color:var(--tbc-brand-green)!important;
  border-color:var(--tbc-brand-line)!important;
  box-shadow:var(--tbc-brand-shadow-soft)!important;
}

.tbc-help-btn:hover,
.tbc-notify-bell:hover{
  background:#fffaf0!important;
  border-color:#d8b768!important;
}

.tbc-notify-badge{
  background:var(--tbc-brand-gold)!important;
  color:#163129!important;
  border-color:var(--tbc-brand-paper)!important;
}

.page-head h1,
.page-head h2,
.page-head h3,
.pp-page-head h1,
.pp-page-head h2,
.pp-page-head h3{
  color:#142b25!important;
  font-family:Georgia,'Times New Roman',serif!important;
  letter-spacing:-.025em!important;
}

.page-head p,
.pp-page-head p,
.meta,
.pp-meta{
  color:var(--tbc-brand-muted)!important;
}

.eyebrow,
.metric-label,
.pp-metric>span{
  color:#68736d!important;
  letter-spacing:.12em!important;
}

.shell .card,
.shell .metric,
.pp-shell .pp-card,
.pp-shell .pp-metric,
.staff-checklist-card,
.staff-roster-card,
.staff-mobile-today-summary,
.inventory-dispatch-bar{
  background:
    linear-gradient(rgba(255,253,248,.975),rgba(255,253,248,.975)),
    url('./assets/tbc-botanical-corner.svg') right top/115px auto no-repeat!important;
  color:var(--tbc-brand-ink)!important;
  border-color:var(--tbc-brand-line)!important;
  border-radius:17px!important;
  box-shadow:var(--tbc-brand-shadow-soft)!important;
}

.shell .metric,
.pp-shell .pp-metric{
  border-color:var(--tbc-brand-line-green)!important;
}

.metric-value,
.pp-metric>strong{
  color:#132923!important;
}

.metric-note,
.pp-metric>small{
  color:var(--tbc-brand-muted)!important;
}

.section-title h3,
.section-title h4,
.pp-section-head h3,
.pp-section-head h4{
  color:#17352d!important;
}

.section-title p,
.pp-section-head p{
  color:var(--tbc-brand-muted)!important;
}

.shell .btn,
.pp-shell .pp-btn,
.pc-btn{
  border-color:var(--tbc-brand-line)!important;
  background:var(--tbc-brand-paper)!important;
  color:var(--tbc-brand-green)!important;
  border-radius:11px!important;
  box-shadow:none!important;
}

.shell .btn:hover,
.pp-shell .pp-btn:hover,
.pc-btn:hover{
  border-color:#cba74f!important;
  background:#fff9ec!important;
}

.shell .btn.primary,
.pp-shell .pp-btn.primary,
.pc-btn.primary,
.mobile-more-actions .primary,
.pp-mobile-more-actions .primary{
  background:var(--tbc-brand-green)!important;
  color:#fff!important;
  border-color:var(--tbc-brand-green)!important;
}

.shell .btn.primary:hover,
.pp-shell .pp-btn.primary:hover,
.pc-btn.primary:hover{
  background:#073d35!important;
}

.shell .btn.warn,
.pp-shell .pp-btn.warn{
  background:var(--tbc-brand-warn)!important;
  color:#71540d!important;
  border-color:#e2c472!important;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(226,170,53,.28)!important;
  outline-offset:2px!important;
}

.shell input,
.shell select,
.shell textarea,
.pp-shell input,
.pp-shell select,
.pp-shell textarea,
.pc-shell input,
.pc-shell select,
.pc-shell textarea{
  background:var(--tbc-brand-paper)!important;
  color:var(--tbc-brand-ink)!important;
  border-color:#d7cec2!important;
  border-radius:10px!important;
}

.shell input:focus,
.shell select:focus,
.shell textarea:focus,
.pp-shell input:focus,
.pp-shell select:focus,
.pp-shell textarea:focus{
  border-color:#c8a348!important;
  box-shadow:0 0 0 3px rgba(226,170,53,.14)!important;
}

.shell .table-wrap,
.pp-shell .pp-table-wrap,
.roster-scroll{
  border-color:var(--tbc-brand-line)!important;
  border-radius:14px!important;
  background:var(--tbc-brand-paper)!important;
  box-shadow:0 4px 14px rgba(24,49,40,.025)!important;
}

.shell table,
.pp-shell table,
.pc-table{
  background:var(--tbc-brand-paper)!important;
  color:var(--tbc-brand-ink)!important;
}

.shell thead th,
.pp-shell thead th,
.pc-table thead th{
  background:#f0ece3!important;
  color:#4d5d56!important;
  border-color:var(--tbc-brand-line)!important;
  letter-spacing:.06em!important;
}

.shell tbody td,
.pp-shell tbody td,
.pc-table tbody td{
  border-color:#e6ded2!important;
}

.shell tbody tr:hover,
.pp-shell tbody tr:hover,
.pc-table tbody tr:hover{
  background:#fbf8f0!important;
}

.status,
.pp-badge,
.tbc-notify-pill{
  border-radius:999px!important;
}

.status.tally,
.status.done,
.pp-badge.good,
.pp-badge.success{
  background:#e2f2e8!important;
  color:#17603f!important;
}

.status.waiting,
.pp-badge.warn{
  background:#fff0c9!important;
  color:#755811!important;
}

.status.missing,
.status.bad,
.pp-badge.danger{
  background:#fae7e1!important;
  color:#8c4033!important;
}

.notice.info,
.pp-alert.info{
  background:#eaf3ee!important;
  border-color:#bfd8cc!important;
  color:#235844!important;
}

.notice.warn,
.pp-alert.warn{
  background:#fff1c9!important;
  border-color:#e8ca76!important;
  color:#73570f!important;
}

.notice.bad,
.notice.danger,
.pp-alert.danger{
  background:#fbe6df!important;
  border-color:#e5b3a6!important;
  color:#8b3f33!important;
}

.mobile-nav,
.pp-mobile-nav{
  background:rgba(6,58,50,.98)!important;
  border-color:#2f6a5c!important;
  box-shadow:0 -10px 28px rgba(4,42,36,.22)!important;
}

.mobile-nav button,
.mobile-nav a,
.pp-mobile-nav a,
.pp-mobile-nav button{
  color:rgba(255,255,255,.76)!important;
}

.mobile-nav button.active,
.mobile-nav a.active,
.pp-mobile-nav a.active,
.pp-mobile-nav button.active{
  background:rgba(255,255,255,.08)!important;
  color:var(--tbc-brand-gold-2)!important;
}

.mobile-more-sheet,
.pp-mobile-more-sheet{
  background:var(--tbc-brand-cream)!important;
  color:var(--tbc-brand-ink)!important;
  border-color:var(--tbc-brand-line)!important;
}

.mobile-more-item,
.pp-mobile-more-item{
  background:var(--tbc-brand-paper)!important;
  border-color:var(--tbc-brand-line)!important;
  color:var(--tbc-brand-green)!important;
}

.modal-backdrop,
.pp-modal-backdrop,
.tbc-scan-backdrop,
.tbc-purchase-backdrop{
  background:rgba(4,38,33,.48)!important;
}

.modal,
.pp-modal,
.tbc-scan-modal,
.tbc-purchase-modal{
  background:var(--tbc-brand-paper)!important;
  color:var(--tbc-brand-ink)!important;
  border-color:var(--tbc-brand-line)!important;
  box-shadow:0 24px 70px rgba(3,36,31,.22)!important;
}

.modal-head,
.modal-body,
.modal-actions,
.pp-modal-head,
.pp-modal-body,
.pp-modal-foot,
.tbc-scan-head,
.tbc-scan-body,
.tbc-scan-actions,
.tbc-purchase-head,
.tbc-purchase-body,
.tbc-purchase-actions{
  background:var(--tbc-brand-paper)!important;
  border-color:var(--tbc-brand-line)!important;
  color:var(--tbc-brand-ink)!important;
}

.tbc-notify-backdrop{
  background:rgba(3,39,33,.46)!important;
}


.tbc-help-backdrop{
  background:rgba(3,39,33,.48)!important;
}

.tbc-help-drawer{
  background:var(--tbc-brand-cream)!important;
  color:var(--tbc-brand-ink)!important;
}

.tbc-help-head,
.tbc-help-actions{
  background:var(--tbc-brand-paper)!important;
  border-color:var(--tbc-brand-line)!important;
}

.tbc-help-head h3,
.tbc-help-card h4{
  color:var(--tbc-brand-green)!important;
}

.tbc-help-head p,
.tbc-help-card .summary,
.tbc-help-body h5,
.tbc-help-empty{
  color:var(--tbc-brand-muted)!important;
}

.tbc-help-search input,
.tbc-help-chips button,
.tbc-help-actions a,
.tbc-help-actions button,
.tbc-help-close{
  background:var(--tbc-brand-paper)!important;
  color:var(--tbc-brand-green)!important;
  border-color:var(--tbc-brand-line)!important;
}

.tbc-help-chips button.active,
.tbc-help-actions .primary,
.tbc-help-open{
  background:var(--tbc-brand-green)!important;
  color:#fff!important;
  border-color:var(--tbc-brand-green)!important;
}

.tbc-help-card,
.tbc-help-body{
  background:var(--tbc-brand-paper)!important;
  color:var(--tbc-brand-ink)!important;
  border-color:var(--tbc-brand-line)!important;
}

.tbc-help-tag{
  background:#e7f0eb!important;
  color:#3d6656!important;
}

.tbc-help-note{
  background:#fff4d5!important;
  color:#6d5417!important;
  border-color:#e2c977!important;
}

.my-schedule-view-tabs{
  background:#eee8dc!important;
  border-color:var(--tbc-brand-line)!important;
}

.my-schedule-view-tabs .pp-btn.primary{
  background:var(--tbc-brand-green)!important;
  color:#fff!important;
}

.my-schedule-card,
.my-schedule-calendar,
.schedule-notification-card{
  background:var(--tbc-brand-paper)!important;
  border-color:var(--tbc-brand-line)!important;
}

.my-schedule-month-day.today{
  background:#eaf4ee!important;
  box-shadow:inset 0 0 0 2px #83b59f!important;
}

.pc-shell,
.pc-main{
  background:var(--tbc-brand-cream)!important;
  color:var(--tbc-brand-ink)!important;
}

.pc-sidebar{
  background:
    linear-gradient(180deg,rgba(7,61,53,.985),rgba(5,47,42,.995)),
    url('./assets/tbc-botanical-side.svg') left bottom/230px auto no-repeat!important;
  color:#fff!important;
}

.pc-card,
.pc-metric,
.pc-loader-card{
  background:var(--tbc-brand-paper)!important;
  border-color:var(--tbc-brand-line)!important;
  color:var(--tbc-brand-ink)!important;
}

.help-shell,
.guide-shell,
.manual-shell{
  color:var(--tbc-brand-ink)!important;
}

.photo-guide-card,
.help-shell article,
.help-shell section,
.guide-shell article,
.guide-shell section,
.manual-shell article,
.manual-shell section{
  border-color:var(--tbc-brand-line)!important;
}

.photo-guide-card{
  background:var(--tbc-brand-paper)!important;
}

.shell ::-webkit-scrollbar-thumb,
.pp-shell ::-webkit-scrollbar-thumb,
.tbc-help-list::-webkit-scrollbar-thumb,
.tbc-notify-list::-webkit-scrollbar-thumb{
  background:#b8c9c0!important;
  border-radius:999px!important;
}

@media(min-width:1000px){
  .content,
  .pp-content{
    padding-top:28px!important;
  }

  .shell .card,
  .pp-shell .pp-card{
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
  }

  .shell .card:hover,
  .pp-shell .pp-card:hover{
    border-color:#c9b277!important;
    box-shadow:var(--tbc-brand-shadow)!important;
  }
}

@media(max-width:760px){
  .main,
  .pp-main{
    background:
      linear-gradient(rgba(246,241,231,.97),rgba(246,241,231,.97)),
      url('./assets/tbc-botanical-corner.svg') top right/175px auto no-repeat!important;
  }

  .shell .card,
  .pp-shell .pp-card,
  .shell .metric,
  .pp-shell .pp-metric{
    border-radius:15px!important;
  }

  .topbar,
  .pp-topbar{
    background:rgba(255,253,248,.985)!important;
  }
}


/* Exclusive sidebar accordion */

.sidebar .nav-dropdown{
  overflow:hidden;
}

.sidebar .nav-dropdown:not(.open) .nav-dropdown-items,
.sidebar .tbc-pp-nav-group:not(.open) .tbc-pp-nav-items{
  display:none!important;
}

.sidebar .nav-dropdown.open .nav-dropdown-items,
.sidebar .tbc-pp-nav-group.open .tbc-pp-nav-items{
  display:grid!important;
}


/* v1.7.6.2 desktop sidebar scrolling */

/* Keep header + account footer fixed while ONLY the middle nav scrolls. */
.sidebar{
  height:100vh!important;
  height:100dvh!important;
  min-height:100vh!important;
  min-height:100dvh!important;
  max-height:100vh!important;
  max-height:100dvh!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
}

.sidebar>.brand{
  flex:0 0 auto!important;
}

.sidebar>.nav{
  position:relative!important;
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-y:contain!important;
  touch-action:pan-y!important;
  scrollbar-width:thin!important;
  scrollbar-color:rgba(255,255,255,.34) transparent!important;
  padding-right:6px!important;
  margin-right:-6px!important;
  scroll-behavior:smooth;
  scroll-padding-top:8px;
  scroll-padding-bottom:16px;
}

.sidebar>.nav::-webkit-scrollbar{
  width:7px!important;
}

.sidebar>.nav::-webkit-scrollbar-track{
  background:transparent!important;
}

.sidebar>.nav::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.30)!important;
  border-radius:999px!important;
}

.sidebar>.nav::-webkit-scrollbar-thumb:hover{
  background:rgba(255,255,255,.46)!important;
}

.sidebar>.sidebar-foot{
  position:relative!important;
  inset:auto!important;
  flex:0 0 auto!important;
  margin-top:0!important;
  z-index:6!important;
  background:linear-gradient(180deg,rgba(5,47,42,.98),#052f2a)!important;
  border-top:1px solid rgba(255,255,255,.12)!important;
  box-shadow:0 -12px 22px rgba(3,36,31,.16)!important;
}

/* Prevent an expanded accordion from trying to grow the parent sidebar. */
.sidebar .nav-dropdown,
.sidebar .tbc-pp-nav-group{
  min-height:0!important;
}

.sidebar .nav-dropdown-items,
.sidebar .tbc-pp-nav-items{
  max-height:none!important;
  overflow:visible!important;
}

/* On short desktop windows, tighten vertical spacing so navigation remains
   comfortable while still scrollable. */
@media(min-width:761px) and (max-height:820px){
  .sidebar{
    padding-top:14px!important;
    padding-bottom:10px!important;
    gap:8px!important;
  }

  .sidebar>.brand{
    padding-bottom:5px!important;
  }

  .sidebar .nav button,
  .sidebar .nav a,
  .sidebar .nav-dropdown-toggle,
  .sidebar .tbc-pp-nav-parent{
    min-height:38px!important;
    padding-top:7px!important;
    padding-bottom:7px!important;
  }

  .sidebar>.sidebar-foot{
    padding-top:9px!important;
  }
}


/* Team source panels and controls share one visibility contract. */
.tbc-team-page [hidden]{display:none!important}

.tbc-team-roster-controls{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
}

.tbc-team-source-tabs{justify-self:start}

.tbc-team-source-tabs,
.tbc-team-period-tabs{
  display:inline-flex;
  gap:4px;
  padding:4px;
  border:1px solid var(--tbc-brand-line,#ddd5c9);
  border-radius:12px;
  background:#eee8dc;
}

.tbc-team-source-tabs button,
.tbc-team-period-tabs button{
  min-height:34px;
  padding:0 12px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#52615b;
  font:inherit;
  font-size:11px;
  font-weight:850;
  cursor:pointer;
}

.tbc-team-source-tabs button.active,
.tbc-team-period-tabs button.active{
  background:var(--tbc-brand-green,#0a4b40);
  color:#fff;
  box-shadow:0 4px 10px rgba(7,61,53,.12);
}

.tbc-team-period-controls{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.tbc-team-date{
  width:180px!important;
  min-width:0;
  max-width:100%!important;
  min-height:42px!important;
}

.tbc-team-range{
  color:var(--tbc-brand-muted,#68756f);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.tbc-team-edit-roster{
  text-decoration:none!important;
}

.tbc-roster-team-board{
  display:grid;
  gap:16px;
  margin-top:14px;
}

.tbc-roster-summary{
  display:grid;
  gap:12px;
  padding:16px 0;
  border-block:1px solid var(--tbc-brand-line,#ddd5c9);
}

.tbc-roster-summary-copy{
  min-width:0;
  display:grid;
  gap:4px;
}

.tbc-roster-summary-copy>span{
  color:#64736d;
  font-size:11px;
  font-weight:850;
  letter-spacing:0;
}

.tbc-roster-metrics{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.tbc-roster-metrics>div{
  min-width:0;
}

.tbc-roster-metrics strong{
  display:block;
  color:#15342b;
  font-size:18px;
}

.tbc-roster-metrics span{
  display:block;
  margin-top:2px;
  color:#6c7973;
  font-size:10px;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:0;
}

.tbc-roster-city{
  display:grid;
  gap:10px;
}

.tbc-roster-city-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  padding:0 2px;
}

.tbc-roster-city-head h4{
  margin:0;
  color:#17352d;
  font-size:18px;
}

.tbc-roster-city-head p{
  margin:2px 0 0;
  color:#68756f;
  font-size:10px;
}

.tbc-roster-branch-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.tbc-roster-branch{
  overflow:hidden;
  border:1px solid #ded5c8;
  border-radius:16px;
  background:#fffdf8;
  box-shadow:0 4px 14px rgba(24,49,40,.035);
}

.tbc-roster-branch-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:13px 15px;
  border-bottom:1px solid #e5ddd1;
  background:#fbf7ee;
}

.tbc-roster-branch-head>div:first-child{
  min-width:0;
}

.tbc-roster-branch-head strong{
  display:block;
  color:#18372f;
  font-size:13px;
}

.tbc-roster-branch-head span{
  color:#7a847f;
  font-size:9px;
}

.tbc-roster-branch-counts{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.tbc-roster-branch-counts span{
  padding:5px 7px;
  border-radius:999px;
  background:#e7f1ec;
  color:#396252;
  font-size:8px;
  font-weight:900;
}

.tbc-roster-member-grid{
  display:grid;
  gap:7px;
  padding:10px;
}

.tbc-roster-member{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:10px;
  border:1px solid #e4ddd2;
  border-radius:12px;
  background:#fff;
}

.tbc-roster-member-main{
  min-width:0;
  display:flex;
  gap:9px;
  align-items:center;
}

.tbc-roster-avatar{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:linear-gradient(145deg,#f1bd55,#e2aa35);
  color:#173028;
  font-weight:950;
}

.tbc-roster-copy{
  min-width:0;
  display:grid;
  gap:1px;
}

.tbc-roster-copy strong{
  color:#17352d;
  font-size:11px;
}

.tbc-roster-copy span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#7a847f;
  font-size:8px;
}

.tbc-roster-copy small{
  color:#4f655c;
  font-size:9px;
  line-height:1.35;
}

.tbc-roster-member-actions{
  display:flex;
  align-items:center;
  gap:6px;
}

.tbc-roster-empty,
.tbc-roster-loading{
  padding:28px 16px;
  color:#74807a;
  text-align:center;
  font-size:11px;
}

.tbc-roster-empty.large{
  border:1px dashed #d7cec2;
  border-radius:14px;
  background:#fffdf8;
}

.tbc-roster-city-empty{
  margin:0;
  padding:12px 0;
  color:#68756f;
  font-size:12px;
}

@media(max-width:820px){
  .tbc-roster-branch-grid{
    grid-template-columns:1fr;
  }

  .tbc-roster-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:760px){
  .tbc-team-roster-controls{
    align-items:stretch;
  }

  .tbc-team-source-tabs,
  .tbc-team-period-tabs{
    width:100%;
    display:grid;
  }

  .tbc-team-source-tabs{
    grid-template-columns:1fr 1fr;
  }

  .tbc-team-period-tabs{
    grid-template-columns:repeat(3,1fr);
  }

  .tbc-team-period-controls{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr);
  }

  .tbc-team-date{
    width:100%!important;
  }

  .tbc-team-range{
    width:100%;
  }

  .tbc-team-edit-roster{
    width:100%;
    justify-content:center;
  }

  .tbc-roster-member{
    grid-template-columns:1fr;
  }

  .tbc-roster-member-actions{
    justify-content:flex-end;
  }
}


/* v1.7.6.4 staff tablet layout refinement */
@media (min-width: 768px) and (max-width: 1240px){
  .pp-shell{
    display:grid!important;
    grid-template-columns:280px minmax(0,1fr)!important;
  }

  .pp-sidebar{
    width:280px!important;
    min-width:280px!important;
    max-width:280px!important;
    position:sticky!important;
    top:0!important;
    align-self:start!important;
    height:100dvh!important;
    overflow-y:auto!important;
  }

  .pp-main{
    min-width:0!important;
    width:100%!important;
  }

  .pp-content{
    padding-block:22px 28px!important;
  }

  .pp-brand{
    gap:12px!important;
  }

  .pp-brand .mark{
    width:60px!important;
    height:60px!important;
    min-width:60px!important;
    min-height:60px!important;
    border-radius:18px!important;
    font-size:20px!important;
  }

  .pp-brand strong{
    font-size:20px!important;
    line-height:1.05!important;
  }

  .pp-nav a{
    min-height:60px!important;
    padding:15px 16px!important;
    border-radius:18px!important;
    font-size:15px!important;
  }

  .pp-nav-label{
    margin:18px 0 12px!important;
  }

  .pp-sidebar-footer{
    margin-top:18px!important;
    padding-top:16px!important;
  }

  .pp-page-head,
  .my-schedule-head,
  .pp-page-head:has([data-my-schedule-date]){
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(260px,380px)!important;
    align-items:start!important;
    gap:16px 18px!important;
  }

  .pp-page-head > div:first-child,
  .my-schedule-head > div:first-child,
  .pp-page-head:has([data-my-schedule-date]) > div:first-child{
    min-width:0!important;
  }

  .pp-page-head h1,
  .my-schedule-head h1,
  .pp-page-head:has([data-my-schedule-date]) h1{
    font-size:28px!important;
    line-height:1.06!important;
  }

  .pp-page-head p,
  .my-schedule-head p,
  .pp-page-head:has([data-my-schedule-date]) p{
    max-width:unset!important;
    font-size:15px!important;
    line-height:1.45!important;
  }

  .pp-controls,
  .my-schedule-date-controls,
  .pp-page-head:has([data-my-schedule-date]) .pp-controls{
    width:100%!important;
    min-width:0!important;
  }

  .my-schedule-date-controls,
  .pp-page-head:has([data-my-schedule-date]) .pp-controls{
    grid-template-columns:minmax(0,1fr) auto!important;
  }

  .my-schedule-view-tabs{
    margin-bottom:14px!important;
  }

  .my-schedule-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }

  .my-schedule-metrics .pp-metric:nth-child(3){
    grid-column:1 / -1!important;
    min-height:96px!important;
  }

  .my-schedule-day-view .my-schedule-card{
    grid-template-columns:1fr!important;
    gap:12px!important;
    min-height:0!important;
  }

  .schedule-notification-card .pp-section-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:10px!important;
    align-items:start!important;
  }

  .schedule-notification-card .pp-actions{
    justify-content:flex-start!important;
    flex-wrap:wrap!important;
  }

  .schedule-notification-list{
    margin-top:12px!important;
  }

  .pp-grid,
  .pp-metrics,
  .pp-stats-grid,
  .pp-cards-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .pp-card,
  .pp-metric{
    min-width:0!important;
  }

  .pp-table-wrap{
    overflow:auto!important;
    -webkit-overflow-scrolling:touch!important;
  }
}

@media (min-width: 768px) and (max-width: 980px){
  .pp-shell{
    grid-template-columns:248px minmax(0,1fr)!important;
  }

  .pp-sidebar{
    width:248px!important;
    min-width:248px!important;
    max-width:248px!important;
  }

  .pp-content{
    padding-block:18px 24px!important;
  }

  .pp-page-head,
  .my-schedule-head,
  .pp-page-head:has([data-my-schedule-date]){
    grid-template-columns:1fr!important;
  }

  .my-schedule-date-controls,
  .pp-page-head:has([data-my-schedule-date]) .pp-controls{
    max-width:420px!important;
  }

  .my-schedule-metrics,
  .pp-grid,
  .pp-metrics,
  .pp-stats-grid,
  .pp-cards-grid{
    grid-template-columns:1fr!important;
  }

  .my-schedule-metrics .pp-metric:nth-child(3){
    grid-column:auto!important;
  }
}


/* v1.7.6.5 true staff tablet mode */

/*
  Real tablet staff experience:
  - no oversized desktop sidebar
  - full-width People & Payroll content
  - fixed bottom staff navigation
  - clean top-right Guide / Bell / Sign out cluster
*/
html.tbc-staff-tablet,
html.tbc-staff-tablet body{
  min-height:100%;
}

html.tbc-staff-tablet .pp-shell{
  display:block!important;
  min-height:100dvh!important;
  background:var(--tbc-brand-cream,#f6f1e7)!important;
}

html.tbc-staff-tablet .pp-sidebar{
  display:none!important;
}

html.tbc-staff-tablet .pp-main{
  width:100%!important;
  min-width:0!important;
  min-height:100dvh!important;
  margin:0!important;
}


@media(min-width:761px){
html.tbc-staff-tablet .pp-content{
  padding-block:22px calc(92px + env(safe-area-inset-bottom))!important;
}
}

/* My Schedule: use the full tablet canvas instead of squeezing desktop columns. */
html.tbc-staff-tablet .my-schedule-head,
html.tbc-staff-tablet .pp-page-head:has([data-my-schedule-date]){
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(270px,360px)!important;
  gap:16px 22px!important;
  align-items:start!important;
  margin-bottom:15px!important;
}

html.tbc-staff-tablet .my-schedule-head h1,
html.tbc-staff-tablet .pp-page-head:has([data-my-schedule-date]) h1{
  font-size:30px!important;
  line-height:1.05!important;
}

html.tbc-staff-tablet .my-schedule-head p,
html.tbc-staff-tablet .pp-page-head:has([data-my-schedule-date]) p{
  max-width:620px!important;
  font-size:14px!important;
  line-height:1.45!important;
}

html.tbc-staff-tablet .my-schedule-date-controls,
html.tbc-staff-tablet .pp-page-head:has([data-my-schedule-date]) .pp-controls{
  width:100%!important;
  max-width:360px!important;
  justify-self:end!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  padding:7px!important;
}

html.tbc-staff-tablet .my-schedule-view-tabs{
  margin:0 0 14px!important;
}

html.tbc-staff-tablet .my-schedule-metrics{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
}

html.tbc-staff-tablet .my-schedule-metrics .pp-metric:nth-child(3){
  grid-column:auto!important;
}

html.tbc-staff-tablet .my-schedule-metrics .pp-metric{
  min-height:112px!important;
}

html.tbc-staff-tablet .my-schedule-day-view .my-schedule-card{
  min-height:0!important;
}

html.tbc-staff-tablet .schedule-notification-card .pp-section-head{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:12px!important;
  align-items:center!important;
}

html.tbc-staff-tablet .schedule-notification-card .pp-actions{
  justify-content:flex-end!important;
  flex-wrap:wrap!important;
}

/* Reuse the existing staff mobile nav as a tablet bottom nav. */
@media(min-width:761px){
html.tbc-staff-tablet .pp-mobile-nav{
  position:fixed!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:80!important;
  display:flex!important;
  align-items:stretch!important;
  justify-content:center!important;
  gap:6px!important;
  padding:7px 16px max(7px,env(safe-area-inset-bottom))!important;
  border-top:1px solid var(--tbc-brand-line,#ded5c8)!important;
  background:rgba(7,61,53,.985)!important;
  box-shadow:0 -10px 28px rgba(4,42,36,.18)!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  scrollbar-width:none!important;
}

html.tbc-staff-tablet .pp-mobile-nav::-webkit-scrollbar{
  display:none!important;
}

html.tbc-staff-tablet .pp-mobile-nav a{
  flex:1 1 0!important;
  max-width:220px!important;
  min-width:150px!important;
  min-height:58px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  padding:7px 10px!important;
  border-radius:12px!important;
  color:rgba(255,255,255,.74)!important;
  background:transparent!important;
  text-decoration:none!important;
  font-size:11px!important;
  font-weight:800!important;
}

html.tbc-staff-tablet .pp-mobile-nav a.active{
  color:var(--tbc-brand-gold-2,#f0c766)!important;
  background:rgba(255,255,255,.09)!important;
}

html.tbc-staff-tablet .pp-mobile-nav .icon{
  display:block!important;
  font-size:18px!important;
  line-height:1!important;
}
}

html.tbc-staff-tablet .pp-table-wrap,
html.tbc-staff-tablet .roster-scroll{
  max-width:100%!important;
  overflow:auto!important;
  -webkit-overflow-scrolling:touch!important;
}

/* Portrait and narrower tablet: stack schedule heading/control, but keep the
   full-width tablet app shell and bottom navigation. */
@media(max-width:900px){
  html.tbc-staff-tablet .my-schedule-head,
  html.tbc-staff-tablet .pp-page-head:has([data-my-schedule-date]){
    grid-template-columns:1fr!important;
  }

  html.tbc-staff-tablet .my-schedule-date-controls,
  html.tbc-staff-tablet .pp-page-head:has([data-my-schedule-date]) .pp-controls{
    justify-self:stretch!important;
    max-width:none!important;
  }

  html.tbc-staff-tablet .my-schedule-metrics{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  html.tbc-staff-tablet .my-schedule-metrics .pp-metric:nth-child(3){
    grid-column:1/-1!important;
  }

  html.tbc-staff-tablet .schedule-notification-card .pp-section-head{
    grid-template-columns:1fr!important;
  }

  html.tbc-staff-tablet .schedule-notification-card .pp-actions{
    justify-content:flex-start!important;
  }
}


/* v1.7.6.6 staff phone + tablet consistency */

/* ---------- Shared compact staff shell ---------- */
html.tbc-staff-compact .pp-sidebar{
  display:none!important;
}

html.tbc-staff-compact .pp-shell{
  display:block!important;
  min-height:100dvh!important;
  background:var(--tbc-brand-cream,#f6f1e7)!important;
}

html.tbc-staff-compact .pp-main{
  width:100%!important;
  min-width:0!important;
  min-height:100dvh!important;
  margin:0!important;
}


/* Preserve the tablet dock; phones use the shared tbc-ui.css layout. */
@media(min-width:761px){
html.tbc-staff-compact .pp-content{
  padding-bottom:calc(126px + env(safe-area-inset-bottom))!important;
}

/* ---------- Compact dock ---------- */
html.tbc-staff-compact .pp-mobile-nav{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:max(8px,env(safe-area-inset-bottom))!important;
  transform:translateX(-50%)!important;
  z-index:180!important;
  width:min(calc(100vw - 20px),760px)!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  align-items:center!important;
  gap:4px!important;
  overflow:visible!important;
  padding:7px!important;
  border:1px solid rgba(151,196,177,.24)!important;
  border-radius:24px!important;
  background:rgba(6,69,59,.985)!important;
  box-shadow:0 14px 44px rgba(4,42,36,.26),0 2px 8px rgba(4,42,36,.12)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  backdrop-filter:blur(18px)!important;
}

html.tbc-staff-compact .pp-mobile-nav a,
html.tbc-staff-compact .pp-mobile-nav button{
  min-width:0!important;
  width:100%!important;
  min-height:58px!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  padding:6px 4px 5px!important;
  border:0!important;
  border-radius:17px!important;
  background:transparent!important;
  color:rgba(255,255,255,.72)!important;
  text-align:center!important;
  text-decoration:none!important;
  font-size:10px!important;
  font-weight:850!important;
  line-height:1!important;
  white-space:nowrap!important;
  overflow:hidden!important;
}

html.tbc-staff-compact .pp-mobile-nav a.active,
html.tbc-staff-compact .pp-mobile-nav button.active{
  color:var(--tbc-brand-gold-2,#f0c766)!important;
  background:rgba(255,255,255,.10)!important;
}

html.tbc-staff-compact .pp-mobile-nav .icon{
  width:34px!important;
  height:30px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  border-radius:11px!important;
  font-size:18px!important;
  line-height:1!important;
}

html.tbc-staff-compact .pp-mobile-nav a.active .icon,
html.tbc-staff-compact .pp-mobile-nav button.active .icon{
  background:rgba(255,255,255,.12)!important;
}

html.tbc-staff-compact .pp-mobile-more-trigger .icon{
  font-size:15px!important;
  letter-spacing:1px!important;
  padding-bottom:4px!important;
}
}

/* ---------- More sheet: phone AND tablet ---------- */
html.tbc-staff-compact body.pp-mobile-sheet-open{
  overflow:hidden!important;
}

html.tbc-staff-compact .pp-mobile-more-backdrop[hidden]{
  display:none!important;
}

html.tbc-staff-compact .pp-mobile-more-backdrop{
  position:fixed!important;
  inset:0!important;
  z-index:220!important;
  display:flex!important;
  align-items:flex-end!important;
  justify-content:center!important;
  padding:
    14px
    max(10px,env(safe-area-inset-right))
    max(10px,env(safe-area-inset-bottom))
    max(10px,env(safe-area-inset-left))!important;
  background:rgba(3,37,31,.54)!important;
  opacity:0;
  transition:opacity .18s ease;
}

html.tbc-staff-compact .pp-mobile-more-backdrop.open{
  opacity:1!important;
}

html.tbc-staff-compact .pp-mobile-more-sheet{
  width:min(560px,100%)!important;
  max-height:min(76dvh,680px)!important;
  overflow:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  padding:8px 14px 14px!important;
  border:1px solid var(--tbc-brand-line,#ded5c8)!important;
  border-radius:26px!important;
  background:var(--tbc-brand-paper,#fffdf8)!important;
  color:var(--tbc-brand-ink,#172f29)!important;
  box-shadow:0 -24px 70px rgba(4,40,34,.30)!important;
  transform:translateY(18px);
  transition:transform .2s ease;
}

html.tbc-staff-compact .pp-mobile-more-backdrop.open .pp-mobile-more-sheet{
  transform:translateY(0)!important;
}

html.tbc-staff-compact .pp-mobile-more-handle{
  width:42px!important;
  height:5px!important;
  margin:2px auto 10px!important;
  border-radius:999px!important;
  background:#d4d8d5!important;
}

html.tbc-staff-compact .pp-mobile-more-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:3px 2px 12px!important;
}

html.tbc-staff-compact .pp-mobile-more-head>div{
  min-width:0!important;
  display:grid!important;
  gap:3px!important;
}

html.tbc-staff-compact .pp-mobile-more-head strong{
  color:var(--tbc-brand-green,#0a4b40)!important;
  font-size:19px!important;
}

html.tbc-staff-compact .pp-mobile-more-head small{
  color:var(--tbc-brand-muted,#68756f)!important;
  font-size:11px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

html.tbc-staff-compact .pp-mobile-more-head button{
  width:38px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid var(--tbc-brand-line,#ded5c8)!important;
  border-radius:12px!important;
  background:#f3eee5!important;
  color:var(--tbc-brand-ink,#172f29)!important;
  font-size:22px!important;
}

html.tbc-staff-compact .pp-mobile-more-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
}

html.tbc-staff-compact .pp-mobile-more-item{
  min-height:72px!important;
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  align-items:center!important;
  gap:10px!important;
  padding:12px!important;
  border:1px solid var(--tbc-brand-line,#ded5c8)!important;
  border-radius:16px!important;
  background:#fff!important;
  color:var(--tbc-brand-ink,#172f29)!important;
  text-align:left!important;
  text-decoration:none!important;
  font-size:12px!important;
  font-weight:850!important;
}

html.tbc-staff-compact .pp-mobile-more-item.active{
  border-color:#a9cfbc!important;
  background:#eaf4ee!important;
  color:var(--tbc-brand-green,#0a4b40)!important;
}

html.tbc-staff-compact .pp-mobile-more-icon{
  width:38px!important;
  height:38px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:12px!important;
  background:#edf3ef!important;
  color:var(--tbc-brand-green,#0a4b40)!important;
  font-size:18px!important;
}

html.tbc-staff-compact .pp-mobile-more-empty{
  grid-column:1/-1!important;
  padding:20px!important;
  border:1px dashed var(--tbc-brand-line,#ded5c8)!important;
  border-radius:14px!important;
  color:var(--tbc-brand-muted,#68756f)!important;
  text-align:center!important;
  font-size:12px!important;
}

html.tbc-staff-compact .pp-mobile-more-actions{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:9px!important;
  margin-top:12px!important;
  padding-top:12px!important;
  border-top:1px solid var(--tbc-brand-line,#ded5c8)!important;
}

html.tbc-staff-compact .pp-mobile-more-actions button{
  min-height:46px!important;
  border:1px solid var(--tbc-brand-line,#ded5c8)!important;
  border-radius:13px!important;
  background:#fff!important;
  color:var(--tbc-brand-green,#0a4b40)!important;
  font-weight:850!important;
}

html.tbc-staff-compact .pp-mobile-more-actions button.primary{
  border-color:var(--tbc-brand-green,#0a4b40)!important;
  background:var(--tbc-brand-green,#0a4b40)!important;
  color:#fff!important;
}

/* ---------- Tablet ---------- */

@media(min-width:761px){
html.tbc-staff-tablet .pp-content{
  padding-block:22px calc(112px + env(safe-area-inset-bottom))!important;
}
}

html.tbc-staff-tablet .my-schedule-head,
html.tbc-staff-tablet .pp-page-head:has([data-my-schedule-date]){
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(270px,360px)!important;
  gap:16px 22px!important;
  align-items:start!important;
}

html.tbc-staff-tablet .my-schedule-metrics{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
}

html.tbc-staff-tablet .my-schedule-metrics .pp-metric:nth-child(3){
  grid-column:auto!important;
}

/* ---------- Phone schedule ---------- */
html.tbc-staff-phone .my-schedule-head,
html.tbc-staff-phone .pp-page-head:has([data-my-schedule-date]){
  grid-template-columns:1fr!important;
}

html.tbc-staff-phone .my-schedule-date-controls,
html.tbc-staff-phone .pp-page-head:has([data-my-schedule-date]) .pp-controls{
  width:100%!important;
  max-width:none!important;
  justify-self:stretch!important;
}

html.tbc-staff-phone .my-schedule-metrics{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

html.tbc-staff-phone .my-schedule-metrics .pp-metric:nth-child(3){
  grid-column:1/-1!important;
}

/* ---------- Payslips: compact card layout instead of cut-off table ---------- */
html.tbc-staff-compact.tbc-payslip-page .pp-table-wrap{
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

html.tbc-staff-compact.tbc-payslip-page .pp-table{
  min-width:0!important;
  width:100%!important;
  display:block!important;
  background:transparent!important;
}

html.tbc-staff-compact.tbc-payslip-page .pp-table thead{
  display:none!important;
}

html.tbc-staff-compact.tbc-payslip-page .pp-table tbody{
  width:100%!important;
  display:grid!important;
  gap:12px!important;
}

html.tbc-staff-compact.tbc-payslip-page .pp-table tbody tr{
  width:100%!important;
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:0!important;
  overflow:hidden!important;
  border:1px solid var(--tbc-brand-line,#ded5c8)!important;
  border-radius:16px!important;
  background:var(--tbc-brand-paper,#fffdf8)!important;
  box-shadow:0 5px 16px rgba(25,49,41,.045)!important;
}

html.tbc-staff-compact.tbc-payslip-page .pp-table tbody td{
  min-width:0!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:10px!important;
  padding:11px 12px!important;
  border-bottom:1px solid #ece5da!important;
  color:var(--tbc-brand-ink,#172f29)!important;
  text-align:right!important;
  white-space:normal!important;
}

html.tbc-staff-compact.tbc-payslip-page .pp-table tbody td::before{
  flex:0 0 auto;
  color:#68756f;
  font-size:8px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:left;
}

html.tbc-staff-compact.tbc-payslip-page .pp-table tbody td:nth-child(1)::before{content:'Pay period'}
html.tbc-staff-compact.tbc-payslip-page .pp-table tbody td:nth-child(2)::before{content:'Employee'}
html.tbc-staff-compact.tbc-payslip-page .pp-table tbody td:nth-child(3)::before{content:'Gross'}
html.tbc-staff-compact.tbc-payslip-page .pp-table tbody td:nth-child(4)::before{content:"Gov't deductions"}
html.tbc-staff-compact.tbc-payslip-page .pp-table tbody td:nth-child(5)::before{content:'Other deductions'}
html.tbc-staff-compact.tbc-payslip-page .pp-table tbody td:nth-child(6)::before{content:'Net pay'}
html.tbc-staff-compact.tbc-payslip-page .pp-table tbody td:nth-child(7)::before{content:'Status'}
html.tbc-staff-compact.tbc-payslip-page .pp-table tbody td:nth-child(8)::before{content:'Action'}

html.tbc-staff-compact.tbc-payslip-page .pp-table tbody td.pp-empty{
  grid-column:1/-1!important;
  min-height:130px!important;
  display:grid!important;
  place-items:center!important;
  padding:26px!important;
  border:0!important;
  color:var(--tbc-brand-muted,#68756f)!important;
  text-align:center!important;
  font-size:14px!important;
}

html.tbc-staff-compact.tbc-payslip-page .pp-table tbody td.pp-empty::before{
  content:none!important;
}

html.tbc-staff-compact.tbc-payslip-page .pp-table tbody td .pp-btn{
  width:auto!important;
  min-width:0!important;
}

@media(max-width:520px){
  html.tbc-staff-phone.tbc-payslip-page .pp-table tbody tr{
    grid-template-columns:1fr!important;
  }

  html.tbc-staff-phone .pp-mobile-more-grid{
    grid-template-columns:1fr!important;
  }
}


/* v1.7.6.9 mobile More sections + interaction stability */
@media(max-width:760px){
  .mobile-more-backdrop[hidden],
  .pp-mobile-more-backdrop[hidden]{display:none!important;pointer-events:none!important}
  .mobile-more-backdrop:not(.open),
  .pp-mobile-more-backdrop:not(.open){pointer-events:none}
  .mobile-more-backdrop.open,
  .pp-mobile-more-backdrop.open{pointer-events:auto}

  .mobile-more-grid.tbc-sectioned{display:block!important}
  .mobile-more-section{display:block;margin:0 0 16px}
  .mobile-more-section:last-child{margin-bottom:0}
  .mobile-more-section-heading{
    margin:0 2px 8px;color:#50645b;font-size:9px;line-height:1.2;
    font-weight:950;letter-spacing:.13em;text-transform:uppercase
  }
  .mobile-more-section-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .mobile-more-section-finance .mobile-more-section-heading{color:#725814}
  .mobile-more-section-inventory .mobile-more-section-heading{color:#316653}
  .mobile-more-section-admin{padding-top:3px;border-top:1px solid #e6ded2}
  .mobile-more-section .mobile-more-item{width:100%!important;min-width:0!important;min-height:70px!important}
}
@media(max-width:390px){.mobile-more-section-grid{grid-template-columns:1fr!important}}