/* =========================================================
   PIRANTI ATTENDANCE - ROSTER UI V3
   Dedicated stylesheet - loaded last
   ========================================================= */


/* ---------------------------------------------------------
   ROSTER MAIN
   --------------------------------------------------------- */

.roster-page-main{
  width:100% !important;
  padding:0 !important;
  overflow:hidden !important;
  border:1px solid #e5eaf1 !important;
  border-radius:18px !important;
  background:#fff !important;
}

.roster-page-head{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:16px !important;

  margin:0 !important;
  padding:22px 24px 18px !important;

  border-bottom:1px solid #edf1f5 !important;
}

.roster-page-head h3{
  margin:0 0 6px !important;
  font-size:22px !important;
  line-height:1.2 !important;
  font-weight:800 !important;
}

.roster-page-head .muted{
  display:block !important;
  margin:0 !important;
  font-size:12px !important;
  line-height:1.5 !important;
}


/* ---------------------------------------------------------
   COLLAPSIBLE MANAGEMENT
   --------------------------------------------------------- */

details.roster-management-panel{
  width:100% !important;
  min-height:0 !important;

  margin:12px 0 !important;
  padding:0 !important;

  border:1px solid #e4eaf1 !important;
  border-radius:14px !important;

  background:#fff !important;
  overflow:hidden !important;
  box-shadow:none !important;
}

details.roster-management-panel > summary{
  position:relative !important;

  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;

  width:100% !important;
  min-height:64px !important;

  margin:0 !important;
  padding:14px 16px !important;

  list-style:none !important;
  cursor:pointer !important;

  box-sizing:border-box !important;
}

details.roster-management-panel > summary::marker{
  display:none !important;
  content:"" !important;
}

details.roster-management-panel > summary::-webkit-details-marker{
  display:none !important;
}

.roster-management-summary > div{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:4px !important;

  min-width:0 !important;
}

.roster-management-summary strong{
  display:block !important;

  margin:0 !important;

  font-size:14px !important;
  line-height:1.25 !important;
  font-weight:800 !important;
}

.roster-management-summary > div > span{
  display:block !important;

  margin:0 !important;

  color:#64748b !important;
  font-size:11px !important;
  line-height:1.4 !important;
}

.roster-management-icon{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  flex:0 0 32px !important;

  width:32px !important;
  height:32px !important;

  margin:0 !important;

  border-radius:9px !important;
  background:#f1f5f9 !important;

  font-size:18px !important;
  line-height:1 !important;
  font-weight:500 !important;
}

details.roster-management-panel[open]
.roster-management-icon{
  transform:rotate(45deg) !important;
}

.roster-management-content{
  padding:18px !important;

  border-top:1px solid #edf1f5 !important;

  background:#fff !important;
}


/* ---------------------------------------------------------
   SUMMARY CARDS
   --------------------------------------------------------- */

.roster-summary-grid{
  display:grid !important;

  grid-template-columns:
    repeat(4,minmax(0,1fr)) !important;

  gap:12px !important;

  width:100% !important;

  margin:0 !important;
  padding:18px 24px !important;

  box-sizing:border-box !important;

  background:#f8fafc !important;
  border-top:1px solid #edf1f5 !important;
  border-bottom:1px solid #edf1f5 !important;
}

.roster-summary-grid > div{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:flex-start !important;

  min-width:0 !important;
  min-height:82px !important;

  margin:0 !important;
  padding:14px 16px !important;

  box-sizing:border-box !important;

  border:1px solid #e3e9f0 !important;
  border-radius:13px !important;

  background:#fff !important;
}

.roster-summary-grid small{
  display:block !important;

  margin:0 0 7px !important;

  color:#64748b !important;
  font-size:11px !important;
  line-height:1 !important;
  font-weight:700 !important;
}

.roster-summary-grid strong{
  display:block !important;

  margin:0 !important;

  color:#0f172a !important;
  font-size:25px !important;
  line-height:1 !important;
  font-weight:800 !important;
}


/* ---------------------------------------------------------
   FILTER
   --------------------------------------------------------- */

.roster-filter-bar{
  display:grid !important;

  grid-template-columns:
    minmax(170px,.8fr)
    minmax(250px,1.4fr)
    minmax(210px,1fr)
    minmax(150px,.7fr)
    130px !important;

  gap:12px !important;

  align-items:end !important;

  width:100% !important;

  margin:0 !important;
  padding:18px 24px !important;

  box-sizing:border-box !important;

  background:#fff !important;
}

.roster-filter-bar label{
  display:flex !important;
  flex-direction:column !important;
  align-items:stretch !important;

  min-width:0 !important;

  gap:6px !important;
  margin:0 !important;

  color:#475569 !important;
  font-size:11px !important;
  line-height:1.2 !important;
  font-weight:700 !important;
}

.roster-filter-bar input,
.roster-filter-bar select{
  display:block !important;

  width:100% !important;
  max-width:none !important;
  height:42px !important;
  min-height:42px !important;

  margin:0 !important;
  padding:0 12px !important;

  box-sizing:border-box !important;

  border:1px solid #dbe3ec !important;
  border-radius:10px !important;

  background:#fff !important;

  font-size:12px !important;
  line-height:42px !important;
}

.roster-filter-bar button{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:130px !important;
  min-width:130px !important;
  max-width:130px !important;

  height:42px !important;
  min-height:42px !important;

  margin:0 !important;
  padding:0 14px !important;

  justify-self:end !important;

  border-radius:10px !important;

  font-size:11px !important;
  line-height:1 !important;
  font-weight:800 !important;
}


/* ---------------------------------------------------------
   INFO "MENAMPILKAN ..."
   --------------------------------------------------------- */

.roster-page-main .section-head + .muted,
.roster-page-main > .muted{
  margin-left:24px !important;
  margin-right:24px !important;
}


/* ---------------------------------------------------------
   TABLE ROSTER
   --------------------------------------------------------- */

.roster-page-main .table-wrap{
  width:auto !important;

  margin:0 24px 24px !important;

  overflow:auto !important;

  border:1px solid #e6ebf1 !important;
  border-radius:12px !important;

  background:#fff !important;
}

.roster-page-main table{
  width:100% !important;
  min-width:900px !important;

  border-collapse:collapse !important;
}

.roster-page-main thead{
  position:sticky !important;
  top:0 !important;
  z-index:2 !important;
}

.roster-page-main th{
  height:42px !important;

  padding:0 12px !important;

  background:#f8fafc !important;
  border-bottom:1px solid #dfe6ee !important;

  color:#64748b !important;

  text-align:left !important;

  font-size:10px !important;
  line-height:1 !important;
  font-weight:800 !important;
}

.roster-page-main td{
  min-height:48px !important;

  padding:13px 12px !important;

  border-bottom:1px solid #edf1f5 !important;

  color:#334155 !important;

  font-size:12px !important;
  line-height:1.4 !important;
}

.roster-page-main tbody tr:hover{
  background:#fafbfc !important;
}


/* ---------------------------------------------------------
   MANUAL EDITOR / IMPORT
   --------------------------------------------------------- */

.roster-editor-panel,
.roster-import-panel{
  width:100% !important;

  margin-top:16px !important;
  padding:20px 22px !important;

  box-sizing:border-box !important;

  border:1px solid #e5eaf1 !important;
  border-radius:16px !important;

  background:#fff !important;
}

.roster-editor-panel .gridform{
  display:grid !important;

  grid-template-columns:
    minmax(220px,1.4fr)
    minmax(200px,1.1fr)
    minmax(160px,.8fr)
    minmax(180px,1fr)
    auto
    auto !important;

  gap:10px !important;
  align-items:center !important;
}


/* ---------------------------------------------------------
   DESKTOP TABLET
   --------------------------------------------------------- */

@media(max-width:1150px){

  .roster-filter-bar{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }

  .roster-filter-bar button{
    width:100% !important;
    max-width:none !important;
    justify-self:stretch !important;
  }

  .roster-editor-panel .gridform{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;
  }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:700px){

  .roster-page-head{
    padding:16px 14px !important;
  }

  .roster-page-head h3{
    font-size:19px !important;
  }

  details.roster-management-panel{
    margin:9px 0 !important;
  }

  details.roster-management-panel > summary{
    min-height:58px !important;
    padding:12px 13px !important;
  }

  .roster-summary-grid{
    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    gap:8px !important;

    padding:12px !important;
  }

  .roster-summary-grid > div{
    min-height:68px !important;
    padding:11px !important;
  }

  .roster-summary-grid strong{
    font-size:21px !important;
  }

  .roster-filter-bar{
    grid-template-columns:1fr !important;

    gap:10px !important;

    padding:14px !important;
  }

  .roster-filter-bar button{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
  }

  .roster-page-main .table-wrap{
    margin:0 10px 14px !important;
  }

  .roster-editor-panel,
  .roster-import-panel{
    padding:14px !important;
  }

  .roster-editor-panel .gridform{
    grid-template-columns:1fr !important;
  }
}