/* Kebarick V13.5.9 — compact operational density for Duty Roster + People Directory.
   Keeps every existing field/column; improves row density, sticky references and scrolling. */

/* ---------- PEOPLE DIRECTORY / EMPLOYEE REGISTER ---------- */
#app:has(#peopleTable) .master-directory>.panel-head{
  padding:14px 18px 12px;
}
#app:has(#peopleTable) .master-directory>.panel-head h2{font-size:16px}
#app:has(#peopleTable) .master-directory>.panel-head p{margin-top:3px;font-size:11px}
#app:has(#peopleTable) .master-view-tabs{gap:7px}
#app:has(#peopleTable) .master-view-tabs .btn{min-height:36px;padding:8px 13px;font-size:11px}

#app:has(#peopleTable) .master-toolbar{
  grid-template-columns:minmax(390px,1.65fr) repeat(3,minmax(150px,1fr));
  gap:9px;
  padding:12px 16px;
}
#app:has(#peopleTable) .master-toolbar input,
#app:has(#peopleTable) .master-toolbar select{
  min-height:38px;
  padding:8px 10px;
  border-radius:8px;
  font-size:11.5px;
}
#app:has(#peopleTable) .master-search{gap:7px}
#app:has(#peopleTable) .master-search .btn{min-height:38px;padding:8px 12px;font-size:11px}
#app:has(#peopleTable) .master-export-bar{padding:7px 16px;gap:3px}
#app:has(#peopleTable) .master-export-bar span{font-size:10px}
#app:has(#peopleTable) .master-export{padding:5px 8px;font-size:10.5px}

#app:has(#peopleTable) .master-table-scroll{
  overflow:auto;
  max-height:68vh;
  scrollbar-gutter:stable;
}
#app:has(#peopleTable) .master-table-scroll table{width:max-content;min-width:100%}
#app:has(#peopleTable) .master-table-scroll th{
  height:39px;
  padding:7px 9px!important;
  font-size:9.5px!important;
  line-height:1.18;
  vertical-align:middle;
  white-space:nowrap;
}
#app:has(#peopleTable) .master-table-scroll td{
  height:44px;
  padding:6px 9px!important;
  font-size:11px!important;
  line-height:1.2!important;
  vertical-align:middle;
  white-space:nowrap;
}
#app:has(#peopleTable) .master-table-scroll tbody tr:nth-child(even){background:rgba(246,250,249,.58)}
#app:has(#peopleTable) .master-table-scroll .status{padding:4px 7px;font-size:9px}
#app:has(#peopleTable) .master-table-scroll .btn{min-height:30px;padding:5px 8px;font-size:9.5px}

/* Everyday Directory view: compact but still readable. */
#app:has(#peopleTable) .master-table-scroll:not(.master-register) td{height:48px}
#app:has(#peopleTable) .master-name{gap:8px}
#app:has(#peopleTable) .master-name .person-pic{
  width:31px;
  height:31px;
  min-width:31px;
  border-radius:9px;
  font-size:9px;
}
#app:has(#peopleTable) .master-name strong{font-size:11.5px}
#app:has(#peopleTable) .master-name small{margin-top:1px;font-size:9.5px}

/* Detailed register: all fields stay available to the right. Freeze only Staff No. + Name. */
#app:has(#peopleTable) .master-register table{min-width:2850px}
#app:has(#peopleTable) .master-register th:first-child,
#app:has(#peopleTable) .master-register td:first-child{
  position:sticky;
  left:0;
  z-index:4;
  min-width:96px;
  width:96px;
  max-width:96px;
  background:#fff;
}
#app:has(#peopleTable) .master-register th:nth-child(2),
#app:has(#peopleTable) .master-register td:nth-child(2){
  position:sticky;
  left:96px;
  z-index:4;
  min-width:145px;
  width:145px;
  max-width:145px;
  background:#fff;
  box-shadow:5px 0 9px rgba(24,61,56,.07);
}
#app:has(#peopleTable) .master-register thead th:first-child,
#app:has(#peopleTable) .master-register thead th:nth-child(2){
  z-index:8;
  background:#edf5f3;
}
#app:has(#peopleTable) .master-register tbody tr:nth-child(even) td:first-child,
#app:has(#peopleTable) .master-register tbody tr:nth-child(even) td:nth-child(2){background:#f8fbfa}
#app:has(#peopleTable) .master-register tbody tr:hover td:first-child,
#app:has(#peopleTable) .master-register tbody tr:hover td:nth-child(2){background:#f0faf7}
#app:has(#peopleTable) .master-inline-name{font-size:11px}
#app:has(#peopleTable) .master-actions{gap:4px}
#app:has(#peopleTable) .master-actions select{
  min-height:30px;
  padding:4px 6px;
  border-radius:7px;
  font-size:9.5px;
}

/* ---------- DUTY ROSTER ---------- */
.roster-all-stack{gap:12px;padding:12px}
.roster-department-block{border-radius:11px}
.roster-department-title{padding:9px 12px;min-height:48px}
.roster-department-title strong{font-size:12px}
.roster-department-title span{font-size:9.5px}
.roster-department-title .btn{min-height:32px;padding:6px 10px;font-size:10px}

.monthly-roster-scroll{
  overflow:auto;
  max-height:68vh;
  scrollbar-gutter:stable;
}
.monthly-roster-table th,
.monthly-roster-table td{
  height:43px!important;
  padding:4px 6px!important;
  vertical-align:middle;
}
.monthly-roster-table thead th{
  height:42px!important;
  font-size:9px!important;
  line-height:1.08;
}
.monthly-roster-table thead th b{font-size:10.5px!important}
.monthly-roster-table thead th small{margin-top:2px;font-size:8px!important}

/* Keep the three reference columns, but stop them consuming most of the viewport. */
.monthly-roster-table .employee-no{
  left:0;
  min-width:92px!important;
  width:92px!important;
  max-width:92px!important;
  font-size:9.5px;
}
.monthly-roster-table .employee-name{
  left:92px;
  min-width:168px!important;
  width:168px!important;
  max-width:168px!important;
}
.monthly-roster-table .employee-position{
  left:260px;
  min-width:148px!important;
  width:148px!important;
  max-width:148px!important;
  font-size:10px!important;
}
.monthly-roster-table .employee-name strong{font-size:10.5px!important;line-height:1.12}
.monthly-roster-table .employee-name small{margin-top:2px;font-size:8.5px!important;line-height:1.1}

/* Month day columns: compact enough to see more days, still large enough for D/N/OC. */
.monthly-roster-table th:not(.roster-sticky):not(.roster-total),
.monthly-roster-table td:not(.roster-sticky):not(.roster-total){
  min-width:58px!important;
  width:58px!important;
  max-width:58px!important;
  text-align:center;
}
.roster-code-table th:not(.roster-sticky):not(.roster-total),
.roster-code-table td:not(.roster-sticky):not(.roster-total){
  min-width:54px!important;
  width:54px!important;
  max-width:54px!important;
}
.roster-code{font-size:10px!important}
.roster-cell select{
  min-height:31px!important;
  padding:4px 3px!important;
  border-radius:6px;
  font-size:9.5px!important;
}
.roster-cell>small{font-size:7.5px!important;line-height:1.15}

/* Total is a deliberate sticky summary column, not a mystery '0' under the last visible date. */
.monthly-roster-table .roster-total{
  position:sticky!important;
  right:0;
  z-index:7;
  min-width:68px!important;
  width:68px!important;
  max-width:68px!important;
  padding:4px 5px!important;
  text-align:center;
  background:#eff7f5!important;
  color:#274e49!important;
  border-left:2px solid #b8d7d1;
  font-size:9px!important;
}
.monthly-roster-table thead .roster-total{
  z-index:12;
  background:#dcece9!important;
  color:#173f3b!important;
  font-weight:800;
  white-space:normal;
  line-height:1.05;
}
.monthly-roster-table tbody tr:hover .roster-sticky{background:#eef7f4}
.monthly-roster-table tbody tr:hover .roster-total{background:#e8f4f1!important}

/* Department headings and planner chrome should not overwhelm the denser table. */
.roster-planner-panel>.panel-head{padding:12px 16px}
.roster-planner-panel>.panel-head h2{font-size:15px}
.roster-planner-panel>.panel-head p{font-size:10.5px}
.roster-legend span{min-height:24px;padding:4px 7px;font-size:9px}

@media(max-width:1000px){
  #app:has(#peopleTable) .master-toolbar{grid-template-columns:1fr 1fr}
  #app:has(#peopleTable) .master-search{grid-column:1/-1}
}
@media(max-width:760px){
  #app:has(#peopleTable) .master-toolbar{grid-template-columns:1fr}
  #app:has(#peopleTable) .master-search{display:grid}
  .monthly-roster-table .employee-name{left:0;min-width:160px!important;width:160px!important;max-width:160px!important}
  .monthly-roster-table .employee-no,.monthly-roster-table .employee-position{display:none}
  .monthly-roster-table th:not(.roster-sticky):not(.roster-total),
  .monthly-roster-table td:not(.roster-sticky):not(.roster-total){min-width:52px!important;width:52px!important;max-width:52px!important}
}