.kb-calendar-container{
  margin:20px 0;
  padding:20px;
  background:#252525;
  color:#fff;
  border-radius:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
}
.kb-nav-menu{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,0.15);
  background:#252525;
  padding:0;
  border-radius:4px 4px 0 0;
}
.kb-nav-item{
  padding:12px 16px;
  text-decoration:none;
  color:#fff;
  font-size:14px;
  font-weight:500;
  border-bottom:2px solid transparent;
  transition:all .3s ease;
  cursor:pointer;
  display:inline-block;
}
.kb-nav-item:hover{
  background:rgba(255,255,255,0.06);
}
.kb-nav-item.active{
  border-bottom-color:#3b82f6;
  background:rgba(255,255,255,0.06);
  font-weight:600;
}
.kb-title{
  font-size:22px;
  font-weight:600;
  margin:0 0 16px 0;
  color:#fff;
  border-bottom:2px solid #3b82f6;
  padding-bottom:10px;
}
.kb-footer{
  margin-top:15px;
  padding-top:15px;
  border-top:1px solid rgba(255,255,255,0.15);
  text-align:right;
  color:rgba(255,255,255,0.75);
}
.kb-loading,.kb-empty{
  text-align:center;
  padding:32px 10px;
  color:rgba(255,255,255,0.75);
  font-size:15px;
}
.kb-event-list{
  display:grid;
  gap:10px;
}
.kb-event-card{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:10px;
  padding:12px 14px;
}
.kb-event-card-title{
  font-weight:600;
  font-size:15px;
  margin-bottom:6px;
}
.kb-event-card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  font-size:12px;
  color:rgba(255,255,255,0.75);
}
.kb-event-more,.kb-event-more-inline{
  font-size:12px;
  color:rgba(255,255,255,0.75);
}
.kb-month-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:0 0 10px 0;
}
.kb-month-header-left{
  font-size:28px;
  font-weight:700;
  line-height:1.2;
}
.kb-month-header-right{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.kb-month-select,.kb-year-select{
  background:#2f2f2f;
  color:#fff;
  border:1px solid rgba(255,255,255,0.18);
  border-radius:2px;
  padding:10px 14px;
  font-size:18px;
}
.kb-go-btn{
  background:#5b5b5b;
  color:#fff;
  border:none;
  border-radius:4px;
  padding:10px 18px;
  font-size:18px;
  cursor:pointer;
}
.kb-go-btn:hover{background:#6a6a6a;}
.kb-hijri-range{
  text-align:center;
  color:#38c172;
  font-weight:700;
  font-size:28px;
  margin:10px 0 14px 0;
}
.kb-month-table-wrap{
  background:#252525;
  border-radius:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,0.14);
}
.kb-month-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.kb-month-table thead th{
  background:#2f2f2f;
  color:#fff;
  padding:14px 8px;
  font-size:18px;
  font-weight:700;
  border-right:1px solid rgba(255,255,255,0.10);
}
.kb-month-table thead th:last-child{border-right:none;}
.kb-month-table td{
  vertical-align:top;
  height:108px;
  padding:10px 10px 8px 10px;
  background:#252525;
  border-right:1px solid rgba(255,255,255,0.10);
  border-top:1px solid rgba(255,255,255,0.10);
}
.kb-month-table tr td:last-child{border-right:none;}
.kb-cal-date{
  font-size:26px;
  font-weight:800;
  color:#fff;
  line-height:1;
}
.kb-cal-date--muted{color:rgba(255,255,255,0.35);}
.kb-cal-sub{
  margin-top:8px;
  font-size:20px;
  color:#79a7ff; /* default biru, tapi lebih lembut di dark */
  display:flex;
  gap:8px;
  align-items:baseline;
}
.kb-cal-hijri{font-weight:500;}
.kb-cal-pasaran{font-weight:500;}
.kb-cal-events{
  margin-top:8px;
  font-size:12px;
  color:rgba(255,255,255,0.9);
}
.kb-cal-evt{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:4px;
}
.kb-cal-evt-time{color:rgba(255,255,255,0.65);margin-right:6px;}
.kb-cal-more{color:rgba(255,255,255,0.65);font-size:12px;margin-top:4px;}
.kb-cal-td--sun .kb-cal-date,
.kb-cal-td--sun .kb-cal-sub{color:#dc2626;}
.kb-cal-td--fri .kb-cal-date,
.kb-cal-td--fri .kb-cal-sub{color:#16a34a;}
.kb-cal-td--today{background:#4a4620;}
.kb-cal-td--muted{
  background:#1f1f1f;
  color:rgba(255,255,255,0.4);
  opacity:.6;
}
.kb-table-wrapper{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.kb-table{
  display:table;
  width:max-content;
  min-width:100%;
  border-collapse:collapse;
}
.kb-header-row,.kb-body-row{display:table-row;}
.kb-left-col,.kb-date-col,.kb-cell{
  display:table-cell;
  padding:12px 12px;
  border:1px solid rgba(255,255,255,0.12);
  vertical-align:top;
}
.kb-left-col{
  min-width:120px;
  background:rgba(255,255,255,0.06);
  font-weight:600;
}
.kb-left-col--body{background:transparent;font-weight:normal;}
.kb-date-col{
  text-align:center;
  min-width:140px;
  background:rgba(255,255,255,0.06);
}
.kb-day-name{font-size:14px;color:rgba(255,255,255,0.75);}
.kb-date-num{font-size:12px;color:rgba(255,255,255,0.6);margin-top:3px;}
.kb-pasaran{font-size:12px;color:rgba(255,255,255,0.7);margin-top:6px;font-weight:600;}
.kb-cell-empty{opacity:.6;text-align:center;}
.kb-event-inline{padding:8px 8px;margin-bottom:8px;border-radius:8px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.10);}
.kb-event-inline-time{font-size:11px;color:rgba(255,255,255,0.7);margin-bottom:2px;}
.kb-event-inline-title{font-size:12px;line-height:1.35;}
.kb-month-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:10px;
}
.kb-month-dow{
  text-align:center;
  font-weight:600;
  padding:8px 6px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  border-radius:10px;
}
.kb-month-cell{
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.03);
  border-radius:10px;
  padding:10px 10px 8px 10px;
  min-height:110px;
}
.kb-month-cell--muted{
  opacity:.35;
}
.kb-month-date{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:6px;
}
.kb-month-daynum{
  font-weight:700;
  font-size:14px;
}
.kb-month-pasaran{
  font-size:11px;
  color:rgba(255,255,255,0.75);
  font-weight:600;
}
.kb-month-evt{
  font-size:11px;
  line-height:1.35;
  margin-bottom:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.kb-month-evt-time{
  color:rgba(255,255,255,0.7);
  margin-right:6px;
}
.kb-month-more{
  font-size:11px;
  color:rgba(255,255,255,0.75);
  margin-top:4px;
}
@media (max-width:768px){
  .kb-calendar-container{padding:15px;overflow-x:auto;}
  .kb-nav-menu{overflow-x:auto;flex-wrap:nowrap;}
  .kb-nav-item{white-space:nowrap;font-size:12px;padding:10px 12px;}
  .kb-month-header-left{font-size:18px;}
  .kb-hijri-range{font-size:18px;}
  .kb-month-select,.kb-year-select,.kb-go-btn{font-size:14px;padding:8px 10px;}
  .kb-month-table thead th{font-size:14px;padding:10px 6px;}
  .kb-cal-date{font-size:18px;}
  .kb-cal-sub{font-size:14px;}
}